Update src/app/signup/page.tsx

Merge version_1 into main

src/app/admin/page.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
+import React from "react";
+
+export default function AdminDashboardPage() {
+  const navItems = [
+    { name: "Home", id: "home" },
+    { name: "Features", id: "features" },
+    { name: "Pricing", id: "pricing" },
+    { name: "Testimonials", id: "testimonials" },
+    { name: "FAQ", id: "faq" },
+    { name: "Contact", id: "contact" },
+    { name: "Admin", id: "admin" }
+  ];
+
+  const footerColumns = [
+    {
+      title: "Product",      items: [
+        { label: "Features", href: "#features" },
+        { label: "Pricing", href: "#pricing" },
+        { label: "Admin Dashboard", href: "/admin" },
+        { label: "Login", href: "/login" },
+      ],
+    },
+    {
+      title: "Company",      items: [
+        { label: "About Us", href: "#about" },
+        { label: "Careers", href: "#" },
+        { label: "Blog", href: "#" },
+        { label: "Contact", href: "#contact" },
+      ],
+    },
+    {
+      title: "Resources",      items: [
+        { label: "Help Center", href: "#" },
+        { label: "API Docs", href: "#" },
+        { label: "Community", href: "#" },
+        { label: "Support", href: "#" },
+      ],
+    },
+    {
+      title: "Legal",      items: [
+        { label: "Privacy Policy", href: "#" },
+        { label: "Terms of Service", href: "#" },
+        { label: "Cookie Policy", href: "#" },
+      ],
+    },
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="expand-hover"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="smallMedium"
+      sizing="large"
+      background="noiseDiagonalGradient"
+      cardStyle="glass-depth"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="medium"
+    >
+      <div className="min-h-screen flex flex-col">
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={navItems}
+            brandName="VortexAI"
+            bottomLeftText="Global AI Community"
+            bottomRightText="support@vortexai.com"
+          />
+        </div>
+
+        <main className="flex-grow container mx-auto px-4 py-8">
+          <h1 className="text-4xl font-bold text-foreground mb-8">Admin Dashboard</h1>
+
+          <section className="mb-8 p-6 bg-card rounded-lg shadow-lg">
+            <h2 className="text-2xl font-semibold text-foreground mb-4">User Management</h2>
+            <p className="text-foreground-secondary">Manage user accounts, roles, and permissions.</p>
+            <div className="mt-4 h-32 bg-background-accent rounded flex items-center justify-center text-foreground-secondary">
+              User List and Controls Here
+            </div>
+          </section>
+
+          <section className="mb-8 p-6 bg-card rounded-lg shadow-lg">
+            <h2 className="text-2xl font-semibold text-foreground mb-4">Video Generation Monitoring</h2>
+            <p className="text-foreground-secondary">Monitor the status and progress of video generation tasks.</p>
+            <div className="mt-4 h-32 bg-background-accent rounded flex items-center justify-center text-foreground-secondary">
+              Video Generation Queue and Monitoring
+            </div>
+          </section>
+
+          <section className="mb-8 p-6 bg-card rounded-lg shadow-lg">
+            <h2 className="text-2xl font-semibold text-foreground mb-4">Credit Adjustment</h2>
+            <p className="text-foreground-secondary">Adjust user credits and manage credit packages.</p>
+            <div className="mt-4 h-32 bg-background-accent rounded flex items-center justify-center text-foreground-secondary">
+              Credit Adjustment Interface
+            </div>
+          </section>
+
+          <section className="mb-8 p-6 bg-card rounded-lg shadow-lg">
+            <h2 className="text-2xl font-semibold text-foreground mb-4">Payment Transactions</h2>
+            <p className="text-foreground-secondary">View and manage payment transactions.</p>
+            <div className="mt-4 h-32 bg-background-accent rounded flex items-center justify-center text-foreground-secondary">
+              Payment Transaction History
+            </div>
+          </section>
+
+          <section className="mb-8 p-6 bg-card rounded-lg shadow-lg">
+            <h2 className="text-2xl font-semibold text-foreground mb-4">Platform Usage Analytics</h2>
+            <p className="text-foreground-secondary">Access insights into platform usage and performance.</p>
+            <div className="mt-4 h-32 bg-background-accent rounded flex items-center justify-center text-foreground-secondary">
+              Usage Analytics Dashboard
+            </div>
+          </section>
+        </main>
+
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="VortexAI"
+            columns={footerColumns}
+            copyrightText="© 2024 VortexAI. All rights reserved."
+          />
+        </div>
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/community/page.tsx

@@ -0,0 +1,180 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import Input from '@/components/form/Input';
+import ButtonTextShift from '@/components/button/ButtonTextShift/ButtonTextShift';
+import React, { useState } from 'react';
+import { Share2, ThumbsUp, Copy, Search } from 'lucide-react'; // Importing icons
+
+export default function CommunityPage() {
+  const [searchText, setSearchText] = useState('');
+
+  const prompts = [
+    { id: '1', title: 'Cinematic Sunset', content: 'Generate a hyper-realistic video of a serene sunset over a calm ocean, with soft golden hour lighting.', likes: 124, trending: true },
+    { id: '2', title: 'Futuristic Cityscape', content: 'Create a dynamic sci-fi city with flying vehicles, neon lights, and a bustling atmosphere at night.', likes: 89, trending: false },
+    { id: '3', title: 'Enchanted Forest', content: 'Design a magical forest scene with glowing flora, a gentle stream, and mystical creatures peeking from the shadows.', likes: 210, trending: true },
+    { id: '4', title: 'Action-Packed Chase', content: 'Produce a high-octane car chase through narrow city streets, with dramatic camera angles and explosions.', likes: 76, trending: false },
+    { id: '5', title: 'Abstract Art Flow', content: 'Animate an abstract art piece where colors and shapes fluidly morph and interact, set to a calm, ambient soundscape.', likes: 150, trending: true },
+  ];
+
+  const filteredPrompts = prompts.filter(prompt =>
+    prompt.title.toLowerCase().includes(searchText.toLowerCase()) ||
+    prompt.content.toLowerCase().includes(searchText.toLowerCase())
+  );
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="expand-hover"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="rounded"
+        contentWidth="smallMedium"
+        sizing="large"
+        background="noiseDiagonalGradient"
+        cardStyle="glass-depth"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="medium"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+            <NavbarStyleFullscreen
+            navItems={[
+              {
+                name: "Home",          id: "/"
+              },
+              {
+                name: "Features",          id: "#features"
+              },
+              {
+                name: "Pricing",          id: "#pricing"
+              },
+              {
+                name: "Testimonials",          id: "#testimonials"
+              },
+              {
+                name: "FAQ",          id: "#faq"
+              },
+              {
+                name: "Community",          id: "/community"
+              },
+              {
+                name: "Analytics",          id: "/dashboard/analytics"
+              },
+              {
+                name: "Contact",          id: "/contact"
+              }
+            ]}
+            brandName="VortexAI"
+            bottomLeftText="Global AI Community"
+            bottomRightText="support@vortexai.com"
+          />
+        </div>
+
+        <main className="container mx-auto px-4 py-16 min-h-screen">
+          <div className="text-center mb-12">
+            <h1 className="text-5xl font-bold mb-4">Community Prompt Library</h1>
+            <p className="text-lg text-foreground/70">Explore, share, and get inspired by creative AI video prompts from our vibrant community.</p>
+          </div>
+
+          <div className="max-w-xl mx-auto mb-12 flex items-center gap-2">
+            <Input
+              value={searchText}
+              onChange={setSearchText}
+              placeholder="Search prompts..."
+              ariaLabel="Search prompts"
+              className="flex-grow pr-10"
+            />
+            <Search className="absolute right-[calc(50%-10rem+20px)] sm:right-[calc(50%-12.5rem+20px)] text-foreground/50 pointer-events-none" size={20} />
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {filteredPrompts.map(prompt => (
+              <div key={prompt.id} className="bg-card p-6 rounded-lg shadow-lg border border-border flex flex-col justify-between">
+                <div>
+                  <h2 className="text-2xl font-semibold mb-2">{prompt.title}</h2>
+                  <p className="text-foreground/80 mb-4 flex-grow">{prompt.content}</p>
+                </div>
+                <div className="flex items-center justify-between pt-4 border-t border-border mt-4">
+                  <div className="flex items-center space-x-4">
+                    <span className="flex items-center text-sm text-foreground/60">
+                      <ThumbsUp className="mr-1" size={16} /> {prompt.likes}
+                    </span>
+                    {prompt.trending && (
+                      <span className="text-sm text-primary-cta font-medium">Trending</span>
+                    )}
+                  </div>
+                  <div className="flex space-x-2">
+                    <ButtonTextShift text="Share" onClick={() => alert(`Sharing '${prompt.title}'`)} ariaLabel="Share prompt" />
+                    <ButtonTextShift text="Copy" onClick={() => navigator.clipboard.writeText(prompt.content)} ariaLabel="Copy prompt" />
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {filteredPrompts.length === 0 && (
+            <p className="text-center text-foreground/70 mt-12">No prompts found matching your search.</p>
+          )}
+        </main>
+
+        <div id="footer" data-section="footer">
+            <FooterBaseCard
+            logoText="VortexAI"
+            columns={[
+              {
+                title: "Product",          items: [
+                  {
+                    label: "Features",              href: "#features"},
+                  {
+                    label: "Pricing",              href: "#pricing"},
+                  {
+                    label: "Dashboard",              href: "/dashboard/analytics"},
+                  {
+                    label: "Login",              href: "/login"},
+                ],
+              },
+              {
+                title: "Company",          items: [
+                  {
+                    label: "About Us",              href: "#about"},
+                  {
+                    label: "Careers",              href: "#"},
+                  {
+                    label: "Blog",              href: "#"},
+                  {
+                    label: "Contact",              href: "/contact"},
+                  ],
+              },
+              {
+                title: "Resources",          items: [
+                  {
+                    label: "Help Center",              href: "#"},
+                  {
+                    label: "API Docs",              href: "#"},
+                  {
+                    label: "Community",              href: "/community"},
+                  {
+                    label: "Support",              href: "#"},
+                  ],
+              },
+              {
+                title: "Legal",          items: [
+                  {
+                    label: "Privacy Policy",              href: "#"},
+                  {
+                    label: "Terms of Service",              href: "#"},
+                  {
+                    label: "Cookie Policy",              href: "#"},
+                  ],
+              },
+            ]}
+            copyrightText="© 2024 VortexAI. All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/credits/page.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import ContactText from '@/components/sections/contact/ContactText';
+import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
+
+export const metadata = {
+  title: 'VortexAI | Purchase Credits',
+  description: 'Top up your VortexAI account with credit packs for on-demand AI video generation.',
+};
+
+export default function CreditsPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="expand-hover"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="rounded"
+        contentWidth="smallMedium"
+        sizing="large"
+        background="noiseDiagonalGradient"
+        cardStyle="glass-depth"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="medium"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Features", id: "/#features" },
+              { name: "Subscriptions", id: "/subscriptions" },
+              { name: "Credits", id: "/credits" },
+              { name: "Testimonials", id: "/#testimonials" },
+              { name: "FAQ", id: "/#faq" },
+              { name: "Contact", id: "/#contact" }
+            ]}
+            brandName="VortexAI"
+            bottomLeftText="Global AI Community"
+            bottomRightText="support@vortexai.com"
+          />
+        </div>
+
+        <div id="credits" data-section="credits">
+          <PricingCardNine
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            title="Flexible Credit Packs"
+            description="Top up your account with credits for on-demand video generation. The more you buy, the more you save!"
+            plans={[
+              {
+                id: "credit-pack-100",                title: "100 Credits",                price: "$10",                period: "one-time",                features: [
+                  "Perfect for small projects",                  "No expiration date",                  "Standard video generation"
+                ],
+                button: { text: "Buy Now", href: "/signup" }
+              },
+              {
+                id: "credit-pack-500",                title: "500 Credits",                price: "$40",                period: "one-time",                features: [
+                  "Save 20%",                  "Ideal for regular use",                  "Access to HD generation"
+                ],
+                button: { text: "Buy Now", href: "/signup" }
+              },
+              {
+                id: "credit-pack-1000",                title: "1000 Credits",                price: "$70",                period: "one-time",                features: [
+                  "Save 30%",                  "Best value for power users",                  "Access to 4K Ultra HD generation"
+                ],
+                button: { text: "Buy Now", href: "/signup" }
+              }
+            ]}
+          />
+        </div>
+
+        <div id="contact" data-section="contact">
+          <ContactText
+            useInvertedBackground={false}
+            background={{ variant: "sparkles-gradient" }}
+            text="Have questions about credits or subscriptions?"
+            buttons={[
+              { text: "Contact Support", href: "/#contact" }
+            ]}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="VortexAI"
+            columns={[
+              {
+                title: "Product",                items: [
+                  { label: "Features", href: "/#features" },
+                  { label: "Subscriptions", href: "/subscriptions" },
+                  { label: "Credits", href: "/credits" },
+                  { label: "Dashboard", href: "/dashboard" },
+                  { label: "Login", href: "/login" }
+                ]
+              },
+              {
+                title: "Company",                items: [
+                  { label: "About Us", href: "/#about" },
+                  { label: "Careers", href: "#" },
+                  { label: "Blog", href: "#" },
+                  { label: "Contact", href: "/#contact" }
+                ]
+              },
+              {
+                title: "Resources",                items: [
+                  { label: "Help Center", href: "#" },
+                  { label: "API Docs", href: "#" },
+                  { label: "Community", href: "#" },
+                  { label: "Support", href: "#" }
+                ]
+              },
+              {
+                title: "Legal",                items: [
+                  { label: "Privacy Policy", href: "#" },
+                  { label: "Terms of Service", href: "#" },
+                  { label: "Cookie Policy", href: "#" }
+                ]
+              }
+            ]}
+            copyrightText="© 2024 VortexAI. All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/dashboard/page.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen'; 
+
+const commonNavItems = [
+  { name: "Home", id: "/" },
+  { name: "Features", id: "#features" },
+  { name: "Pricing", id: "#pricing" },
+  { name: "Testimonials", id: "#testimonials" },
+  { name: "FAQ", id: "#faq" },
+  { name: "Contact", id: "#contact" },
+  { name: "Login", id: "/login" },
+  { name: "Signup", id: "/signup" },
+  { name: "Dashboard", id: "/dashboard" }
+];
+
+const commonFooterColumns = [
+  {
+    title: "Product",    items: [
+      { label: "Features", href: "#features" },
+      { label: "Pricing", href: "#pricing" },
+      { label: "Dashboard", href: "/dashboard" },
+      { label: "Login", href: "/login" }
+    ]
+  },
+  {
+    title: "Company",    items: [
+      { label: "About Us", href: "#about" },
+      { label: "Careers", href: "#" },
+      { label: "Blog", href: "#" },
+      { label: "Contact", href: "#contact" }
+    ]
+  },
+  {
+    title: "Resources",    items: [
+      { label: "Help Center", href: "#" },
+      { label: "API Docs", href: "#" },
+      { label: "Community", href: "#" },
+      { label: "Support", href: "#" }
+    ]
+  },
+  {
+    title: "Legal",    items: [
+      { label: "Privacy Policy", href: "#" },
+      { label: "Terms of Service", href: "#" },
+      { label: "Cookie Policy", href: "#" }
+    ]
+  }
+];
+
+export default function DashboardPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="expand-hover"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="smallMedium"
+      sizing="large"
+      background="noiseDiagonalGradient"
+      cardStyle="glass-depth"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="medium"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={commonNavItems}
+            brandName="VortexAI"
+            bottomLeftText="Global AI Community"
+            bottomRightText="support@vortexai.com"
+          />
+        </div>
+
+        <div id="dashboard-content" data-section="dashboard-content" className="min-h-[60vh] flex flex-col items-center justify-center py-16">
+          <MetricCardFourteen
+            useInvertedBackground={false}
+            title="Revenue Overview"
+            tag="Key Metrics"
+            metrics={[
+              { id: "1", value: "$2.5M", description: "Total Revenue" },
+              { id: "2", value: "30%", description: "Growth Rate" },
+              { id: "3", value: "1.2M", description: "Active Users" },
+              { id: "4", value: "85%", description: "Customer Satisfaction" }
+            ]}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="VortexAI"
+            columns={commonFooterColumns}
+            copyrightText="© 2024 VortexAI. All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -32,22 +32,28 @@ export default function LandingPage() {
       <NavbarStyleFullscreen
       navItems={[
         {
-          name: "Home",          id: "home"
+          name: "Home",          id: "/"
         },
         {
-          name: "Features",          id: "features"
+          name: "Features",          id: "#features"
         },
         {
-          name: "Pricing",          id: "pricing"
+          name: "Pricing",          id: "#pricing"
         },
         {
-          name: "Testimonials",          id: "testimonials"
+          name: "Testimonials",          id: "#testimonials"
         },
         {
-          name: "FAQ",          id: "faq"
+          name: "FAQ",          id: "#faq"
         },
         {
-          name: "Contact",          id: "contact"
+          name: "Community",          id: "/community"
+        },
+        {
+          name: "Analytics",          id: "/dashboard/analytics"
+        },
+        {
+          name: "Contact",          id: "/contact"
         }
       ]}
       brandName="VortexAI"
@@ -256,7 +262,7 @@ export default function LandingPage() {
             {
               label: "Pricing",              href: "#pricing"},
             {
-              label: "Dashboard",              href: "/dashboard"},
+              label: "Dashboard",              href: "/dashboard/analytics"},
             {
               label: "Login",              href: "/login"},
           ],
@@ -270,7 +276,7 @@ export default function LandingPage() {
             {
               label: "Blog",              href: "#"},
             {
-              label: "Contact",              href: "#contact"},
+              label: "Contact",              href: "/contact"},
           ],
         },
         {
@@ -280,7 +286,7 @@ export default function LandingPage() {
             {
               label: "API Docs",              href: "#"},
             {
-              label: "Community",              href: "#"},
+              label: "Community",              href: "/community"},
             {
               label: "Support",              href: "#"},
           ],
@@ -302,4 +308,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/signup/page.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import TextAbout from '@/components/sections/about/TextAbout';
+
+const commonNavItems = [
+  { name: "Home", id: "/" },
+  { name: "Features", id: "#features" },
+  { name: "Pricing", id: "#pricing" },
+  { name: "Testimonials", id: "#testimonials" },
+  { name: "FAQ", id: "#faq" },
+  { name: "Contact", id: "#contact" },
+  { name: "Login", id: "/login" },
+  { name: "Signup", id: "/signup" }
+];
+
+const commonFooterColumns = [
+  {
+    title: "Product",    items: [
+      { label: "Features", href: "#features" },
+      { label: "Pricing", href: "#pricing" },
+      { label: "Dashboard", href: "/dashboard" },
+      { label: "Login", href: "/login" }
+    ]
+  },
+  {
+    title: "Company",    items: [
+      { label: "About Us", href: "#about" },
+      { label: "Careers", href: "#" },
+      { label: "Blog", href: "#" },
+      { label: "Contact", href: "#contact" }
+    ]
+  },
+  {
+    title: "Resources",    items: [
+      { label: "Help Center", href: "#" },
+      { label: "API Docs", href: "#" },
+      { label: "Community", href: "#" },
+      { label: "Support", href: "#" }
+    ]
+  },
+  {
+    title: "Legal",    items: [
+      { label: "Privacy Policy", href: "#" },
+      { label: "Terms of Service", href: "#" },
+      { label: "Cookie Policy", href: "#" }
+    ]
+  }
+];
+
+export default function SignupPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="expand-hover"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="smallMedium"
+      sizing="large"
+      background="noiseDiagonalGradient"
+      cardStyle="glass-depth"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="medium"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={commonNavItems}
+            brandName="VortexAI"
+            bottomLeftText="Global AI Community"
+            bottomRightText="support@vortexai.com"
+          />
+        </div>
+
+        <div id="signup-content" data-section="signup-content" className="min-h-[60vh] flex items-center justify-center py-16">
+          <TextAbout
+            useInvertedBackground={false}
+            title="Create Your VortexAI Account"
+            buttons={[
+              { text: "Already have an account? Login", href: "/login" }
+            ]}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="VortexAI"
+            columns={commonFooterColumns}
+            copyrightText="© 2024 VortexAI. All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/subscriptions/page.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import ContactText from '@/components/sections/contact/ContactText';
+import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
+
+export const metadata = {
+  title: 'VortexAI | Subscription Plans',
+  description: 'Explore VortexAI\'s monthly subscription plans with different credit limits and premium features.',
+};
+
+export default function SubscriptionsPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="expand-hover"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="rounded"
+        contentWidth="smallMedium"
+        sizing="large"
+        background="noiseDiagonalGradient"
+        cardStyle="glass-depth"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="medium"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Features", id: "/#features" },
+              { name: "Subscriptions", id: "/subscriptions" },
+              { name: "Credits", id: "/credits" },
+              { name: "Testimonials", id: "/#testimonials" },
+              { name: "FAQ", id: "/#faq" },
+              { name: "Contact", id: "/#contact" }
+            ]}
+            brandName="VortexAI"
+            bottomLeftText="Global AI Community"
+            bottomRightText="support@vortexai.com"
+          />
+        </div>
+
+        <div id="subscriptions" data-section="subscriptions">
+          <PricingCardTwo
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            title="Choose Your Subscription Plan"
+            description="Unlock continuous creativity with our monthly subscription plans, offering generous credit allowances and exclusive features."
+            plans={[
+              {
+                id: "starter",                badge: "Free Trial",                price: "$0",                subtitle: "Perfect for trying out the platform",                buttons: [{ text: "Start Free", href: "/signup" }],
+                features: [
+                  "5 Credits/month",                  "Basic video generation",                  "Standard definition",                  "Community support"
+                ]
+              },
+              {
+                id: "pro",                badge: "Most Popular",                price: "$29/month",                subtitle: "For serious creators and professionals",                buttons: [{ text: "Get Pro", href: "/signup" }],
+                features: [
+                  "500 Credits/month",                  "All advanced features",                  "High definition",                  "Priority support",                  "Community Prompt Library access"
+                ]
+              },
+              {
+                id: "unlimited",                badge: "Ultimate Value",                price: "$99/month",                subtitle: "Unleash limitless creativity",                buttons: [{ text: "Go Unlimited", href: "/signup" }],
+                features: [
+                  "Unlimited Credits",                  "All advanced features",                  "4K Ultra HD",                  "24/7 Premium support",                  "Exclusive Style Library"
+                ]
+              }
+            ]}
+          />
+        </div>
+
+        <div id="contact" data-section="contact">
+          <ContactText
+            useInvertedBackground={false}
+            background={{ variant: "sparkles-gradient" }}
+            text="Have questions about our subscription plans?"
+            buttons={[
+              { text: "Contact Sales", href: "/#contact" }
+            ]}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="VortexAI"
+            columns={[
+              {
+                title: "Product",                items: [
+                  { label: "Features", href: "/#features" },
+                  { label: "Subscriptions", href: "/subscriptions" },
+                  { label: "Credits", href: "/credits" },
+                  { label: "Dashboard", href: "/dashboard" },
+                  { label: "Login", href: "/login" }
+                ]
+              },
+              {
+                title: "Company",                items: [
+                  { label: "About Us", href: "/#about" },
+                  { label: "Careers", href: "#" },
+                  { label: "Blog", href: "#" },
+                  { label: "Contact", href: "/#contact" }
+                ]
+              },
+              {
+                title: "Resources",                items: [
+                  { label: "Help Center", href: "#" },
+                  { label: "API Docs", href: "#" },
+                  { label: "Community", href: "#" },
+                  { label: "Support", href: "#" }
+                ]
+              },
+              {
+                title: "Legal",                items: [
+                  { label: "Privacy Policy", href: "#" },
+                  { label: "Terms of Service", href: "#" },
+                  { label: "Cookie Policy", href: "#" }
+                ]
+              }
+            ]}
+            copyrightText="© 2024 VortexAI. All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/middleware.ts

@@ -0,0 +1,35 @@
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
+// This is a placeholder for actual authentication logic.
+// In a real app, you'd check for a session token, JWT, etc.
+const isAuthenticatedAdmin = (req: NextRequest) => {
+  // For demonstration: Assume an admin is authenticated if a specific cookie exists.
+  // In a real application, this would involve checking a secure session or token.
+  const adminCookie = req.cookies.get('adminAuthToken');
+  return adminCookie && adminCookie.value === 'true'; // Placeholder logic
+};
+
+export function middleware(req: NextRequest) {
+  const { pathname } = req.nextUrl;
+
+  // Protect all /admin routes except /admin/login
+  if (pathname.startsWith('/admin') && pathname !== '/admin/login') {
+    if (!isAuthenticatedAdmin(req)) {
+      const loginUrl = new URL('/admin/login', req.url);
+      return NextResponse.redirect(loginUrl);
+    }
+  }
+
+  // If trying to access /admin/login but already authenticated, redirect to /admin
+  if (pathname === '/admin/login' && isAuthenticatedAdmin(req)) {
+    const adminDashboardUrl = new URL('/admin', req.url);
+    return NextResponse.redirect(adminDashboardUrl);
+  }
+
+  return NextResponse.next();
+}
+
+export const config = {
+  matcher: ['/admin/:path*'], // Apply middleware to all paths under /admin
+};