Update src/app/page.tsx

Update src/app/layout.tsx
2025-12-28 03:26:11 +00:00 · 2025-12-28 03:07:07 +00:00 · 2025-12-28 03:07:06 +00:00 · 2025-12-28 03:05:16 +00:00 · 2025-12-28 03:05:15 +00:00 · 2025-12-28 03:03:01 +00:00
3 changed files with 109 additions and 117 deletions
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -4,13 +4,13 @@
  /* Base units */
  /* --vw is set by ThemeProvider */

-  --background: #fafafa;;
-  --card: #f4f4f5;;
-  --foreground: #27272a;;
-  --primary-cta: #3f3f46;;
-  --secondary-cta: #ffffff;;
-  --accent: #facc15;;
-  --background-accent: #eab308;;
+  --background: #ffffff;
+  --card: #fafafa;
+  --foreground: #000000;
+  --primary-cta: #ffcc00;
+  --secondary-cta: #ffffff;
+  --accent: #e5e5e5;
+  --background-accent: #f5f5f5;

  /* text sizing - set by ThemeProvider */
  /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,13 +1,13 @@
 import type { Metadata } from "next";
-import { Inter_Tight } from "next/font/google";
+import { IBM_Plex_Sans } from "next/font/google";
 import "./globals.css";
 import { ServiceWrapper } from "@/components/ServiceWrapper";
 import Tag from "@/tag/Tag";

-const interTight = Inter_Tight({
-  variable: "--font-inter-tight",
+const ibmPlexSans = IBM_Plex_Sans({
+  variable: "--font-ibm-plex-sans",
  subsets: ["latin"],
-  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
+  weight: ["100", "200", "300", "400", "500", "600", "700"],
 });

 export const metadata: Metadata = {
@@ -47,7 +47,7 @@ export default function RootLayout({
    <html lang="en" suppressHydrationWarning>
      <ServiceWrapper>
        <body
-          className={`${interTight.variable} antialiased`}
+          className={`${ibmPlexSans.variable} antialiased`}
        >
          <Tag />
          {children}
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,139 +1,149 @@
-"use client"
+"use client";

 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
-import HeroBillboardMetrics from '@/components/sections/hero/HeroBillboardMetrics';
-import ProductCardSix from '@/components/sections/product/ProductCardSix';
-import TextAbout from '@/components/sections/about/TextAbout';
-import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
-import ContactSplit from '@/components/sections/contact/ContactSplit';
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import HeroBillboard from "@/components/sections/hero/HeroBillboard";
+import ProductCardOne from "@/components/sections/product/ProductCardOne";
+import MediaSplitTabsAbout from "@/components/sections/about/MediaSplitTabsAbout";
+import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
+import ContactSplit from "@/components/sections/contact/ContactSplit";
+import FooterSocial from "@/components/sections/footer/FooterSocial";

 export default function LandingPage() {
  return (
    <ThemeProvider
-      defaultButtonVariant="shift-hover"
-      defaultTextAnimation="reveal-blur"
-      borderRadius="soft"
-      contentWidth="compact"
-      sizing="mediumSizeLargeTitles"
-      background="noiseDiagonalGradient"
-      cardStyle="solid"
-      primaryButtonStyle="diagonal-gradient"
-      secondaryButtonStyle="layered"
-      headingFontWeight="semibold"
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
-        <NavbarStyleMinimal
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Gallery", id: "gallery" },
+            { name: "About", id: "about" },
+            { name: "Skills", id: "skills" },
+            { name: "Contact", id: "contact" },
+          ]}
+          button={{ text: "Get in Touch", href: "contact" }}
          brandName="Ben"
-          button={{
-            text: "Get in Touch",
-            href: "#contact"
-          }}
        />
      </div>
      
      <div id="hero" data-section="hero">
-        <HeroBillboardMetrics
+        <HeroBillboard
          title="3D Artist & Blender Specialist"
          description="Crafting immersive digital experiences through advanced 3D modeling, rendering, and animation. Transforming concepts into stunning visual reality."
          tag="3D Creative"
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888719283-nfmcx166.jpg"
-          imageAlt="Hero 3D render"
-          frameStyle="card"
-          metricsLabel="Trusted by studios and brands worldwide"
-          metrics={[
-            {
-              id: "1",
-              value: "8+",
-              label: "Years in 3D"
-            },
-            {
-              id: "2",
-              value: "150+",
-              label: "Projects Completed"
-            },
-            {
-              id: "3",
-              value: "50+",
-              label: "Happy Clients"
-            }
-          ]}
          buttons={[
-            {
-              text: "View Portfolio",
-              href: "#gallery"
-            }
+            { text: "View Portfolio", href: "gallery" },
+            { text: "Get Started", href: "contact" },
          ]}
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888719283-nfmcx166.jpg"
+          imageAlt="3D Artist Portfolio"
+          frameStyle="card"
        />
      </div>
      
      <div id="gallery" data-section="gallery">
-        <ProductCardSix
+        <ProductCardOne
          title="Featured Work"
          description="Explore my latest 3D renders and creative projects. Each piece showcases technical expertise and artistic vision."
          products={[
            {
              id: "1",
              name: "Character Modeling",
-              price: "Portfolio",
+              price: "Advanced",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888720392-ehsyl2xj.jpg",
-              imageAlt: "3D character model"
+              imageAlt: "3D character model",
            },
            {
              id: "2",
              name: "Visual Effects",
-              price: "Portfolio",
+              price: "Dynamic",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888721289-rze89n00.jpg",
-              imageAlt: "3D animation and effects"
+              imageAlt: "3D animation and effects",
            },
            {
              id: "3",
              name: "Product Rendering",
-              price: "Portfolio",
+              price: "Photorealistic",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888722652-paaoqfev.jpg",
-              imageAlt: "3D product render"
-            }
+              imageAlt: "3D product render",
+            },
          ]}
-          gridVariant="uniform-all-items-equal"
-          animationType="slide-up"
          textboxLayout="default"
+          animationType="slide-up"
+          gridVariant="three-columns-all-equal-width"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="about" data-section="about">
-        <TextAbout
+        <MediaSplitTabsAbout
          title="I bring imagination to life through cutting-edge 3D technology and creative storytelling"
+          tabs={[
+            {
+              id: "vision",
+              label: "Vision",
+              description: "Bringing concepts to life through innovative 3D visualization and artistic storytelling.",
+            },
+            {
+              id: "expertise",
+              label: "Expertise",
+              description: "Specialized in Blender, character modeling, photorealistic rendering, and animation pipelines.",
+            },
+            {
+              id: "approach",
+              label: "Approach",
+              description: "Combining technical excellence with creative vision to deliver stunning visual results.",
+            },
+          ]}
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888725581-tp75ftz7.jpg"
+          imageAlt="About section"
+          imagePosition="right"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="skills" data-section="skills">
-        <FeatureCardEight
+        <MetricCardEleven
          title="Core Competencies"
          description="Specialized expertise in 3D creation and digital art production"
-          features={[
+          metrics={[
            {
-              id: 1,
-              title: "3D Modeling",
-              description: "Advanced character and environment modeling using Blender and industry-standard techniques",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888720392-ehsyl2xj.jpg"
+              id: "1",
+              value: "8+",
+              title: "Years in 3D",
+              description: "Professional experience in 3D creation",
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888720392-ehsyl2xj.jpg",
+              imageAlt: "3D Modeling",
            },
            {
-              id: 2,
-              title: "Rendering & Shading",
-              description: "Photorealistic rendering with Cycles and specialized material development",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888721289-rze89n00.jpg"
+              id: "2",
+              value: "150+",
+              title: "Projects Completed",
+              description: "High-quality deliverables across industries",
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888721289-rze89n00.jpg",
+              imageAlt: "Rendering & Shading",
            },
            {
-              id: 3,
-              title: "Animation",
-              description: "Smooth character rigging, motion capture, and keyframe animation",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888722652-paaoqfev.jpg"
-            }
+              id: "3",
+              value: "50+",
+              title: "Happy Clients",
+              description: "Satisfied clients worldwide",
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888722652-paaoqfev.jpg",
+              imageAlt: "Animation",
+            },
          ]}
          textboxLayout="default"
+          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>
@@ -143,59 +153,41 @@ export default function LandingPage() {
          tag="Get Started"
          title="Ready to bring your vision to life?"
          description="Interested in collaborating on your next 3D project? Reach out directly or subscribe for updates on my latest work."
+          useInvertedBackground="noInvert"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888725581-tp75ftz7.jpg"
          imageAlt="Contact section"
          mediaPosition="right"
          inputPlaceholder="your@email.com"
          buttonText="Subscribe"
          termsText="We respect your privacy. Unsubscribe anytime."
-          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="footer" data-section="footer">
-        <FooterBaseCard
+        <FooterSocial
          logoText="Ben"
          columns={[
            {
              title: "Work",
              items: [
-                {
-                  label: "Portfolio",
-                  href: "#gallery"
-                },
-                {
-                  label: "Services",
-                  href: "#skills"
-                }
-              ]
+                { label: "Portfolio", href: "gallery" },
+                { label: "Services", href: "skills" },
+              ],
            },
            {
              title: "About",
              items: [
-                {
-                  label: "Bio",
-                  href: "#about"
-                },
-                {
-                  label: "Contact",
-                  href: "#contact"
-                }
-              ]
+                { label: "Bio", href: "about" },
+                { label: "Contact", href: "contact" },
+              ],
            },
            {
              title: "Connect",
              items: [
-                {
-                  label: "Email",
-                  href: "mailto:ben@example.com"
-                },
-                {
-                  label: "ArtStation",
-                  href: "#"
-                }
-              ]
-            }
+                { label: "Email", href: "mailto:ben@example.com" },
+                { label: "ArtStation", href: "https://artstation.com" },
+              ],
+            },
          ]}
          copyrightText="© 2025 Ben - 3D Artist & Blender Specialist"
        />
Author	SHA1	Message	Date
development	fafeb0ec7a	Update src/app/page.tsx	2025-12-28 03:26:11 +00:00
development	bc91b47822	Update src/app/page.tsx	2025-12-28 03:07:07 +00:00
development	cab0df2390	Update src/app/layout.tsx	2025-12-28 03:07:06 +00:00
development	4d2e33c122	Update src/app/page.tsx	2025-12-28 03:05:16 +00:00
development	38b5788f07	Update src/app/layout.tsx	2025-12-28 03:05:15 +00:00
development	9620d9d66a	Update src/app/page.tsx	2025-12-28 03:03:01 +00:00
development	05d820609a	Update src/app/page.tsx	2025-12-28 03:01:45 +00:00
development	c86fb4ef82	Update src/app/page.tsx	2025-12-28 03:00:17 +00:00
development	4636f764b0	Update src/app/layout.tsx	2025-12-28 03:00:16 +00:00
development	81b2de936c	Update src/app/globals.css	2025-12-28 02:47:55 +00:00
development	b334a30866	Update src/app/page.tsx	2025-12-28 02:39:56 +00:00
development	05a8697997	Update src/app/layout.tsx	2025-12-28 02:39:55 +00:00
development	700bf7e104	Update src/app/globals.css	2025-12-28 02:39:54 +00:00
development	fc87cd5833	Update src/app/page.tsx	2025-12-28 02:31:10 +00:00