Update src/app/dashboard/page.tsx

Merge version_4 into main

src/app/dashboard/page.tsx

@@ -0,0 +1,168 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import { useState } from "react";
+import { Upload, Music, BookOpen, Download, Play, Plus } from "lucide-react";
+
+export default function DashboardPage() {
+  const [uploadedFiles, setUploadedFiles] = useState<Array<{id: string; name: string; status: 'processing' | 'ready'; audioUrl?: string}>>([{
+    id: "1", name: "Calculus I - Chapter 3.pdf", status: "ready", audioUrl: "/audio/calculus-3.mp3" },
+    { id: "2", name: "Biology Notes - Photosynthesis.docx", status: "processing" },
+  ]);
+
+  const [materials, setMaterials] = useState<Array<{id: string; title: string; creator: string; subject: string; downloads: number}>>([{
+    id: "m1", title: "Physics Fundamentals", creator: "Prof. James Chen", subject: "Physics", downloads: 1250 },
+    { id: "m2", title: "History of Africa", creator: "Dr. Amara Okonkwo", subject: "History", downloads: 892 },
+    { id: "m3", title: "Advanced Chemistry", creator: "Prof. Sarah Kipchoge", subject: "Chemistry", downloads: 654 },
+    { id: "m4", title: "Literature Analysis", creator: "Dr. Kwesi Mensah", subject: "Literature", downloads: 456 },
+  ]);
+
+  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (files) {
+      Array.from(files).forEach((file) => {
+        setUploadedFiles([...uploadedFiles, {
+          id: Date.now().toString(),
+          name: file.name,
+          status: "processing"
+        }]);
+      });
+    }
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="large"
+      background="aurora"
+      cardStyle="glass-depth"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Dashboard", id: "dashboard" },
+            { name: "Materials", id: "materials" },
+            { name: "My Uploads", id: "uploads" },
+            { name: "Home", id: "/" },
+            { name: "Contact", id: "contact" },
+          ]}
+          button={{ text: "Start Learning Free", href: "contact" }}
+          brandName="AudioByte"
+        />
+      </div>
+
+      <main className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 pt-24 pb-12">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          {/* Header */}
+          <div className="mb-12">
+            <h1 className="text-4xl font-bold text-gray-900 mb-2">Your Learning Dashboard</h1>
+            <p className="text-gray-600">Upload lecture notes and access materials from creators and artists</p>
+          </div>
+
+          {/* Upload Section */}
+          <div className="bg-white rounded-lg shadow-md p-8 mb-12">
+            <div className="flex items-center gap-3 mb-6">
+              <Upload className="w-6 h-6 text-blue-600" />
+              <h2 className="text-2xl font-semibold text-gray-900">Generate Audio from Your Notes</h2>
+            </div>
+            <div className="border-2 border-dashed border-blue-300 rounded-lg p-8 text-center hover:border-blue-500 transition cursor-pointer">
+              <input
+                type="file"
+                multiple
+                onChange={handleFileUpload}
+                className="hidden"
+                id="file-upload"
+                accept=".pdf,.doc,.docx,.txt,.pptx"
+              />
+              <label htmlFor="file-upload" className="cursor-pointer">
+                <div className="mb-4">
+                  <Music className="w-12 h-12 text-blue-600 mx-auto mb-2" />
+                  <p className="text-lg font-medium text-gray-900">Drop files here or click to upload</p>
+                  <p className="text-sm text-gray-500 mt-2">Supports PDF, Word, PowerPoint, and text files</p>
+                </div>
+              </label>
+            </div>
+          </div>
+
+          {/* My Uploads */}
+          <div className="bg-white rounded-lg shadow-md p-8 mb-12">
+            <div className="flex items-center gap-3 mb-6">
+              <BookOpen className="w-6 h-6 text-green-600" />
+              <h2 className="text-2xl font-semibold text-gray-900">My Uploaded Materials</h2>
+            </div>
+            <div className="space-y-3">
+              {uploadedFiles.map((file) => (
+                <div key={file.id} className="flex items-center justify-between p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition">
+                  <div className="flex items-center gap-3 flex-1">
+                    <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
+                      <Music className="w-5 h-5 text-blue-600" />
+                    </div>
+                    <div>
+                      <p className="font-medium text-gray-900">{file.name}</p>
+                      <p className="text-xs text-gray-500">
+                        {file.status === "processing" ? "Processing..." : "Ready to listen"}
+                      </p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    {file.status === "ready" && file.audioUrl && (
+                      <>
+                        <button className="p-2 hover:bg-blue-100 rounded-lg transition text-blue-600" title="Play">
+                          <Play className="w-5 h-5" />
+                        </button>
+                        <button className="p-2 hover:bg-blue-100 rounded-lg transition text-blue-600" title="Download">
+                          <Download className="w-5 h-5" />
+                        </button>
+                      </>
+                    )}
+                    {file.status === "processing" && (
+                      <div className="animate-spin">
+                        <Music className="w-5 h-5 text-blue-600" />
+                      </div>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Online Materials */}
+          <div className="bg-white rounded-lg shadow-md p-8">
+            <div className="flex items-center justify-between mb-6">
+              <div className="flex items-center gap-3">
+                <BookOpen className="w-6 h-6 text-purple-600" />
+                <h2 className="text-2xl font-semibold text-gray-900">Online Materials from Creators</h2>
+              </div>
+              <button className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition">
+                <Plus className="w-4 h-4" />
+                Add Material
+              </button>
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+              {materials.map((material) => (
+                <div key={material.id} className="border border-gray-200 rounded-lg p-4 hover:shadow-lg transition cursor-pointer">
+                  <div className="w-full h-32 bg-gradient-to-br from-purple-400 to-pink-400 rounded-lg mb-3 flex items-center justify-center">
+                    <BookOpen className="w-8 h-8 text-white" />
+                  </div>
+                  <h3 className="font-semibold text-gray-900 mb-1">{material.title}</h3>
+                  <p className="text-sm text-gray-600 mb-2">{material.creator}</p>
+                  <div className="flex items-center justify-between">
+                    <span className="text-xs bg-purple-100 text-purple-700 px-2 py-1 rounded">{material.subject}</span>
+                    <span className="text-xs text-gray-500">{material.downloads} downloads</span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </main>
+    </ThemeProvider>
+  );
+}

src/app/layout.tsx

@@ -1,29 +1,20 @@
 import type { Metadata } from "next";
-import { Public_Sans } from "next/font/google";
-import { Halant } from "next/font/google";
 import { Inter } from "next/font/google";
 import "./globals.css";
 import { ServiceWrapper } from "@/components/ServiceWrapper";
 import Tag from "@/tag/Tag";
 
-const publicSans = Public_Sans({
-  variable: "--font-public-sans",  subsets: ["latin"],
-});
-
-const halant = Halant({
-  variable: "--font-halant",  subsets: ["latin"],
-  weight: ["300", "400", "500", "600", "700"],
-});
-
 const inter = Inter({
   variable: "--font-inter",  subsets: ["latin"],
 });
 
 export const metadata: Metadata = {
   title: "AudioByte | AI Audio Learning for African Students",  description: "Transform your lecture notes and PDFs into high-quality audio explanations. Study offline on mobile, prepare for exams smarter, and improve grades with AudioByte.",  keywords: "audio learning, exam prep, African students, lecture notes, mobile learning, edtech, study app",  openGraph: {
-    title: "AudioByte | Your Notes, Explained Your Way, Anywhere",    description: "Convert lecture materials to audio explanations instantly. Study on your mobile, anywhere, anytime.",    siteName: "AudioByte",    type: "website"},
+    title: "AudioByte | Your Notes, Explained Your Way, Anywhere",    description: "Convert lecture materials to audio explanations instantly. Study on your mobile, anywhere, anytime.",    siteName: "AudioByte",    type: "website"
+  },
   twitter: {
-    card: "summary_large_image",    title: "AudioByte | Smart Audio Learning for Students",    description: "Upload PDFs, get instant audio explanations. Perfect for exam prep and on-the-go learning."},
+    card: "summary_large_image",    title: "AudioByte | Smart Audio Learning for Students",    description: "Upload PDFs, get instant audio explanations. Perfect for exam prep and on-the-go learning."
+  },
 };
 
 export default function RootLayout({
@@ -35,7 +26,7 @@ export default function RootLayout({
     <html lang="en" suppressHydrationWarning>
       <ServiceWrapper>
         <body
-          className={`${publicSans.variable} ${halant.variable} ${inter.variable} antialiased`}
+          className={`${inter.variable} antialiased`}
         >
           <Tag />
           {children}

src/app/page.tsx

@@ -14,16 +14,16 @@ import { Zap, Smartphone, Brain, BarChart3, Wifi, Headphones, Sparkles } from "l
 export default function LandingPage() {
   return (
     <ThemeProvider
-      defaultButtonVariant="hover-bubble"
-      defaultTextAnimation="reveal-blur"
-      borderRadius="soft"
-      contentWidth="compact"
-      sizing="mediumLargeSizeMediumTitles"
-      background="noise"
-      cardStyle="gradient-radial"
-      primaryButtonStyle="primary-glow"
-      secondaryButtonStyle="layered"
-      headingFontWeight="semibold"
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="large"
+      background="aurora"
+      cardStyle="glass-depth"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
         <NavbarStyleCentered
@@ -31,7 +31,7 @@ export default function LandingPage() {
             { name: "Features", id: "features" },
             { name: "How It Works", id: "how-it-works" },
             { name: "Testimonials", id: "testimonials" },
-            { name: "Pricing", id: "pricing" },
+            { name: "Dashboard", id: "/dashboard" },
             { name: "Contact", id: "contact" },
           ]}
           button={{ text: "Start Learning Free", href: "contact" }}
@@ -46,17 +46,20 @@ export default function LandingPage() {
           avatarText="Trusted by 5,000+ African students"
           avatars={[
             {
-              src: "http://img.b2bpic.net/free-photo/young-beautiful-african-woman-student-resting-relaxing-sitting-cafe-smiling-drinking-coffee_176420-12467.jpg",              alt: "student African portrait university"},
+              src: "http://img.b2bpic.net/free-photo/young-beautiful-african-woman-student-resting-relaxing-sitting-cafe-smiling-drinking-coffee_176420-12467.jpg",              alt: "student African portrait university"
+            },
             {
-              src: "http://img.b2bpic.net/free-photo/portrait-happy-african-american-female-college-student-holding-notebooks-backpack-smiling-standing-yellow-background_1258-54844.jpg",              alt: "student African portrait young adult"},
+              src: "http://img.b2bpic.net/free-photo/portrait-happy-african-american-female-college-student-holding-notebooks-backpack-smiling-standing-yellow-background_1258-54844.jpg",              alt: "student African portrait young adult"
+            },
             {
-              src: "http://img.b2bpic.net/free-photo/black-businessman-happy-expression_1194-2533.jpg",              alt: "student African portrait professional"},
+              src: "http://img.b2bpic.net/free-photo/black-businessman-happy-expression_1194-2533.jpg",              alt: "student African portrait professional"
+            },
           ]}
           buttons={[
             { text: "Start Learning Free", href: "contact" },
             { text: "Watch Demo", onClick: undefined },
           ]}
-          background={{ variant: "downward-rays-static" }}
+          background={{ variant: "sparkles-gradient" }}
           buttonAnimation="slide-up"
           ariaLabel="AudioByte hero section"
         />
@@ -71,22 +74,28 @@ export default function LandingPage() {
           features={[
             {
               icon: Zap,
-              title: "Instant Conversion",              description: "Upload any document and get high-quality audio explanations in seconds, not hours."},
+              title: "Instant Conversion",              description: "Upload any document and get high-quality audio explanations in seconds, not hours."
+            },
             {
               icon: Smartphone,
-              title: "Mobile-First Learning",              description: "Study anywhere on your phone. Perfect for commutes, breaks, or exam prep sessions."},
+              title: "Mobile-First Learning",              description: "Study anywhere on your phone. Perfect for commutes, breaks, or exam prep sessions."
+            },
             {
               icon: Brain,
-              title: "Better Retention",              description: "Audio explanations engage multiple learning pathways, improving exam performance."},
+              title: "Better Retention",              description: "Audio explanations engage multiple learning pathways, improving exam performance."
+            },
             {
               icon: BarChart3,
-              title: "Track Progress",              description: "Monitor which materials you've covered and get personalized study recommendations."},
+              title: "Track Progress",              description: "Monitor which materials you've covered and get personalized study recommendations."
+            },
             {
               icon: Wifi,
-              title: "Offline Access",              description: "Download audio files and study without internet access—ideal for areas with limited connectivity."},
+              title: "Offline Access",              description: "Download audio files and study without internet access—ideal for areas with limited connectivity."
+            },
             {
               icon: Headphones,
-              title: "Natural Voice",              description: "AI-powered voices that sound like real lecturers, making learning engaging and authentic."},
+              title: "Natural Voice",              description: "AI-powered voices that sound like real lecturers, making learning engaging and authentic."
+            },
           ]}
           animationType="slide-up"
           textboxLayout="default"
@@ -103,15 +112,18 @@ export default function LandingPage() {
           metrics={[
             {
               id: "1",              value: "1",              title: "Upload Your Materials",              items: [
-                "PDFs, lecture notes, slides",                "Supports all common formats",                "No file size limits"],
+                "PDFs, lecture notes, slides",                "Supports all common formats",                "No file size limits"
+              ],
             },
             {
               id: "2",              value: "2",              title: "AudioByte Transforms",              items: [
-                "AI analyzes and structures content",                "Generates natural audio explanations",                "Customizes pace and language"],
+                "AI analyzes and structures content",                "Generates natural audio explanations",                "Customizes pace and language"
+              ],
             },
             {
               id: "3",              value: "3",              title: "Listen Anywhere, Anytime",              items: [
-                "Download to your phone",                "Study offline or online",                "Review before exams"],
+                "Download to your phone",                "Study offline or online",                "Review before exams"
+              ],
             },
           ]}
           animationType="slide-up"
@@ -129,9 +141,11 @@ export default function LandingPage() {
           textboxLayout="default"
           useInvertedBackground={false}
           logos={[
-            "http://img.b2bpic.net/free-vector/financial-company-logo_1424-9.jpg",            "http://img.b2bpic.net/free-vector/education-logo-template_23-2149492990.jpg",            "http://img.b2bpic.net/free-vector/education-logo-open-book-sun-leaves_779267-3541.jpg",            "http://img.b2bpic.net/free-vector/elegant-logos-college_23-2147565389.jpg",            "http://img.b2bpic.net/free-vector/elegant-logos-college_23-2147565389.jpg",            "http://img.b2bpic.net/free-vector/education-logo-template_23-2149492990.jpg",            "http://img.b2bpic.net/free-vector/elegant-logos-college_23-2147565389.jpg"]}
+            "http://img.b2bpic.net/free-vector/financial-company-logo_1424-9.jpg",            "http://img.b2bpic.net/free-vector/education-logo-template_23-2149492990.jpg",            "http://img.b2bpic.net/free-vector/education-logo-open-book-sun-leaves_779267-3541.jpg",            "http://img.b2bpic.net/free-vector/elegant-logos-college_23-2147565389.jpg",            "http://img.b2bpic.net/free-vector/elegant-logos-college_23-2147565389.jpg",            "http://img.b2bpic.net/free-vector/education-logo-template_23-2149492990.jpg",            "http://img.b2bpic.net/free-vector/elegant-logos-college_23-2147565389.jpg"
+          ]}
           names={[
-            "University of Lagos",            "Kenyatta University",            "University of Dakar",            "University of Cape Town",            "Makerere University",            "Stellenbosch University",            "Addis Ababa University"]}
+            "University of Lagos",            "Kenyatta University",            "University of Dakar",            "University of Cape Town",            "Makerere University",            "Stellenbosch University",            "Addis Ababa University"
+          ]}
           speed={40}
           showCard={true}
         />
@@ -146,15 +160,18 @@ export default function LandingPage() {
           metrics={[
             {
               id: "1",              value: "5,000+",              title: "Active Students",              items: [
-                "Across 15+ African countries",                "Growing community daily",                "96% retention rate"],
+                "Across 15+ African countries",                "Growing community daily",                "96% retention rate"
+              ],
             },
             {
               id: "2",              value: "2.5M+",              title: "Minutes Studied",              items: [
-                "Monthly learning hours",                "Courses covered",                "Exam prep sessions"],
+                "Monthly learning hours",                "Courses covered",                "Exam prep sessions"
+              ],
             },
             {
               id: "3",              value: "89%",              title: "Average Grade Improvement",              items: [
-                "Within first semester",                "Verified by universities",                "Across all subjects"],
+                "Within first semester",                "Verified by universities",                "Across all subjects"
+              ],
             },
           ]}
           animationType="slide-up"
@@ -173,19 +190,23 @@ export default function LandingPage() {
             {
               id: "1",              name: "Ama Osei",              role: "Engineering Student",              company: "University of Ghana",              rating: 5,
               imageSrc:
-                "http://img.b2bpic.net/free-photo/young-beautiful-african-woman-student-resting-relaxing-sitting-cafe-smiling-drinking-coffee_176420-12467.jpg",              imageAlt: "Ama Osei"},
+                "http://img.b2bpic.net/free-photo/young-beautiful-african-woman-student-resting-relaxing-sitting-cafe-smiling-drinking-coffee_176420-12467.jpg",              imageAlt: "Ama Osei"
+            },
             {
               id: "2",              name: "Daniel Kipchoge",              role: "Medical Student",              company: "Kenyatta University",              rating: 5,
               imageSrc:
-                "http://img.b2bpic.net/free-photo/portrait-happy-african-american-female-college-student-holding-notebooks-backpack-smiling-standing-yellow-background_1258-54844.jpg",              imageAlt: "Daniel Kipchoge"},
+                "http://img.b2bpic.net/free-photo/portrait-happy-african-american-female-college-student-holding-notebooks-backpack-smiling-standing-yellow-background_1258-54844.jpg",              imageAlt: "Daniel Kipchoge"
+            },
             {
               id: "3",              name: "Zainab Hassan",              role: "Commerce Student",              company: "University of Nairobi",              rating: 5,
               imageSrc:
-                "http://img.b2bpic.net/free-photo/black-businessman-happy-expression_1194-2533.jpg",              imageAlt: "Zainab Hassan"},
+                "http://img.b2bpic.net/free-photo/black-businessman-happy-expression_1194-2533.jpg",              imageAlt: "Zainab Hassan"
+            },
             {
               id: "4",              name: "Kwame Asante",              role: "Law Student",              company: "University of Lagos",              rating: 5,
               imageSrc:
-                "http://img.b2bpic.net/free-photo/cheerful-african-beautiful-woman-student-smiling-holding-books-university-education-concept_176420-12457.jpg",              imageAlt: "Kwame Asante"},
+                "http://img.b2bpic.net/free-photo/cheerful-african-beautiful-woman-student-smiling-holding-books-university-education-concept_176420-12457.jpg",              imageAlt: "Kwame Asante"
+            },
           ]}
           kpiItems={[
             { value: "4.9/5", label: "Average Rating" },
@@ -204,13 +225,13 @@ export default function LandingPage() {
           tagIcon={Sparkles}
           tagAnimation="slide-up"
           title="Start Your Free Trial Today"
-          description="Join thousands of African students preparing for exams smarter. No credit card required. Get instant access to AudioByte and transform your study experience."
+          description="No credit card required. Get instant access to AudioByte and transform your study experience."
           buttons={[
             { text: "Start Learning Free", href: "https://app.audiobyte.com/signup" },
             { text: "Schedule Demo", href: "contact" },
           ]}
           buttonAnimation="slide-up"
-          background={{ variant: "gradient-bars" }}
+          background={{ variant: "sparkles-gradient" }}
           useInvertedBackground={false}
         />
       </div>
@@ -223,7 +244,7 @@ export default function LandingPage() {
               title: "Product",              items: [
                 { label: "Features", href: "#features" },
                 { label: "How It Works", href: "#how-it-works" },
-                { label: "Pricing", href: "#pricing" },
+                { label: "Dashboard", href: "/dashboard" },
                 { label: "FAQ", href: "#faq" },
               ],
             },

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-public-sans), sans-serif;
+  font-family: var(--font-inter), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-public-sans), sans-serif;
+  font-family: var(--font-inter), sans-serif;
 }

src/app/styles/variables.css

@@ -3,22 +3,22 @@
   /* --vw is set by ThemeProvider */
 
   /* --background: #ffffff;;
-  --card: #f8f9fa;;
-  --foreground: #0c1929;;
-  --primary-cta: #1f7cff;;
-  --secondary-cta: #ffffff;;
-  --accent: #e0f0ff;;
-  --background-accent: #1f7cff;; */
+  --card: #f9f9f9;;
+  --foreground: #000612e6;;
+  --primary-cta: #15479c;;
+  --secondary-cta: #f9f9f9;;
+  --accent: #e2e2e2;;
+  --background-accent: #c4c4c4;; */
 
   --background: #ffffff;;
-  --card: #f8f9fa;;
-  --foreground: #0c1929;;
-  --primary-cta: #1f7cff;;
+  --card: #f9f9f9;;
+  --foreground: #000612e6;;
+  --primary-cta: #15479c;;
   --primary-cta-text: #ffffff;;
-  --secondary-cta: #ffffff;;
+  --secondary-cta: #f9f9f9;;
   --secondary-cta-text: #0c1929;;
-  --accent: #e0f0ff;;
-  --background-accent: #1f7cff;;
+  --accent: #e2e2e2;;
+  --background-accent: #c4c4c4;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);