src/app/page.tsx

@@ -12,7 +12,7 @@ import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
 import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
-import { BarChart, FileText, Zap, Mail, Phone, MapPin, Download } from "lucide-react";
+import { BarChart, FileText, Zap, Mail, Phone, MapPin, Download, Users, PieChart, Database, Settings } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -32,25 +32,27 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleFullscreen
       navItems={[
-        { name: "Features", id: "features" },
-        { name: "Pricing", id: "pricing" },
-        { name: "Contact", id: "contact" },
+        { name: "Dashboard", id: "hero" },
+        { name: "User Management", id: "features" },
+        { name: "Analytics", id: "metrics" },
+        { name: "Content", id: "about" },
+        { name: "Settings", id: "contact" },
       ]}
-      brandName="ResumeAI"
+      brandName="AdminPanel"
     />
   </div>
 
   <div id="hero" data-section="hero">
       <HeroLogoBillboard
       background={{ variant: "gradient-bars" }}
-      logoText="ResumeAI"
-      description="Craft professional, AI-powered resumes in seconds. Your career journey starts with a perfect document."
+      logoText="Admin Panel"
+      description="Centralized hub for user management, real-time analytics, and content administration."
       buttons={[
-        { text: "Start Building", href: "#" },
-        { text: "View Pricing", href: "#pricing" },
+        { text: "View Dashboard", href: "#metrics" },
+        { text: "System Settings", href: "#contact" },
       ]}
-      imageSrc="http://img.b2bpic.net/free-photo/resume-application-employment-form-concept_53876-125148.jpg?_wi=1"
-      imageAlt="AI Resume Dashboard Preview"
+      imageSrc="http://img.b2bpic.net/free-photo/dashboard-ui-preview_53876-125148.jpg?_wi=1"
+      imageAlt="Admin Dashboard Preview"
       mediaAnimation="slide-up"
     />
   </div>
@@ -61,35 +63,35 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       features={[
-        { title: "AI Content Generation", description: "Write compelling job descriptions and bios automatically.", bentoComponent: "reveal-icon", icon: Zap },
-        { title: "Instant PDF Export", description: "Download your resume in high-quality PDF format instantly.", bentoComponent: "reveal-icon", icon: FileText },
-        { title: "Dashboard Analytics", description: "Track resume views and performance easily.", bentoComponent: "reveal-icon", icon: BarChart },
-        { title: "Template Customization", description: "Easily switch between professional, modern, and creative templates.", bentoComponent: "reveal-icon", icon: Download },
+        { title: "User Management", description: "Manage roles, permissions, and user status.", bentoComponent: "reveal-icon", icon: Users },
+        { title: "System Logs", description: "Audit trail and security monitoring.", bentoComponent: "reveal-icon", icon: Database },
+        { title: "Analytics Dashboard", description: "Real-time monitoring of platform metrics.", bentoComponent: "reveal-icon", icon: PieChart },
+        { title: "Content Control", description: "Manage CMS entities and media assets.", bentoComponent: "reveal-icon", icon: FileText },
       ]}
-      title="Smart Features for Professionals"
-      description="Built for modern job seekers who value efficiency and design."
+      title="Administration Tools"
+      description="Full control over your system ecosystem."
     />
   </div>
 
   <div id="about" data-section="about">
       <MediaAbout
       useInvertedBackground={true}
-      title="Designed for Success"
-      description="ResumeAI uses advanced NLP technology to help you stand out. We provide templates that pass ATS scanners and look beautiful on any screen."
-      imageSrc="http://img.b2bpic.net/free-photo/medium-shot-man-sitting-desk-with-laptop_23-2149130557.jpg"
-      imageAlt="Professional working on laptop in a dark office"
+      title="System Integrity"
+      description="Our admin panel ensures secure access control and streamlined workflows. Designed for enterprise-level visibility."
+      imageSrc="http://img.b2bpic.net/free-photo/data-analysis-report_23-2149130557.jpg"
+      imageAlt="Data Analytics Dashboard"
     />
   </div>
 
   <div id="metrics" data-section="metrics">
       <MetricCardFourteen
       useInvertedBackground={false}
-      title="Milestones We Help Achieve"
-      tag="Impact"
+      title="Platform Performance"
+      tag="Analytics"
       metrics={[
-        { id: "1", value: "50k+", description: "Resumes Generated" },
-        { id: "2", value: "98%", description: "User Satisfaction" },
-        { id: "3", value: "12k+", description: "Hired Users" },
+        { id: "1", value: "12k", description: "Active Users" },
+        { id: "2", value: "99.9%", description: "Uptime Status" },
+        { id: "3", value: "2.4ms", description: "Avg Latency" },
       ]}
       metricsAnimation="slide-up"
     />
@@ -102,16 +104,16 @@ export default function LandingPage() {
       useInvertedBackground={true}
       plans={[
         {
-          id: "free", title: "Basic", price: "$0", period: "/mo",          features: ["1 Resume Template", "Basic AI Drafts", "PDF Export"],
-          button: { text: "Get Started", href: "#" },
-          imageSrc: "http://img.b2bpic.net/free-photo/document-front-side-with-white-background_187299-39839.jpg"},
+          id: "basic", title: "Standard Admin", price: "Free", period: "Included",          features: ["User CRUD", "Basic Analytics", "Support"],
+          button: { text: "Configure", href: "#" },
+          imageSrc: "http://img.b2bpic.net/free-photo/settings-gear-icon.jpg"},
         {
-          id: "pro", title: "Pro", price: "$19", period: "/mo",          features: ["Unlimited Resumes", "AI Resume Optimization", "Advanced Analytics", "Custom Templates"],
-          button: { text: "Upgrade Pro", href: "#" },
-          imageSrc: "http://img.b2bpic.net/free-photo/resume-application-employment-form-concept_53876-125148.jpg?_wi=2"},
+          id: "pro", title: "Enterprise Admin", price: "$49", period: "/mo",          features: ["Advanced Analytics", "Security Audits", "API Access", "Custom Integrations"],
+          button: { text: "Upgrade", href: "#" },
+          imageSrc: "http://img.b2bpic.net/free-photo/dashboard-ui-preview_53876-125148.jpg?_wi=2"},
       ]}
-      title="Transparent Pricing"
-      description="Start for free or upgrade for advanced features."
+      title="Admin Tier Access"
+      description="Tailored tools for different administrative roles."
     />
   </div>
 
@@ -120,11 +122,11 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       testimonials={[
-        { id: "1", title: "Career Switcher", quote: "Finally, a resume builder that actually works.", name: "Alice Wong", role: "Marketing", imageSrc: "http://img.b2bpic.net/free-photo/closeup-serious-middle-aged-business-leader_1262-4838.jpg" },
-        { id: "2", title: "Software Dev", quote: "My new resume got me 5 interviews in 2 weeks.", name: "Bob Smith", role: "Engineer", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-blonde-businesswoman-formal-dressed-isolated-dark-textured-background_613910-5399.jpg" },
+        { id: "1", title: "IT Operations", quote: "The user management suite saved our team hours every week.", name: "Sarah Jen", role: "CTO", imageSrc: "http://img.b2bpic.net/free-photo/portrait-business-woman.jpg" },
+        { id: "2", title: "Security Team", quote: "Seamless monitoring and real-time alerts.", name: "Mark V", role: "SecOps", imageSrc: "http://img.b2bpic.net/free-photo/portrait-professional-man.jpg" },
       ]}
-      title="Trusted by Thousands"
-      description="Hear what our successful users have to say."
+      title="Administrator Feedback"
+      description="Why teams trust our management dashboard."
     />
   </div>
 
@@ -133,41 +135,41 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={true}
       faqs={[
-        { id: "f1", title: "Is it free to start?", content: "Yes, our basic plan is free." },
-        { id: "f2", title: "Can I export to PDF?", content: "Yes, high-resolution PDF exports are included." },
+        { id: "f1", title: "How to reset permissions?", content: "Go to the User Management tab and select 'Edit Permissions'." },
+        { id: "f2", title: "Is analytics live?", content: "Yes, the metrics dashboard updates in real-time." },
       ]}
-      title="Common Questions"
-      description="Everything you need to know."
+      title="Admin FAQ"
+      description="Common operational queries."
       faqsAnimation="slide-up"
-      imageSrc="http://img.b2bpic.net/free-photo/person-typing-into-ai-chatbot-system-automate-her-workflow-home-office_482257-122978.jpg"
+      imageSrc="http://img.b2bpic.net/free-photo/person-analyzing-data-screens.jpg"
     />
   </div>
 
   <div id="contact" data-section="contact">
       <ContactSplitForm
-        title="Get in Touch"
-        description="We're here to help you succeed. Have questions about our templates or PDF exports? Contact our support team."
+        title="System Support"
+        description="Need assistance configuring the panel or reporting a bug? Our engineering support is available 24/7."
         inputs={[
-          { name: "name", type: "text", placeholder: "Full Name" },
-          { name: "email", type: "email", placeholder: "Email Address" }
+          { name: "subject", type: "text", placeholder: "Issue Subject" },
+          { name: "email", type: "email", placeholder: "Emergency Contact Email" }
         ]}
-        textarea={{ name: "message", placeholder: "How can we help?" }}
-        buttonText="Send Message"
+        textarea={{ name: "details", placeholder: "Provide technical details here..." }}
+        buttonText="Submit Ticket"
         useInvertedBackground={false}
       />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterCard
-      logoText="ResumeAI"
+      logoText="AdminPanel"
       socialLinks={[
-        { icon: Mail, href: "mailto:support@resumeai.com", ariaLabel: "Email" },
-        { icon: Phone, href: "tel:+15550123456", ariaLabel: "Phone" },
-        { icon: MapPin, href: "#", ariaLabel: "Address" }
+        { icon: Mail, href: "mailto:ops@adminpanel.com", ariaLabel: "Support Email" },
+        { icon: Settings, href: "#", ariaLabel: "Configuration" },
+        { icon: MapPin, href: "#", ariaLabel: "HQ Address" }
       ]}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/pricing/page.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import { Mail, Phone, MapPin, Zap, CheckCircle, Star } from "lucide-react";
+
+export default function PricingPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="elastic-effect"
+        defaultTextAnimation="background-highlight"
+        borderRadius="soft"
+        contentWidth="medium"
+        sizing="large"
+        background="none"
+        cardStyle="gradient-bordered"
+        primaryButtonStyle="diagonal-gradient"
+        secondaryButtonStyle="solid"
+        headingFontWeight="extrabold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "hero" },
+              { name: "Features", id: "features" },
+              { name: "Pricing", id: "pricing" },
+              { name: "Contact", id: "contact" },
+            ]}
+            brandName="ResumeAI"
+          />
+        </div>
+
+        <div id="pricing" data-section="pricing">
+          <PricingCardThree
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            title="Flexible Pricing Plans"
+            description="Choose the plan that best fits your career development needs."
+            plans={[
+              {
+                id: "basic",                name: "Basic",                price: "$0",                features: ["1 Resume Template", "Standard AI Support", "PDF Export"],
+                buttons: [{ text: "Get Started", href: "#" }]
+              },
+              {
+                id: "pro",                name: "Pro",                price: "$19",                badge: "Popular",                badgeIcon: Star,
+                features: ["Unlimited Resumes", "Advanced AI Optimization", "Dashboard Analytics", "Priority Support"],
+                buttons: [{ text: "Upgrade Pro", href: "#" }]
+              },
+              {
+                id: "enterprise",                name: "Enterprise",                price: "$49",                features: ["Everything in Pro", "Team Collaboration", "Dedicated Manager", "SSO Access"],
+                buttons: [{ text: "Contact Sales", href: "#contact" }]
+              }
+            ]}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterCard
+            logoText="ResumeAI"
+            socialLinks={[
+              { icon: Mail, href: "mailto:support@resumeai.com", ariaLabel: "Email" },
+              { icon: Phone, href: "tel:+15550123456", ariaLabel: "Phone" },
+              { icon: MapPin, href: "#", ariaLabel: "Address" }
+            ]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/resume-builder/page.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import { Mail, Phone, MapPin } from "lucide-react";
+
+export default function ResumeBuilderPage() {
+  const [personal, setPersonal] = useState({ name: "", email: "", phone: "" });
+  const [experience, setExperience] = useState("");
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="elastic-effect"
+        defaultTextAnimation="background-highlight"
+        borderRadius="soft"
+        contentWidth="medium"
+        sizing="large"
+        background="none"
+        cardStyle="gradient-bordered"
+        primaryButtonStyle="diagonal-gradient"
+        secondaryButtonStyle="solid"
+        headingFontWeight="extrabold"
+    >
+      <ReactLenis root>
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Features", id: "/#features" },
+            { name: "Pricing", id: "/#pricing" },
+            { name: "Resume Builder", id: "/resume-builder" },
+            { name: "Contact", id: "/#contact" },
+          ]}
+          brandName="ResumeAI"
+        />
+        
+        <main className="pt-32 pb-20 px-6 container mx-auto grid md:grid-cols-2 gap-12">
+          <section>
+            <h1 className="text-4xl font-extrabold mb-8">Build Your Resume</h1>
+            <div className="space-y-6">
+              <div className="p-6 rounded-xl border border-border bg-card">
+                <h2 className="text-xl font-bold mb-4">Personal Info</h2>
+                <input 
+                  className="w-full p-3 mb-3 border rounded" 
+                  placeholder="Full Name" 
+                  value={personal.name} 
+                  onChange={(e) => setPersonal({...personal, name: e.target.value})} 
+                />
+                <input 
+                  className="w-full p-3 mb-3 border rounded" 
+                  placeholder="Email" 
+                  value={personal.email} 
+                  onChange={(e) => setPersonal({...personal, email: e.target.value})} 
+                />
+              </div>
+              <div className="p-6 rounded-xl border border-border bg-card">
+                <h2 className="text-xl font-bold mb-4">Experience</h2>
+                <textarea 
+                  className="w-full p-3 border rounded" 
+                  rows={5} 
+                  placeholder="Describe your work experience..." 
+                  value={experience} 
+                  onChange={(e) => setExperience(e.target.value)} 
+                />
+              </div>
+            </div>
+          </section>
+          
+          <section className="sticky top-24 h-fit p-8 rounded-2xl border border-border bg-muted">
+            <h2 className="text-2xl font-bold mb-6">Live Preview</h2>
+            <div className="bg-white p-10 text-black shadow-lg rounded-sm min-h-[400px]">
+              <h3 className="text-3xl font-bold border-b pb-2">{personal.name || "Your Name"}</h3>
+              <p className="mt-2">{personal.email || "email@example.com"}</p>
+              <h4 className="font-bold mt-6 mb-2 uppercase text-xs tracking-widest">Experience</h4>
+              <p className="whitespace-pre-wrap">{experience || "Experience details will appear here..."}</p>
+            </div>
+          </section>
+        </main>
+
+        <FooterCard
+          logoText="ResumeAI"
+          socialLinks={[
+            { icon: Mail, href: "mailto:support@resumeai.com", ariaLabel: "Email" },
+            { icon: Phone, href: "tel:+15550123456", ariaLabel: "Phone" },
+            { icon: MapPin, href: "#", ariaLabel: "Address" }
+          ]}
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/settings/page.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import { Mail, Phone, MapPin, User, Settings, Bell, CreditCard, Lock } from "lucide-react";
+
+export default function SettingsPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="elastic-effect"
+        defaultTextAnimation="background-highlight"
+        borderRadius="soft"
+        contentWidth="medium"
+        sizing="large"
+        background="none"
+        cardStyle="gradient-bordered"
+        primaryButtonStyle="diagonal-gradient"
+        secondaryButtonStyle="solid"
+        headingFontWeight="extrabold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Features", id: "/features" },
+              { name: "Pricing", id: "/pricing" },
+              { name: "Settings", id: "/settings" },
+            ]}
+            brandName="ResumeAI"
+          />
+        </div>
+
+        <main className="py-24 px-6">
+          <div className="max-w-4xl mx-auto space-y-12">
+            <h1 className="text-4xl font-bold">Account Settings</h1>
+            
+            <section className="space-y-6">
+              <h2 className="text-2xl font-semibold flex items-center gap-2"><User /> Profile Information</h2>
+              <div className="grid gap-4 p-6 border rounded-xl">
+                <p>Manage your public profile and account details here.</p>
+              </div>
+            </section>
+
+            <section className="space-y-6">
+              <h2 className="text-2xl font-semibold flex items-center gap-2"><Settings /> Account Preferences</h2>
+              <div className="grid gap-4 p-6 border rounded-xl">
+                <p>Customize your language, region, and security settings.</p>
+              </div>
+            </section>
+
+            <section className="space-y-6">
+              <h2 className="text-2xl font-semibold flex items-center gap-2"><Bell /> Notification Settings</h2>
+              <div className="grid gap-4 p-6 border rounded-xl">
+                <p>Manage your email notifications and alerts.</p>
+              </div>
+            </section>
+
+            <section className="space-y-6">
+              <h2 className="text-2xl font-semibold flex items-center gap-2"><CreditCard /> Subscription Management</h2>
+              <div className="grid gap-4 p-6 border rounded-xl">
+                <p>View your current plan and billing information.</p>
+              </div>
+            </section>
+          </div>
+        </main>
+
+        <div id="footer" data-section="footer">
+          <FooterCard
+            logoText="ResumeAI"
+            socialLinks={[
+              { icon: Mail, href: "mailto:support@resumeai.com", ariaLabel: "Email" },
+              { icon: Phone, href: "tel:+15550123456", ariaLabel: "Phone" },
+              { icon: MapPin, href: "#", ariaLabel: "Address" }
+            ]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/styles/variables.css

@@ -12,13 +12,13 @@
 
   --background: #0a0a0a;
   --card: #1a1a1a;
-  --foreground: #ffffffe6;
-  --primary-cta: #cee7ff;
+  --foreground: #f5f5f5;
+  --primary-cta: #106efb;
   --primary-cta-text: #0a0a0a;
   --secondary-cta: #1a1a1a;
   --secondary-cta-text: #ffffffe6;
-  --accent: #737373;
-  --background-accent: #737373;
+  --accent: #3f5c79;
+  --background-accent: #004a93;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);

src/app/templates/page.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
+import { LayoutGrid, Palette, Zap, FileText } from "lucide-react";
+
+export default function TemplatesPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="elastic-effect"
+        defaultTextAnimation="background-highlight"
+        borderRadius="soft"
+        contentWidth="medium"
+        sizing="large"
+        background="none"
+        cardStyle="gradient-bordered"
+        primaryButtonStyle="diagonal-gradient"
+        secondaryButtonStyle="solid"
+        headingFontWeight="extrabold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+            <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Features", id: "/#features" },
+              { name: "Templates", id: "/templates" },
+              { name: "Pricing", id: "/#pricing" },
+              { name: "Contact", id: "/#contact" },
+            ]}
+            brandName="ResumeAI"
+          />
+        </div>
+
+        <div id="gallery" data-section="gallery" className="pt-32 pb-20">
+            <FeatureHoverPattern
+              title="Resume Template Gallery"
+              description="Select from our curated collection of professional, modern, and creative resume templates designed to impress recruiters."
+              animationType="slide-up"
+              textboxLayout="split"
+              useInvertedBackground={false}
+              features={[
+                { icon: LayoutGrid, title: "Professional Minimalist", description: "Clean layout optimized for corporate roles." },
+                { icon: Palette, title: "Modern Creative", description: "Showcase your design skills with bold layouts." },
+                { icon: Zap, title: "Tech Focused", description: "ATS-friendly format tailored for developers." },
+                { icon: FileText, title: "Academic Standard", description: "Structured for research and education paths." },
+              ]}
+            />
+        </div>
+
+        <div id="footer" data-section="footer">
+            <FooterCard
+            logoText="ResumeAI"
+            socialLinks={[]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}