Update src/app/styles/base.css

Merge version_3 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-bubble"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="soft"
+      contentWidth="compact"
+      sizing="mediumLargeSizeMediumTitles"
+      background="noise"
+      cardStyle="gradient-radial"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="semibold"
+    >
+      <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,22 +1,12 @@
 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 { Poppins } 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"],
+const poppins = Poppins({
+  variable: "--font-poppins",  subsets: ["latin"],
+  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
 });
 
 export const metadata: Metadata = {
@@ -37,7 +27,7 @@ export default function RootLayout({
     <html lang="en" suppressHydrationWarning>
       <ServiceWrapper>
         <body
-          className={`${publicSans.variable} ${halant.variable} ${inter.variable} antialiased`}
+          className={`${poppins.variable} antialiased`}
         >
           <Tag />
           {children}

src/app/page.tsx

@@ -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" }}
@@ -244,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-poppins), 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-poppins), 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: #120a00e6;;
+  --primary-cta: #FF7B05;;
+  --secondary-cta: #f9f9f9;;
+  --accent: #e2e2e2;;
+  --background-accent: #FF7B05;; */
 
   --background: #ffffff;;
-  --card: #f8f9fa;;
-  --foreground: #0c1929;;
-  --primary-cta: #1f7cff;;
+  --card: #f9f9f9;;
+  --foreground: #120a00e6;;
+  --primary-cta: #FF7B05;;
   --primary-cta-text: #ffffff;;
-  --secondary-cta: #ffffff;;
+  --secondary-cta: #f9f9f9;;
   --secondary-cta-text: #0c1929;;
-  --accent: #e0f0ff;;
-  --background-accent: #1f7cff;;
+  --accent: #e2e2e2;;
+  --background-accent: #FF7B05;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);