Merge version_4 into main

Update src/app/styles/base.css
2026-05-06 00:06:06 +00:00 · 2026-05-06 00:06:03 +00:00 · 2026-05-06 00:06:02 +00:00 · 2026-05-06 00:06:02 +00:00 · 2026-05-06 00:04:12 +00:00 · 2026-05-06 00:04:09 +00:00
4 changed files with 93 additions and 265 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -7,6 +7,7 @@ import { ServiceWrapper } from "@/components/ServiceWrapper";
 import Tag from "@/tag/Tag";
 import { getVisualEditScript } from "@/utils/visual-edit-script";
 import { Roboto } from "next/font/google";
+import { Press_Start_2P } from "next/font/google";



@@ -20,11 +21,8 @@ export const metadata: Metadata = {
  },
 };

-const roboto = Roboto({
-  variable: "--font-roboto",
-  subsets: ["latin"],
-  weight: ["100", "300", "400", "500", "700", "900"],
-});
+
+const pressStart = Press_Start_2P({ variable: "--font-pixel", subsets: ["latin"], weight: ["400"] });

 export default function RootLayout({
  children,
@@ -34,7 +32,7 @@ export default function RootLayout({
  return (
    <html lang="en" suppressHydrationWarning>
      <ServiceWrapper>
-        <body className={`${roboto.variable} antialiased`}>
+        <body className={`${pressStart.variable} antialiased`}>
          <Tag />
          {children}
          <script
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -12,7 +12,7 @@ import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/Nav
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import SplitAbout from '@/components/sections/about/SplitAbout';
 import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
-import { Award, CheckCircle, Clock } from "lucide-react";
+import { Award, CheckCircle, Palette, Monitor, Cuboid } from "lucide-react";

 export default function LandingPage() {
  return (
@@ -22,28 +22,19 @@ export default function LandingPage() {
        borderRadius="soft"
        contentWidth="compact"
        sizing="mediumLargeSizeMediumTitles"
-        background="circleGradient"
-        cardStyle="solid"
-        primaryButtonStyle="flat"
-        secondaryButtonStyle="layered"
-        headingFontWeight="semibold"
+        background="noise"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="diagonal-gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Works",
-          id: "features",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
+        { name: "About", id: "about" },
+        { name: "Works", id: "features" },
+        { name: "Contact", id: "contact" },
      ]}
      brandName="Portfolio"
    />
@@ -51,111 +42,20 @@ export default function LandingPage() {

  <div id="hero" data-section="hero">
      <HeroSplitDoubleCarousel
-      background={{
-        variant: "plain",
-      }}
+      background={{ variant: "plain" }}
      title="Creative Portfolio"
      description="Showcasing high-impact designs, strategic concepts, and visual excellence built with precision and passion."
      leftCarouselItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-minimalist-wedding-invitation_23-2148242357.jpg",
-          imageAlt: "Hero Creative 1",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-psd/designer-template-design_23-2151776101.jpg",
-          imageAlt: "Hero Creative 2",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/abstract-stain-with-ferromagnetic-liquid-metal-with-copy-space_23-2148253549.jpg",
-          imageAlt: "Hero Creative 3",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-abstract-shapes-facebook-cover_23-2149098199.jpg",
-          imageAlt: "Hero Creative 4",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-wedding-paper-with-dried-plant_23-2149374589.jpg",
-          imageAlt: "Hero Creative 5",
-        },
+        { imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-minimalist-wedding-invitation_23-2148242357.jpg", imageAlt: "Hero Creative 1" },
+        { imageSrc: "http://img.b2bpic.net/free-psd/designer-template-design_23-2151776101.jpg", imageAlt: "Hero Creative 2" },
      ]}
      rightCarouselItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-psd/art-gallery-banner-template_23-2148596130.jpg",
-          imageAlt: "Hero Creative 6",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/red-coffee-cup-open-laptop-white-background_23-2148178591.jpg",
-          imageAlt: "Hero Creative 7",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-man-developing-photos_23-2149893918.jpg",
-          imageAlt: "Hero Creative 8",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/still-life-fashion-designer-s-office_23-2151272900.jpg",
-          imageAlt: "Hero Creative 9",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-shades-pink-each-other-divided-by-line_181624-5214.jpg",
-          imageAlt: "Hero Creative 10",
-        },
-      ]}
-      buttons={[
-        {
-          text: "View Projects",
-          href: "#features",
-        },
-      ]}
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/houndstongue-leaves-white-background-text-space_53876-97375.jpg",
-          alt: "Avatar 1",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/top-view-notebook-with-plant_23-2148838842.jpg",
-          alt: "Avatar 2",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/dried-leaf-frame-botanical-background_53876-106189.jpg",
-          alt: "Avatar 3",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/tropical-palm-leaf-simple-social-media-banner-background_53876-96889.jpg",
-          alt: "Avatar 4",
-        },
-        {
-          src: "http://img.b2bpic.net/free-vector/fluid-gradient-background-templates_53876-80614.jpg",
-          alt: "Avatar 5",
-        },
-      ]}
-      avatarText="Trusted by 50+ clients worldwide"
-      marqueeItems={[
-        {
-          type: "image",
-          src: "http://img.b2bpic.net/free-photo/yellow-red-dye-water_23-2147745440.jpg",
-          alt: "Marquee 1",
-        },
-        {
-          type: "image",
-          src: "http://img.b2bpic.net/free-photo/flat-lay-shades-red-papers-close-up_23-2148263920.jpg",
-          alt: "Marquee 2",
-        },
-        {
-          type: "image",
-          src: "http://img.b2bpic.net/free-photo/detail-tasty-jelly-cake_23-2147840383.jpg",
-          alt: "Marquee 3",
-        },
-        {
-          type: "image",
-          src: "http://img.b2bpic.net/free-photo/single-curved-sheet-paper_23-2148319062.jpg",
-          alt: "Marquee 4",
-        },
-        {
-          type: "image",
-          src: "http://img.b2bpic.net/free-vector/abstract-banners-with-chrome-elements_1284-25621.jpg",
-          alt: "Marquee 5",
-        },
+        { imageSrc: "http://img.b2bpic.net/free-psd/art-gallery-banner-template_23-2148596130.jpg", imageAlt: "Hero Creative 3" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/red-coffee-cup-open-laptop-white-background_23-2148178591.jpg", imageAlt: "Hero Creative 4" },
      ]}
+      buttons={[{ text: "View Projects", href: "#features" }]}
+      titleClassName="font-mono uppercase tracking-tighter text-5xl font-bold"
+      descriptionClassName="font-sans text-base"
    />
  </div>

@@ -166,18 +66,8 @@ export default function LandingPage() {
      title="About My Creative Journey"
      description="With over 5 years of experience in digital design and strategy, I transform complex ideas into visually compelling realities that resonate with audiences."
      bulletPoints={[
-        {
-          title: "Design Strategy",
-          description: "Focused on user-centric design principles.",
-        },
-        {
-          title: "Visual Excellence",
-          description: "High fidelity production across digital media.",
-        },
-        {
-          title: "Collaboration",
-          description: "Working closely with teams for results.",
-        },
+        { title: "Design Strategy", description: "Focused on user-centric design principles." },
+        { title: "Visual Excellence", description: "High fidelity production across digital media." },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/smiley-woman-posing-black-white-medium-shot_23-2149411384.jpg"
    />
@@ -190,27 +80,59 @@ export default function LandingPage() {
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      features={[
-        {
-          title: "Brand Identity",
-          description: "Crafting visual identities for startups.",
-          imageSrc: "http://img.b2bpic.net/free-photo/elegant-cozy-office-with-laptop-desk_23-2149636248.jpg",
-        },
-        {
-          title: "Web Platforms",
-          description: "Design systems for scalable platforms.",
-          imageSrc: "http://img.b2bpic.net/free-photo/black-bokeh-background_1017-3117.jpg",
-        },
-        {
-          title: "Motion Graphics",
-          description: "High end animations and transitions.",
-          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-bright-curves-paper-sheets_23-2148428671.jpg",
-        },
+        { title: "Brand Identity", description: "Crafting visual identities for startups.", imageSrc: "http://img.b2bpic.net/free-photo/elegant-cozy-office-with-laptop-desk_23-2149636248.jpg?_wi=1" },
+        { title: "Web Platforms", description: "Design systems for scalable platforms.", imageSrc: "http://img.b2bpic.net/free-photo/black-bokeh-background_1017-3117.jpg?_wi=1" },
      ]}
      title="Selected Works"
      description="A collection of design projects ranging from branding to UI/UX and motion design."
    />
  </div>

+  <div id="graphic-designer" data-section="graphic-designer">
+      <FeatureCardThree
+      animationType="slide-up"
+      textboxLayout="default"
+      gridVariant="three-columns-all-equal-width"
+      useInvertedBackground={true}
+      features={[
+        { title: "Visual Identity", description: "Logo design and brand guidelines.", imageSrc: "http://img.b2bpic.net/free-photo/elegant-cozy-office-with-laptop-desk_23-2149636248.jpg?_wi=2" },
+        { title: "Print Media", description: "Marketing materials and editorial design.", imageSrc: "http://img.b2bpic.net/free-photo/black-bokeh-background_1017-3117.jpg?_wi=2" },
+      ]}
+      title="Graphic Designer"
+      description="Professional graphic design solutions that elevate brand presence through intentional visuals."
+    />
+  </div>
+
+  <div id="ui-ux-designer" data-section="ui-ux-designer">
+      <FeatureCardThree
+      animationType="slide-up"
+      textboxLayout="default"
+      gridVariant="three-columns-all-equal-width"
+      useInvertedBackground={false}
+      features={[
+        { title: "App Interfaces", description: "Intuitive layouts for mobile applications.", imageSrc: "http://img.b2bpic.net/free-photo/elegant-cozy-office-with-laptop-desk_23-2149636248.jpg?_wi=3" },
+        { title: "Web UX", description: "Streamlined user flows for web products.", imageSrc: "http://img.b2bpic.net/free-photo/black-bokeh-background_1017-3117.jpg?_wi=3" },
+      ]}
+      title="UI/UX Designer"
+      description="Creating accessible and engaging user experiences focused on conversion and usability."
+    />
+  </div>
+
+  <div id="3d-designer" data-section="3d-designer">
+      <FeatureCardThree
+      animationType="slide-up"
+      textboxLayout="default"
+      gridVariant="three-columns-all-equal-width"
+      useInvertedBackground={true}
+      features={[
+        { title: "3D Models", description: "Detailed 3D assets for various industries.", imageSrc: "http://img.b2bpic.net/free-photo/elegant-cozy-office-with-laptop-desk_23-2149636248.jpg?_wi=4" },
+        { title: "Product Visualization", description: "Realistic product renderings and animations.", imageSrc: "http://img.b2bpic.net/free-photo/black-bokeh-background_1017-3117.jpg?_wi=4" },
+      ]}
+      title="3D Designer"
+      description="Bringing ideas into the third dimension with high-quality models and rendering techniques."
+    />
+  </div>
+
  <div id="metrics" data-section="metrics">
      <MetricCardOne
      animationType="slide-up"
@@ -218,61 +140,21 @@ export default function LandingPage() {
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={true}
      metrics={[
-        {
-          id: "m1",
-          value: "50+",
-          title: "Projects",
-          description: "Delivered successfully.",
-          icon: CheckCircle,
-        },
-        {
-          id: "m2",
-          value: "20+",
-          title: "Brands",
-          description: "Collaborated with global brands.",
-          icon: Award,
-        },
-        {
-          id: "m3",
-          value: "5",
-          title: "Years",
-          description: "Of industry experience.",
-          icon: Clock,
-        },
+        { id: "m1", value: "50+", title: "Projects", description: "Delivered successfully.", icon: CheckCircle },
+        { id: "m2", value: "20+", title: "Brands", description: "Collaborated with global brands.", icon: Award },
      ]}
      title="Impact by Numbers"
-      description="Measuring success through tangible project outcomes and growth metrics."
+      description="Measuring success through tangible project outcomes."
    />
  </div>

  <div id="testimonial" data-section="testimonial">
      <TestimonialCardFifteen
      useInvertedBackground={false}
-      testimonial="Working with this designer was a fantastic experience. The attention to detail and ability to understand our vision was truly impressive."
+      testimonial="Working with this designer was a fantastic experience."
      rating={5}
      author="Sarah Miller, Design Lead"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-blonde-short-haired-woman-posing-white-shirt_23-2149021781.jpg",
-          alt: "Sarah",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/charming-young-woman-stylish-beige-dress-sits-comfortable-pose-wooden-bench-leans-h_197531-33584.jpg",
-          alt: "Colleague A",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/medium-shot-man-with-messy-bun-posing_23-2149435265.jpg",
-          alt: "Colleague B",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-sitting_23-2149213193.jpg",
-          alt: "Colleague C",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-young-asian-woman-autumn-clothes_23-2149071320.jpg",
-          alt: "Colleague D",
-        },
-      ]}
+      avatars={[{ src: "https://i.pravatar.cc/150?u=1", alt: "User 1" }, { src: "https://i.pravatar.cc/150?u=2", alt: "User 2" }]}
      ratingAnimation="blur-reveal"
      avatarsAnimation="slide-up"
    />
@@ -280,91 +162,39 @@ export default function LandingPage() {

  <div id="socialProof" data-section="socialProof">
      <SocialProofOne
-      textboxLayout="default"
-      useInvertedBackground={true}
-      names={[
-        "InnovateTech",
-        "CreativePulse",
-        "GlobalDesign",
-        "NextGenSaaS",
-        "VisualGrowth",
-        "DesignStream",
-        "FutureWorks",
-      ]}
+      names={["InnovateTech", "CreativePulse", "GlobalDesign"]}
      title="Trusted By Industry Leaders"
-      description="I have had the pleasure of working with exceptional organizations worldwide."
+      description="Partnering with top companies to deliver excellence."
+      textboxLayout="default"
+      useInvertedBackground={false}
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
-      useInvertedBackground={false}
      faqs={[
-        {
-          id: "f1",
-          title: "Do you accept new clients?",
-          content: "Yes, I am always open to new project opportunities.",
-        },
-        {
-          id: "f2",
-          title: "What is your process?",
-          content: "I follow a design-thinking process from discovery to final delivery.",
-        },
-        {
-          id: "f3",
-          title: "Are your designs responsive?",
-          content: "Every project is mobile-first and fully responsive.",
-        },
+        { id: "f1", title: "Do you accept new clients?", content: "Yes, I am always open to new project opportunities." }
      ]}
      sideTitle="Frequently Asked Questions"
-      sideDescription="Need more info? Let's clarify."
      faqsAnimation="slide-up"
+      useInvertedBackground={false}
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
-      useInvertedBackground={true}
-      background={{
-        variant: "plain",
-      }}
+      background={{ variant: "plain" }}
      tag="Let's Talk"
      title="Let's Get Started"
      description="Ready to bring your ideas to life? Contact me to discuss your next big project."
+      useInvertedBackground={false}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseCard
      logoText="Portfolio"
-      columns={[
-        {
-          title: "Links",
-          items: [
-            {
-              label: "About",
-              href: "#about",
-            },
-            {
-              label: "Projects",
-              href: "#features",
-            },
-          ],
-        },
-        {
-          title: "Social",
-          items: [
-            {
-              label: "Twitter",
-              href: "#",
-            },
-            {
-              label: "LinkedIn",
-              href: "#",
-            },
-          ],
-        },
-      ]}
+      columns={[{ title: "Links", items: [{ label: "About", href: "#about" }] }]}
    />
  </div>
      </ReactLenis>
--- 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-roboto), sans-serif;
+  font-family: var(--font-pixel), sans-serif;
  position: relative;
  min-height: 100vh;
  overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-roboto), sans-serif;
+  font-family: var(--font-pixel), sans-serif;
 }
--- a/src/app/styles/variables.css
+++ b/src/app/styles/variables.css
@@ -10,15 +10,15 @@
  --accent: #ffffff;
  --background-accent: #ffffff; */

-  --background: #f7f6f7;
-  --card: #ffffff;
-  --foreground: #250c0d;
-  --primary-cta: #b82b40;
+  --background: #1a1a1a;
+  --card: #262626;
+  --foreground: #f5f5f5;
+  --primary-cta: #f97316;
  --primary-cta-text: #f7f6f7;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #fef08a;
  --secondary-cta-text: #250c0d;
-  --accent: #b90941;
-  --background-accent: #e8a8b6;
+  --accent: #f97316;
+  --background-accent: #262626;

  /* text sizing - set by ThemeProvider */
  /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
Author	SHA1	Message	Date
bender	fae77aa4df	Merge version_4 into main Merge version_4 into main	2026-05-06 00:06:06 +00:00
bender	ea692fcb51	Update src/app/styles/base.css	2026-05-06 00:06:03 +00:00
bender	e4488f4e83	Update src/app/page.tsx	2026-05-06 00:06:02 +00:00
bender	70fe3fd6e8	Update src/app/layout.tsx	2026-05-06 00:06:02 +00:00
bender	175157775a	Merge version_3 into main Merge version_3 into main	2026-05-06 00:04:12 +00:00
bender	1f285f98b1	Update src/app/page.tsx	2026-05-06 00:04:09 +00:00
bender	6040b4a59a	Merge version_3 into main Merge version_3 into main	2026-05-06 00:03:43 +00:00
bender	3d0c21bebb	Update src/app/page.tsx	2026-05-06 00:03:40 +00:00
bender	4a3ba9440f	Merge version_2 into main Merge version_2 into main	2026-05-06 00:02:26 +00:00
bender	e308938889	Update src/app/page.tsx	2026-05-06 00:02:23 +00:00
bender	b9d7a23aca	Merge version_2 into main Merge version_2 into main	2026-05-06 00:01:53 +00:00
bender	03a055c628	Update src/app/styles/variables.css	2026-05-06 00:01:50 +00:00
bender	f6f131ef2d	Update src/app/page.tsx	2026-05-06 00:01:49 +00:00