-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #6 from block-core/terms/privacy
Add Privacy Policy and Terms & Conditions pages
- Loading branch information
Showing
7 changed files
with
324 additions
and
192 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
); | ||
}; |
Oops, something went wrong.