feat: static pages are up
This commit is contained in:
Juan Di Toro
parent
0990b9c3fd
commit
6e952c1514
|
|
@ -0,0 +1,64 @@
|
|||
import { ArrowIcon } from "@/components/ArrowIcon"
|
||||
import * as GraphicSection from "@/components/GraphicSection"
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<span className="px-8 block text-gray-400 space-y-5">
|
||||
<h1 className="text-primary text-3xl leading-9">
|
||||
An evolved, user-owned web where you have access to the world in a way
|
||||
only you control.
|
||||
</h1>
|
||||
<p className="text-white mt-3 leading-7">
|
||||
Web3 is about what you want to do, post, read, play, chat, or interact
|
||||
without others saying otherwise. It is about freedom of speech and
|
||||
freedom of economy.
|
||||
</p>
|
||||
<p>
|
||||
First defined by Gavin Wood when the Ethereum network was starting out.
|
||||
He defined it as a "decentralized online ecosystem based on
|
||||
blockchain".
|
||||
</p>
|
||||
|
||||
<p>
|
||||
However, we view it as much more than that, and definitely more than
|
||||
access to DeFi. We see a ton of more potential to what Web3 as an ideal
|
||||
can evolve to, and are setting out to make it a reality.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
To those that see Web3 as DeFi, we ask this: Do you go on your web
|
||||
browser to access TradingView or other market tools as your homepage, or
|
||||
do you go check your social media, email, and news sites, as well as
|
||||
your money? Blockchain itself is more than just money, and so is Web3,
|
||||
and by extension P2P networks.
|
||||
</p>
|
||||
|
||||
<p>So help us in our goals to level-up Web3.</p>
|
||||
<GraphicSection.Root
|
||||
href="https://lumeweb.com"
|
||||
className="h-[300px] border border-gray-800 cursor-pointer [&:hover_.link]:underline [&:hover_.background]:rotate-12 [&:hover_.background]:scale-110"
|
||||
>
|
||||
<GraphicSection.Background>
|
||||
<img
|
||||
src="/lume-logo-bg.png"
|
||||
className="background opacity-50 transition-transform duration-500 transform-gpu absolute -top-[100px] -left-10"
|
||||
alt=""
|
||||
aria-hidden
|
||||
/>
|
||||
</GraphicSection.Background>
|
||||
<GraphicSection.Foreground>
|
||||
<div className="flex flex-col items-start justify-center h-full w-[500px] float-right mr-20">
|
||||
<p className="text-white text-2xl">
|
||||
WEB3.NEWS is a project by <span className="underline">Lume</span>.
|
||||
Let’s build an open, user-owned web together.
|
||||
</p>
|
||||
<div className="link mt-2 flex text-gray-400">
|
||||
<span>Learn more about Lume and join our community</span>
|
||||
<ArrowIcon className=" ml-2 mt-2" />
|
||||
</div>
|
||||
</div>
|
||||
</GraphicSection.Foreground>
|
||||
</GraphicSection.Root>
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
import Link from "next/link";
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<span className="px-8 block text-gray-400 space-y-5">
|
||||
<h1 className="text-primary text-3xl leading-9">
|
||||
You believe the internet should be free and open for everyone,
|
||||
regardless of political beliefs.
|
||||
</h1>
|
||||
<p className="text-white mt-3 leading-7">
|
||||
Please understand that, according to United States regulations for our
|
||||
present incorporation status, donations are not currently
|
||||
tax-deductible.
|
||||
</p>
|
||||
<p>
|
||||
If you are a corporation or business, planning to make a large donation,
|
||||
we recommend that you consult a CPA to ensure you understand the tax
|
||||
implications of your donated funds first.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
All payments are nondeductible donations (unless you get consulted
|
||||
otherwise) and do not create any implied service contract or obligation
|
||||
for Hammer Technologies LLC to render any services.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
To those that see Web3 as DeFi, we ask this: Do you go on your web
|
||||
browser to access TradingView or other market tools as your homepage, or
|
||||
do you go check your social media, email, and news sites, as well as
|
||||
your money? Blockchain itself is more than just money, and so is Web3,
|
||||
and by extension P2P networks.
|
||||
</p>
|
||||
|
||||
<p>So help us in our goals to level-up Web3.</p>
|
||||
|
||||
<Link href="https://gitcoin.com">
|
||||
<button
|
||||
className={`my-6 p-8 text-gray-500 bg-gray-800 hover:bg-gray-800/70`}
|
||||
>
|
||||
Donate via Gitcoin during funding rounds
|
||||
</button>
|
||||
</Link>
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
"use client"
|
||||
|
||||
import { ArrowLeftIcon } from "@radix-ui/react-icons"
|
||||
import Link from "next/link"
|
||||
import { usePathname } from "next/navigation"
|
||||
|
||||
const TEXT_DICT = {
|
||||
"/about": {
|
||||
headline: "Sharing community news on the open, user-owned web you deserve.",
|
||||
tagline: "Learn about our community"
|
||||
},
|
||||
"/donate": {
|
||||
headline: "We think people should have free access to information no matter how they choose to access it.",
|
||||
tagline: "Help us break the pattern"
|
||||
}
|
||||
}
|
||||
|
||||
export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
const pathname = usePathname();
|
||||
const text = TEXT_DICT[pathname! as '/about' | '/donate']
|
||||
return (
|
||||
<section className="w-full">
|
||||
<header className="text-white mt-10 pb-3 border-b-2 border-primary">
|
||||
<h2>{text.headline}</h2>
|
||||
</header>
|
||||
<Link href="/">
|
||||
<button className="my-4 -ml-3 px-3 py-2 text-gray-400 hover:bg-gray-800 hover:text-white rounded">
|
||||
<ArrowLeftIcon className="w-4 h-4 inline mr-2 -mt-1" />
|
||||
Back to Home
|
||||
</button>
|
||||
</Link>
|
||||
<div className="flex flex-row mt-6">
|
||||
<aside className="w-1/3">
|
||||
<h3 className="text-white mb-5">{text.tagline}</h3>
|
||||
<nav className="sticky top-3">
|
||||
<ol>
|
||||
<AsideItem href="/about" title="About Web3News" />
|
||||
<AsideItem href="/donate" title="Donate" />
|
||||
</ol>
|
||||
</nav>
|
||||
</aside>
|
||||
<section className="w-full">{children}</section>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
const AsideItem = ({ title, href }: { title: string; href: string }) => {
|
||||
const pathname = usePathname()
|
||||
return (
|
||||
<Link href={href}>
|
||||
<li>
|
||||
<button
|
||||
className={`w-[calc(100%-20px)] mb-3 p-8 text-gray-500 bg-gray-800 text-start ${
|
||||
pathname === href
|
||||
? "border border-primary text-primary bg-transparent"
|
||||
: "hover:bg-gray-800/70"
|
||||
}`}
|
||||
>
|
||||
{title}
|
||||
</button>
|
||||
</li>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
|
@ -58,30 +58,6 @@ export default async function Home({ searchParams }: Props) {
|
|||
</div>
|
||||
</GraphicSection.Foreground>
|
||||
</GraphicSection.Root>
|
||||
<GraphicSection.Root href="https://lumeweb.com" className="h-[300px] border border-gray-800 cursor-pointer [&:hover_.link]:underline [&:hover_.background]:rotate-12 [&:hover_.background]:scale-110">
|
||||
<GraphicSection.Background>
|
||||
<img
|
||||
src="/lume-logo-bg.png"
|
||||
className="background transition-transform duration-500 transform-gpu absolute -top-[100px] -left-10"
|
||||
alt=""
|
||||
aria-hidden
|
||||
/>
|
||||
</GraphicSection.Background>
|
||||
<GraphicSection.Foreground>
|
||||
<div className="flex flex-col items-start justify-center h-full w-[500px] float-right mr-20">
|
||||
<p className="text-white text-2xl">
|
||||
WEB3.NEWS is a project by <span className="underline">Lume</span>. Let’s build an open, user-owned
|
||||
web together.
|
||||
</p>
|
||||
<div className="link mt-2 flex text-gray-400">
|
||||
<span>
|
||||
Learn more about Lume and join our community
|
||||
</span>
|
||||
<ArrowIcon className=" ml-2 mt-2"/>
|
||||
</div>
|
||||
</div>
|
||||
</GraphicSection.Foreground>
|
||||
</GraphicSection.Root>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ const Page = async ({ searchParams }: Props) => {
|
|||
/>
|
||||
|
||||
<Link href="/">
|
||||
<button className="my-4 px-3 py-2 text-gray-400 hover:bg-gray-800 hover:text-white rounded">
|
||||
<button className="my-4 -ml-3 px-3 py-2 text-gray-400 hover:bg-gray-800 hover:text-white rounded">
|
||||
<ArrowLeftIcon className="w-4 h-4 inline mr-2 -mt-1" />
|
||||
Go Back Home
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -8,29 +8,29 @@ export const ArrowIcon = ({className}: {className?: string}) => {
|
|||
className={className}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clip-path="url(#clip0_61_133)">
|
||||
<g clipPath="url(#clip0_61_133)">
|
||||
<path
|
||||
d="M3.30432 1.71807L8.28174 1.71826"
|
||||
stroke="currentColor"
|
||||
stroke-opacity="0.75"
|
||||
stroke-width="2"
|
||||
stroke-miterlimit="10"
|
||||
stroke-linecap="square"
|
||||
strokeOpacity="0.75"
|
||||
strokeWidth="2"
|
||||
strokeMiterlimit="10"
|
||||
strokeLinecap="square"
|
||||
/>
|
||||
<path
|
||||
d="M8.28175 1.7183L8.28198 6.6958"
|
||||
stroke="currentColor"
|
||||
stroke-opacity="0.75"
|
||||
stroke-width="2"
|
||||
stroke-miterlimit="10"
|
||||
stroke-linecap="square"
|
||||
strokeOpacity="0.75"
|
||||
strokeWidth="2"
|
||||
strokeMiterlimit="10"
|
||||
strokeLinecap="square"
|
||||
/>
|
||||
<path
|
||||
d="M8.28149 1.71834L1.25024 8.74951"
|
||||
stroke="currentColor"
|
||||
stroke-opacity="0.75"
|
||||
stroke-width="2"
|
||||
stroke-miterlimit="10"
|
||||
strokeOpacity="0.75"
|
||||
strokeWidth="2"
|
||||
strokeMiterlimit="10"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
import Link from "next/link"
|
||||
import React from "react"
|
||||
|
||||
type Props = {}
|
||||
|
||||
const Footer = ({}: Props) => {
|
||||
return (<div className="w-full mt-5 flex flex-row items-center justify-center text-gray-400">
|
||||
<a>About Web3.news</a>
|
||||
<Link href="/about" className="hover:text-white hover:underline">About Web3.news</Link>
|
||||
<div className="h-7 w-[1px] bg-current mx-4" />
|
||||
<a className="text-white">Contribute to the cause</a>
|
||||
<Link href="/donate" className="hover:text-white hover:underline">Contribute to the cause</Link>
|
||||
</div>)
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue