Skip to content

Commit

Permalink
Merge pull request #6 from block-core/terms/privacy
Browse files Browse the repository at this point in the history
Add Privacy Policy and Terms & Conditions pages
  • Loading branch information
dangershony authored Jan 22, 2025
2 parents 285e566 + c4bbc54 commit 90ce977
Show file tree
Hide file tree
Showing 7 changed files with 324 additions and 192 deletions.
2 changes: 1 addition & 1 deletion .astro/settings.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"_variables": {
"lastUpdateCheck": 1736273908731
"lastUpdateCheck": 1737312417515
},
"devToolbar": {
"enabled": false
Expand Down
2 changes: 1 addition & 1 deletion src/components/Features2.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export const Features2 = () => (
<div className="mx-auto lg:mx-auto w-11/12 sm:w-4/5 md:w-3/4 lg:w-unset">
<span className="block-subtitle">Behind the Tech</span>
<h2 className="mt-6 mb-8 text-4xl lg:text-5xl block-big-title">
Angor has no backend and is verifiable source code
Angor has no backend and is open source
</h2>
<p className="mb-12 text-secondaryText leading-loose">
It relies on Bitcoin explorers and Nostr relays, which users can
Expand Down
299 changes: 136 additions & 163 deletions src/components/Footer.jsx
Original file line number Diff line number Diff line change
@@ -1,193 +1,166 @@
import React from 'react';
import { AngorLogo } from "../assets/logos/AngorLogo";
import { NostrIcon } from "../assets/icons/NostrIcon";
import { GithubIcon } from "../assets/icons/GithubIcon";

export const Footer = () => {
const footerSections = [
{
title: "Products",
links: [
{ text: "Angor web app", href: "https://beta.angor.io" },
{ text: "Angor test", href: "https://test.angor.io" },
{ text: "Angor hub", href: "https://hub.angor.io" },
{ text: "Angor status", href: "https://status.angor.io" }
]
},
{
title: "Important Links",
links: [
{ text: "Angor docs", href: "https://docs.angor.io" },
{ text: "Angor blog", href: "https://blog.angor.io" },
{ text: "Angor brand", href: "https://brand.angor.io" },
{ text: "Bitcoin Faucet", href: "https://faucet.angor.io" }
]
},
{
title: "Angor",
links: [
{ text: "How Angor works", href: "/how-angor-works" },
{ text: "BTC Price", href: "/btc-price" },
{ text: "Terms & Conditions", href: "/terms" },
{ text: "Privacy Policy", href: "/privacy" }
]
}
];

return (
<footer aria-label="Site footer">
<div className="pt-10 lg:pt-20 lg:pb-16 bg-bgDark1 radius-for-skewed ">
<div className="container mx-auto px-4 w-4/5 md:w-11/12 lg:w-10/12 xl:w-4/5 2xl:w-2/3">
<div className="flex flex-wrap">
<div className="w-full lg:w-1/3 mb-16 lg:mb-0">
<div className="flex justify-center lg:justify-start items-center grow basis-0">
<div className="text-white mr-2 text-6xl">
<AngorLogo />
</div>
<div className="text-white font-['Inter'] font-bold text-xl">
Angor
</div>
</div>
<p className="mb-10 mt-4 sm:w-[22rem] lg:w-[20rem] xl:w-[24rem] text-gray-400 leading-loose text-center lg:text-left mx-auto lg:mx-0">
Angor is a decentralized crowdfunding protocol built on Bitcoin
</p>
<div className="w-36 mx-auto lg:mx-0 flex items-center space-x-2">
{/* GitHub Icon with Tooltip */}
<div className="relative group">
<a
className="inline-block w-10 h-10 p-2 pt-[0.55rem] outlined-button"
href="https://github.com/block-core/angor-hub"
aria-label="Github"
>
<GithubIcon />
</a>
<div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-max bg-gray-800 text-white text-xs font-semibold py-1 px-3 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 shadow-lg">
Angor Hub
<footer aria-label="Site footer" className="relative">
<div className="pt-16 lg:pt-24 pb-12 lg:pb-20 bg-bgDark1 radius-for-skewed">
<div className="container mx-auto px-4 w-11/12 xl:w-10/12 2xl:w-[1280px]">
{/* Logo Section */}
<div className="flex flex-wrap -mx-4">
<div className="w-full lg:w-1/3 px-4 mb-12 lg:mb-0">
<div className="flex flex-col items-center lg:items-start">
<div className="flex items-center mb-8 transform hover:scale-105 transition-transform duration-300">
<div className="text-white mr-3 text-6xl">
<AngorLogo />
</div>
</div>

{/* Nostr Icon with Tooltip */}
<div className="relative group">
<a
className="inline-block w-10 h-10 p-2 pt-[0.55rem] pl-[0.55rem] outlined-button"
href="/nostr"
aria-label="Nostr"
>
<NostrIcon />
</a>
<div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-max bg-gray-800 text-white text-xs font-semibold py-1 px-3 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 shadow-lg">
Angor Account
<div className="text-white font-['Inter'] font-bold text-2xl">
Angor
</div>
</div>

{/* Second GitHub Icon with Tooltip */}
<div className="relative group">
<a
className="inline-block w-10 h-10 p-2 pt-[0.55rem] outlined-button"
href="https://github.com/block-core/angor"
aria-label="Github"
>
<GithubIcon />
</a>
<div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-max bg-gray-800 text-white text-xs font-semibold py-1 px-3 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 shadow-lg">
Angor App
</div>
</div>
</div>
</div>
<div className="w-full lg:w-2/3 lg:pl-16 hidden lg:flex flex-wrap justify-between">
<div className="w-full md:w-1/3 lg:w-auto mb-16 md:mb-0">
<h3 className="mb-6 text-2xl font-bold text-primaryText">
Products
</h3>
<ul>
<li className="mb-4">
<p className="text-lg text-gray-400 leading-relaxed mb-12 text-center lg:text-left max-w-sm">
P2P Funding Protocol
</p>
<div className="flex items-center space-x-4">
{/* GitHub Icon with Tooltip */}
<div className="relative group">
<a
className="text-gray-400 hover:text-gray-300"
href="https://beta.angor.io"
className="inline-block w-10 h-10 p-2 pt-[0.55rem] outlined-button"
href="https://github.com/block-core/angor-hub"
aria-label="Github"
>
Angor web app
<GithubIcon />
</a>
</li>

<li className="mb-4">
<a
className="text-gray-400 hover:text-gray-300"
href="https://test.angor.io"
>
Angor test
</a>
</li>
<div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-max bg-gray-800 text-white text-xs font-semibold py-1 px-3 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 shadow-lg">
Angor Hub
</div>
</div>

<li className="mb-4">
{/* Nostr Icon with Tooltip */}
<div className="relative group">
<a
className="text-gray-400 hover:text-gray-300"
href="https://hub.angor.io"
className="inline-block w-10 h-10 p-2 pt-[0.55rem] pl-[0.55rem] outlined-button"
href="/nostr"
aria-label="Nostr"
>
Angor hub
<NostrIcon />
</a>
</li>
<div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-max bg-gray-800 text-white text-xs font-semibold py-1 px-3 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 shadow-lg">
Angor Account
</div>
</div>

<li className="mb-4">
{/* Second GitHub Icon with Tooltip */}
<div className="relative group">
<a
className="text-gray-400 hover:text-gray-300"
href="https://status.angor.io"
className="inline-block w-10 h-10 p-2 pt-[0.55rem] outlined-button"
href="https://github.com/block-core/angor"
aria-label="Github"
>
Angor status
<GithubIcon />
</a>
</li>
</ul>
<div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-max bg-gray-800 text-white text-xs font-semibold py-1 px-3 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 shadow-lg">
Angor App
</div>
</div>
</div>
</div>
<div className="w-full md:w-1/3 lg:w-auto mb-16 md:mb-0">
<h3 className="mb-6 text-2xl font-bold text-primaryText">
Important Links
</h3>
<ul>
<li className="mb-4">
<a
className="text-gray-400 hover:text-gray-300"
href="https://docs.angor.io"
>
Angor docs
</a>
</li>
<li className="mb-4">
<a
className="text-gray-400 hover:text-gray-300"
href="https://blog.angor.io"
>
Angor blog
</a>
</li>
</div>

<li className="mb-4">
<a
className="text-gray-400 hover:text-gray-300"
href="https://brand.angor.io"
>
Angor brand
</a>
</li>
<li className="mb-4">
<a
className="text-gray-400 hover:text-gray-300"
href="https://faucet.angor.io"
target="_blank"
>
Bitcoin Faucet
</a>
</li>
</ul>
</div>
<div className="w-full md:w-1/3 lg:w-auto">
<h3 className="mb-6 text-2xl font-bold text-primaryText">
Angor
</h3>
<ul>
<li className="mb-4">
<a
className="text-gray-400 hover:text-gray-300"
href="/how-angor-works"
>
How Angor works
</a>
</li>
<li className="mb-4">
<a
className="text-gray-400 hover:text-gray-300"
href="/btc-price"
>
BTC Price
</a>
</li>
<li className="mb-4">
<a
className="text-gray-400 hover:text-gray-300"
href="/terms"
>
Terms & Conditions
</a>
</li>
<li className="mb-4">
<a className="text-gray-400 hover:text-gray-300" href="#">
Privacy Policy
</a>
</li>
</ul>
{/* Desktop Menu */}
<div className="w-full lg:w-2/3 hidden lg:flex px-4">
<div className="flex flex-wrap justify-between w-full">
{footerSections.map((section, index) => (
<div key={index} className="w-full sm:w-auto mb-8 sm:mb-0">
<h3 className="mb-8 text-2xl font-bold text-primaryText">
{section.title}
</h3>
<ul className="space-y-4">
{section.links.map((link, linkIndex) => (
<li key={linkIndex}>
<a
href={link.href}
className="text-gray-400 hover:text-white transition-colors duration-200 text-lg flex items-center group"
>
<span className="transform group-hover:translate-x-2 transition-transform duration-200">
{link.text}
</span>
</a>
</li>
))}
</ul>
</div>
))}
</div>
</div>

{/* Mobile Menu */}
<div className="w-full lg:hidden px-4 space-y-6">
{footerSections.map((section, index) => (
<div
key={index}
className="bg-bgDark2 rounded-2xl p-8 shadow-xl border border-gray-700/20 hover:border-gray-700/40 transition-all duration-300"
>
<h3 className="text-xl font-bold text-primaryText mb-6 pb-4 border-b border-gray-700/30">
{section.title}
</h3>
<ul className="space-y-4">
{section.links.map((link, linkIndex) => (
<li key={linkIndex}>
<a
href={link.href}
className="block text-gray-400 hover:text-white py-3 px-4 rounded-xl hover:bg-bgDark1 transition-all duration-300 transform hover:translate-y-[-2px] hover:shadow-lg"
>
{link.text}
</a>
</li>
))}
</ul>
</div>
))}
</div>
</div>
</div>
</div>

{/* Bottom Bar */}
<div className="py-6 bg-bgDark1 border-t border-gray-700/20">
<div className="container mx-auto px-4 text-center text-gray-400">
<p>© {new Date().getFullYear()} Angor. Built with Bitcoin & Nostr.</p>
</div>
</div>
</footer>
);
};
Loading

0 comments on commit 90ce977

Please sign in to comment.