Switch to version 1: modified src/app/styles/base.css

Switch to version 1: modified src/app/page.tsx
Switch to version 1: modified src/app/layout.tsx
2026-05-05 15:18:01 +00:00 · 2026-05-05 15:18:01 +00:00 · 2026-05-05 15:18:01 +00:00 · 2026-05-05 15:17:48 +00:00 · 2026-05-05 15:12:52 +00:00 · 2026-05-05 15:12:28 +00:00
3 changed files with 272 additions and 58 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -7,7 +7,6 @@ import { ServiceWrapper } from "@/components/ServiceWrapper";
 import Tag from "@/tag/Tag";
 import { getVisualEditScript } from "@/utils/visual-edit-script";
 import { Archivo } from "next/font/google";
-import { DM_Sans } from "next/font/google";



@@ -22,13 +21,8 @@ export const metadata: Metadata = {
  },
 };

-
-const dmSans = DM_Sans({
-  variable: "--font-dm-sans",
-  subsets: ["latin"],
-});
-const inter = Inter({
-  variable: "--font-inter",
+const archivo = Archivo({
+  variable: "--font-archivo",
  subsets: ["latin"],
 });

@@ -40,7 +34,7 @@ export default function RootLayout({
  return (
    <html lang="en" suppressHydrationWarning>
      <ServiceWrapper>
-        <body className={`${dmSans.variable} ${inter.variable} antialiased`}>
+        <body className={`${archivo.variable} antialiased`}>
          <Tag />
          {children}
          <script
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,16 +2,17 @@

 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
-import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
-import ContactSplit from '@/components/sections/contact/ContactSplit';
-import FaqBase from '@/components/sections/faq/FaqBase';
-import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
-import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
-import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
+import AboutMetric from '@/components/sections/about/AboutMetric';
+import BlogCardThree from '@/components/sections/blog/BlogCardThree';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FaqDouble from '@/components/sections/faq/FaqDouble';
+import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import ProductCardFour from '@/components/sections/product/ProductCardFour';
-import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
+import ProductCardThree from '@/components/sections/product/ProductCardThree';
+import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
+import { Award, CheckCircle, Star } from "lucide-react";

 export default function LandingPage() {
  return (
@@ -31,111 +32,330 @@ export default function LandingPage() {
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
-        { name: "Home", id: "hero" },
-        { name: "About", id: "about" },
-        { name: "Projects", id: "projects" },
-        { name: "Contact", id: "contact" },
+        {
+          name: "Home",
+          id: "hero",
+        },
+        {
+          name: "About",
+          id: "about",
+        },
+        {
+          name: "Projects",
+          id: "projects",
+        },
+        {
+          name: "Contact",
+          id: "contact",
+        },
      ]}
      brandName="PORTFOLIO"
    />
  </div>

  <div id="hero" data-section="hero">
-      <HeroBillboardScroll
-      background={{ variant: "radial-gradient" }}
+      <HeroBillboardGallery
+      background={{
+        variant: "radial-gradient",
+      }}
      title="Crafting Digital Experiences"
      description="I build minimalist, high-performance web applications with a focus on clean design and seamless interactions."
-      imageSrc="http://img.b2bpic.net/free-photo/top-view-vinyl-record-assortment_23-2149075991.jpg"
+      mediaItems={[
+        {
+          imageSrc: "http://img.b2bpic.net/free-photo/top-view-vinyl-record-assortment_23-2149075991.jpg",
+          imageAlt: "Minimal Abstract",
+        },
+        {
+          imageSrc: "http://img.b2bpic.net/free-photo/leaf-shaped-dark-plate-with-eggs-dark-plate_23-2148340402.jpg",
+          imageAlt: "Dark Studio",
+        },
+        {
+          imageSrc: "http://img.b2bpic.net/free-photo/natural-abstract-shadow-details_23-2149210755.jpg",
+          imageAlt: "Architectural Light",
+        },
+        {
+          imageSrc: "http://img.b2bpic.net/free-photo/black-wall-paint-textured-background_53876-133019.jpg",
+          imageAlt: "Black wall paint textured background",
+        },
+        {
+          imageSrc: "http://img.b2bpic.net/free-photo/black-watercolor-background_53876-101915.jpg",
+          imageAlt: "Black watercolor background",
+        },
+      ]}
+      mediaAnimation="slide-up"
    />
  </div>

  <div id="about" data-section="about">
-      <InlineImageSplitTextAbout
-      heading={[{ type: "text", content: "The Numbers Behind My Work" }]}
+      <AboutMetric
      useInvertedBackground={false}
+      title="The Numbers Behind My Work"
+      metrics={[
+        {
+          icon: CheckCircle,
+          label: "Projects Completed",
+          value: "50+",
+        },
+        {
+          icon: Award,
+          label: "Years Experience",
+          value: "5",
+        },
+        {
+          icon: Star,
+          label: "Happy Clients",
+          value: "30+",
+        },
+      ]}
+      metricsAnimation="slide-up"
    />
  </div>

  <div id="skills" data-section="skills">
-      <FeatureCardOne
+      <FeatureCardSixteen
      animationType="slide-up"
      textboxLayout="default"
-      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
-      features={[
-        { title: "Performance", description: "Optimized web stack", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=vg91tk&_wi=1" },
-        { title: "Design", description: "Clean component-driven UI", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=vg91tk&_wi=2" }
-      ]}
+      negativeCard={{
+        items: [
+          "Legacy codebase maintenance",
+          "Slow page load times",
+          "Monolithic architectures",
+        ],
+      }}
+      positiveCard={{
+        items: [
+          "Modern React/Next.js stack",
+          "Optimized performance patterns",
+          "Component-driven design",
+        ],
+      }}
      title="Technical Expertise"
      description="Balancing complex architecture with intuitive user experiences."
    />
  </div>

  <div id="projects" data-section="projects">
-      <ProductCardFour
+      <ProductCardThree
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="bento-grid"
      useInvertedBackground={false}
+      products={[
+        {
+          id: "p1",
+          name: "SaaS Platform",
+          price: "Case Study",
+          imageSrc: "http://img.b2bpic.net/free-vector/flat-design-geometric-pattern-mobile-design-template_23-2149980070.jpg",
+        },
+        {
+          id: "p2",
+          name: "Brand Identity",
+          price: "Case Study",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=vg91tk",
+        },
+        {
+          id: "p3",
+          name: "Mobile App",
+          price: "Case Study",
+          imageSrc: "http://img.b2bpic.net/free-photo/person-looking-smartphone-with-smart-home-lights-app-sitting-kitchen-house-with-automation-lighting-system-turning-bulbs-with-voice-command_482257-2256.jpg",
+        },
+        {
+          id: "p4",
+          name: "E-Commerce",
+          price: "Case Study",
+          imageSrc: "http://img.b2bpic.net/free-photo/modern-comfortable-workplace-home-there-are-computer-laptop-table_613910-13270.jpg",
+        },
+        {
+          id: "p5",
+          name: "Web Tool",
+          price: "Case Study",
+          imageSrc: "http://img.b2bpic.net/free-photo/laptop-dark-night-desktop_169016-53733.jpg",
+        },
+        {
+          id: "p6",
+          name: "Landing Page",
+          price: "Case Study",
+          imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-studio_23-2151320710.jpg",
+        },
+      ]}
      title="Selected Work"
      description="A collection of digital projects and design case studies."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardFifteen
-      testimonial="Exceptional attention to detail and design execution."
-      rating={5}
-      author="Alice Chen"
-      avatars={[{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=vg91tk", alt: "Alice" }]}
-      ratingAnimation="slide-up"
-      avatarsAnimation="slide-up"
+      <TestimonialCardSix
+      animationType="slide-up"
+      textboxLayout="default"
      useInvertedBackground={false}
+      testimonials={[
+        {
+          id: "1",
+          name: "Alice Chen",
+          handle: "@alice",
+          testimonial: "Exceptional attention to detail and design execution.",
+          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-black-sweater-standing-posing_114579-58756.jpg",
+        },
+        {
+          id: "2",
+          name: "Bob Smith",
+          handle: "@bob",
+          testimonial: "Delivered high-quality results ahead of schedule.",
+          imageSrc: "http://img.b2bpic.net/free-photo/confident-african-american-businessman-black-classic-jacket-isolated-dark-background_613910-17869.jpg",
+        },
+        {
+          id: "3",
+          name: "Clara Wu",
+          handle: "@clara",
+          testimonial: "Innovative solutions to complex UI challenges.",
+          imageSrc: "http://img.b2bpic.net/free-photo/joyful-woman-black-jacket-liking-lip-posing-isolated-background-charming-lady-dark-suit-smiling-white-backdrop_197531-18516.jpg",
+        },
+        {
+          id: "4",
+          name: "David Zuo",
+          handle: "@david",
+          testimonial: "A master of modern web frameworks.",
+          imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-posing-with-flowers_52683-87229.jpg",
+        },
+        {
+          id: "5",
+          name: "Eve Li",
+          handle: "@eve",
+          testimonial: "Transformed our digital presence completely.",
+          imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-woman-posing-fashionable-outfit_23-2149021789.jpg",
+        },
+      ]}
+      title="What Clients Say"
+      description="Collaborative success stories and professional feedback."
    />
  </div>

  <div id="blog" data-section="blog">
-      <BlogCardTwo
+      <BlogCardThree
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      title="Design Insights"
-      description="Thoughts on web development and design systems."
-      blogs={[]}
+      description="Thoughts on web development, design systems, and tech."
+      blogs={[
+        {
+          id: "b1",
+          category: "Design",
+          title: "Minimalism in Web Design",
+          excerpt: "Why less is often more in modern interfaces.",
+          imageSrc: "http://img.b2bpic.net/free-photo/modern-smartphone-display-mockup-white-background_9975-134379.jpg",
+          authorName: "Author",
+          authorAvatar: "http://img.b2bpic.net/free-photo/close-up-portrait-handsome-middle-aged-man-with-beard-hairstyle-dressed-elegant-formal-suit-textured-dark-background-studio_613910-19887.jpg",
+          date: "Oct 12",
+        },
+        {
+          id: "b2",
+          category: "Tech",
+          title: "Next.js Best Practices",
+          excerpt: "Streamlining your development workflow.",
+          imageSrc: "http://img.b2bpic.net/free-photo/glasses-near-laptop-reflect-light-from-screen-dark-copy-space_169016-14893.jpg",
+          authorName: "Author",
+          authorAvatar: "http://img.b2bpic.net/free-photo/bearded-man-red-tie-shirt-wearing-glasses-looking-camera-smiling-presenting-copy-space-with-arm-his-handstanding-orange-background_141793-110723.jpg",
+          date: "Oct 15",
+        },
+        {
+          id: "b3",
+          category: "Dev",
+          title: "CSS Performance",
+          excerpt: "Optimizing visual rendering in browsers.",
+          imageSrc: "http://img.b2bpic.net/free-photo/top-view-keys-drawing-arrangement_23-2149386326.jpg",
+          authorName: "Author",
+          authorAvatar: "http://img.b2bpic.net/free-photo/portrait-beautiful-young-business-woman_158595-4746.jpg",
+          date: "Oct 20",
+        },
+      ]}
    />
  </div>

  <div id="faq" data-section="faq">
-      <FaqBase
-      faqsAnimation="slide-up"
+      <FaqDouble
      textboxLayout="default"
      useInvertedBackground={false}
-      faqs={[{ id: "1", title: "How do you handle projects?", content: "Iterative design and development." }]}
+      faqs={[
+        {
+          id: "1",
+          title: "How do you handle projects?",
+          content: "I follow an iterative design and development process.",
+        },
+        {
+          id: "2",
+          title: "Are you taking new clients?",
+          content: "I am currently accepting select new projects.",
+        },
+        {
+          id: "3",
+          title: "Where are you based?",
+          content: "I operate remotely globally.",
+        },
+      ]}
      title="Common Questions"
      description="Everything you need to know about working with me."
+      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
-      <ContactSplit
-      tag="Contact"
-      background={{ variant: "plain" }}
+      <ContactSplitForm
+      useInvertedBackground={false}
      title="Get In Touch"
      description="Interested in working together? Let's discuss your next project."
-      mediaAnimation="slide-up"
-      useInvertedBackground={false}
+      inputs={[
+        {
+          name: "name",
+          type: "text",
+          placeholder: "Name",
+        },
+        {
+          name: "email",
+          type: "email",
+          placeholder: "Email",
+        },
+      ]}
      imageSrc="http://img.b2bpic.net/free-photo/working-desk-businessman_23-2147833279.jpg"
    />
  </div>

  <div id="footer" data-section="footer">
-      <FooterLogoReveal
+      <FooterBaseReveal
      logoText="PORTFOLIO"
-      leftLink={{ text: "Home", href: "#hero" }}
-      rightLink={{ text: "Projects", href: "#projects" }}
+      columns={[
+        {
+          title: "Navigation",
+          items: [
+            {
+              label: "Home",
+              href: "#hero",
+            },
+            {
+              label: "Projects",
+              href: "#projects",
+            },
+          ],
+        },
+        {
+          title: "Social",
+          items: [
+            {
+              label: "Twitter",
+              href: "#",
+            },
+            {
+              label: "LinkedIn",
+              href: "#",
+            },
+          ],
+        },
+      ]}
+      copyrightText="© 2024 Portfolio. All rights reserved."
    />
  </div>
      </ReactLenis>
    </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-inter), sans-serif;
+  font-family: var(--font-archivo), sans-serif;
  position: relative;
  min-height: 100vh;
  overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-dm-sans), sans-serif;
+  font-family: var(--font-archivo), sans-serif;
 }
Author	SHA1	Message	Date
bender	02dc0d868d	Switch to version 1: modified src/app/styles/base.css	2026-05-05 15:18:01 +00:00
bender	80be02454e	Switch to version 1: modified src/app/page.tsx	2026-05-05 15:18:01 +00:00
bender	4ad1712314	Switch to version 1: modified src/app/layout.tsx	2026-05-05 15:18:01 +00:00
bender	563dbc8026	Merge version_2 into main Merge version_2 into main	2026-05-05 15:17:48 +00:00
bender	2dfe765610	Merge version_2 into main Merge version_2 into main	2026-05-05 15:12:52 +00:00
bender	8422a1c351	Merge version_2 into main Merge version_2 into main	2026-05-05 15:12:28 +00:00
bender	79d93643c3	Merge version_2 into main Merge version_2 into main	2026-05-05 15:12:02 +00:00