Update src/app/contact/page.tsx

Merge version_1 into main

src/app/about/page.tsx

@@ -2,11 +2,9 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import FeatureBento from '@/components/sections/feature/FeatureBento';
-import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
+import TextAbout from '@/components/sections/about/TextAbout';
-import { Award, ShieldCheck } from "lucide-react";
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 
 export default function AboutPage() {
   return (
@@ -23,48 +21,32 @@ export default function AboutPage() {
         headingFontWeight="normal"
     >
       <ReactLenis root>
-        <div id="nav" data-section="nav">
+        <NavbarStyleCentered
-          <NavbarStyleCentered
+          navItems={[
-            navItems={[
+            { name: "Home", id: "/" },
-              { name: "Home", id: "/" },
+            { name: "Services", id: "/services" },
-              { name: "Services", id: "/services" },
+            { name: "Portfolio", id: "/portfolio" },
-              { name: "Portfolio", id: "/portfolio" },
+            { name: "About", id: "/about" },
-              { name: "About", id: "/about" },
+            { name: "Contact", id: "/contact" },
-              { name: "Contact", id: "/contact" },
+          ]}
-            ]}
+          brandName="JE Metal Works"
-            brandName="JE Metal Works"
+        />
-          />
+        <div className="pt-32 pb-20">
-        </div>
+            <TextAbout 
-
+                title="Our Story: Craftsmanship in Every Weld"
-        <div id="feature" data-section="feature">
+                tag="Craft & Reliability"
-          <FeatureBento
+                useInvertedBackground={false}
-            animationType="slide-up"
+                className="py-20"
-            textboxLayout="default"
+            />
-            useInvertedBackground={false}
-            title="Our Craft"
-            description="Why we are the leaders in metal fabrication."
-            features={[
-              {
-                title: "Expertise",                description: "20+ years in the field.",                bentoComponent: "reveal-icon",                icon: Award
-              },
-              {
-                title: "Quality",                description: "Premium raw materials.",                bentoComponent: "reveal-icon",                icon: ShieldCheck
-              },
-            ]}
-          />
-        </div>
-
-        <div id="socialProof" data-section="socialProof">
-          <SocialProofOne
-            textboxLayout="default"
-            useInvertedBackground={false}
-            title="Our Accolades"
-            description="Recognized for quality in every weld."
-            names={[
-              "Best Fabricator 2023",              "Industrial Gold Standard",              "Customer Excellence Award",              "Safety Leader",              "Top Rated Local Business"]}
-          />
         </div>
+        <FooterBaseReveal
+          columns={[
+            { title: "Services", items: [{ label: "Custom Fencing", href: "/services#fencing" }, { label: "Automatic Gates", href: "/services#gates" }] },
+            { title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Contact Us", href: "/contact" }] },
+          ]}
+          copyrightText="© 2024 JE Metal Works. All rights reserved."
+        />
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/contact/page.tsx

@@ -2,10 +2,9 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
-import FeatureBento from '@/components/sections/feature/FeatureBento';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import { BarChart2, Wrench } from "lucide-react";
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 
 export default function ContactPage() {
   return (
@@ -22,54 +21,34 @@ export default function ContactPage() {
         headingFontWeight="normal"
     >
       <ReactLenis root>
-        <div id="nav" data-section="nav">
+        <NavbarStyleCentered
-          <NavbarStyleCentered
+          navItems={[
-            navItems={[
+            { name: "Home", id: "/" },
-              { name: "Home", id: "/" },
+            { name: "Services", id: "/services" },
-              { name: "Services", id: "/services" },
+            { name: "Portfolio", id: "/portfolio" },
-              { name: "Portfolio", id: "/portfolio" },
+            { name: "About", id: "/about" },
-              { name: "About", id: "/about" },
+            { name: "Contact", id: "/contact" },
-              { name: "Contact", id: "/contact" },
+          ]}
-            ]}
+          brandName="JE Metal Works"
-            brandName="JE Metal Works"
+        />
-          />
+        <div className="pt-32 pb-20">
-        </div>
+            <ContactCenter 
-
+                title="Get in Touch"
-        <div id="contact-section" data-section="contact-section">
+                description="Ready to start your custom metal fabrication project? Reach out to our team today for a consultation."
-          <ContactSplitForm
+                tag="Communication"
-            useInvertedBackground={false}
+                background={{ variant: "plain" }}
-            title="Request Your Free Quote"
+                useInvertedBackground={false}
-            description="Ready to get started on your custom metal project? Tell us about your needs and we'll be in touch."
+                className="py-20"
-            inputs={[
+            />
-              { name: "name", type: "text", placeholder: "Your Name", required: true },
-              { name: "phone", type: "tel", placeholder: "Your Phone Number", required: true },
-              { name: "email", type: "email", placeholder: "Your Email", required: true },
-            ]}
-            textarea={{ name: "details", placeholder: "Project details, dimensions, or service type...", rows: 4 }}
-            mediaAnimation="slide-up"
-            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVME1uxntIXgeb4GoE5qIirTEF/a-high-quality-professional-photograph-o-1774801232444-bce0d8f0.png"
-            imageAlt="A high-quality, professional photograph of custom steel metal fabrication and welding. Sparks flying"
-          />
-        </div>
-
-        <div id="feature" data-section="feature">
-          <FeatureBento
-            animationType="slide-up"
-            textboxLayout="default"
-            useInvertedBackground={false}
-            title="Support Ready"
-            description="How we help you get started."
-            features={[
-              {
-                title: "Initial Quote",                description: "Free estimates provided.",                bentoComponent: "reveal-icon",                icon: BarChart2
-              },
-              {
-                title: "Installation",                description: "Professional setup included.",                bentoComponent: "reveal-icon",                icon: Wrench
-              },
-            ]}
-          />
         </div>
+        <FooterBaseReveal
+          columns={[
+            { title: "Services", items: [{ label: "Custom Fencing", href: "/services#fencing" }, { label: "Automatic Gates", href: "/services#gates" }] },
+            { title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Contact Us", href: "/contact" }] },
+          ]}
+          copyrightText="© 2024 JE Metal Works. All rights reserved."
+        />
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/page.tsx

@@ -29,26 +29,11 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleCentered
       navItems={[
-        {
+        { name: "Home", id: "/" },
-          name: "Home",
+        { name: "Services", id: "/services" },
-          id: "/",
+        { name: "Portfolio", id: "/portfolio" },
-        },
+        { name: "About", id: "/about" },
-        {
+        { name: "Contact", id: "/contact" },
-          name: "Services",
-          id: "/services",
-        },
-        {
-          name: "Portfolio",
-          id: "/portfolio",
-        },
-        {
-          name: "About",
-          id: "/about",
-        },
-        {
-          name: "Contact",
-          id: "/contact",
-        },
       ]}
       brandName="JE Metal Works"
     />
@@ -56,184 +41,12 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroSplit
-      background={{
+      background={{ variant: "gradient-bars" }}
-        variant: "gradient-bars",
-      }}
       title="Custom Metal Fencing & Gates Built to Last"
       description="Expert metal fabrication for residential and commercial projects. From automatic security gates to custom handrails, we bring precision and strength to every project."
-      buttons={[
+      buttons={[{ text: "Get a Quote", href: "/contact" }, { text: "View Portfolio", href: "/portfolio" }]}
-        {
-          text: "Get a Quote",
-          href: "/contact",
-        },
-        {
-          text: "View Portfolio",
-          href: "/portfolio",
-        },
-      ]}
       imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVME1uxntIXgeb4GoE5qIirTEF/a-high-quality-professional-photograph-o-1774801232444-bce0d8f0.png?_wi=1"
       mediaAnimation="slide-up"
-      avatars={[
-        {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVME1uxntIXgeb4GoE5qIirTEF/happy-customer-standing-next-to-their-ne-1774801234681-9d6e672c.png",
-          alt: "Client 1",
-        },
-        {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVME1uxntIXgeb4GoE5qIirTEF/portrait-of-a-commercial-building-owner--1774801234049-5db76eec.png",
-          alt: "Client 2",
-        },
-        {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVME1uxntIXgeb4GoE5qIirTEF/portrait-of-a-homeowner-enjoying-their-n-1774801233407-f3b38d01.png",
-          alt: "Client 3",
-        },
-        {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVME1uxntIXgeb4GoE5qIirTEF/business-owner-standing-in-front-of-ware-1774801232464-ee7c38cd.png",
-          alt: "Client 4",
-        },
-        {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVME1uxntIXgeb4GoE5qIirTEF/close-up-detail-of-a-modern-custom-autom-1774801232274-6ac4934e.png",
-          alt: "Client 5",
-        },
-      ]}
-      avatarText="Trusted by 100+ satisfied property owners."
-      marqueeItems={[
-        {
-          type: "text",
-          text: "Precision Welding",
-        },
-        {
-          type: "text",
-          text: "Industrial Steel",
-        },
-        {
-          type: "text",
-          text: "Architectural Design",
-        },
-        {
-          type: "text",
-          text: "Security Solutions",
-        },
-        {
-          type: "text",
-          text: "Custom Fabrication",
-        },
-      ]}
-    />
-  </div>
-
-  <div id="services" data-section="services">
-      <FeatureBorderGlow
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={false}
-      features={[
-        {
-          icon: Building2,
-          title: "Custom Fencing",
-          description: "Durable steel and iron fencing for both residential and commercial perimeters.",
-        },
-        {
-          icon: ArrowRight,
-          title: "Custom Gates",
-          description: "Tailor-made manual gates designed to complement your property’s unique architecture.",
-        },
-        {
-          icon: Settings,
-          title: "Automatic Gates",
-          description: "Smart sliding and swing gate systems for seamless security and convenience.",
-        },
-        {
-          icon: Gauge,
-          title: "Handrails",
-          description: "Custom interior and exterior handrails built with precision and safety in mind.",
-        },
-      ]}
-      title="Professional Metal Fabrication Services"
-      description="We specialize in high-quality, durable custom metalwork designed to enhance security and aesthetics."
-    />
-  </div>
-
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardSix
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "1",
-          name: "John Doe",
-          handle: "@jdoe",
-          testimonial: "JE Metal Works delivered high-quality custom gates for our warehouse. Very professional!",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVME1uxntIXgeb4GoE5qIirTEF/happy-customer-standing-next-to-their-ne-1774801234681-9d6e672c.png?_wi=1",
-        },
-        {
-          id: "2",
-          name: "Jane Smith",
-          handle: "@jsmith",
-          testimonial: "The handrails they built for our home are sturdy and look fantastic. Excellent craftsmanship.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVME1uxntIXgeb4GoE5qIirTEF/portrait-of-a-commercial-building-owner--1774801234049-5db76eec.png?_wi=1",
-        },
-        {
-          id: "3",
-          name: "Robert Lee",
-          handle: "@rlee",
-          testimonial: "Fast service and perfect installation for my automatic gate system.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVME1uxntIXgeb4GoE5qIirTEF/portrait-of-a-homeowner-enjoying-their-n-1774801233407-f3b38d01.png?_wi=1",
-        },
-        {
-          id: "4",
-          name: "Maria Garcia",
-          handle: "@mgarcia",
-          testimonial: "Reliable and precise work. I highly recommend them for any custom iron project.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVME1uxntIXgeb4GoE5qIirTEF/business-owner-standing-in-front-of-ware-1774801232464-ee7c38cd.png?_wi=1",
-        },
-        {
-          id: "5",
-          name: "Sam Wilson",
-          handle: "@swilson",
-          testimonial: "Top-notch communication and build quality. Exceeded expectations.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVME1uxntIXgeb4GoE5qIirTEF/close-up-detail-of-a-modern-custom-autom-1774801232274-6ac4934e.png?_wi=1",
-        },
-      ]}
-      title="Customer Success Stories"
-      description="Trusted by home and business owners for reliable metalwork craftsmanship."
-    />
-  </div>
-
-  <div id="socialProof" data-section="socialProof">
-      <SocialProofOne
-      textboxLayout="default"
-      useInvertedBackground={false}
-      title="Our Trusted Partners & Clients"
-      description="Collaborating with leading industry names to deliver excellence."
-      names={[
-        "SteelCo Industries",
-        "IronVault Security",
-        "Urban Fabrications",
-        "Modern Railings Ltd",
-        "ConstructPro Group",
-      ]}
-    />
-  </div>
-
-  <div id="ecommerce" data-section="ecommerce">
-      <ProductDetailCard
-      layout="section"
-      name="Premium Architectural Security Gate"
-      price="$2,499"
-      description="A sleek, industrial-grade automatic security gate featuring weather-resistant powder coating and reinforced steel framework."
-      images={[
-        {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVME1uxntIXgeb4GoE5qIirTEF/close-up-detail-of-a-modern-custom-autom-1774801232274-6ac4934e.png",
-          alt: "Premium Security Gate",
-        },
-      ]}
-      buttons={[
-        {
-          text: "Inquire Now",
-          href: "/contact",
-        },
-      ]}
     />
   </div>
 
@@ -241,37 +54,17 @@ export default function LandingPage() {
       <FooterBaseReveal
       columns={[
         {
-          title: "Services",
+          title: "Services",          items: [
-          items: [
+            { label: "Custom Fencing", href: "/services#fencing" },
-            {
+            { label: "Automatic Gates", href: "/services#gates" },
-              label: "Custom Fencing",
+            { label: "Custom Handrails", href: "/services#handrails" },
-              href: "/services#fencing",
-            },
-            {
-              label: "Automatic Gates",
-              href: "/services#gates",
-            },
-            {
-              label: "Custom Handrails",
-              href: "/services#handrails",
-            },
           ],
         },
         {
-          title: "Company",
+          title: "Company",          items: [
-          items: [
+            { label: "About Us", href: "/about" },
-            {
+            { label: "Portfolio", href: "/portfolio" },
-              label: "About Us",
+            { label: "Contact Us", href: "/contact" },
-              href: "/about",
-            },
-            {
-              label: "Portfolio",
-              href: "/portfolio",
-            },
-            {
-              label: "Contact Us",
-              href: "/contact",
-            },
           ],
         },
       ]}
@@ -281,4 +74,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -15,10 +15,10 @@
   --foreground: #f5f5f5;
   --primary-cta: #1f7cff;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #010101;
+  --secondary-cta: #1a1a1a;
   --secondary-cta-text: #ffffff;
-  --accent: #737373;
+  --accent: #333333;
-  --background-accent: #1f7cff;
+  --background-accent: #262626;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);