Merge version_5 into main

Merge version_5 into main

src/app/page.tsx

@@ -2,15 +2,15 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCTA from '@/components/sections/contact/ContactCTA';
-import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
-import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
-import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
+import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import ProductCardOne from '@/components/sections/product/ProductCardOne';
-import SplitAbout from '@/components/sections/about/SplitAbout';
-import TeamCardSix from '@/components/sections/team/TeamCardSix';
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
+import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
+import TeamCardFive from '@/components/sections/team/TeamCardFive';
 
 export default function LandingPage() {
   return (
@@ -30,16 +30,11 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleCentered
       navItems={[
-        {
-          name: "About",          id: "about"},
-        {
-          name: "Skills",          id: "skills"},
-        {
-          name: "Projects",          id: "projects"},
-        {
-          name: "Experience",          id: "experience"},
-        {
-          name: "Contact",          id: "contact"},
+        { name: "About", id: "about" },
+        { name: "Skills", id: "skills" },
+        { name: "Projects", id: "projects" },
+        { name: "Experience", id: "experience" },
+        { name: "Contact", id: "contact" },
       ]}
       brandName="Sion Kim"
     />
@@ -50,186 +45,103 @@ export default function LandingPage() {
       logoText="Sion Kim"
       description="Web Publisher & Frontend UI Specialist. Building scalable, responsive, and user-focused digital interfaces for enterprise success."
       buttons={[
-        {
-          text: "View Projects",          href: "#projects"},
-        {
-          text: "Contact",          href: "#contact"},
+        { text: "View Projects", href: "#projects" },
+        { text: "Contact", href: "#contact" },
       ]}
       slides={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/professional-editor-uses-ai-powered-software-pc-reels-creative-office_482257-126981.jpg",          imageAlt: "Hero slide 1"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/programmer-writes-code-laptop-screen-while-apartment-office-using-java_482257-87273.jpg",          imageAlt: "Hero slide 2"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-desk-concept-with-copy-space_23-2148459730.jpg",          imageAlt: "Hero slide 3"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/working-table-with-computer_93675-133811.jpg",          imageAlt: "Hero slide 4"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/african-american-investment-expert-works-home-analyzing-financial-statistics_482257-120570.jpg",          imageAlt: "Hero slide 5"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/senior-tech-startup-hr-recruiter-identifying-candidates-job-reviewing-cvs_482257-118780.jpg",          imageAlt: "Hero slide 6"},
+        { imageSrc: "http://img.b2bpic.net/free-photo/professional-editor-uses-ai-powered-software-pc-reels-creative-office_482257-126981.jpg", imageAlt: "Hero slide 1" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/programmer-writes-code-laptop-screen-while-apartment-office-using-java_482257-87273.jpg", imageAlt: "Hero slide 2" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/front-view-desk-concept-with-copy-space_23-2148459730.jpg", imageAlt: "Hero slide 3" },
       ]}
     />
   </div>
 
   <div id="about" data-section="about">
-      <SplitAbout
-      textboxLayout="split"
+      <InlineImageSplitTextAbout
+      heading={[{ type: "text", content: "Detail-Oriented Frontend Specialist" }]}
       useInvertedBackground={false}
-      title="Detail-Oriented Frontend Specialist"
-      description="With over 8 years in the industry, I specialize in transforming complex design requirements into high-performance, accessible, and maintenance-friendly digital experiences. I bridge the gap between design and development through semantic markup and robust CSS architecture."
-      buttons={[
-        { text: "Learn More", href: "#" },
-        { text: "View Experience", href: "#experience" }
-      ]}
-      bulletPoints={[
-        {
-          title: "Semantic & Accessible",          description: "Writing clean, standard-compliant HTML/CSS with a focus on WCAG compliance."},
-        {
-          title: "Scalable Architecture",          description: "Expert in SCSS and modular component libraries that grow with your project."},
-        {
-          title: "Performance First",          description: "Optimizing cross-browser compatibility and UI consistency for enterprise-grade performance."},
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/female-entrepreneur-looking-laptop-while-working-from-home-office_482257-20474.jpg"
-      mediaAnimation="slide-up"
+      buttons={[{ text: "Learn More", href: "#" }]}
     />
   </div>
 
   <div id="skills" data-section="skills">
-      <FeatureCardTwentyEight
+      <FeatureCardSixteen
+      title="Technical Competence"
+      description="Enterprise-ready skill set for modern digital implementation."
       animationType="slide-up"
       textboxLayout="default"
       useInvertedBackground={false}
-      features={[
-        {
-          id: "s1",          title: "Core Foundations",          subtitle: "HTML5, CSS3, JS",          category: "Development",          value: "Expert"},
-        {
-          id: "s2",          title: "CSS Architecture",          subtitle: "SCSS, BEM, Modular CSS",          category: "Publishing",          value: "Advanced"},
-        {
-          id: "s3",          title: "UI Consistency",          subtitle: "Design Systems, Figma",          category: "Design Ops",          value: "Advanced"},
-        {
-          id: "s4",          title: "Modern Accessibility",          subtitle: "WCAG Compliance, ARIA",          category: "Access",          value: "Certified"},
-        {
-          id: "s5",          title: "Development Flow",          subtitle: "Git, CLI, Gulp/Webpack",          category: "Tools",          value: "Advanced"},
-        {
-          id: "s6",          title: "Responsive Strategy",          subtitle: "Adaptive & Mobile-first",          category: "UX/UI",          value: "Master"},
-      ]}
-      title="Technical Competence"
-      description="Enterprise-ready skill set for modern digital implementation."
+      positiveCard={{ items: ["Semantic HTML5", "Modern CSS Architecture", "Performance Optimization"] }}
+      negativeCard={{ items: ["Browser Incompatibility", "Heavy Dependency Loads", "Unmaintained Code"] }}
     />
   </div>
 
   <div id="projects" data-section="projects">
-      <ProductCardOne
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="asymmetric-60-wide-40-narrow"
-      useInvertedBackground={false}
-      products={[
-        {
-          id: "p1",          name: "Samsung Enterprise Portal",          price: "Publishing Lead",          imageSrc: "http://img.b2bpic.net/free-photo/factory-employee-works-mockup-tablet-executives-discussing-strategies_482257-126500.jpg"},
-        {
-          id: "p2",          name: "LG Digital Campaign",          price: "UI Implementation",          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-measuring-tools-still-life_23-2150440939.jpg"},
-        {
-          id: "p3",          name: "CJ Corporate Platform",          price: "Accessibility Audit",          imageSrc: "http://img.b2bpic.net/free-photo/hands-working-laptop-network-graphic-overlay_53876-124039.jpg"},
-        {
-          id: "p4",          name: "Digital Agency Website",          price: "Performance Dev",          imageSrc: "http://img.b2bpic.net/free-photo/it-specialist-working-data-center-facility-housing-storage-hardware-close-up_482257-90136.jpg"},
-        {
-          id: "p5",          name: "B2B SaaS Dashboard",          price: "Frontend Dev",          imageSrc: "http://img.b2bpic.net/free-photo/top-view-career-guidance-items-designers_23-2149443503.jpg"},
-        {
-          id: "p6",          name: "Design System 2.0",          price: "Lead Publisher",          imageSrc: "http://img.b2bpic.net/free-photo/tech-startup-company-hr-employee-looking-cvs-doing-background-checks_482257-119132.jpg"},
-      ]}
+      <ProductCardFour
       title="Enterprise Case Studies"
       description="Selected projects showcasing clean code and UI craftsmanship."
+      animationType="slide-up"
+      gridVariant="asymmetric-60-wide-40-narrow"
+      textboxLayout="default"
+      useInvertedBackground={false}
+      products={[
+        { id: "p1", name: "Samsung Portal", price: "Publishing Lead", variant: "Enterprise", imageSrc: "http://img.b2bpic.net/free-photo/factory-employee-works-mockup-tablet-executives-discussing-strategies_482257-126500.jpg" },
+        { id: "p2", name: "LG Campaign", price: "Implementation", variant: "Marketing", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-measuring-tools-still-life_23-2150440939.jpg" },
+      ]}
     />
   </div>
 
   <div id="workflow" data-section="workflow">
-      <MetricCardFourteen
-      useInvertedBackground={false}
+      <MetricCardTwo
       title="Work Process"
-      tag="Efficiency & Quality"
       metrics={[
-        {
-          id: "m1",          value: "Concept",          description: "Requirement Analysis & Planning"},
-        {
-          id: "m2",          value: "Publish",          description: "Semantic & Scalable Implementation"},
-        {
-          id: "m3",          value: "QA",          description: "Rigorous Cross-Browser & Accessibility"},
-        {
-          id: "m4",          value: "Live",          description: "Performance Tuning & Maintenance"},
+        { id: "m1", value: "Concept", description: "Requirement Analysis & Planning" },
+        { id: "m2", value: "Publish", description: "Semantic & Scalable Implementation" },
+        { id: "m3", value: "QA", description: "Rigorous Cross-Browser Testing" },
       ]}
-      metricsAnimation="slide-up"
+      description="Standardized development lifecycle."
+      textboxLayout="default"
+      useInvertedBackground={false}
+      gridVariant="uniform-all-items-equal"
+      animationType="slide-up"
     />
   </div>
 
   <div id="experience" data-section="experience">
-      <TeamCardSix
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="one-large-right-three-stacked-left"
-      useInvertedBackground={false}
-      members={[
-        {
-          id: "e1",          name: "Senior Web Publisher",          role: "Digital Agency",          imageSrc: "http://img.b2bpic.net/free-photo/remote-worker-organizing-project-data-reviewing-his-handwritten-notes_482257-126448.jpg"},
-        {
-          id: "e2",          name: "Frontend Specialist",          role: "Enterprise Corp",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-coding-software-tablet-server-room_482257-118186.jpg"},
-        {
-          id: "e3",          name: "UI/UX Publisher",          role: "Design Agency",          imageSrc: "http://img.b2bpic.net/free-photo/development-agency-office-worker-analyzing-project-sales-fintech-startup-businessperson-sitting-desk-marketing-company-office-developing-financial-strategy-accounting-management_482257-40323.jpg"},
-        {
-          id: "e4",          name: "Frontend Lead",          role: "Software Startup",          imageSrc: "http://img.b2bpic.net/free-photo/pensive-programmer-walking-through-apartment-thinking-how-solve-coding-issues_482257-104090.jpg"},
-      ]}
+      <TeamCardFive
       title="Professional Experience"
       description="Driving UI excellence in major digital organizations."
+      animationType="slide-up"
+      textboxLayout="default"
+      useInvertedBackground={false}
+      team={[
+        { id: "e1", name: "Senior Web Publisher", role: "Digital Agency" },
+        { id: "e2", name: "Frontend Specialist", role: "Enterprise Corp" },
+      ]}
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactCTA
+      <ContactCenter
+      title="Get in Touch"
+      description="Let's discuss how we can work together."
+      tag="Collaboration"
+      background={{ variant: "animated-grid" }}
       useInvertedBackground={false}
-      background={{
-        variant: "plain"}}
-      tag="Let's Collaborate"
-      title="Ready for your next enterprise project?"
-      description="Looking for a reliable Frontend UI Specialist? Let's discuss how my expertise in semantic publishing can elevate your project quality."
-      buttons={[
-        {
-          text: "Send Email",          href: "mailto:hello@example.com"},
-      ]}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterBaseReveal
+      <FooterBaseCard
       logoText="Sion Kim"
       columns={[
-        {
-          title: "Navigation",          items: [
-            {
-              label: "Projects",              href: "#projects"},
-            {
-              label: "About",              href: "#about"},
-          ],
-        },
-        {
-          title: "Social",          items: [
-            {
-              label: "GitHub",              href: "#"},
-            {
-              label: "LinkedIn",              href: "#"},
-          ],
-        },
-        {
-          title: "Legal",          items: [
-            {
-              label: "Privacy Policy",              href: "#"},
-          ],
-        },
+        { title: "Navigation", items: [{ label: "Projects", href: "#projects" }, { label: "About", href: "#about" }] },
+        { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }] }
       ]}
-      copyrightText="© 2024 Sion Kim. All rights reserved."
+      copyrightText="© 2025 | Sion Kim"
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
-  --card: #f9f9f9;
-  --foreground: #000612e6;
-  --primary-cta: #15479c;
-  --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
-  --secondary-cta-text: #000612e6;
-  --accent: #e2e2e2;
-  --background-accent: #c4c4c4;
+  --background: #000000;
+  --card: #1f1f40;
+  --foreground: #ffffff;
+  --primary-cta: #ffffff;
+  --primary-cta-text: #0a051a;
+  --secondary-cta: #0d0d2b;
+  --secondary-cta-text: #d4d4f6;
+  --accent: #3d2880;
+  --background-accent: #663cff;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);