Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -2,9 +2,9 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactText from '@/components/sections/contact/ContactText';
+import ContactForm from '@/components/form/ContactForm';
 import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
-import FooterBase from '@/components/sections/footer/FooterBase';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
@@ -28,21 +28,14 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingInline
       navItems={[
-        {
+        { name: "Home", id: "home" },
-          name: "Home",          id: "home"},
+        { name: "Info", id: "info" },
-        {
+        { name: "Experience", id: "experience" },
-          name: "Info",          id: "info"},
+        { name: "Projects", id: "projects" },
-        {
+        { name: "Contact", id: "contact" },
-          name: "Experience",          id: "experience"},
-        {
-          name: "Projects",          id: "projects"},
-        {
-          name: "Contact",          id: "contact"},
       ]}
       brandName="𝔑onefolio"
-      button={{
+      button={{ text: "Contact Me", href: "#contact" }}
-        text: "Contact Me",        href: "#contact"
-      }}
     />
   </div>
 
@@ -51,24 +44,13 @@ export default function LandingPage() {
       logoText="Ngabonziza Issa"
       description="Frontend Developer & UI/UX Designer. I design fast, modern websites that help brands grow."
       buttons={[
-        {
+        { text: "View Projects", href: "#projects" },
-          text: "View Projects",          href: "#projects"},
+        { text: "Hire Me", href: "#contact" },
-        {
-          text: "Hire Me",          href: "#contact"},
       ]}
       slides={[
-        {
+        { imageSrc: "http://img.b2bpic.net/free-photo/view-3d-modern-abstract-sphere-art_23-2150937433.jpg?_wi=1", imageAlt: "3D Developer Object" },
-          imageSrc: "http://img.b2bpic.net/free-photo/view-3d-modern-abstract-sphere-art_23-2150937433.jpg?_wi=1",          imageAlt: "3D Developer Object"},
+        { imageSrc: "http://img.b2bpic.net/free-photo/view-3d-modern-abstract-sphere-art_23-2150937433.jpg?_wi=2", imageAlt: "3D Developer Object" },
-        {
+        { imageSrc: "http://img.b2bpic.net/free-photo/view-3d-modern-abstract-sphere-art_23-2150937433.jpg?_wi=3", imageAlt: "3D Developer Object" },
-          imageSrc: "http://img.b2bpic.net/free-photo/view-3d-modern-abstract-sphere-art_23-2150937433.jpg?_wi=2",          imageAlt: "3D Developer Object"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/view-3d-modern-abstract-sphere-art_23-2150937433.jpg?_wi=3",          imageAlt: "3D Developer Object"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/view-3d-modern-abstract-sphere-art_23-2150937433.jpg?_wi=4",          imageAlt: "3D Developer Object"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/view-3d-modern-abstract-sphere-art_23-2150937433.jpg?_wi=5",          imageAlt: "3D Developer Object"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/view-3d-modern-abstract-sphere-art_23-2150937433.jpg?_wi=6",          imageAlt: "3D Developer Object"},
       ]}
     />
   </div>
@@ -86,12 +68,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={true}
       features={[
-        {
+        { title: "Frontend/UI", description: "HTML, CSS, Figma, JS, TypeScript, ReactJS", imageSrc: "http://img.b2bpic.net/free-photo/view-3d-modern-abstract-sphere-art_23-2150937433.jpg?_wi=7", imageAlt: "3d floating sphere abstract" },
-          title: "Frontend/UI",          description: "HTML, CSS, Figma, JS, TypeScript, ReactJS",          imageSrc: "http://img.b2bpic.net/free-photo/view-3d-modern-abstract-sphere-art_23-2150937433.jpg?_wi=7",          imageAlt: "3d floating sphere abstract"},
+        { title: "Backend & Tools", description: "Node.js, Git, Tailwind, MongoDB", imageSrc: "http://img.b2bpic.net/free-photo/rendering-smart-home-device_23-2151039324.jpg?_wi=1", imageAlt: "modern app interface mobile" },
-        {
+        { title: "Performance", description: "SEO Optimization, Accessibility, Mobile-First Design", imageSrc: "http://img.b2bpic.net/free-photo/mock-up-animation-financial-stock-market-data-software-with-different-diagrams-graphs_482257-26904.jpg?_wi=1", imageAlt: "religious app interface design" },
-          title: "Backend & Tools",          description: "Node.js, Git, Tailwind, MongoDB",          imageSrc: "http://img.b2bpic.net/free-photo/rendering-smart-home-device_23-2151039324.jpg?_wi=1",          imageAlt: "modern app interface mobile"},
-        {
-          title: "Performance",          description: "SEO Optimization, Accessibility, Mobile-First Design",          imageSrc: "http://img.b2bpic.net/free-photo/mock-up-animation-financial-stock-market-data-software-with-different-diagrams-graphs_482257-26904.jpg?_wi=1",          imageAlt: "religious app interface design"},
       ]}
       title="Skills & Experience"
       description="Tools and technologies I use to build seamless web experiences."
@@ -105,24 +84,9 @@ export default function LandingPage() {
       gridVariant="three-columns-all-equal-width"
       useInvertedBackground={false}
       products={[
-        {
+        { id: "1", brand: "React Native", name: "Social Platform", price: "View Demo", rating: 5, reviewCount: "12", imageSrc: "http://img.b2bpic.net/free-photo/rendering-smart-home-device_23-2151039324.jpg?_wi=2" },
-          id: "1",          brand: "React Native",          name: "Social Platform",          price: "View Demo",          rating: 5,
+        { id: "2", brand: "React Native", name: "Muslims App", price: "View Demo", rating: 5, reviewCount: "24", imageSrc: "http://img.b2bpic.net/free-photo/mock-up-animation-financial-stock-market-data-software-with-different-diagrams-graphs_482257-26904.jpg?_wi=2" },
-          reviewCount: "12",          imageSrc: "http://img.b2bpic.net/free-photo/rendering-smart-home-device_23-2151039324.jpg?_wi=2"},
+        { id: "3", brand: "Node.js", name: "Recipe Dashboard", price: "View Demo", rating: 5, reviewCount: "8", imageSrc: "http://img.b2bpic.net/free-photo/high-protein-meal-with-smartphone-arrangement_23-2149089685.jpg?_wi=1" },
-        {
-          id: "2",          brand: "React Native",          name: "Muslims App",          price: "View Demo",          rating: 5,
-          reviewCount: "24",          imageSrc: "http://img.b2bpic.net/free-photo/mock-up-animation-financial-stock-market-data-software-with-different-diagrams-graphs_482257-26904.jpg?_wi=2"},
-        {
-          id: "3",          brand: "Node.js",          name: "Recipe Dashboard",          price: "View Demo",          rating: 5,
-          reviewCount: "8",          imageSrc: "http://img.b2bpic.net/free-photo/high-protein-meal-with-smartphone-arrangement_23-2149089685.jpg?_wi=1"},
-        {
-          id: "4",          brand: "React Native",          name: "Personal Portfolio",          price: "View Demo",          rating: 5,
-          reviewCount: "10",          imageSrc: "http://img.b2bpic.net/free-photo/rendering-smart-home-device_23-2151039324.jpg?_wi=3"},
-        {
-          id: "5",          brand: "Node.js",          name: "E-Commerce",          price: "View Demo",          rating: 5,
-          reviewCount: "15",          imageSrc: "http://img.b2bpic.net/free-photo/mock-up-animation-financial-stock-market-data-software-with-different-diagrams-graphs_482257-26904.jpg?_wi=3"},
-        {
-          id: "6",          brand: "Tailwind",          name: "Landing Page",          price: "View Demo",          rating: 5,
-          reviewCount: "5",          imageSrc: "http://img.b2bpic.net/free-photo/high-protein-meal-with-smartphone-arrangement_23-2149089685.jpg?_wi=2"},
       ]}
       title="Selected Projects"
       description="A collection of my recent work."
@@ -130,38 +94,27 @@ export default function LandingPage() {
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactText
+      <ContactForm
-      useInvertedBackground={true}
+      title="Let's Connect"
-      background={{
+      description="Interested in working together? Send me a message."
-        variant: "animated-grid"}}
+      tag="Contact"
-      text="Available for new projects. Let's create something extraordinary."
+      inputPlaceholder="Your email address..."
+      buttonText="Send Message"
+      useInvertedBackground={false}
+      centered={true}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterBase
+      <FooterBaseReveal
-      columns={[
-        {
-          title: "Socials",          items: [
-            {
-              label: "Twitter",              href: "#"},
-            {
-              label: "GitHub",              href: "#"},
-          ],
-        },
-        {
-          title: "Navigation",          items: [
-            {
-              label: "Home",              href: "#home"},
-            {
-              label: "Projects",              href: "#projects"},
-          ],
-        },
-      ]}
       logoText="𝔑onefolio"
+      columns={[
+        { title: "Navigation", items: [{ label: "Home", href: "#home" }, { label: "Projects", href: "#projects" }] },
+        { title: "Contact", items: [{ label: "Email", href: "mailto:hello@example.com" }, { label: "Twitter", href: "#" }] }
+      ]}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #050012;
+  --background: #0a0a0a;
-  --card: #040121;
+  --card: #1a1a1a;
-  --foreground: #f0e6ff;
+  --foreground: #ffffffe6;
-  --primary-cta: #c89bff;
+  --primary-cta: #e6e6e6;
   --primary-cta-text: #050012;
-  --secondary-cta: #1d123b;
+  --secondary-cta: #1a1a1a;
   --secondary-cta-text: #f0e6ff;
-  --accent: #684f7b;
+  --accent: #737373;
-  --background-accent: #65417c;
+  --background-accent: #737373;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);