Update src/app/page.tsx

Merge version_4 into main
2026-03-04 14:36:20 +00:00 · 2026-03-04 14:21:46 +00:00 · 2026-03-04 14:21:42 +00:00 · 2026-03-04 14:21:41 +00:00 · 2026-03-04 14:21:41 +00:00 · 2026-03-04 14:19:36 +00:00
3 changed files with 56 additions and 317 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,16 +1,12 @@
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import { Open_Sans } from "next/font/google";
+import { Crimson_Text } from "next/font/google";
 import "./globals.css";
 import { ServiceWrapper } from "@/components/ServiceWrapper";
 import Tag from "@/tag/Tag";

-const inter = Inter({
-  variable: "--font-inter",  subsets: ["latin"],
-});
-
-const openSans = Open_Sans({
-  variable: "--font-open-sans",  subsets: ["latin"],
+const crimsonText = Crimson_Text({
+  variable: "--font-crimson-text",  subsets: ["latin"],
+  weight: ["400", "600"],
 });

 export const metadata: Metadata = {
@@ -39,7 +35,7 @@ export default function RootLayout({
    <html lang="en" suppressHydrationWarning>
      <ServiceWrapper>
        <body
-          className={`${inter.variable} ${openSans.variable} antialiased`}
+          className={`${crimsonText.variable} antialiased`}
        >
          <Tag />
          {children}
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -6,7 +6,6 @@ import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/Nav
 import HeroBillboardTestimonial from "@/components/sections/hero/HeroBillboardTestimonial";
 import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
 import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
-import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
 import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
 import ContactCTA from "@/components/sections/contact/ContactCTA";
 import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
@@ -31,9 +30,9 @@ export default function HomePage() {
    },
    {
      title: "Connect",      items: [
-        { label: "Twitter", href: "https://twitter.com" },
-        { label: "LinkedIn", href: "https://linkedin.com" },
-        { label: "Instagram", href: "https://instagram.com" },
+        { 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" },
      ],
    },
@@ -60,76 +59,6 @@ export default function HomePage() {
      secondaryButtonStyle="layered"
      headingFontWeight="light"
    >
-      <style>{`
-        @keyframes drawLine {
-          0% {
-            stroke-dashoffset: 1000;
-            opacity: 0;
-          }
-          10% {
-            opacity: 1;
-          }
-          90% {
-            opacity: 1;
-          }
-          100% {
-            stroke-dashoffset: 0;
-            opacity: 0;
-          }
-        }
-
-        @keyframes tiltShift {
-          0%, 100% {
-            transform: translateY(0) rotateZ(-1deg);
-          }
-          50% {
-            transform: translateY(-8px) rotateZ(1deg);
-          }
-        }
-
-        @keyframes sketchCursor {
-          0% {
-            opacity: 1;
-            transform: scale(1);
-          }
-          100% {
-            opacity: 0;
-            transform: scale(0.8);
-          }
-        }
-
-        .decorative-line {
-          stroke-dasharray: 1000;
-          animation: drawLine 4s ease-in-out 2s infinite;
-          pointer-events: none;
-        }
-
-        .tilt-media {
-          animation: tiltShift 6s ease-in-out infinite;
-        }
-
-        .sketch-trail {
-          position: fixed;
-          pointer-events: none;
-          z-index: 10;
-        }
-
-        .sketch-mark {
-          position: absolute;
-          border-radius: 50%;
-          animation: sketchCursor 1.5s ease-out forwards;
-        }
-      `}</style>
-
-      <canvas
-        id="sketch-canvas"
-        style={{
-          position: "fixed",          top: 0,
-          left: 0,
-          width: "100%",          height: "100%",          pointerEvents: "none",          zIndex: 5,
-        }}
-      />
-
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={navItems}
@@ -139,64 +68,31 @@ export default function HomePage() {
        />
      </div>

-      <svg
-        style={{
-          position: "absolute",          top: "100px",          left: "50%",          transform: "translateX(-50%)",          width: "200px",          height: "2px",          pointerEvents: "none",          zIndex: 1,
-        }}
-      >
-        <line
-          x1="0"
-          y1="1"
-          x2="200"
-          y2="1"
-          stroke="currentColor"
-          strokeWidth="1"
-          opacity="0.3"
-          className="decorative-line"
-        />
-      </svg>
-
      <div id="hero" data-section="hero">
-        <div className="tilt-media">
-          <HeroBillboardTestimonial
-            title="Building ideas into reality"
-            description="A collection of projects, thoughts, and vision. Explore what's in progress, subscribe to my writing, or let's connect."
-            background={{ variant: "plain" }}
-            imageSrc="http://img.b2bpic.net/free-psd/acting-agency-template-landing-page_23-2148797778.jpg"
-            imageAlt="Portfolio hero showcase"
-            mediaAnimation="blur-reveal"
-            testimonials={[
-              {
-                name: "Creative Vision",                handle: "Portfolio Focus",                testimonial: "Transforming concepts into compelling visual narratives that resonate with audiences and drive meaningful engagement.",                rating: 5,
-                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5BwcOCEdbUvGXGzmfDl4faxC/uploaded-1772588138755-nsxcu3nt.png"
-              },
-            ]}
-            buttons={[
-              { text: "Explore My Work", href: "/projects" },
-              { text: "Subscribe", href: "#" },
-            ]}
-            buttonAnimation="blur-reveal"
-            useInvertedBackground={false}
-            tag="Creative Portfolio"
-            tagAnimation="blur-reveal"
-          />
-        </div>
-      </div>
-
-      <svg
-        style={{
-          position: "absolute",          top: "600px",          left: "10%",          width: "150px",          height: "50px",          pointerEvents: "none",          zIndex: 1,
-        }}
-      >
-        <path
-          d="M 10 30 Q 40 5 80 30 T 150 30"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          fill="none"
-          opacity="0.2"
-          className="decorative-line"
+        <HeroBillboardTestimonial
+          title="Building ideas into reality"
+          description="A collection of projects, thoughts, and vision. Explore what's in progress, subscribe to my writing, or let's connect."
+          background={{ variant: "plain" }}
+          mediaAnimation="blur-reveal"
+          testimonials={[
+            {
+              name: "Creative Vision",              handle: "Portfolio Focus",              testimonial: "Transforming concepts into compelling visual narratives that resonate with audiences and drive meaningful engagement.",              rating: 5,
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5BwcOCEdbUvGXGzmfDl4faxC/uploaded-1772588138755-nsxcu3nt.png"
+            },
+          ]}
+          buttons={[
+            { 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"
        />
-      </svg>
+      </div>

      <div id="about" data-section="about">
        <TextSplitAbout
@@ -211,127 +107,47 @@ export default function HomePage() {
        />
      </div>

-      <svg
-        style={{
-          position: "absolute",          top: "900px",          right: "5%",          width: "100px",          height: "100px",          pointerEvents: "none",          zIndex: 1,
-        }}
-      >
-        <circle
-          cx="50"
-          cy="50"
-          r="40"
-          stroke="currentColor"
-          strokeWidth="1"
-          fill="none"
-          opacity="0.2"
-          className="decorative-line"
-        />
-      </svg>
-
      <div id="projects" data-section="projects">
-        <div className="tilt-media">
-          <ProductCardTwo
-            title="Selected Projects"
-            description="A curated selection of work demonstrating creative vision and strategic thinking across design and digital mediums."
-            textboxLayout="default"
-            animationType="slide-up"
-            useInvertedBackground={false}
-            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: "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"
-              },
-            ]}
-            carouselMode="buttons"
-            tag="Portfolio Showcase"
-            tagAnimation="blur-reveal"
-            buttons={[{ text: "View All Projects", href: "/projects" }]}
-          />
-        </div>
-      </div>
-
-      <svg
-        style={{
-          position: "absolute",          top: "1400px",          left: "50%",          transform: "translateX(-50%)",          width: "120px",          height: "80px",          pointerEvents: "none",          zIndex: 1,
-        }}
-      >
-        <polyline
-          points="10,70 40,20 70,50 100,10"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          fill="none"
-          opacity="0.2"
-          className="decorative-line"
-        />
-      </svg>
-
-      <div id="testimonial" data-section="testimonial">
-        <TestimonialCardFifteen
-          testimonial="An exceptional creative mind who transforms complex ideas into visually compelling narratives. Working with them elevated our entire brand presence."
-          rating={5}
-          author="Creative Director, Strategic Brand Partners"
-          avatars={[
+        <ProductCardTwo
+          title="Selected Projects"
+          description="A curated selection of work demonstrating creative vision and strategic thinking across design and digital mediums."
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground={false}
+          gridVariant="three-columns-all-equal-width"
+          products={[
            {
-              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5BwcOCEdbUvGXGzmfDl4faxC/uploaded-1772588138755-nsxcu3nt.png",              alt: "Creative collaborator"
+              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: "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"
            },
          ]}
-          ratingAnimation="blur-reveal"
-          avatarsAnimation="blur-reveal"
-          useInvertedBackground={true}
+          carouselMode="buttons"
+          tag="Portfolio Showcase"
+          tagAnimation="blur-reveal"
+          buttons={[{ text: "View All Projects", href: "/projects" }]}
        />
      </div>

-      <svg
-        style={{
-          position: "absolute",          top: "1800px",          left: "15%",          width: "180px",          height: "60px",          pointerEvents: "none",          zIndex: 1,
-        }}
-      >
-        <path
-          d="M 10 40 L 40 10 L 70 40 L 100 15 L 140 45 L 180 20"
-          stroke="currentColor"
-          strokeWidth="1"
-          fill="none"
-          opacity="0.2"
-          className="decorative-line"
-        />
-      </svg>
-
      <div id="connect" data-section="connect">
        <SocialProofOne
          title="Connect With Me"
          description="Let's explore ideas together. Reach out through any of these channels."
          textboxLayout="default"
          useInvertedBackground={false}
-          names={["Twitter", "LinkedIn", "Instagram", "Email", "Newsletter"]}
+          names={["Calendly", "Substack", "X", "Email", "Newsletter"]}
          speed={40}
          showCard={true}
        />
      </div>

-      <svg
-        style={{
-          position: "absolute",          top: "2200px",          right: "8%",          width: "140px",          height: "70px",          pointerEvents: "none",          zIndex: 1,
-        }}
-      >
-        <path
-          d="M 10 50 Q 40 10 70 50 T 140 50"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          fill="none"
-          opacity="0.2"
-          className="decorative-line"
-        />
-      </svg>
-
      <div id="contact-cta" data-section="contact-cta">
        <ContactCTA
          tag="Get In Touch"
@@ -353,79 +169,6 @@ export default function HomePage() {
          copyrightText="© 2025 Portfolio. Crafted with intention and creative vision."
        />
      </div>
-
-      <script>{`
-        (function() {
-          const canvas = document.getElementById('sketch-canvas');
-          if (!canvas) return;
-          
-          const ctx = canvas.getContext('2d');
-          canvas.width = window.innerWidth;
-          canvas.height = window.innerHeight;
-          
-          let mouseX = 0;
-          let mouseY = 0;
-          let isDrawing = false;
-          
-          const strokes = [];
-          
-          const sketchColors = ['rgba(0, 0, 0, 0.15)', 'rgba(100, 100, 100, 0.1)', 'rgba(50, 50, 50, 0.12)'];
-          
-          document.addEventListener('mousemove', (e) => {
-            mouseX = e.clientX;
-            mouseY = e.clientY;
-            
-            if (Math.random() > 0.92) {
-              const offsets = [
-                { x: Math.random() * 20 - 10, y: Math.random() * 20 - 10 },
-                { x: Math.random() * 15 - 7, y: Math.random() * 15 - 7 }
-              ];
-              
-              offsets.forEach(offset => {
-                const stroke = {
-                  x: mouseX + offset.x,
-                  y: mouseY + offset.y,
-                  size: Math.random() * 3 + 1,
-                  opacity: Math.random() * 0.4 + 0.3,
-                  color: sketchColors[Math.floor(Math.random() * sketchColors.length)],
-                  life: 1
-                };
-                strokes.push(stroke);
-              });
-            }
-          });
-          
-          function animate() {
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
-            
-            for (let i = strokes.length - 1; i >= 0; i--) {
-              const stroke = strokes[i];
-              stroke.life -= 0.02;
-              
-              if (stroke.life <= 0) {
-                strokes.splice(i, 1);
-                continue;
-              }
-              
-              ctx.fillStyle = stroke.color;
-              ctx.globalAlpha = stroke.life * 0.5;
-              ctx.beginPath();
-              ctx.arc(stroke.x, stroke.y, stroke.size, 0, Math.PI * 2);
-              ctx.fill();
-            }
-            
-            ctx.globalAlpha = 1;
-            requestAnimationFrame(animate);
-          }
-          
-          animate();
-          
-          window.addEventListener('resize', () => {
-            canvas.width = window.innerWidth;
-            canvas.height = window.innerHeight;
-          });
-        })();
-      `}</script>
    </ThemeProvider>
  );
 }
--- a/src/app/styles/base.css
+++ b/src/app/styles/base.css
@@ -11,7 +11,7 @@ html {
 body {
  background-color: var(--background);
  color: var(--foreground);
-  font-family: var(--font-open-sans), sans-serif;
+  font-family: var(--font-crimson-text), sans-serif;
  position: relative;
  min-height: 100vh;
  overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-inter), sans-serif;
+  font-family: var(--font-crimson-text), sans-serif;
 }
Author	SHA1	Message	Date
bender	df80a2bebb	Update src/app/page.tsx	2026-03-04 14:36:20 +00:00
bender	1d1b1d61ad	Merge version_4 into main Merge version_4 into main	2026-03-04 14:21:46 +00:00
bender	50950b0d7d	Update src/app/styles/base.css	2026-03-04 14:21:42 +00:00
bender	6bf6fde65d	Update src/app/page.tsx	2026-03-04 14:21:41 +00:00
bender	65fb5febac	Update src/app/layout.tsx	2026-03-04 14:21:41 +00:00
bender	aaf8dcfd07	Merge version_3 into main Merge version_3 into main	2026-03-04 14:19:36 +00:00