Update src/app/contact/page.tsx

Merge version_2 into main

src/app/about/page.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import MediaAbout from '@/components/sections/about/MediaAbout';
+import { Info } from 'lucide-react'; // Icon for the tag
+
+export default function AboutPage() {
+    const navItems = [
+        { name: "Home", id: "/" },
+        { name: "Services", id: "/services" },
+        { name: "About", id: "/about" }
+    ];
+
+    const navbarButton = {
+        text: "Contact Us",        href: "/contact" // Assuming a contact page might be added later
+    };
+
+    return (
+        <ThemeProvider
+            defaultButtonVariant="text-stagger"
+            defaultTextAnimation="entrance-slide"
+            borderRadius="rounded"
+            contentWidth="medium"
+            sizing="medium"
+            background="none"
+            cardStyle="gradient-bordered"
+            primaryButtonStyle="flat"
+            secondaryButtonStyle="solid"
+            headingFontWeight="medium"
+        >
+            <NavbarLayoutFloatingInline navItems={navItems} brandName="Marshall Construction" button={navbarButton} />
+            <MediaAbout
+                tag="Our Legacy"
+                tagIcon={Info}
+                title="Building Foundations, Building Futures"
+                description="Marshall Construction Company has been a pillar in the construction industry for over three decades, delivering unparalleled quality and reliability. Founded on principles of integrity and craftsmanship, we have grown from a local builder to a trusted regional leader in residential, commercial, and infrastructure projects. Our commitment to excellence, client satisfaction, and sustainable practices drives every project we undertake. We believe in creating spaces that not only meet today's needs but also stand the test of time, contributing positively to communities."
+                imageSrc="https://picsum.photos/id/190/800/600" // Placeholder image for company building
+                imageAlt="Marshall Construction Company building"
+                useInvertedBackground={false}
+                buttons={[{ text: "Learn More", href: "/services" }]} // Link to services page
+            />
+        </ThemeProvider>
+    );
+}

src/app/contact/page.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
+import { MessageCircle } from "lucide-react";
+
+export default function ContactPage() {
+    const navItems = [
+        { name: "Home", id: "/" },
+        { name: "Reviews", id: "#reviews" },
+        { name: "Contact", id: "/contact" }
+    ];
+
+    return (
+        <ThemeProvider
+            defaultButtonVariant="text-stagger"
+            defaultTextAnimation="entrance-slide"
+            borderRadius="rounded"
+            contentWidth="medium"
+            sizing="medium"
+            background="none"
+            cardStyle="gradient-bordered"
+            primaryButtonStyle="flat"
+            secondaryButtonStyle="solid"
+            headingFontWeight="medium"
+        >
+            <div id="nav" data-section="nav">
+                <NavbarStyleCentered navItems={navItems} brandName="Webild" />
+            </div>
+            <div id="contact" data-section="contact">
+                <ContactSplit
+                    tag="Get in Touch"
+                    title="Let's build something great together."
+                    description="Have a project in mind or just want to say hello? Fill out the form below and we'll get back to you as soon as possible."
+                    tagIcon={MessageCircle}
+                    background={{ variant: "downward-rays-animated-grid" }}
+                    useInvertedBackground={false}
+                    imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/personal-grid/grid1.webp"
+                    imageAlt="Contact us illustration"
+                    mediaPosition="right"
+                    inputPlaceholder="Your email address"
+                    buttonText="Send Message"
+                    termsText="By sending a message you agree to our privacy policy."
+                    onSubmit={(email) => console.log("Contact form submitted with email:", email)}
+                />
+            </div>
+        </ThemeProvider>
+    );
+}

src/app/page.tsx

@@ -2,6 +2,8 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import HeroPersonalLinks from "@/components/sections/hero/HeroPersonalLinks";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
 import { Code, Users, Globe, MessageCircle, Sparkles } from "lucide-react";
 
 export default function PersonalGridTemplatePage() {
@@ -22,24 +24,24 @@ export default function PersonalGridTemplatePage() {
     const linkCards = [
         {
             icon: Code,
-            title: "Work with my agency",
-            description: "Work with my agency to build your MVP",
-            button: { text: "Get started", href: "#" },
+            title: "Work with my agency",            description: "Work with my agency to build your MVP",            button: { text: "Get started", href: "#" },
         },
         {
             icon: Sparkles,
-            title: "20% off your Webild plan",
-            description: "Use my promo code to get Webild credits",
-            button: { text: "Get credits", href: "#" },
+            title: "20% off your Webild plan",            description: "Use my promo code to get Webild credits",            button: { text: "Get credits", href: "#" },
         },
         {
             icon: Users,
-            title: "Join my community",
-            description: "Join the AI Founders Club",
-            button: { text: "Sign up", href: "#" },
+            title: "Join my community",            description: "Join the AI Founders Club",            button: { text: "Sign up", href: "#" },
         },
     ];
 
+    const navItems = [
+        { name: "Home", id: "/" },
+        { name: "Reviews", id: "#reviews" },
+        { name: "Contact", id: "/contact" },
+    ];
+
     return (
         <ThemeProvider
             defaultButtonVariant="text-stagger"
@@ -53,6 +55,7 @@ export default function PersonalGridTemplatePage() {
             secondaryButtonStyle="solid"
             headingFontWeight="medium"
         >
+            <NavbarStyleCentered navItems={navItems} brandName="Webild" />
             <HeroPersonalLinks
                 background={{ variant: "downward-rays-animated-grid" }}
                 title="I help people design software with AI"
@@ -60,6 +63,21 @@ export default function PersonalGridTemplatePage() {
                 socialLinks={socialLinks}
                 linkCards={linkCards}
             />
+            <div id="reviews" data-section="reviews">
+                <TestimonialCardFifteen
+                    testimonial="Working with this team was an absolute game-changer for our startup. Their expertise in AI product development is unmatched, and they delivered beyond our expectations."
+                    rating={5}
+                    author="Alex P. - CEO of InnovateX"
+                    avatars={[
+                        { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/avatars/avatar1.webp", alt: "Alex P." },
+                        { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/avatars/avatar2.webp", alt: "Sarah J." },
+                        { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/avatars/avatar3.webp", alt: "Mike D." }
+                    ]}
+                    ratingAnimation="blur-reveal"
+                    avatarsAnimation="slide-up"
+                    useInvertedBackground={false}
+                />
+            </div>
         </ThemeProvider>
     );
 }

src/app/services/page.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
+import { Hammer, Building, Factory, Wrench, Package2, ShieldCheck } from 'lucide-react'; // More specific construction icons
+
+export default function ServicesPage() {
+    const navItems = [
+        { name: "Home", id: "/" },
+        { name: "Services", id: "/services" },
+        { name: "About", id: "/about" }
+    ];
+
+    const navbarButton = {
+        text: "Contact Us",        href: "/contact" // Assuming a contact page might be added later
+    };
+
+    const services = [
+        {
+            title: "Residential Construction",            description: "Building dream homes from the ground up, ensuring quality, comfort, and compliance with all standards.",            media: { imageSrc: "https://picsum.photos/id/1015/800/600", imageAlt: "Residential Construction" },
+            items: [
+                { icon: Hammer, text: "Custom Home Builds" },
+                { icon: Wrench, text: "Renovations & Remodels" },
+                { icon: Package2, text: "Additions & Extensions" }
+            ],
+            reverse: false
+        },
+        {
+            title: "Commercial Development",            description: "Creating functional and aesthetically pleasing commercial spaces for businesses of all sizes, from retail to office buildings.",            media: { imageSrc: "https://picsum.photos/id/1069/800/600", imageAlt: "Commercial Development" },
+            items: [
+                { icon: Building, text: "Office Buildings" },
+                { icon: Factory, text: "Retail Spaces" },
+                { icon: ShieldCheck, text: "Industrial Facilities" }
+            ],
+            reverse: true
+        },
+        {
+            title: "Infrastructure Projects",            description: "Developing robust infrastructure including roads, bridges, and public utilities to support community growth.",            media: { imageSrc: "https://picsum.photos/id/1084/800/600", imageAlt: "Infrastructure Projects" },
+            items: [
+                { icon: Package2, text: "Road & Bridge Construction" },
+                { icon: Wrench, text: "Utility Installations" },
+                { icon: ShieldCheck, text: "Public Works" }
+            ],
+            reverse: false
+        }
+    ];
+
+    return (
+        <ThemeProvider
+            defaultButtonVariant="text-stagger"
+            defaultTextAnimation="entrance-slide"
+            borderRadius="rounded"
+            contentWidth="medium"
+            sizing="medium"
+            background="none"
+            cardStyle="gradient-bordered"
+            primaryButtonStyle="flat"
+            secondaryButtonStyle="solid"
+            headingFontWeight="medium"
+        >
+            <NavbarLayoutFloatingInline navItems={navItems} brandName="Marshall Construction" button={navbarButton} />
+            <FeatureCardTen
+                title="Our Comprehensive Construction Services"
+                description="Marshall Construction Company offers a full spectrum of construction services, tailored to meet the unique needs of each client. From initial design to final touches, we deliver excellence."
+                features={services}
+                animationType="slide-up"
+                textboxLayout="default"
+                useInvertedBackground={false}
+            />
+        </ThemeProvider>
+    );
+}