ok

src/app/(auth)/login/page.tsx

@@ -0,0 +1,49 @@
+import { type Metadata } from 'next'
+import Link from 'next/link'
+
+import { AuthLayout } from '@/components/AuthLayout'
+import { Button } from '@/components/Button'
+import { TextField } from '@/components/Fields'
+
+export const metadata: Metadata = {
+  title: 'Sign In',
+}
+
+export default function Login() {
+  return (
+    <AuthLayout
+      title="Sign in to account"
+      subtitle={
+        <>
+          Don’t have an account?{' '}
+          <Link href="/register" className="text-cyan-600">
+            Sign up
+          </Link>{' '}
+          for a free trial.
+        </>
+      }
+    >
+      <form>
+        <div className="space-y-6">
+          <TextField
+            label="Email address"
+            name="email"
+            type="email"
+            autoComplete="email"
+            required
+          />
+          <TextField
+            label="Password"
+            name="password"
+            type="password"
+            autoComplete="current-password"
+            required
+          />
+        </div>
+        <Button type="submit" color="cyan" className="mt-8 w-full">
+          Sign in to account
+        </Button>
+      </form>
+    </AuthLayout>
+  )
+}

src/app/(auth)/register/page.tsx

@@ -0,0 +1,75 @@
+import { type Metadata } from 'next'
+import Link from 'next/link'
+
+import { AuthLayout } from '@/components/AuthLayout'
+import { Button } from '@/components/Button'
+import { SelectField, TextField } from '@/components/Fields'
+
+export const metadata: Metadata = {
+  title: 'Sign Up',
+}
+
+export default function Register() {
+  return (
+    <AuthLayout
+      title="Sign up for an account"
+      subtitle={
+        <>
+          Already registered?{' '}
+          <Link href="/login" className="text-cyan-600">
+            Sign in
+          </Link>{' '}
+          to your account.
+        </>
+      }
+    >
+      <form>
+        <div className="grid grid-cols-2 gap-6">
+          <TextField
+            label="First name"
+            name="first_name"
+            type="text"
+            autoComplete="given-name"
+            required
+          />
+          <TextField
+            label="Last name"
+            name="last_name"
+            type="text"
+            autoComplete="family-name"
+            required
+          />
+          <TextField
+            className="col-span-full"
+            label="Email address"
+            name="email"
+            type="email"
+            autoComplete="email"
+            required
+          />
+          <TextField
+            className="col-span-full"
+            label="Password"
+            name="password"
+            type="password"
+            autoComplete="new-password"
+            required
+          />
+          <SelectField
+            className="col-span-full"
+            label="How did you hear about us?"
+            name="referral_source"
+          >
+            <option>AltaVista search</option>
+            <option>Super Bowl commercial</option>
+            <option>Our route 34 city bus ad</option>
+            <option>The “Never Use This” podcast</option>
+          </SelectField>
+        </div>
+        <Button type="submit" color="cyan" className="mt-8 w-full">
+          Get started today
+        </Button>
+      </form>
+    </AuthLayout>
+  )
+}

src/app/(main)/layout.tsx

@@ -0,0 +1 @@
+export { Layout as default } from '@/components/Layout'

src/app/(main)/page.tsx

@@ -0,0 +1,24 @@
+import { CallToAction } from '@/components/CallToAction'
+import { Faqs } from '@/components/Faqs'
+import { Hero } from '@/components/Hero'
+import { Pricing } from '@/components/Pricing'
+import { PrimaryFeatures } from '@/components/PrimaryFeatures'
+import { UseCases } from '@/components/UseCases'
+import { SecondaryFeatures } from '@/components/SecondaryFeatures'
+import { Benefits } from '@/components/Benefits'
+import { About } from '@/components/About'
+
+export default function Home() {
+  return (
+    <>
+      <Hero />
+      <About />
+      <Benefits />
+      <PrimaryFeatures />
+       <UseCases />
+      <CallToAction />
+      <SecondaryFeatures />
+      <Faqs />
+    </>
+  )
+}

src/app/layout.tsx

@@ -0,0 +1,32 @@
+import { type Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import clsx from 'clsx'
+
+import '@/styles/tailwind.css'
+
+const inter = Inter({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-inter',
+})
+
+export const metadata: Metadata = {
+  title: {
+    template: '%s - Mycelium',
+    default: 'Mycelium - Unleash the Power of Decentralized Networks',
+  },
+  description:
+    'Discover Mycelium, an end-to-end encrypted IPv6 overlay network. The future of secure, efficient, and scalable networking.',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" className={clsx('bg-gray-50 antialiased', inter.variable)}>
+      <body>{children}</body>
+    </html>
+  )
+}

src/app/not-found.tsx

@@ -0,0 +1,24 @@
+import { Button } from '@/components/Button'
+import { CirclesBackground } from '@/components/CirclesBackground'
+import { Container } from '@/components/Container'
+import { Layout } from '@/components/Layout'
+
+export default function NotFound() {
+  return (
+    <Layout>
+      <Container className="relative isolate flex h-full flex-col items-center justify-center py-20 text-center sm:py-32">
+        <CirclesBackground className="absolute top-1/2 left-1/2 -z-10 mt-44 w-272.5 -translate-x-1/2 -translate-y-1/2 mask-[linear-gradient(to_bottom,white_20%,transparent_75%)] stroke-gray-300/30" />
+        <p className="text-sm font-semibold text-gray-900">404</p>
+        <h1 className="mt-2 text-3xl font-medium tracking-tight text-gray-900">
+          Page not found
+        </h1>
+        <p className="mt-2 text-lg text-gray-600">
+          Sorry, we couldn’t find the page you’re looking for.
+        </p>
+        <Button href="/" variant="outline" className="mt-8">
+          Go back home
+        </Button>
+      </Container>
+    </Layout>
+  )
+}