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/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"
@@ -240,7 +246,7 @@ export default function LandingPage() {
       text="Ready to revolutionize your video creation workflow?"
       buttons={[
         {
-          text: "Contact Us",          href: "#contact"},
+          text: "Contact Us",          href: "/contact"},
       ]}
     />
   </div>
@@ -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: "#"},
           ],

src/app/signup/page.tsx

@@ -0,0 +1,99 @@
+"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", href: "/" },
+  { name: "Features", href: "#features" },
+  { name: "Pricing", href: "#pricing" },
+  { name: "Testimonials", href: "#testimonials" },
+  { name: "FAQ", href: "#faq" },
+  { name: "Contact", href: "#contact" },
+  { name: "Login", href: "/login" },
+  { name: "Signup", href: "/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"
+            description="Sign up to start transforming your stories into stunning AI videos."
+            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>
+  );
+}