Update theme fonts

2026-05-09 16:23:16 +00:00 · 2026-05-09 16:23:16 +00:00 · 2026-05-09 16:22:56 +00:00 · 2026-05-09 16:22:55 +00:00 · 2026-05-09 16:22:41 +00:00 · 2026-05-09 16:22:29 +00:00
4 changed files with 54 additions and 80 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -7,6 +7,8 @@ import { ServiceWrapper } from "@/components/ServiceWrapper";
 import Tag from "@/tag/Tag";
 import { getVisualEditScript } from "@/utils/visual-edit-script";
 import { Public_Sans } from "next/font/google";
+import { Montserrat } from "next/font/google";
+import { Raleway } from "next/font/google";



@@ -21,8 +23,10 @@ export const metadata: Metadata = {
  },
 };

-const publicSans = Public_Sans({
-  variable: "--font-public-sans",
+
+
+const raleway = Raleway({
+  variable: "--font-raleway",
  subsets: ["latin"],
 });

@@ -34,7 +38,7 @@ export default function RootLayout({
  return (
    <html lang="en" suppressHydrationWarning>
      <ServiceWrapper>
-        <body className={`${publicSans.variable} antialiased`}>
+        <body className={`${raleway.variable} antialiased`}>
          <Tag />
          {children}
          <script
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,14 +3,14 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import AboutMetric from '@/components/sections/about/AboutMetric';
-import ContactSplit from '@/components/sections/contact/ContactSplit';
-import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
-import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
-import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
-import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
-import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import ProductCardFour from '@/components/sections/product/ProductCardFour';
-import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
+import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import ProductCardThree from '@/components/sections/product/ProductCardThree';
+import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
 import { Award, CheckCircle, Code } from "lucide-react";

 export default function LandingPage() {
@@ -29,7 +29,7 @@ export default function LandingPage() {
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingOverlay
+      <NavbarStyleApple
      navItems={[
        { name: "Work", id: "#projects" },
        { name: "About", id: "#about" },
@@ -40,20 +40,14 @@ export default function LandingPage() {
  </div>

  <div id="hero" data-section="hero">
-      <HeroCarouselLogo
+      <HeroLogoBillboard
      logoText="Code That Moves"
      description="Fullstack developer crafting innovative digital solutions with modern technologies. Explore my work and let's build something extraordinary together."
      buttons={[
-        { text: "View My Projects", href: "#projects" }
-      ]}
-      slides={[
-        { imageSrc: "http://img.b2bpic.net/free-photo/close-up-engineer-using-tablet-sustainable-data-center-implementing-green-technologies-it_482257-132419.jpg", imageAlt: "Dashboard" },
-        { imageSrc: "http://img.b2bpic.net/free-photo/man-using-laptop-night-top-view-web-banner-with-copy-space_169016-53022.jpg", imageAlt: "Editor" },
-        { imageSrc: "http://img.b2bpic.net/free-photo/blue-light-with-bokeh-effect_1208-208.jpg", imageAlt: "Abstract" },
-        { imageSrc: "http://img.b2bpic.net/free-photo/server-cabinets-data-center-maintaining-large-scale-ai-datasets_482257-124181.jpg", imageAlt: "Server" },
-        { imageSrc: "http://img.b2bpic.net/free-photo/3d-render-3-dimensional-printer-abstract-background_1048-5870.jpg", imageAlt: "Quantum" },
-        { imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-communications-background-with-low-poly-plexus-design_1048-13614.jpg", imageAlt: "Blockchain" }
+        { text: "Discuss Your Project", href: "#projects" }
      ]}
+      background={{ variant: "animated-grid" }}
+      mediaAnimation="slide-up"
    />
  </div>

@@ -71,14 +65,13 @@ export default function LandingPage() {
  </div>

  <div id="features" data-section="features">
-      <FeatureCardTwentyEight
-      animationType="slide-up"
+      <FeatureCardSix
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
-        { id: "f1", title: "Frontend", subtitle: "React, Next.js, Tailwind", category: "Web", value: "95%" },
-        { id: "f2", title: "Backend", subtitle: "Node.js, PostgreSQL, Redis", category: "Server", value: "90%" },
-        { id: "f3", title: "DevOps", subtitle: "Docker, Kubernetes, AWS", category: "Cloud", value: "85%" }
+        { title: "Frontend", description: "React, Next.js, Tailwind", imageSrc: "http://img.b2bpic.net/free-photo/business-analytics-financial-technology-concept-generative-ai_8829-2894.jpg?_wi=1" },
+        { title: "Backend", description: "Node.js, PostgreSQL, Redis", imageSrc: "http://img.b2bpic.net/free-photo/table-full-tailoring-instruments_482257-96375.jpg?_wi=1" },
+        { title: "DevOps", description: "Docker, Kubernetes, AWS", imageSrc: "http://img.b2bpic.net/free-photo/modern-equipped-computer-lab_23-2149241197.jpg?_wi=1" }
      ]}
      title="Core Competencies"
      description="Building scalable applications using industry-leading technology stacks."
@@ -86,34 +79,30 @@ export default function LandingPage() {
  </div>

  <div id="projects" data-section="projects">
-      <ProductCardFour
+      <ProductCardThree
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={true}
      products={[
-        { id: "p1", name: "SaaS Platform", price: "View Demo", variant: "Cloud", imageSrc: "http://img.b2bpic.net/free-photo/business-analytics-financial-technology-concept-generative-ai_8829-2894.jpg" },
-        { id: "p2", name: "E-commerce Shop", price: "View Demo", variant: "Web", imageSrc: "http://img.b2bpic.net/free-photo/table-full-tailoring-instruments_482257-96375.jpg" },
-        { id: "p3", name: "Data Analytics", price: "View Demo", variant: "B2B", imageSrc: "http://img.b2bpic.net/free-photo/modern-equipped-computer-lab_23-2149241197.jpg" },
-        { id: "p4", name: "Mobile App", price: "View Demo", variant: "App", imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design-smartphone_23-2150165980.jpg" },
-        { id: "p5", name: "Workboard", price: "View Demo", variant: "Productivity", imageSrc: "http://img.b2bpic.net/free-vector/fitness-mobile-app-infographic-flat-design_52683-15794.jpg" },
-        { id: "p6", name: "API Docs", price: "View Demo", variant: "Technical", imageSrc: "http://img.b2bpic.net/free-photo/it-specialist-writing-html-script-binary-code-database-security_482257-92458.jpg" }
+        { id: "p1", name: "SaaS Platform", price: "Explore Case Study", imageSrc: "http://img.b2bpic.net/free-photo/business-analytics-financial-technology-concept-generative-ai_8829-2894.jpg?_wi=2" },
+        { id: "p2", name: "E-commerce Shop", price: "Explore Case Study", imageSrc: "http://img.b2bpic.net/free-photo/table-full-tailoring-instruments_482257-96375.jpg?_wi=2" },
+        { id: "p3", name: "Data Analytics", price: "Explore Case Study", imageSrc: "http://img.b2bpic.net/free-photo/modern-equipped-computer-lab_23-2149241197.jpg?_wi=2" }
      ]}
      title="Featured Work"
-      description="A showcase of recent software development projects ranging from enterprise SaaS to consumer web applications."
+      description="A showcase of recent software development projects."
    />
  </div>

  <div id="metrics" data-section="metrics">
-      <MetricCardTwo
+      <MetricCardThree
      animationType="slide-up"
      textboxLayout="default"
-      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      metrics={[
-        { id: "m1", value: "150%", description: "Efficiency Increase" },
-        { id: "m2", value: "99.9%", description: "Platform Uptime" },
-        { id: "m3", value: "20+", description: "Happy Clients" }
+        { id: "m1", title: "Efficiency", value: "150%", icon: Award },
+        { id: "m2", title: "Uptime", value: "99.9%", icon: CheckCircle },
+        { id: "m3", title: "Clients", value: "20+", icon: Code }
      ]}
      title="Impact Driven"
      description="Measurable results delivered for partners."
@@ -121,54 +110,35 @@ export default function LandingPage() {
  </div>

  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardThirteen
-      animationType="slide-up"
-      textboxLayout="split"
+      <TestimonialCardTwelve
+      cardAnimation="slide-up"
      useInvertedBackground={true}
+      cardTitle="What partners say about our collaboration."
+      cardTag="Client Feedback"
      testimonials={[
-        { id: "1", name: "Sarah J.", handle: "@sarahj", testimonial: "Exceptional developer, delivered on time.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/friendly-successful-female-professional-posing-with-arms-folded_74855-2814.jpg" },
-        { id: "2", name: "Michael C.", handle: "@mikec", testimonial: "Great attention to detail and technical skill.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/handsome-african-man-sitting-table-office-while-his-subordinates-working-new-sale-strategy-indoor-portrait-business-people-international-company-posing-work-process_197531-3746.jpg" },
-        { id: "3", name: "Emily R.", handle: "@emilyr", testimonial: "Transformed our workflow completely.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-posing-turtleneck-with-flower_23-2149020761.jpg" },
-        { id: "4", name: "David K.", handle: "@davidk", testimonial: "Fast, efficient and easy to work with.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/closeup-content-pretty-businesswoman-glasses_1262-1740.jpg" },
-        { id: "5", name: "John B.", handle: "@johnb", testimonial: "Innovative solutions that scaled perfectly.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/black-businessman-happy-expression_1194-2579.jpg" }
+        { id: "1", name: "Sarah J.", imageSrc: "http://img.b2bpic.net/free-photo/friendly-successful-female-professional-posing-with-arms-folded_74855-2814.jpg" },
+        { id: "2", name: "Michael C.", imageSrc: "http://img.b2bpic.net/free-photo/handsome-african-man-sitting-table-office-while-his-subordinates-working-new-sale-strategy-indoor-portrait-business-people-international-company-posing-work-process_197531-3746.jpg" }
      ]}
-      showRating={true}
-      title="Client Feedback"
-      description="What partners say about our collaboration."
    />
  </div>

  <div id="contact" data-section="contact">
-      <ContactSplit
+      <ContactCenter
      useInvertedBackground={false}
      background={{ variant: "animated-grid" }}
      tag="Get in touch"
      title="Start your next project"
      description="Ready to bring your ideas to life? Let's discuss your requirements."
-      imageSrc="http://img.b2bpic.net/free-photo/3d-abstract-cyber-network-visualization-design_1048-17445.jpg"
-      mediaAnimation="slide-up"
      buttonText="Send Message"
    />
  </div>

  <div id="footer" data-section="footer">
-      <FooterBaseReveal
+      <FooterLogoEmphasis
      logoText="DevPortfolio"
      columns={[
-        {
-          title: "Navigation",          items: [
-            { label: "Work", href: "#projects" },
-            { label: "About", href: "#about" },
-            { label: "Contact", href: "#contact" }
-          ]
-        },
-        {
-          title: "Connect",          items: [
-            { label: "Twitter", href: "#" },
-            { label: "GitHub", href: "#" },
-            { label: "LinkedIn", href: "#" }
-          ]
-        }
+        { items: [{ label: "Work", href: "#projects" }, { label: "About", href: "#about" }] },
+        { items: [{ label: "Contact", href: "#contact" }] }
      ]}
    />
  </div>
--- 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-public-sans), sans-serif;
+  font-family: var(--font-raleway), sans-serif;
  position: relative;
  min-height: 100vh;
  overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-public-sans), sans-serif;
+  font-family: var(--font-raleway), sans-serif;
 }
--- a/src/app/styles/variables.css
+++ b/src/app/styles/variables.css
@@ -10,15 +10,15 @@
  --accent: #ffffff;
  --background-accent: #ffffff; */

-  --background: #000000;
-  --card: #0c0c0c;
-  --foreground: #ffffff;
-  --primary-cta: #106EFB;
-  --primary-cta-text: #ffffff;
-  --secondary-cta: #000000;
-  --secondary-cta-text: #ffffff;
-  --accent: #535353;
-  --background-accent: #106EFB;
+  --background: #fffefe;
+  --card: #f6f7f4;
+  --foreground: #080908;
+  --primary-cta: #0e3a29;
+  --primary-cta-text: #fffefe;
+  --secondary-cta: #e7eecd;
+  --secondary-cta-text: #080908;
+  --accent: #35c18b;
+  --background-accent: #ecebe4;

  /* text sizing - set by ThemeProvider */
  /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
Author	SHA1	Message	Date
bender	99ef428fee	Update theme fonts	2026-05-09 16:23:16 +00:00
bender	e7fed90ddf	Update theme fonts	2026-05-09 16:23:16 +00:00
bender	4d25491228	Update theme fonts	2026-05-09 16:22:56 +00:00
bender	12ac3383b9	Update theme fonts	2026-05-09 16:22:55 +00:00
bender	1b1a53bd06	Update theme colors	2026-05-09 16:22:41 +00:00
bender	e169ddffb5	Update theme colors	2026-05-09 16:22:29 +00:00
bender	e1cce6c9a2	Update theme colors	2026-05-09 16:22:18 +00:00
bender	2f2546827e	Update theme colors	2026-05-09 16:22:06 +00:00
bender	3e76d3e601	Update src/app/page.tsx	2026-05-09 16:19:29 +00:00
bender	161286ba3f	Merge version_3 into main Merge version_3 into main	2026-05-09 16:18:00 +00:00
bender	e42e56d627	Update src/app/page.tsx	2026-05-09 16:17:54 +00:00
bender	c6bf600f72	Merge version_2 into main Merge version_2 into main	2026-05-09 16:16:28 +00:00
bender	82ab5d214e	Update src/app/page.tsx	2026-05-09 16:16:22 +00:00
bender	d2b38bb37f	Merge version_2 into main Merge version_2 into main	2026-05-09 16:16:01 +00:00
bender	16ee24b8c4	Update src/app/page.tsx	2026-05-09 16:15:58 +00:00
bender	b98f3ad535	Merge version_2 into main Merge version_2 into main	2026-05-09 16:15:34 +00:00
bender	0ba865687d	Update src/app/page.tsx	2026-05-09 16:15:31 +00:00
bender	5f3d917410	Merge version_1 into main Merge version_1 into main	2026-05-09 16:13:07 +00:00