From 4abf68a847393b221bdde72453daddc59fbfa416 Mon Sep 17 00:00:00 2001
From: Saidev Dhal <connect.saidev@gmail.com>
Date: Wed, 13 Nov 2024 18:14:56 +0530
Subject: [PATCH 1/2] add auth page

---
 apps/www/app/(routes)/layout.tsx              |   4 +-
 apps/www/app/(routes)/page.tsx                |   6 +-
 apps/www/app/(routes)/pricing/page.tsx        |  11 +-
 apps/www/app/auth/page.tsx                    | 166 +++++++++
 apps/www/app/layout.tsx                       |   2 +-
 apps/www/components/custom/navbar/navbar.tsx  |   2 +-
 .../custom/pricing/pricing.cards.tsx          | 346 +++++++++---------
 apps/www/components/custom/site/footer.tsx    |   2 +-
 apps/www/components/ui/iphone-15-pro.tsx      |  95 +++++
 apps/www/components/ui/meteors.tsx            |  44 +++
 apps/www/components/ui/tabs.tsx               |  55 +++
 apps/www/config/pricing.config.ts             | 105 +++---
 apps/www/package.json                         |   2 +
 apps/www/tailwind.config.ts                   |  14 +
 pnpm-lock.yaml                                |   6 +
 15 files changed, 630 insertions(+), 230 deletions(-)
 create mode 100644 apps/www/app/auth/page.tsx
 create mode 100644 apps/www/components/ui/iphone-15-pro.tsx
 create mode 100644 apps/www/components/ui/meteors.tsx
 create mode 100644 apps/www/components/ui/tabs.tsx

diff --git a/apps/www/app/(routes)/layout.tsx b/apps/www/app/(routes)/layout.tsx
index 6425796..ce76d2f 100644
--- a/apps/www/app/(routes)/layout.tsx
+++ b/apps/www/app/(routes)/layout.tsx
@@ -7,9 +7,9 @@ interface AppLayoutProps {
 
 export default function AppLayout({ children }: AppLayoutProps) {
   return (
-    <div className="mx-auto w-full border-border/40 dark:border-border min-[1800px]:max-w-[1536px] min-[1800px]:border-x">
+    <div className="flex flex-col items-center w-full border-border/40 dark:border-border min-[1800px]:max-w-[1536px] min-[1800px]:border-x">
       <SiteHeader />
-      <main className="flex-1 px-3">{children}</main>
+      <main className="flex px-3">{children}</main>
       <SiteFooter />
     </div>
   );
diff --git a/apps/www/app/(routes)/page.tsx b/apps/www/app/(routes)/page.tsx
index adc0281..6b4e954 100644
--- a/apps/www/app/(routes)/page.tsx
+++ b/apps/www/app/(routes)/page.tsx
@@ -12,7 +12,7 @@ import Link from "next/link";
 
 export default function Home() {
   return (
-    <div className="container relative">
+    <div className="flex flex-col items-center justify-center">
       <div className="absolute bottom-0 left-[-20%] right-0 top-[-10%] h-[500px] w-[500px] rounded-full bg-[radial-gradient(circle_farthest-side,rgba(211,211,211,0.15),rgba(255,255,255,0))]" />
       <PageHeader>
         {/* <Announcement /> */}
@@ -26,10 +26,10 @@ export default function Home() {
         </PageHeaderDescription>
         <PageActions>
           <Button size={"lg"} variant={"outline"}>
-            <Link href="/docs">Get Started Free</Link>
+            <Link href="/auth">Get Started Free</Link>
           </Button>
           <RainbowButton>
-            <Link target="_blank" rel="noreferrer" href={"#"}>
+            <Link target="_blank" rel="noreferrer" href={"/pricing"}>
               Get Premium For $15
             </Link>
           </RainbowButton>
diff --git a/apps/www/app/(routes)/pricing/page.tsx b/apps/www/app/(routes)/pricing/page.tsx
index 9d78e7a..ebdc5ac 100644
--- a/apps/www/app/(routes)/pricing/page.tsx
+++ b/apps/www/app/(routes)/pricing/page.tsx
@@ -7,17 +7,18 @@ import PricingCards from "@/components/custom/pricing/pricing.cards";
 
 export default function Pricing() {
   return (
-    <div className="container relative">
+    <div className="flex flex-col items-center justify-center">
       <PageHeader className="gap-2">
         <h2 className="max-w-5xl mx-auto text-center tracking-tight font-medium text-white text-3xl md:text-4xl md:leading-tight">
-        Get instant access to all components and templates
+          Get instant access to all components and templates
         </h2>
         <PageHeaderDescription className="max-w-3xl mx-auto tracking-tight ">
-        For a one-time payment, you get access to all components and templates, including future updates and new templates.
+          For a one-time payment, you get access to all components and
+          templates, including future updates and new templates.
         </PageHeaderDescription>
       </PageHeader>
-      <section id="pricing">
-        <PricingCards/>
+      <section id="pricing" className="flex items-center justify-center">
+        <PricingCards />
       </section>
     </div>
   );
diff --git a/apps/www/app/auth/page.tsx b/apps/www/app/auth/page.tsx
new file mode 100644
index 0000000..2880312
--- /dev/null
+++ b/apps/www/app/auth/page.tsx
@@ -0,0 +1,166 @@
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  IconBrandGoogle,
+  IconBrandGithub,
+  IconBrandDiscord,
+} from "@tabler/icons-react";
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import React from "react";
+
+export default function Auth() {
+  return (
+    <div className="flex flex-col h-full w-full lg:grid lg:grid-cols-2 overflow-hidden">
+      <div className="flex flex-col items-center justify-center px-4 sm:px-8 py-8 lg:py-0">
+        <Tabs defaultValue="signin" className="w-[350px] rounded-xl">
+          <TabsList>
+            <TabsTrigger value="signin">SignIn</TabsTrigger>
+            <TabsTrigger value="signup">SignUp</TabsTrigger>
+          </TabsList>
+          <TabsContent value="signin">
+            <Card className="border-none">
+              <CardHeader className="p-2">
+                <CardTitle className="font-bold text-xl">
+                  Welcome to Plura Ai
+                </CardTitle>
+                <CardDescription>
+                  SignIn to Plura and continue managing your saas!
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="p-2">
+                <div className="flex flex-row items-center justify-between">
+                  <Button>
+                    <IconBrandGoogle className="size-5" /> Google
+                  </Button>
+                  <Button>
+                    {" "}
+                    <IconBrandGithub className="size-5" /> GitHub
+                  </Button>
+                  <Button>
+                    {" "}
+                    <IconBrandDiscord className="size-5" /> Discord
+                  </Button>
+                </div>
+                <div className="bg-gradient-to-r from-transparent via-neutral-300 dark:via-neutral-700 to-transparent my-6 h-[1px] w-full" />
+                <div className="flex flex-col w-full gap-2 items-center justify-between">
+                  <div className="flex flex-col w-full gap-2">
+                    <Label htmlFor="email">Email</Label>
+                    <Input id="email" placeholder="Email" type="email" />
+                  </div>
+
+                  <div className="flex flex-col w-full gap-2">
+                    <Label htmlFor="pass">Password</Label>
+                    <Input id="pass" placeholder="Password" type="email" />
+                  </div>
+                  <Button className="w-full mt-2">Continue</Button>
+                </div>
+              </CardContent>
+              <CardFooter className="p-0">
+                <Button
+                  variant={"ghost"}
+                  size={"sm"}
+                  className="hover:bg-background"
+                >
+                  Forgot password
+                </Button>
+              </CardFooter>
+            </Card>
+          </TabsContent>
+
+          <TabsContent value="signup">
+            <Card className="border-none">
+              <CardHeader className="p-2">
+                <CardTitle className="font-bold text-xl">
+                  Welcome to Plura Ai
+                </CardTitle>
+                <CardDescription>
+                  SignIn to Plura and continue managing your saas!
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="p-2">
+                <div className="flex flex-row items-center justify-between">
+                  <Button>
+                    <IconBrandGoogle className="size-5" /> Google
+                  </Button>
+                  <Button>
+                    {" "}
+                    <IconBrandGithub className="size-5" /> GitHub
+                  </Button>
+                  <Button>
+                    {" "}
+                    <IconBrandDiscord className="size-5" /> Discord
+                  </Button>
+                </div>
+                <div className="bg-gradient-to-r from-transparent via-neutral-300 dark:via-neutral-700 to-transparent my-6 h-[1px] w-full" />
+                <div className="flex flex-col w-full gap-2 items-center justify-between">
+                  <div className="flex flex-row items-start justify-between gap-2">
+                    <div className="flex flex-col gap-2">
+                      <Label htmlFor="firstname">First Name</Label>
+                      <Input
+                        id="firstname"
+                        placeholder="First Name"
+                        type="text"
+                      />
+                    </div>
+                    <div className="flex flex-col gap-2">
+                      <Label htmlFor="lastname">Last Name</Label>
+                      <Input
+                        id="lastname"
+                        placeholder="Last Name"
+                        type="text"
+                      />
+                    </div>
+                  </div>
+
+                  <div className="flex flex-col w-full gap-2">
+                    <Label htmlFor="email">Email</Label>
+                    <Input id="email" placeholder="Email" type="email" />
+                  </div>
+
+                  <div className="flex flex-col w-full gap-2">
+                    <Label htmlFor="pass">Password</Label>
+                    <Input id="pass" placeholder="Password" type="email" />
+                  </div>
+                  <div className="flex flex-col w-full gap-2">
+                    <Label htmlFor="cnfpass">Confirm Password</Label>
+                    <Input
+                      id="cnfpass"
+                      placeholder="Confirm Password"
+                      type="email"
+                    />
+                  </div>
+                  <Button className="w-full mt-2">Continue</Button>
+                </div>
+              </CardContent>
+              {/* <CardFooter className="p-0">
+    <Button variant={"ghost"} size={"sm"} className="hover:bg-background">
+      Forgot password
+    </Button>
+  </CardFooter> */}
+            </Card>
+          </TabsContent>
+        </Tabs>
+      </div>
+
+      <div className="hidden md:flex items-center justify-center min-h-screen">
+        <div className="flex flex-col items-center justify-center px-4 sm:px-8 py-8 lg:py-0">
+          <span className="flex flex-wrap p-5 text-2xl font-bold text-black/20 dark:text-white/20 sm:text-3xl md:text-3xl lg:text-4xl xl:text-5xl">
+            Talk to any website using okokoa sss okokokks sssss
+          </span>
+        </div>
+      </div>
+
+      <div className="hidden lg:block lg:absolute lg:top-0 lg:bottom-0 lg:left-1/2 lg:border-l lg:border-secondary" />
+    </div>
+  );
+}
diff --git a/apps/www/app/layout.tsx b/apps/www/app/layout.tsx
index 818e5c7..c72ae79 100644
--- a/apps/www/app/layout.tsx
+++ b/apps/www/app/layout.tsx
@@ -24,7 +24,7 @@ export default function RootLayout({
           enableSystem
           disableTransitionOnChange
         >
-          <div className="relative flex  flex-col bg-background mx-auto">
+          <div className="flex flex-col items-center bg-background mx-auto">
             {children}
           </div>
         </ThemeProvider>
diff --git a/apps/www/components/custom/navbar/navbar.tsx b/apps/www/components/custom/navbar/navbar.tsx
index f06a3d4..3a57c69 100644
--- a/apps/www/components/custom/navbar/navbar.tsx
+++ b/apps/www/components/custom/navbar/navbar.tsx
@@ -50,7 +50,7 @@ export function MainNav() {
           Usage
         </Link>
         <Link
-          href="/colors"
+          href="/pricing"
           className={cn(
             "transition-colors hover:text-foreground/80",
             pathname?.startsWith("/colors")
diff --git a/apps/www/components/custom/pricing/pricing.cards.tsx b/apps/www/components/custom/pricing/pricing.cards.tsx
index b53e5e3..5c02065 100644
--- a/apps/www/components/custom/pricing/pricing.cards.tsx
+++ b/apps/www/components/custom/pricing/pricing.cards.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React from "react";
 import { Button } from "@/components/ui/button";
 import {
   Card,
@@ -7,182 +7,200 @@ import {
   CardHeader,
 } from "@/components/ui/card";
 import { Check } from "lucide-react";
-import { Badge } from '@/components/ui/badge';
-import { pricingCardConfig } from '@/config/pricing.config';
+import { Badge } from "@/components/ui/badge";
+import { pricingCardConfig } from "@/config/pricing.config";
 
 export default function PricingCards() {
   return (
     <div className="grid md:grid-cols-3 px-4 gap-4">
-            {/* Basic Plan */}
-            <Card className='bg-[#171717] rounded-2xl p-2'>
-            <CardHeader className="rounded-2xl border-t-2 border-r border-[#333] border-opacity-80 m-3 bg-gradient-to-br from-[#262626] to-[#262829]">
-        <h3 className="text-xl font-semibold">{pricingCardConfig.basic.name}</h3>
-        <p className="text-xs">{pricingCardConfig.basic.tier}</p>
-        <div className="flex flex-row items-center gap-2 pt-4 pb-6">
-          <span className="text-7xl font-bold tracking-tight">
-            {/* <span className="text-xl align-bottom">$</span> */}
-            {pricingCardConfig.basic.price}
-          </span>
-          {/* <div className="flex flex-col text-lg gap-2 font-semibold">
+      {/* Basic Plan */}
+      <Card className="bg-[#171717] rounded-2xl p-2">
+        <CardHeader className="rounded-2xl border-t-2 border-r border-[#333] border-opacity-80 m-3 bg-gradient-to-br from-[#262626] to-[#262829]">
+          <h3 className="text-xl font-semibold">
+            {pricingCardConfig.basic.name}
+          </h3>
+          <p className="text-xs">{pricingCardConfig.basic.tier}</p>
+          <div className="flex flex-row items-center gap-2 pt-4 pb-6">
+            <span className="text-7xl font-bold tracking-tight">
+              {/* <span className="text-xl align-bottom">$</span> */}
+              {pricingCardConfig.basic.price}
+            </span>
+            {/* <div className="flex flex-col text-lg gap-2 font-semibold">
             <span className="line-through">$199</span>
             <Badge className='bg-background text-primary'>
             35% OFF
             </Badge>
           </div> */}
-        </div>
-        
-        <Button className="w-full bg-white text-black hover:bg-gray-200">
-                  Get Plura Basic
-                </Button>
-      </CardHeader>
-      <CardContent className="space-y-6 mt-14">
-                <ul className="space-y-2.5">
-                  {[
-                    "1 year access to all the premium component packs and templates",
-                    "1 year of updates and new features",
-                    "1 year access to new templates and components",
-                    "Access to private discord community",
-                    "48 hours turnaround time for support",
-                    "Copy and paste, no complexity",
-                    "Built with Next.js and React",
-                    "Styled with Tailwind CSS and Framer Motion",
-                    "Available in TypeScript and JavaScript",
-                    "Cancel anytime",
-                  ].map((feature, index) => (
-                    <li
-                      key={index}
-                      className="flex items-start gap-2 text-sm text-gray-400"
-                    >
-                      <Check className="h-4 w-4 text-emerald-500 mt-0.5 shrink-0" />
-                      <span>{feature}</span>
-                    </li>
-                  ))}
-                </ul>
-              </CardContent>
-              <CardFooter>
-                <Button
-                  variant="link"
-                  className="w-full text-gray-400 hover:text-white"
-                >
-                  Questions? Chat with us.
-                </Button>
-              </CardFooter>
-            </Card>
+          </div>
 
-            {/* Lifetime Plan */}
-            <Card className='bg-[#171717] rounded-2xl p-2'>
-            <CardHeader className="rounded-2xl border-t-2 border-r border-[#333] border-opacity-80 m-3 bg-gradient-to-br from-[#262626] to-[#262829]">
-        <div className="flex flex-row items-center justify-between">
-          <h3 className="text-xl font-semibold">{pricingCardConfig.plus.name}</h3>
-          <Badge className='rounded-xl hover:bg-primary'>Featured</Badge>
-        </div>
-        <p className="text-xs">{pricingCardConfig.plus.tier}</p>
+          <Button className="w-full bg-white text-black hover:bg-gray-200">
+            Get Plura Basic
+          </Button>
+        </CardHeader>
+        <CardContent className="space-y-6 mt-14">
+          <ul className="space-y-2.5">
+            {[
+              "1 year access to all the premium component packs and templates",
+              "1 year of updates and new features",
+              "1 year access to new templates and components",
+              "Access to private discord community",
+              "48 hours turnaround time for support",
+              "Copy and paste, no complexity",
+              "Built with Next.js and React",
+              "Styled with Tailwind CSS and Framer Motion",
+              "Available in TypeScript and JavaScript",
+              "Cancel anytime",
+            ].map((feature, index) => (
+              <li
+                key={index}
+                className="flex items-start gap-2 text-sm text-gray-400"
+              >
+                <Check className="h-4 w-4 text-emerald-500 mt-0.5 shrink-0" />
+                <span>{feature}</span>
+              </li>
+            ))}
+          </ul>
+        </CardContent>
+        <CardFooter>
+          <Button
+            variant="link"
+            className="w-full text-gray-400 hover:text-white"
+          >
+            Questions? Chat with us.
+          </Button>
+        </CardFooter>
+      </Card>
 
-        <div className="flex flex-row items-center gap-2 pt-4 pb-6">
-          <span className="text-7xl font-bold tracking-tight">
-            <span className="text-xl align-bottom">{pricingCardConfig.plus.currency}</span>{pricingCardConfig.plus.price}
-          </span>
-          <div className="flex flex-col text-lg gap-2 font-semibold">
-            <span className="line-through">{pricingCardConfig.plus.currency}{pricingCardConfig.plus.beforePrice}</span>
-            <Badge className='bg-background hover:bg-background text-primary'>
-            {pricingCardConfig.plus.discount}
-            </Badge>
+      {/* Lifetime Plan */}
+      <Card className="bg-[#171717] rounded-2xl p-2">
+        <CardHeader className="rounded-2xl border-t-2 border-r border-[#333] border-opacity-80 m-3 bg-gradient-to-br from-[#262626] to-[#262829]">
+          <div className="flex flex-row items-center justify-between">
+            <h3 className="text-xl font-semibold">
+              {pricingCardConfig.plus.name}
+            </h3>
+            <Badge className="rounded-xl hover:bg-primary">Featured</Badge>
           </div>
-        </div>
-        
-        <Button className="w-full bg-white text-black hover:bg-gray-200">
-                  Get Plura Plus
-                </Button>
-      </CardHeader>
-      <CardContent className="space-y-6 mt-14">
-                <ul className="space-y-2.5">
-                  {[
-                    "Lifetime access to all the premium component packs",
-                    "Lifetime access to all the premium templates",
-                    "Lifetime access to updates and new features",
-                    "Lifetime access to new templates and components",
-                    "Access to Figma Kit for all components and templates",
-                    "Access to private discord community",
-                    "Copy and paste, no complexity",
-                    "Built with Next.js and React",
-                    "Styled with Tailwind CSS and Framer Motion",
-                    "Available in TypeScript and JavaScript",
-                    "Priority support",
-                  ].map((feature, index) => (
-                    <li
-                      key={index}
-                      className="flex items-start gap-2 text-sm text-gray-400"
-                    >
-                      <Check className="h-4 w-4 text-emerald-500 mt-0.5 shrink-0" />
-                      <span>{feature}</span>
-                    </li>
-                  ))}
-                </ul>
-              </CardContent>
-              <CardFooter>
-                <Button
-                  variant="link"
-                  className="w-full text-gray-400 hover:text-white"
-                >
-                  Questions? Chat with us.
-                </Button>
-              </CardFooter>
-            </Card>
+          <p className="text-xs">{pricingCardConfig.plus.tier}</p>
 
-            {/* Team Plan */}
-            <Card className='bg-[#171717] rounded-2xl p-2'>
-            <CardHeader className="rounded-2xl border-t-2 border-r border-[#333] border-opacity-80 m-3 bg-gradient-to-br from-[#262626] to-[#262829]">
-        <h3 className="text-xl font-semibold">{pricingCardConfig.pro.name}</h3>
-        <p className="text-xs">{pricingCardConfig.pro.tier}</p>
-        <div className="flex flex-row items-center gap-2 pt-4 pb-6">
-          <span className="text-7xl font-bold tracking-tight">
-            <span className="text-xl align-bottom">{pricingCardConfig.pro.currency}</span>{pricingCardConfig.pro.price}
-          </span>
-          <div className="flex flex-col text-lg gap-2 font-semibold">
-            <span className="line-through">{pricingCardConfig.pro.currency}{pricingCardConfig.pro.beforePrice}</span>
-            <Badge className='bg-background text-primary'>
-            {pricingCardConfig.pro.discount}
-            </Badge>
+          <div className="flex flex-row items-center gap-2 pt-4 pb-6">
+            <span className="text-7xl font-bold tracking-tight">
+              <span className="text-xl align-bottom">
+                {pricingCardConfig.plus.currency}
+              </span>
+              {pricingCardConfig.plus.price}
+            </span>
+            <div className="flex flex-col text-lg gap-2 font-semibold">
+              <span className="line-through">
+                {pricingCardConfig.plus.currency}
+                {pricingCardConfig.plus.beforePrice}
+              </span>
+              <Badge className="bg-background hover:bg-background text-primary">
+                {pricingCardConfig.plus.discount}
+              </Badge>
+            </div>
           </div>
-        </div>
-        
-        <Button className="w-full bg-white text-black hover:bg-gray-200">
-                  Get Plura Pro
-                </Button>
-      </CardHeader>
-      <CardContent className="space-y-6 mt-14">
-                <ul className="space-y-2.5">
-                  {[
-                    "10 team members",
-                    "Lifetime access to all the component packs and templates",
-                    "Lifetime access to updates and new features",
-                    "Lifetime access to new templates and components",
-                    "Access to private discord community",
-                    "Copy and paste, no complexity",
-                    "Built with Next.js and React",
-                    "Styled with Tailwind CSS and Framer Motion",
-                    "Available in TypeScript and JavaScript",
-                    "Priority support",
-                  ].map((feature, index) => (
-                    <li
-                      key={index}
-                      className="flex items-start gap-2 text-sm text-gray-400"
-                    >
-                      <Check className="h-4 w-4 text-emerald-500 mt-0.5 shrink-0" />
-                      <span>{feature}</span>
-                    </li>
-                  ))}
-                </ul>
-              </CardContent>
-              <CardFooter>
-                <Button
-                  variant="link"
-                  className="w-full text-gray-400 hover:text-white"
-                >
-                  Questions? Chat with us.
-                </Button>
-              </CardFooter>
-            </Card>
+
+          <Button className="w-full bg-white text-black hover:bg-gray-200">
+            Get Plura Plus
+          </Button>
+        </CardHeader>
+        <CardContent className="space-y-6 mt-14">
+          <ul className="space-y-2.5">
+            {[
+              "Lifetime access to all the premium component packs",
+              "Lifetime access to all the premium templates",
+              "Lifetime access to updates and new features",
+              "Lifetime access to new templates and components",
+              "Access to Figma Kit for all components and templates",
+              "Access to private discord community",
+              "Copy and paste, no complexity",
+              "Built with Next.js and React",
+              "Styled with Tailwind CSS and Framer Motion",
+              "Available in TypeScript and JavaScript",
+              "Priority support",
+            ].map((feature, index) => (
+              <li
+                key={index}
+                className="flex items-start gap-2 text-sm text-gray-400"
+              >
+                <Check className="h-4 w-4 text-emerald-500 mt-0.5 shrink-0" />
+                <span>{feature}</span>
+              </li>
+            ))}
+          </ul>
+        </CardContent>
+        <CardFooter>
+          <Button
+            variant="link"
+            className="w-full text-gray-400 hover:text-white"
+          >
+            Questions? Chat with us.
+          </Button>
+        </CardFooter>
+      </Card>
+
+      {/* Team Plan */}
+      <Card className="bg-[#171717] rounded-2xl p-2">
+        <CardHeader className="rounded-2xl border-t-2 border-r border-[#333] border-opacity-80 m-3 bg-gradient-to-br from-[#262626] to-[#262829]">
+          <h3 className="text-xl font-semibold">
+            {pricingCardConfig.pro.name}
+          </h3>
+          <p className="text-xs">{pricingCardConfig.pro.tier}</p>
+          <div className="flex flex-row items-center gap-2 pt-4 pb-6">
+            <span className="text-7xl font-bold tracking-tight">
+              <span className="text-xl align-bottom">
+                {pricingCardConfig.pro.currency}
+              </span>
+              {pricingCardConfig.pro.price}
+            </span>
+            <div className="flex flex-col text-lg gap-2 font-semibold">
+              <span className="line-through">
+                {pricingCardConfig.pro.currency}
+                {pricingCardConfig.pro.beforePrice}
+              </span>
+              <Badge className="bg-background text-primary">
+                {pricingCardConfig.pro.discount}
+              </Badge>
+            </div>
           </div>
-  )
+
+          <Button className="w-full bg-white text-black hover:bg-gray-200">
+            Get Plura Pro
+          </Button>
+        </CardHeader>
+        <CardContent className="space-y-6 mt-14">
+          <ul className="space-y-2.5">
+            {[
+              "10 team members",
+              "Lifetime access to all the component packs and templates",
+              "Lifetime access to updates and new features",
+              "Lifetime access to new templates and components",
+              "Access to private discord community",
+              "Copy and paste, no complexity",
+              "Built with Next.js and React",
+              "Styled with Tailwind CSS and Framer Motion",
+              "Available in TypeScript and JavaScript",
+              "Priority support",
+            ].map((feature, index) => (
+              <li
+                key={index}
+                className="flex items-start gap-2 text-sm text-gray-400"
+              >
+                <Check className="h-4 w-4 text-emerald-500 mt-0.5 shrink-0" />
+                <span>{feature}</span>
+              </li>
+            ))}
+          </ul>
+        </CardContent>
+        <CardFooter>
+          <Button
+            variant="link"
+            className="w-full text-gray-400 hover:text-white"
+          >
+            Questions? Chat with us.
+          </Button>
+        </CardFooter>
+      </Card>
+    </div>
+  );
 }
diff --git a/apps/www/components/custom/site/footer.tsx b/apps/www/components/custom/site/footer.tsx
index c190016..498d176 100644
--- a/apps/www/components/custom/site/footer.tsx
+++ b/apps/www/components/custom/site/footer.tsx
@@ -1,7 +1,7 @@
 export function SiteFooter() {
   return (
     <footer className="py-6 md:px-8 md:py-0">
-      <div className="container flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
+      <div className="flex flex-col items-center gap-4 md:h-24 md:flex-row">
         <p className="text-balance text-center text-sm leading-loose text-muted-foreground md:text-left">
           &copy; 2024 Plura Ai. All rights reserved.
         </p>
diff --git a/apps/www/components/ui/iphone-15-pro.tsx b/apps/www/components/ui/iphone-15-pro.tsx
new file mode 100644
index 0000000..a16aef0
--- /dev/null
+++ b/apps/www/components/ui/iphone-15-pro.tsx
@@ -0,0 +1,95 @@
+import { SVGProps } from "react";
+
+export interface Iphone15ProProps extends SVGProps<SVGSVGElement> {
+  width?: number;
+  height?: number;
+  src?: string;
+}
+
+export default function Iphone15Pro({
+  width = 433,
+  height = 882,
+  src,
+  ...props
+}: Iphone15ProProps) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox={`0 0 ${width} ${height}`}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M2 73C2 32.6832 34.6832 0 75 0H357C397.317 0 430 32.6832 430 73V809C430 849.317 397.317 882 357 882H75C34.6832 882 2 849.317 2 809V73Z"
+        className="fill-[#E5E5E5] dark:fill-[#404040]"
+      />
+      <path
+        d="M0 171C0 170.448 0.447715 170 1 170H3V204H1C0.447715 204 0 203.552 0 203V171Z"
+        className="fill-[#E5E5E5] dark:fill-[#404040]"
+      />
+      <path
+        d="M1 234C1 233.448 1.44772 233 2 233H3.5V300H2C1.44772 300 1 299.552 1 299V234Z"
+        className="fill-[#E5E5E5] dark:fill-[#404040]"
+      />
+      <path
+        d="M1 319C1 318.448 1.44772 318 2 318H3.5V385H2C1.44772 385 1 384.552 1 384V319Z"
+        className="fill-[#E5E5E5] dark:fill-[#404040]"
+      />
+      <path
+        d="M430 279H432C432.552 279 433 279.448 433 280V384C433 384.552 432.552 385 432 385H430V279Z"
+        className="fill-[#E5E5E5] dark:fill-[#404040]"
+      />
+      <path
+        d="M6 74C6 35.3401 37.3401 4 76 4H356C394.66 4 426 35.3401 426 74V808C426 846.66 394.66 878 356 878H76C37.3401 878 6 846.66 6 808V74Z"
+        className="dark:fill-[#262626] fill-white"
+      />
+      <path
+        opacity="0.5"
+        d="M174 5H258V5.5C258 6.60457 257.105 7.5 256 7.5H176C174.895 7.5 174 6.60457 174 5.5V5Z"
+        className="fill-[#E5E5E5] dark:fill-[#404040]"
+      />
+      <path
+        d="M21.25 75C21.25 44.2101 46.2101 19.25 77 19.25H355C385.79 19.25 410.75 44.2101 410.75 75V807C410.75 837.79 385.79 862.75 355 862.75H77C46.2101 862.75 21.25 837.79 21.25 807V75Z"
+        className="fill-[#E5E5E5] dark:fill-[#404040] stroke-[#E5E5E5] dark:stroke-[#404040] stroke-[0.5]"
+      />
+
+      {src && (
+        <image
+          href={src}
+          x="21.25"
+          y="19.25"
+          width="389.5"
+          height="843.5"
+          preserveAspectRatio="xMidYMid slice"
+          clipPath="url(#roundedCorners)"
+        />
+      )}
+      <path
+        d="M154 48.5C154 38.2827 162.283 30 172.5 30H259.5C269.717 30 278 38.2827 278 48.5C278 58.7173 269.717 67 259.5 67H172.5C162.283 67 154 58.7173 154 48.5Z"
+        className="dark:fill-[#262626] fill-[#F5F5F5]"
+      />
+      <path
+        d="M249 48.5C249 42.701 253.701 38 259.5 38C265.299 38 270 42.701 270 48.5C270 54.299 265.299 59 259.5 59C253.701 59 249 54.299 249 48.5Z"
+        className="dark:fill-[#262626] fill-[#F5F5F5]"
+      />
+      <path
+        d="M254 48.5C254 45.4624 256.462 43 259.5 43C262.538 43 265 45.4624 265 48.5C265 51.5376 262.538 54 259.5 54C256.462 54 254 51.5376 254 48.5Z"
+        className="fill-[#E5E5E5] dark:fill-[#404040]"
+      />
+      <defs>
+        <clipPath id="roundedCorners">
+          <rect
+            x="21.25"
+            y="19.25"
+            width="389.5"
+            height="843.5"
+            rx="55.75"
+            ry="55.75"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/apps/www/components/ui/meteors.tsx b/apps/www/components/ui/meteors.tsx
new file mode 100644
index 0000000..6af48c8
--- /dev/null
+++ b/apps/www/components/ui/meteors.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface MeteorsProps {
+  number?: number;
+}
+export const Meteors = ({ number = 20 }: MeteorsProps) => {
+  const [meteorStyles, setMeteorStyles] = useState<Array<React.CSSProperties>>(
+    [],
+  );
+
+  useEffect(() => {
+    const styles = [...new Array(number)].map(() => ({
+      top: -5,
+      left: Math.floor(Math.random() * window.innerWidth) + "px",
+      animationDelay: Math.random() * 1 + 0.2 + "s",
+      animationDuration: Math.floor(Math.random() * 8 + 2) + "s",
+    }));
+    setMeteorStyles(styles);
+  }, [number]);
+
+  return (
+    <>
+      {[...meteorStyles].map((style, idx) => (
+        // Meteor Head
+        <span
+          key={idx}
+          className={cn(
+            "pointer-events-none absolute left-1/2 top-1/2 size-0.5 rotate-[215deg] animate-meteor rounded-full bg-slate-500 shadow-[0_0_0_1px_#ffffff10]",
+          )}
+          style={style}
+        >
+          {/* Meteor Tail */}
+          <div className="pointer-events-none absolute top-1/2 -z-10 h-px w-[50px] -translate-y-1/2 bg-gradient-to-r from-slate-500 to-transparent" />
+        </span>
+      ))}
+    </>
+  );
+};
+
+export default Meteors;
diff --git a/apps/www/components/ui/tabs.tsx b/apps/www/components/ui/tabs.tsx
new file mode 100644
index 0000000..cc56f16
--- /dev/null
+++ b/apps/www/components/ui/tabs.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+
+import { cn } from "@/lib/utils";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };
diff --git a/apps/www/config/pricing.config.ts b/apps/www/config/pricing.config.ts
index 5010301..1dcce7a 100644
--- a/apps/www/config/pricing.config.ts
+++ b/apps/www/config/pricing.config.ts
@@ -1,71 +1,70 @@
 export const pricingCardConfig = {
-basic: {
-  name: 'Basic',
-  tier: 'Free Lifetime',
-  discount: '',
-  beforePrice: '',
-  currency: '',
-  price: "Free",
-  features: [
-    '1 year access to all the premium component packs and templates',
-    '1 year of updates and new features',
-    '1 year access to new templates and components',
-    'Access to private discord community',
-    '48 hours turnaround time for support',
-    'Copy and paste, no complexity',
-    'Built with Next.js and React',
-    'Styled with Tailwind CSS and Framer Motion',
-    'Available in TypeScript and JavaScript',
-    'Cancel anytime',
-  ],
-  pros: [],
-  cons: [],
-},
+  basic: {
+    name: "Basic",
+    tier: "Free Lifetime",
+    discount: "",
+    beforePrice: "",
+    currency: "",
+    price: "Free",
+    features: [
+      "1 year access to all the premium component packs and templates",
+      "1 year of updates and new features",
+      "1 year access to new templates and components",
+      "Access to private discord community",
+      "48 hours turnaround time for support",
+      "Copy and paste, no complexity",
+      "Built with Next.js and React",
+      "Styled with Tailwind CSS and Framer Motion",
+      "Available in TypeScript and JavaScript",
+      "Cancel anytime",
+    ],
+    pros: [],
+    cons: [],
+  },
 
-plus:  {
-    name: 'Plus',
-    tier: 'Paid Monthly',
-    discount: '42.03% OFF',
+  plus: {
+    name: "Plus",
+    tier: "Paid Monthly",
+    discount: "42.03% OFF",
     beforePrice: 69,
-    currency: '$',
+    currency: "$",
     price: 29,
     features: [
-      '1 year access to all the premium component packs and templates',
-      '1 year of updates and new features',
-      '1 year access to new templates and components',
-      'Access to private discord community',
-      '48 hours turnaround time for support',
-      'Copy and paste, no complexity',
-      'Built with Next.js and React',
-      'Styled with Tailwind CSS and Framer Motion',
-      'Available in TypeScript and JavaScript',
-      'Cancel anytime',
+      "1 year access to all the premium component packs and templates",
+      "1 year of updates and new features",
+      "1 year access to new templates and components",
+      "Access to private discord community",
+      "48 hours turnaround time for support",
+      "Copy and paste, no complexity",
+      "Built with Next.js and React",
+      "Styled with Tailwind CSS and Framer Motion",
+      "Available in TypeScript and JavaScript",
+      "Cancel anytime",
     ],
     pros: [],
     cons: [],
   },
 
-  pro:  {
-    name: 'Pro',
-    tier: 'Paid Quarterly',
-    discount: '55% OFF',
+  pro: {
+    name: "Pro",
+    tier: "Paid Quarterly",
+    discount: "55% OFF",
     beforePrice: 449,
-    currency: '$',
+    currency: "$",
     price: 249,
     features: [
-      '1 year access to all the premium component packs and templates',
-      '1 year of updates and new features',
-      '1 year access to new templates and components',
-      'Access to private discord community',
-      '48 hours turnaround time for support',
-      'Copy and paste, no complexity',
-      'Built with Next.js and React',
-      'Styled with Tailwind CSS and Framer Motion',
-      'Available in TypeScript and JavaScript',
-      'Cancel anytime',
+      "1 year access to all the premium component packs and templates",
+      "1 year of updates and new features",
+      "1 year access to new templates and components",
+      "Access to private discord community",
+      "48 hours turnaround time for support",
+      "Copy and paste, no complexity",
+      "Built with Next.js and React",
+      "Styled with Tailwind CSS and Framer Motion",
+      "Available in TypeScript and JavaScript",
+      "Cancel anytime",
     ],
     pros: [],
     cons: [],
   },
 };
-
diff --git a/apps/www/package.json b/apps/www/package.json
index c8890ff..85fd0cc 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -21,10 +21,12 @@
     "@radix-ui/react-scroll-area": "^1.2.0",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.3",
     "@repo/auth": "workspace:*",
     "@repo/db": "workspace:*",
     "@repo/types": "workspace:*",
+    "@tabler/icons-react": "^3.21.0",
     "better-auth": "0.8.1-beta.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
diff --git a/apps/www/tailwind.config.ts b/apps/www/tailwind.config.ts
index ab59864..3ef427a 100644
--- a/apps/www/tailwind.config.ts
+++ b/apps/www/tailwind.config.ts
@@ -73,6 +73,7 @@ const config: Config = {
       },
       animation: {
         rainbow: "rainbow var(--speed, 2s) infinite linear",
+        meteor: "meteor 5s linear infinite",
       },
       keyframes: {
         rainbow: {
@@ -83,6 +84,19 @@ const config: Config = {
             "background-position": "200%",
           },
         },
+        meteor: {
+          "0%": {
+            transform: "rotate(215deg) translateX(0)",
+            opacity: "1",
+          },
+          "70%": {
+            opacity: "1",
+          },
+          "100%": {
+            transform: "rotate(215deg) translateX(-500px)",
+            opacity: "0",
+          },
+        },
       },
     },
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a09bf7d..511d750 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -309,6 +309,9 @@ importers:
       '@radix-ui/react-slot':
         specifier: ^1.1.0
         version: 1.1.0(@types/react@18.3.12)(react@19.0.0-rc-02c0e824-20241028)
+      '@radix-ui/react-tabs':
+        specifier: ^1.1.1
+        version: 1.1.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@19.0.0-rc-02c0e824-20241028(react@19.0.0-rc-02c0e824-20241028))(react@19.0.0-rc-02c0e824-20241028)
       '@radix-ui/react-tooltip':
         specifier: ^1.1.3
         version: 1.1.3(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@19.0.0-rc-02c0e824-20241028(react@19.0.0-rc-02c0e824-20241028))(react@19.0.0-rc-02c0e824-20241028)
@@ -321,6 +324,9 @@ importers:
       '@repo/types':
         specifier: workspace:*
         version: link:../../packages/types
+      '@tabler/icons-react':
+        specifier: ^3.21.0
+        version: 3.21.0(react@19.0.0-rc-02c0e824-20241028)
       better-auth:
         specifier: 0.8.1-beta.1
         version: 0.8.1-beta.1

From 13f968107bbb815387c2bd66ea7fc8c1a65a0dc8 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Wed, 13 Nov 2024 12:52:01 +0000
Subject: [PATCH 2/2] chore: format code with Prettier

---
 apps/www/app/(routes)/pricing/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/www/app/(routes)/pricing/page.tsx b/apps/www/app/(routes)/pricing/page.tsx
index bdf3add..ee24b2d 100644
--- a/apps/www/app/(routes)/pricing/page.tsx
+++ b/apps/www/app/(routes)/pricing/page.tsx
@@ -17,7 +17,7 @@ export default function Pricing() {
           templates, including future updates and new templates.
         </PageHeaderDescription>
       </PageHeader>
-      
+
       <section id="pricing" className="flex items-center justify-center">
         <PricingCards />
       </section>