Update theme fonts

Update src/app/page.tsx
2026-05-05 15:17:45 +00:00 · 2026-05-05 15:17:44 +00:00 · 2026-05-05 15:12:49 +00:00 · 2026-05-05 15:12:25 +00:00 · 2026-05-05 15:11:55 +00:00
3 changed files with 58 additions and 272 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 { Archivo } from "next/font/google";
 import { DM_Sans } from "next/font/google";
@@ -21,8 +22,13 @@ export const metadata: Metadata = {
  },
 };
-const archivo = Archivo({
+
-  variable: "--font-archivo",
+const dmSans = DM_Sans({
  variable: "--font-dm-sans",
  subsets: ["latin"],
 });
 const inter = Inter({
  variable: "--font-inter",
  subsets: ["latin"],
 });
@@ -34,7 +40,7 @@ export default function RootLayout({
  return (
    <html lang="en" suppressHydrationWarning>
      <ServiceWrapper>
-        <body className={`${archivo.variable} antialiased`}>
+        <body className={`${dmSans.variable} ${inter.variable} antialiased`}>
          <Tag />
          {children}
          <script
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,17 +2,16 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import AboutMetric from '@/components/sections/about/AboutMetric';
+import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
-import BlogCardThree from '@/components/sections/blog/BlogCardThree';
+import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
-import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
-import FaqDouble from '@/components/sections/faq/FaqDouble';
+import FaqBase from '@/components/sections/faq/FaqBase';
-import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
+import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
-import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
-import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
+import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import ProductCardThree from '@/components/sections/product/ProductCardThree';
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
-import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
+import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
 import { Award, CheckCircle, Star } from "lucide-react";
 export default function LandingPage() {
  return (
@@ -32,330 +31,111 @@ export default function LandingPage() {
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
-        {
+        { name: "Home", id: "hero" },
-          name: "Home",
+        { name: "About", id: "about" },
-          id: "hero",
+        { name: "Projects", id: "projects" },
-        },
+        { name: "Contact", id: "contact" },
        {
          name: "About",
          id: "about",
        },
        {
          name: "Projects",
          id: "projects",
        },
        {
          name: "Contact",
          id: "contact",
        },
      ]}
      brandName="PORTFOLIO"
    />
  </div>
  <div id="hero" data-section="hero">
-      <HeroBillboardGallery
+      <HeroBillboardScroll
-      background={{
+      background={{ variant: "radial-gradient" }}
        variant: "radial-gradient",
      }}
      title="Crafting Digital Experiences"
      description="I build minimalist, high-performance web applications with a focus on clean design and seamless interactions."
-      mediaItems={[
+      imageSrc="http://img.b2bpic.net/free-photo/top-view-vinyl-record-assortment_23-2149075991.jpg"
        {
          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">
-      <AboutMetric
+      <InlineImageSplitTextAbout
      heading={[{ type: "text", content: "The Numbers Behind My Work" }]}
      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">
-      <FeatureCardSixteen
+      <FeatureCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
-      negativeCard={{
+      features={[
-        items: [
+        { title: "Performance", description: "Optimized web stack", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=vg91tk&_wi=1" },
-          "Legacy codebase maintenance",
+        { 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" }
-          "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">
-      <ProductCardThree
+      <ProductCardFour
      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">
-      <TestimonialCardSix
+      <TestimonialCardFifteen
-      animationType="slide-up"
+      testimonial="Exceptional attention to detail and design execution."
-      textboxLayout="default"
+      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"
      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">
-      <BlogCardThree
+      <BlogCardTwo
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      title="Design Insights"
-      description="Thoughts on web development, design systems, and tech."
+      description="Thoughts on web development and design systems."
-      blogs={[
+      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">
-      <FaqDouble
+      <FaqBase
      faqsAnimation="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
-      faqs={[
+      faqs={[{ id: "1", title: "How do you handle projects?", content: "Iterative design and development." }]}
        {
          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">
-      <ContactSplitForm
+      <ContactSplit
-      useInvertedBackground={false}
+      tag="Contact"
      background={{ variant: "plain" }}
      title="Get In Touch"
      description="Interested in working together? Let's discuss your next project."
-      inputs={[
+      mediaAnimation="slide-up"
-        {
+      useInvertedBackground={false}
          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">
-      <FooterBaseReveal
+      <FooterLogoReveal
      logoText="PORTFOLIO"
-      columns={[
+      leftLink={{ text: "Home", href: "#hero" }}
-        {
+      rightLink={{ text: "Projects", href: "#projects" }}
          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-archivo), sans-serif;
+  font-family: var(--font-inter), sans-serif;
  position: relative;
  min-height: 100vh;
  overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-archivo), sans-serif;
+  font-family: var(--font-dm-sans), sans-serif;
 }
Author	SHA1	Message	Date
bender	65a26d7c51	Update theme fonts	2026-05-05 15:17:45 +00:00
bender	18725ce112	Update theme fonts	2026-05-05 15:17:44 +00:00
bender	fdf95eaa7f	Update src/app/page.tsx	2026-05-05 15:12:49 +00:00
bender	8f9b03abe6	Update src/app/page.tsx	2026-05-05 15:12:25 +00:00
bender	11e3241947	Update src/app/page.tsx	2026-05-05 15:11:55 +00:00