Update src/app/navo/page.tsx

Merge version_6 into main

src/app/documentary/page.tsx

@@ -0,0 +1,152 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import HeroOverlay from "@/components/sections/hero/HeroOverlay";
+import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
+import FeatureCardMedia from "@/components/sections/feature/FeatureCardMedia";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
+
+export default function DocumentaryPage() {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Projects", id: "/projects" },
+    { name: "Vision", id: "/about" },
+    { name: "Connect", id: "/connect" },
+    { name: "Writing", id: "/writing" },
+    { name: "Violin", id: "/violin" },
+    { name: "Documentary", id: "/documentary" },
+    { name: "Navo", id: "/navo" },
+    { name: "Stanford", id: "/stanford" },
+  ];
+
+  const footerColumns = [
+    {
+      title: "Navigation",      items: [
+        { label: "Home", href: "/" },
+        { label: "Projects", href: "/projects" },
+        { label: "Vision", href: "/about" },
+        { label: "Contact", href: "/contact" },
+      ],
+    },
+    {
+      title: "Connect",      items: [
+        { label: "Calendly", href: "https://calendly.com/karu-navolab/growth-engine-demo-navo-lab" },
+        { label: "Substack", href: "https://substack.com/@karuthompson" },
+        { label: "X", href: "https://x.com/KaruThompson" },
+        { label: "Email", href: "mailto:hello@example.com" },
+      ],
+    },
+    {
+      title: "Resources",      items: [
+        { label: "Newsletter", href: "#" },
+        { label: "Blog", href: "/writing" },
+        { label: "Privacy", href: "#" },
+        { label: "Terms", href: "#" },
+      ],
+    },
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="elastic-effect"
+      defaultTextAnimation="background-highlight"
+      borderRadius="pill"
+      contentWidth="smallMedium"
+      sizing="largeSmallSizeMediumTitles"
+      background="floatingGradient"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={navItems}
+          brandName="Portfolio"
+          bottomLeftText="Crafted with intention"
+          bottomRightText="Let's connect"
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroOverlay
+          title="Documentary Feature Film"
+          description="A cinematic exploration of real stories, authentic voices, and the human experience. This documentary captures moments of transformation, resilience, and the subtle beauty found in everyday life."
+          tag="Film Production"
+          tagAnimation="blur-reveal"
+          textPosition="bottom-left"
+          showBlur={true}
+          showDimOverlay={true}
+          imageSrc="https://images.unsplash.com/photo-1533000971552-74f7b2265582?w=1200&h=600&fit=crop"
+          imageAlt="Documentary film scene"
+          buttons={[
+            { text: "Watch Trailer", href: "#" },
+            { text: "Learn More", href: "#" }
+          ]}
+          buttonAnimation="blur-reveal"
+        />
+      </div>
+
+      <div id="about" data-section="about">
+        <TextSplitAbout
+          title="Storytelling Through Film"
+          description={[
+            "Documentary filmmaking is about capturing truth in its rawest form. <i>It requires patience, empathy, and an unwavering commitment to the subjects' stories.</i> Every frame is a decision, every cut a statement about what matters most.",            "This feature film explores narratives that traditional media overlooks—the quiet moments that define us, the challenges that shape our character, and the interconnections that bind us together. <i>Through cinematography, sound design, and thoughtful editing, we transform lived experience into visual poetry.</i>"
+          ]}
+          useInvertedBackground={true}
+          showBorder={true}
+          buttons={[{ text: "View Full Details", href: "#" }]}
+          buttonAnimation="blur-reveal"
+        />
+      </div>
+
+      <div id="features" data-section="features">
+        <FeatureCardMedia
+          title="Film Production Highlights"
+          description="Key elements that bring the documentary to life"
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground={false}
+          carouselMode="buttons"
+          tag="Production"
+          tagAnimation="blur-reveal"
+          features={[
+            {
+              id: "1",              title: "Cinematography",              description: "<i>Visual storytelling through carefully composed frames.</i> Capturing authentic moments with artistic intent and technical precision.",              tag: "Visual Art",              imageSrc: "https://images.unsplash.com/photo-1533000971552-74f7b2265582?w=500&h=400&fit=crop",              imageAlt: "Camera equipment"
+            },
+            {
+              id: "2",              title: "Sound Design",              description: "<i>The voice of film is often unheard.</i> Through strategic sound design, we amplify emotion and create an immersive auditory landscape.",              tag: "Audio",              imageSrc: "https://images.unsplash.com/photo-1514320291840-2e0a9bf2a9ae?w=500&h=400&fit=crop",              imageAlt: "Sound equipment"
+            },
+            {
+              id: "3",              title: "Editing & Narrative",              description: "<i>The edit suite is where stories find their rhythm.</i> Precise editing transforms raw footage into cohesive narrative that resonates with audiences.",              tag: "Post-Production",              imageSrc: "https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=500&h=400&fit=crop",              imageAlt: "Editing workstation"
+            },
+          ]}
+        />
+      </div>
+
+      <div id="contact-cta" data-section="contact-cta">
+        <ContactCTA
+          tag="Film & Vision"
+          title="Interested in the project?"
+          description="Explore the full documentary feature and discover the stories that shaped this cinematic journey."
+          background={{ variant: "plain" }}
+          buttons={[
+            { text: "View Screening Schedule", href: "#" },
+            { text: "Get In Touch", href: "/contact" },
+          ]}
+          buttonAnimation="blur-reveal"
+          useInvertedBackground={true}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBaseReveal
+          columns={footerColumns}
+          copyrightText="© 2025 Portfolio. Crafted with intention and creative vision."
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/layout.tsx

@@ -10,7 +10,7 @@ const crimsonText = Crimson_Text({
 });
 
 export const metadata: Metadata = {
-  title: "Karu Thompson | Building Ideas Into Reality | Creative Portfolio",  description: "A collection of projects, thoughts, and creative vision. Explore work across design, digital experience, and strategic direction.",  keywords: "portfolio, creative design, digital experience, brand strategy, visual storytelling",  metadataBase: new URL("https://portfolio.example.com"),
+  title: "Building Ideas Into Reality | Creative Portfolio",  description: "A collection of projects, thoughts, and creative vision. Explore work across design, digital experience, and strategic direction.",  keywords: "portfolio, creative design, digital experience, brand strategy, visual storytelling",  metadataBase: new URL("https://portfolio.example.com"),
   alternates: {
     canonical: "https://portfolio.example.com"
   },

src/app/navo/page.tsx

@@ -0,0 +1,153 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import HeroOverlay from "@/components/sections/hero/HeroOverlay";
+import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
+import ProductCardOne from "@/components/sections/product/ProductCardOne";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
+
+export default function NavoPage() {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Projects", id: "/projects" },
+    { name: "Vision", id: "/about" },
+    { name: "Connect", id: "/connect" },
+    { name: "Writing", id: "/writing" },
+    { name: "Violin", id: "/violin" },
+    { name: "Documentary", id: "/documentary" },
+    { name: "Navo", id: "/navo" },
+    { name: "Stanford", id: "/stanford" },
+  ];
+
+  const footerColumns = [
+    {
+      title: "Navigation",      items: [
+        { label: "Home", href: "/" },
+        { label: "Projects", href: "/projects" },
+        { label: "Vision", href: "/about" },
+        { label: "Contact", href: "/contact" },
+      ],
+    },
+    {
+      title: "Connect",      items: [
+        { label: "Calendly", href: "https://calendly.com/karu-navolab/growth-engine-demo-navo-lab" },
+        { label: "Substack", href: "https://substack.com/@karuthompson" },
+        { label: "X", href: "https://x.com/KaruThompson" },
+        { label: "Email", href: "mailto:hello@example.com" },
+      ],
+    },
+    {
+      title: "Resources",      items: [
+        { label: "Newsletter", href: "#" },
+        { label: "Blog", href: "/writing" },
+        { label: "Privacy", href: "#" },
+        { label: "Terms", href: "#" },
+      ],
+    },
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="elastic-effect"
+      defaultTextAnimation="background-highlight"
+      borderRadius="pill"
+      contentWidth="smallMedium"
+      sizing="largeSmallSizeMediumTitles"
+      background="floatingGradient"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={navItems}
+          brandName="Portfolio"
+          bottomLeftText="Crafted with intention"
+          bottomRightText="Let's connect"
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroOverlay
+          title="Navo Growth Engine"
+          description="A comprehensive business platform designed to accelerate growth through data-driven strategies, intelligent automation, and strategic partnerships. Transforming how businesses scale."
+          tag="Business Platform"
+          tagAnimation="blur-reveal"
+          textPosition="center"
+          showBlur={true}
+          imageSrc="https://images.unsplash.com/photo-1552664730-d307ca884978?w=1200&h=600&fit=crop"
+          imageAlt="Navo business platform"
+          buttons={[
+            { text: "Explore Platform", href: "https://navo.lab" },
+            { text: "Schedule Demo", href: "https://calendly.com/karu-navolab/growth-engine-demo-navo-lab" }
+          ]}
+          buttonAnimation="blur-reveal"
+        />
+      </div>
+
+      <div id="about" data-section="about">
+        <TextSplitAbout
+          title="Accelerating Business Growth"
+          description={[
+            "Navo is built on a fundamental principle: <i>sustainable growth requires intelligence, strategy, and execution.</i> We combine data analytics, market insights, and strategic partnerships to create a growth engine that works for your business.",            "Our platform empowers businesses to identify opportunities, optimize operations, and scale strategically. <i>Through automation, insights, and connectivity, we transform growth from a challenge into a competitive advantage.</i> Whether you're a startup or an established enterprise, Navo provides the tools and expertise to drive meaningful expansion."
+          ]}
+          useInvertedBackground={true}
+          showBorder={true}
+          buttons={[{ text: "Learn About Services", href: "https://navo.lab" }]}
+          buttonAnimation="blur-reveal"
+        />
+      </div>
+
+      <div id="projects" data-section="projects">
+        <ProductCardOne
+          title="Navo Solutions"
+          description="Core offerings designed to maximize business potential"
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground={false}
+          gridVariant="three-columns-all-equal-width"
+          products={[
+            {
+              id: "1",              name: "Growth Strategy",              price: "Custom",              imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=400&h=300&fit=crop&_wi=1",              imageAlt: "Growth strategy consulting",              onProductClick: () => window.open("https://navo.lab", "_blank")
+            },
+            {
+              id: "2",              name: "Data Analytics",              price: "Enterprise",              imageSrc: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=400&h=300&fit=crop",              imageAlt: "Data analytics platform",              onProductClick: () => window.open("https://navo.lab", "_blank")
+            },
+            {
+              id: "3",              name: "Strategic Partnerships",              price: "Ongoing",              imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=400&h=300&fit=crop&_wi=2",              imageAlt: "Partnership network",              onProductClick: () => window.open("https://navo.lab", "_blank")
+            },
+          ]}
+          carouselMode="buttons"
+          tag="Business Solutions"
+          tagAnimation="blur-reveal"
+          buttons={[{ text: "Explore Full Catalog", href: "https://navo.lab" }]}
+        />
+      </div>
+
+      <div id="contact-cta" data-section="contact-cta">
+        <ContactCTA
+          tag="Ready to Grow?"
+          title="Transform Your Business"
+          description="Connect with the Navo team to discover how our growth engine can accelerate your business trajectory."
+          background={{ variant: "plain" }}
+          buttons={[
+            { text: "Visit Navo Lab", href: "https://navo.lab" },
+            { text: "Book a Demo", href: "https://calendly.com/karu-navolab/growth-engine-demo-navo-lab" },
+          ]}
+          buttonAnimation="blur-reveal"
+          useInvertedBackground={true}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBaseReveal
+          columns={footerColumns}
+          copyrightText="© 2025 Portfolio. Crafted with intention and creative vision."
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -9,23 +9,22 @@ import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
 import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
 import ContactCTA from "@/components/sections/contact/ContactCTA";
 import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
-import ContactForm from "@/components/form/ContactForm";
-import { Twitter } from "lucide-react";
+import TextBox from "@/components/Textbox";
 
 export default function HomePage() {
   const navItems = [
     { name: "Home", id: "/" },
-    { name: "Explore My Works", id: "/explore" },
+    { name: "Projects", id: "/projects" },
     { name: "Vision", id: "/about" },
     { name: "Connect", id: "/connect" },
-    { name: "Thoughts", id: "/thoughts" },
+    { name: "Writing", id: "/writing" },
   ];
 
   const footerColumns = [
     {
       title: "Navigation",      items: [
         { label: "Home", href: "/" },
-        { label: "Explore My Works", href: "/explore" },
+        { label: "Projects", href: "/projects" },
         { label: "Vision", href: "/about" },
         { label: "Contact", href: "/contact" },
       ],
@@ -41,7 +40,7 @@ export default function HomePage() {
     {
       title: "Resources",      items: [
         { label: "Newsletter", href: "#" },
-        { label: "Thoughts", href: "/thoughts" },
+        { label: "Blog", href: "/writing" },
         { label: "Privacy", href: "#" },
         { label: "Terms", href: "#" },
       ],
@@ -64,7 +63,7 @@ export default function HomePage() {
       <div id="nav" data-section="nav">
         <NavbarStyleFullscreen
           navItems={navItems}
-          brandName="Karu Thompson"
+          brandName="Portfolio"
           bottomLeftText="Crafted with intention"
           bottomRightText="Let's connect"
         />
@@ -83,13 +82,14 @@ export default function HomePage() {
             },
           ]}
           buttons={[
-            { text: "Explore My Work", href: "/explore" },
+            { text: "Explore My Work", href: "/projects" },
             { text: "Subscribe", href: "#" },
             { text: "Calendly", href: "https://calendly.com/karu-navolab/growth-engine-demo-navo-lab" },
             { text: "Substack", href: "https://substack.com/@karuthompson" },
             { text: "X", href: "https://x.com/KaruThompson" },
           ]}
           buttonAnimation="blur-reveal"
+          useInvertedBackground={false}
           tag="Creative Portfolio"
           tagAnimation="blur-reveal"
         />
@@ -99,7 +99,7 @@ export default function HomePage() {
         <TextSplitAbout
           title="About My Vision"
           description={[
-            "I believe in <i>intentional design</i> that bridges creativity and purpose. Every project is an opportunity to explore the intersection of <i>aesthetic sophistication</i> and clear communication.",            "My work draws inspiration from <i>film aesthetics</i>, <i>vintage typography</i>, and minimalist principles. I create digital experiences that feel thoughtfully crafted, inviting audiences to engage deeply with ideas and stories."
+            "I believe in intentional design that bridges creativity and purpose. Every project is an opportunity to explore the intersection of aesthetic sophistication and clear communication.",            "My work draws inspiration from film aesthetics, vintage typography, and minimalist principles. I create digital experiences that feel thoughtfully crafted, inviting audiences to engage deeply with ideas and stories."
           ]}
           useInvertedBackground={true}
           showBorder={true}
@@ -118,36 +118,46 @@ export default function HomePage() {
           gridVariant="three-columns-all-equal-width"
           products={[
             {
-              id: "1",              brand: "Visual Identity",              name: "Brand Narrative Series",              price: "2024",              rating: 5,              reviewCount: "Strategic Design",              imageSrc: "http://img.b2bpic.net/free-photo/startup-business-people-looking-strategy-board-information-thoughtful_53876-22977.jpg?_wi=1",              imageAlt: "Brand narrative project"
+              id: "1",              brand: "Visual Identity",              name: "Brand Narrative Series",              price: "2024",              rating: 5,
+              reviewCount: "Strategic Design",              imageSrc: "http://img.b2bpic.net/free-photo/startup-business-people-looking-strategy-board-information-thoughtful_53876-22977.jpg?_wi=1",              imageAlt: "Brand narrative project"
             },
             {
-              id: "2",              brand: "Digital Experience",              name: "Interactive Storytelling",              price: "2024",              rating: 5,              reviewCount: "Web Design",              imageSrc: "http://img.b2bpic.net/free-photo/top-photo-camera-laptop-vintage-tone-wooden-background_482257-35230.jpg?_wi=1",              imageAlt: "Digital experience project"
+              id: "2",              brand: "Digital Experience",              name: "Interactive Storytelling",              price: "2024",              rating: 5,
+              reviewCount: "Web Design",              imageSrc: "http://img.b2bpic.net/free-photo/top-photo-camera-laptop-vintage-tone-wooden-background_482257-35230.jpg?_wi=1",              imageAlt: "Digital experience project"
             },
             {
-              id: "3",              brand: "Creative Direction",              name: "Visual Language System",              price: "2024",              rating: 5,              reviewCount: "Brand Strategy",              imageSrc: "http://img.b2bpic.net/free-vector/geometric-gradient-shapes-cover-collection_52683-32230.jpg?_wi=1",              imageAlt: "Creative direction project"
+              id: "3",              brand: "Creative Direction",              name: "Visual Language System",              price: "2024",              rating: 5,
+              reviewCount: "Brand Strategy",              imageSrc: "http://img.b2bpic.net/free-vector/geometric-gradient-shapes-cover-collection_52683-32230.jpg?_wi=1",              imageAlt: "Creative direction project"
             },
           ]}
           carouselMode="buttons"
           tag="Portfolio Showcase"
           tagAnimation="blur-reveal"
-          buttons={[{ text: "View All Projects", href: "/explore" }]}
+          buttons={[{ text: "View All Projects", href: "/projects" }]}
         />
       </div>
 
-      <div id="email-signup" data-section="email-signup">
-        <ContactForm
-          title="Stay Connected"
-          description="Subscribe to my Substack for insights on creative vision, design philosophy, and intentional storytelling."
-          tag="Newsletter"
-          tagIcon={Twitter}
-          inputPlaceholder="Enter your email"
-          buttonText="Subscribe"
-          termsText="We respect your privacy. Unsubscribe anytime."
-          onSubmit={(email) => {
-            window.open(`https://substack.com/@karuthompson`, '_blank');
-          }}
-          centered={true}
-          useInvertedBackground={false}
+      <div id="thoughts" data-section="thoughts">
+        <TextBox
+          title="Personal Reflections"
+          description="Over time, I've learned that the most impactful work emerges when creativity meets intentionality. These are my ongoing thoughts on design, building, and the creative process."
+          textboxLayout="default"
+          center={true}
+          titleClassName="italic"
+          buttons={[{ text: "Read My Writing", href: "/writing" }]}
+          buttonAnimation="blur-reveal"
+        />
+      </div>
+
+      <div id="stanford" data-section="stanford">
+        <TextBox
+          title="Self-Taught vs Stanford: Choosing My Own Path"
+          description="I made the unconventional choice to skip traditional college and pursue self-directed learning instead. Rather than following the conventional academic route, I invested in building real-world experience, learning through projects, and developing skills that matter in today's creative landscape. This path taught me discipline, resourcefulness, and the value of continuous learning. Every project became my classroom, every challenge a lesson. This journey has shaped not just my skills, but my philosophy on growth and creation."
+          textboxLayout="default"
+          center={false}
+          titleClassName="italic"
+          buttons={[{ text: "Explore My Projects", href: "/projects" }]}
+          buttonAnimation="blur-reveal"
         />
       </div>
 
@@ -170,7 +180,7 @@ export default function HomePage() {
           description="Whether you're exploring new creative directions, developing a project, or simply want to discuss ideas, I'd love to hear from you."
           background={{ variant: "plain" }}
           buttons={[
-            { text: "Explore My Thoughts", href: "/thoughts" },
+            { text: "Explore My Writing", href: "#" },
             { text: "Start a Conversation", href: "/contact" },
           ]}
           buttonAnimation="blur-reveal"
@@ -181,7 +191,7 @@ export default function HomePage() {
       <div id="footer" data-section="footer">
         <FooterBaseReveal
           columns={footerColumns}
-          copyrightText="© 2025 Karu Thompson. Crafted with intention and creative vision."
+          copyrightText="© 2025 Portfolio. Crafted with intention and creative vision."
         />
       </div>
     </ThemeProvider>

src/app/stanford/page.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import HeroOverlay from "@/components/sections/hero/HeroOverlay";
+import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
+
+export default function StanfordPage() {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Projects", id: "/projects" },
+    { name: "Vision", id: "/about" },
+    { name: "Connect", id: "/connect" },
+    { name: "Writing", id: "/writing" },
+    { name: "Violin", id: "/violin" },
+    { name: "Documentary", id: "/documentary" },
+    { name: "Navo", id: "/navo" },
+    { name: "Stanford", id: "/stanford" },
+  ];
+
+  const footerColumns = [
+    {
+      title: "Navigation",      items: [
+        { label: "Home", href: "/" },
+        { label: "Projects", href: "/projects" },
+        { label: "Vision", href: "/about" },
+        { label: "Contact", href: "/contact" },
+      ],
+    },
+    {
+      title: "Connect",      items: [
+        { label: "Calendly", href: "https://calendly.com/karu-navolab/growth-engine-demo-navo-lab" },
+        { label: "Substack", href: "https://substack.com/@karuthompson" },
+        { label: "X", href: "https://x.com/KaruThompson" },
+        { label: "Email", href: "mailto:hello@example.com" },
+      ],
+    },
+    {
+      title: "Resources",      items: [
+        { label: "Newsletter", href: "#" },
+        { label: "Blog", href: "/writing" },
+        { label: "Privacy", href: "#" },
+        { label: "Terms", href: "#" },
+      ],
+    },
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="elastic-effect"
+      defaultTextAnimation="background-highlight"
+      borderRadius="pill"
+      contentWidth="smallMedium"
+      sizing="largeSmallSizeMediumTitles"
+      background="floatingGradient"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={navItems}
+          brandName="Portfolio"
+          bottomLeftText="Crafted with intention"
+          bottomRightText="Let's connect"
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroOverlay
+          title="Self-Taught vs Stanford"
+          description="A reflection on the unconventional path taken—skipping the traditional college experience in pursuit of real-world knowledge, skill development, and intellectual freedom. The journey of building expertise outside institutional walls."
+          tag="Education & Growth"
+          tagAnimation="blur-reveal"
+          textPosition="center"
+          showBlur={true}
+          imageSrc="https://images.unsplash.com/photo-1427504494785-cdec1122a810?w=1200&h=600&fit=crop"
+          imageAlt="Self-directed learning journey"
+          buttons={[{ text: "Explore the Journey", href: "#" }]}
+          buttonAnimation="blur-reveal"
+        />
+      </div>
+
+      <div id="about" data-section="about">
+        <TextSplitAbout
+          title="The Path Less Traveled"
+          description={[
+            "At a crossroads where most follow institutional pathways, a different choice was made. <i>Declining Stanford in favor of self-directed learning represented not a rejection of education, but a reimagining of it.</i> The realization came early: <i>the most transformative learning happens outside the classroom.</i>",            "The self-taught path required discipline, resourcefulness, and relentless curiosity. Without a structured curriculum or institutional validation, the burden of learning fell entirely on self-motivation. <i>Yet this freedom created something invaluable: ownership.</i> Every skill acquired, every project completed, every failure navigated became a direct result of personal initiative and drive. The unconventional route revealed that expertise isn't conferred by institutions—it's built through real work, real projects, and real consequences."
+          ]}
+          useInvertedBackground={true}
+          showBorder={true}
+          buttons={[{ text: "Read Full Story", href: "#" }]}
+          buttonAnimation="blur-reveal"
+        />
+      </div>
+
+      <div id="more-insights" data-section="more-insights">
+        <TextSplitAbout
+          title="Lessons from the Alternative Path"
+          description={[
+            "<i>1. Autonomy Over Authority</i> - Choosing your own curriculum creates deeper engagement than following prescribed paths. When you decide what matters, learning becomes intrinsic, not extrinsic.",            "<i>2. Real-World Resonance</i> - Self-taught knowledge is immediately applicable. There's no gap between theory and practice because they're learned simultaneously in real contexts.",            "<i>3. Resilience Through Failure</i> - Without institutional safety nets, failures become learning experiences with real consequences. This breeds a different kind of resilience and problem-solving capability.",            "<i>4. Network Over Credentials</i> - The self-taught path forces relationship-building and collaboration out of necessity. These networks often prove more valuable than institutional alumni associations.",            "<i>5. Continuous Reinvention</i> - <i>Without an institution defining you, you must define yourself—repeatedly.</i> This creates adaptability and forces ongoing growth in ways traditional education often cannot."
+          ]}
+          useInvertedBackground={false}
+          showBorder={false}
+          buttons={[{ text: "Connect and Discuss", href: "/contact" }]}
+          buttonAnimation="blur-reveal"
+        />
+      </div>
+
+      <div id="contact-cta" data-section="contact-cta">
+        <ContactCTA
+          tag="Unconventional Education"
+          title="Interested in this journey?"
+          description="Let's discuss the intersection of self-directed learning, institutional education, and the future of how we build expertise and create impact."
+          background={{ variant: "plain" }}
+          buttons={[
+            { text: "Read More Writing", href: "/writing" },
+            { text: "Start a Conversation", href: "/contact" },
+          ]}
+          buttonAnimation="blur-reveal"
+          useInvertedBackground={true}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBaseReveal
+          columns={footerColumns}
+          copyrightText="© 2025 Portfolio. Crafted with intention and creative vision."
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/violin/page.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import HeroOverlay from "@/components/sections/hero/HeroOverlay";
+import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
+
+export default function ViolinPage() {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Projects", id: "/projects" },
+    { name: "Vision", id: "/about" },
+    { name: "Connect", id: "/connect" },
+    { name: "Writing", id: "/writing" },
+    { name: "Violin", id: "/violin" },
+    { name: "Documentary", id: "/documentary" },
+    { name: "Navo", id: "/navo" },
+    { name: "Stanford", id: "/stanford" },
+  ];
+
+  const footerColumns = [
+    {
+      title: "Navigation",      items: [
+        { label: "Home", href: "/" },
+        { label: "Projects", href: "/projects" },
+        { label: "Vision", href: "/about" },
+        { label: "Contact", href: "/contact" },
+      ],
+    },
+    {
+      title: "Connect",      items: [
+        { label: "Calendly", href: "https://calendly.com/karu-navolab/growth-engine-demo-navo-lab" },
+        { label: "Substack", href: "https://substack.com/@karuthompson" },
+        { label: "X", href: "https://x.com/KaruThompson" },
+        { label: "Email", href: "mailto:hello@example.com" },
+      ],
+    },
+    {
+      title: "Resources",      items: [
+        { label: "Newsletter", href: "#" },
+        { label: "Blog", href: "/writing" },
+        { label: "Privacy", href: "#" },
+        { label: "Terms", href: "#" },
+      ],
+    },
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="elastic-effect"
+      defaultTextAnimation="background-highlight"
+      borderRadius="pill"
+      contentWidth="smallMedium"
+      sizing="largeSmallSizeMediumTitles"
+      background="floatingGradient"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={navItems}
+          brandName="Portfolio"
+          bottomLeftText="Crafted with intention"
+          bottomRightText="Let's connect"
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroOverlay
+          title="Violin Study and Performance"
+          description="A journey through classical technique, musical expression, and the pursuit of artistic mastery. Exploring both the technical foundations and the emotional depth of violin performance."
+          tag="Classical Music"
+          tagAnimation="blur-reveal"
+          textPosition="center"
+          showBlur={true}
+          imageSrc="https://images.unsplash.com/photo-1510915361894-db8b60106cb1?w=1200&h=600&fit=crop"
+          imageAlt="Violin performance"
+          buttons={[{ text: "Return Home", href: "/" }]}
+          buttonAnimation="blur-reveal"
+        />
+      </div>
+
+      <div id="about" data-section="about">
+        <TextSplitAbout
+          title="The Art of Violin"
+          description={[
+            "Violin study represents a profound commitment to artistic expression and technical discipline. <i>The instrument demands precision, patience, and an unwavering dedication to refinement.</i> Each note becomes a conversation between the musician and the audience, a moment of vulnerability and strength intertwined.",            "Performance is where technique transcends into artistry. <i>In those moments on stage, the technical hours dissolve into pure emotional communication.</i> The bow becomes an extension of the voice, the strings a conduit for the soul. This is where classical music lives—not just in the notes, but in the spaces between them, where meaning emerges."
+          ]}
+          useInvertedBackground={true}
+          showBorder={true}
+          buttons={[{ text: "Explore More", href: "/" }]}
+          buttonAnimation="blur-reveal"
+        />
+      </div>
+
+      <div id="contact-cta" data-section="contact-cta">
+        <ContactCTA
+          tag="Musical Journey"
+          title="Discover Classical Excellence"
+          description="The violin is not just an instrument—it is a gateway to understanding the human experience through sound."
+          background={{ variant: "plain" }}
+          buttons={[
+            { text: "Listen to Performances", href: "#" },
+            { text: "Connect", href: "/contact" },
+          ]}
+          buttonAnimation="blur-reveal"
+          useInvertedBackground={true}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBaseReveal
+          columns={footerColumns}
+          copyrightText="© 2025 Portfolio. Crafted with intention and creative vision."
+        />
+      </div>
+    </ThemeProvider>
+  );
+}