src/app/preview/page.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
+import { PlayCircle, ChevronLeft, BookOpen, Clock, ChevronRight } from "lucide-react";
+
+export default function CoursePreviewPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="icon-arrow"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="rounded"
+        contentWidth="medium"
+        sizing="mediumLargeSizeLargeTitles"
+        background="fluid"
+        cardStyle="gradient-radial"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="glass"
+        headingFontWeight="light"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+            <NavbarStyleApple
+                navItems={[
+                    { name: "Dashboard", id: "/" },
+                    { name: "Back to Course", id: "#" }
+                ]}
+                brandName="Vanquish the Veil"
+            />
+        </div>
+
+        <div className="min-h-screen pt-32 pb-20 px-4 md:px-12 max-w-7xl mx-auto" id="preview">
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            {/* Video Player Section */}
+            <div className="lg:col-span-2 space-y-6">
+              <div className="aspect-video w-full bg-card rounded-2xl overflow-hidden shadow-2xl flex items-center justify-center border border-accent/20">
+                  <PlayCircle size={64} className="text-accent opacity-50" />
+              </div>
+              <div className="space-y-2">
+                <h1 className="text-3xl font-light">Veil I: The Nature of Cosmology</h1>
+                <p className="text-foreground/70">Part 1 of 4: Uncovering the foundational truth behind our shared reality.</p>
+              </div>
+              <div className="flex items-center gap-4 py-4 border-t border-accent/20">
+                <button className="flex items-center gap-2 px-6 py-3 bg-primary-cta text-white rounded-full text-sm">
+                  <ChevronLeft size={16} /> Previous Lesson
+                </button>
+                <button className="flex items-center gap-2 px-6 py-3 bg-accent/10 rounded-full text-sm">
+                  Next Lesson <ChevronRight size={16} />
+                </button>
+              </div>
+            </div>
+
+            {/* Sidebar Syllabus */}
+            <div className="bg-card p-6 rounded-2xl border border-accent/20 h-fit">
+                <h3 className="text-xl font-medium mb-6 flex items-center gap-2">
+                    <BookOpen size={20} /> Course Curriculum
+                </h3>
+                <div className="space-y-4">
+                    {[1, 2, 3, 4, 5].map((item) => (
+                        <div key={item} className="flex items-center justify-between p-3 rounded-lg bg-background hover:bg-background-accent/10 cursor-pointer">
+                            <div className="flex items-center gap-3">
+                                <div className="w-8 h-8 rounded-full bg-accent/20 flex items-center justify-center text-xs">{item}</div>
+                                <span className="text-sm">Lesson Segment {item}</span>
+                            </div>
+                            <div className="text-xs text-foreground/50 flex items-center gap-1">
+                                <Clock size={12} /> 12:00
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+          </div>
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterMedia
+              imageSrc="http://img.b2bpic.net/free-vector/colorful-abstract-trees-collection_1025-491.jpg"
+              logoText="Vanquish the Veil"
+              columns={[
+                  { title: "Platform", items: [{ label: "Home", href: "/" }] },
+                  { title: "Support", items: [{ label: "Contact", href: "/" }] },
+              ]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}