Merge version_4 into main

Merge version_4 into main

src/app/about/page.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import MediaAbout from '@/components/sections/about/MediaAbout';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+
+export default function AboutPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="elastic-effect"
+        defaultTextAnimation="background-highlight"
+        borderRadius="soft"
+        contentWidth="compact"
+        sizing="largeSmall"
+        background="aurora"
+        cardStyle="gradient-mesh"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="solid"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Services", id: "/services" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            brandName="Nobel View Roofing"
+          />
+        </div>
+
+        <div id="about" data-section="about">
+          <MediaAbout
+            title="Our Story: Excellence at Every Elevation"
+            description="Nobel View Roofing was founded on the principles of integrity, precision, and architectural excellence. We specialize in providing the highest quality roofing services, ensuring your property is protected with premium craftsmanship and attention to detail."
+            imageSrc="http://img.b2bpic.net/free-photo/construction-people-working-roof_23-2149343666.jpg"
+            tag="About Us"
+            useInvertedBackground={false}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterLogoReveal
+            logoText="Nobel View Roofing © 2025"
+            leftLink={{ text: "Licensed & Insured", href: "#" }}
+            rightLink={{ text: "Contact Support", href: "/contact" }}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/contact/page.tsx

@@ -2,13 +2,11 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import AboutMetric from '@/components/sections/about/AboutMetric';
-import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
-import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import ContactText from '@/components/sections/contact/ContactText';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import { Check, MapPin, PhoneCall, Zap } from "lucide-react";
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 
-export default function LandingPage() {
+export default function ContactPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="elastic-effect"
@@ -23,109 +21,36 @@ export default function LandingPage() {
         headingFontWeight="normal"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleApple
-      navItems={[
-        {
-          name: "Home",
-          id: "/",
-        },
-        {
-          name: "Services",
-          id: "/services",
-        },
-        {
-          name: "Contact",
-          id: "/contact",
-        },
-      ]}
-      brandName="ApexRoofing"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[
+                { name: "Home", id: "/" },
+                { name: "About", id: "/about" },
+                { name: "Services", id: "/services" },
+                { name: "Contact", id: "/contact" },
+            ]}
+            brandName="Nobel View Roofing"
+          />
+        </div>
 
-  <div id="contact-page-form" data-section="contact-page-form">
-      <ContactSplitForm
-      useInvertedBackground={false}
-      title="Get Your Free Roof Inspection"
-      description="We typically respond within minutes. Let's solve your roofing needs today."
-      inputs={[
-        {
-          name: "name",
-          type: "text",
-          placeholder: "Name",
-          required: true,
-        },
-        {
-          name: "phone",
-          type: "tel",
-          placeholder: "Phone",
-          required: true,
-        },
-        {
-          name: "email",
-          type: "email",
-          placeholder: "Email",
-          required: true,
-        },
-        {
-          name: "address",
-          type: "text",
-          placeholder: "San Jose Address",
-          required: true,
-        },
-      ]}
-      textarea={{
-        name: "message",
-        placeholder: "Describe your roofing issue",
-        required: true,
-      }}
-      imageSrc="http://img.b2bpic.net/free-photo/blending-futuristic-building-seamlessly-into-desert-landscape_23-2151248316.jpg?_wi=2"
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactText
+            text="Ready to secure your property? Get in touch with Nobel View Roofing for a professional consultation and expert assessment today."
+            background={{ variant: "downward-rays-animated" }}
+            buttons={[{ text: "Submit Request" }]
+          }
+            className="py-20"
+            useInvertedBackground={false}
+          />
+        </div>
 
-  <div id="about" data-section="about">
-      <AboutMetric
-      useInvertedBackground={false}
-      title="Why Call Us Today?"
-      metrics={[
-        {
-          icon: Zap,
-          label: "Fast Response",
-          value: "30 Min",
-        },
-        {
-          icon: PhoneCall,
-          label: "Local Support",
-          value: "24/7",
-        },
-        {
-          icon: MapPin,
-          label: "Service Areas",
-          value: "All SJ",
-        },
-        {
-          icon: Check,
-          label: "Free Estimates",
-          value: "Daily",
-        },
-      ]}
-      metricsAnimation="slide-up"
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterLogoReveal
-      logoText="Apex Roofing © 2024"
-      leftLink={{
-        text: "Licensed & Insured",
-        href: "#",
-      }}
-      rightLink={{
-        text: "555-555-5555",
-        href: "tel:5555555555",
-      }}
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterLogoReveal
+            logoText="Nobel View Roofing © 2025"
+            leftLink={{ text: "Licensed & Insured", href: "#" }}
+            rightLink={{ text: "Contact Support", href: "/contact" }}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );

src/app/page.tsx

@@ -28,54 +28,32 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleApple
       navItems={[
-        {
-          name: "Home",          id: "/"},
-        {
-          name: "Services",          id: "/services"},
-        {
-          name: "Contact",          id: "/contact"},
+        { name: "Home", id: "/" },
+        { name: "About", id: "/about" },
+        { name: "Services", id: "/services" },
+        { name: "Contact", id: "/contact" },
       ]}
-      brandName="ApexRoofing"
+      brandName="Nobel View Roofing"
     />
   </div>
 
   <div id="hero" data-section="hero">
       <HeroBillboard
-      background={{
-        variant: "gradient-bars"}}
-      title="Roofing You Can Trust When It Matters Most"
-      description="From storm damage to complex leaks, Apex Roofing delivers fast, precise, and professional roofing solutions across San Jose."
+      background={{ variant: "gradient-bars" }}
+      title="Elevated Roofing Solutions by Nobel View"
+      description="Professional roofing services committed to precision, durability, and aesthetics. Trust the Nobel View team with your property's most vital shield."
       buttons={[
-        {
-          text: "Get Free Roof Inspection",          href: "/contact"},
-        {
-          text: "Call Now",          href: "tel:5555555555"},
+        { text: "Get Free Inspection", href: "/contact" },
+        { text: "View Services", href: "/services" },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/blending-futuristic-building-seamlessly-into-desert-landscape_23-2151248316.jpg"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/modern-country-houses-construction_1385-20.jpg",          alt: "Modern country houses under construction"},
-        {
-          src: "http://img.b2bpic.net/free-photo/aerial-shot-town-with-high-buildings-tennis-court_181624-46523.jpg",          alt: "Aerial shot of a town with high buildings and a tennis court"},
-        {
-          src: "http://img.b2bpic.net/free-photo/abandoned-hut-stands-amidst-spooky-winter-landscape-generated-by-ai_188544-11816.jpg",          alt: "Abandoned hut stands amidst spooky winter landscape generated by AI"},
-        {
-          src: "http://img.b2bpic.net/free-photo/blending-futuristic-building-seamlessly-into-desert-landscape_23-2151248317.jpg",          alt: "Blending futuristic building seamlessly into desert landscape"},
-        {
-          src: "http://img.b2bpic.net/free-photo/full-shot-man-sitting-roof_23-2149343640.jpg",          alt: "Full shot man sitting on roof"},
-      ]}
-      avatarText="Trusted by 500+ Local Homeowners"
+      avatarText="Trusted by Premium Property Owners"
       marqueeItems={[
-        {
-          type: "text",          text: "Licensed & Insured"},
-        {
-          type: "text",          text: "24/7 Emergency Service"},
-        {
-          type: "text",          text: "Premium Materials"},
-        {
-          type: "text",          text: "Warranty Backed"},
-        {
-          type: "text",          text: "San Jose Local"},
+        { type: "text", text: "Licensed & Insured" },
+        { type: "text", text: "Architectural Specialization" },
+        { type: "text", text: "Premium Materials" },
+        { type: "text", text: "Detail-Oriented Installation" },
+        { type: "text", text: "Long-term Warranty" },
       ]}
     />
   </div>
@@ -83,8 +61,8 @@ export default function LandingPage() {
   <div id="about" data-section="about">
       <MediaAbout
       useInvertedBackground={false}
-      title="Why Homeowners Choose Apex Roofing"
-      description="We don't cut corners. Our crew provides immediate response times, expertise in difficult metal roofing, guidance through insurance claims, and a clean, professional approach."
+      title="The Nobel View Standard"
+      description="We believe in a standard of service that matches the height of our ambitions. Our roofing solutions combine technical expertise with aesthetic care to deliver lasting results for every client."
       imageSrc="http://img.b2bpic.net/free-photo/construction-people-working-roof_23-2149343666.jpg"
     />
   </div>
@@ -94,17 +72,12 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       features={[
-        {
-          tag: "Emergency",          title: "Roof Leak Repair",          subtitle: "Fast Action",          description: "Quick detection and permanent fixes for complex leaks.",          imageSrc: "http://img.b2bpic.net/free-photo/closeup-roof-house-made-wooden-tiles_169016-24989.jpg"},
-        {
-          tag: "Quality",          title: "Roof Replacement",          subtitle: "Lasting Protection",          description: "High-quality materials with precision installation.",          imageSrc: "http://img.b2bpic.net/free-photo/long-shot-men-working-roof_23-2149343678.jpg"},
-        {
-          tag: "Protection",          title: "Storm Damage",          subtitle: "Rapid Response",          description: "Expert navigation through stressful insurance processes.",          imageSrc: "http://img.b2bpic.net/free-photo/back-view-male-musician-climbing-roof-with-electric-guitar_23-2148680354.jpg"},
-        {
-          tag: "Foundation",          title: "Gutter & Drainage",          subtitle: "Full Protection",          description: "Protect your home from water damage long term.",          imageSrc: "http://img.b2bpic.net/free-photo/man-with-helmet-working-roof-full-shot_23-2149343662.jpg"},
+        { tag: "Design", title: "Architectural Roofing", subtitle: "Bespoke Craft", description: "High-end roofing solutions tailored to unique architectural styles.", imageSrc: "http://img.b2bpic.net/free-photo/closeup-roof-house-made-wooden-tiles_169016-24989.jpg", buttons: [{ text: "Inquire Now", href: "/contact" }] },
+        { tag: "Durability", title: "Replacement Services", subtitle: "Lasting Integrity", description: "Comprehensive tear-off and installation for maximum longevity.", imageSrc: "http://img.b2bpic.net/free-photo/long-shot-men-working-roof_23-2149343678.jpg", buttons: [{ text: "Inquire Now", href: "/contact" }] },
+        { tag: "Protection", title: "System Maintenance", subtitle: "Proactive Care", description: "Regular upkeep to detect and resolve potential issues early.", imageSrc: "http://img.b2bpic.net/free-photo/man-with-helmet-working-roof-full-shot_23-2149343662.jpg", buttons: [{ text: "Inquire Now", href: "/contact" }] },
       ]}
-      title="Complete Roofing Solutions"
-      description="Professional services designed for durability and peace of mind."
+      title="Nobel View Expertise"
+      description="Professional roofing services designed for performance and lasting beauty."
     />
   </div>
 
@@ -115,24 +88,12 @@ export default function LandingPage() {
       animationType="slide-up"
       useInvertedBackground={true}
       testimonials={[
-        {
-          id: "1",          name: "Sarah Johnson",          role: "Homeowner",          company: "Willow Glen",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/real-estate-concept-cheerful-man-showing-paper-house-model-making-fist-pump-paid-mortgage-yellow_1258-165769.jpg"},
-        {
-          id: "2",          name: "Michael Chen",          role: "Homeowner",          company: "Almaden",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-family-talking-while-moving-into-their-first-home_637285-12314.jpg"},
-        {
-          id: "3",          name: "Emily Rodriguez",          role: "Homeowner",          company: "Santa Teresa",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-2025.jpg"},
-        {
-          id: "4",          name: "David Kim",          role: "Homeowner",          company: "Evergreen",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/cheerful-woman-cooking-man_23-2147766909.jpg"},
-        {
-          id: "5",          name: "Jessica Lee",          role: "Homeowner",          company: "Silver Creek",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/workers-having-little-chat-while-having-cup-coffee_329181-15675.jpg"},
+        { id: "1", name: "Alex Montgomery", role: "Homeowner", company: "Nobel View", rating: 5 },
+        { id: "2", name: "Sarah Vane", role: "Homeowner", company: "Nobel View", rating: 5 },
+        { id: "3", name: "Jordan Pierce", role: "Property Manager", company: "Nobel View", rating: 5 },
       ]}
-      title="Trusted by San Jose Homeowners"
-      description="See why neighbors trust Apex Roofing with their most valuable assets."
+      title="Trusted Results"
+      description="Hear from our clients about the Nobel View experience."
     />
   </div>
 
@@ -140,23 +101,20 @@ export default function LandingPage() {
       <SocialProofOne
       textboxLayout="default"
       useInvertedBackground={false}
-      title="Industry Partners & Certifications"
-      description="Proudly working with top industry manufacturers to bring you the best roof warranties."
-      names={[
-        "GAF Certified",        "Owens Corning Preferred",        "CertainTeed Select",        "San Jose Chamber",        "Better Business Bureau"]}
+      title="Trusted Excellence"
+      description="Our commitment to the highest industry standards is backed by strong partnerships."
+      names={["Nobel Certified", "Architectural Quality Preferred", "Material Excellence Certified", "Safety Standard Leader"]}
     />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterLogoReveal
-      logoText="Apex Roofing © 2024"
-      leftLink={{
-        text: "Licensed & Insured",        href: "#"}}
-      rightLink={{
-        text: "555-555-5555",        href: "tel:5555555555"}}
+      logoText="Nobel View Roofing © 2025"
+      leftLink={{ text: "Licensed & Insured", href: "#" }}
+      rightLink={{ text: "Contact Support", href: "/contact" }}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/services/page.tsx

@@ -2,13 +2,12 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import AboutMetric from '@/components/sections/about/AboutMetric';
+import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
 import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 import MediaAbout from '@/components/sections/about/MediaAbout';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import { CheckCircle, Clock, ShieldCheck, Star } from "lucide-react";
 
-export default function LandingPage() {
+export default function ServicesPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="elastic-effect"
@@ -23,85 +22,53 @@ export default function LandingPage() {
         headingFontWeight="normal"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleApple
-      navItems={[
-        {
-          name: "Home",
-          id: "/",
-        },
-        {
-          name: "Services",
-          id: "/services",
-        },
-        {
-          name: "Contact",
-          id: "/contact",
-        },
-      ]}
-      brandName="ApexRoofing"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Services", id: "/services" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            brandName="Nobel View Roofing"
+          />
+        </div>
 
-  <div id="services-page-content" data-section="services-page-content">
-      <MediaAbout
-      useInvertedBackground={false}
-      title="Roofing Services Built for Durability"
-      description="Apex Roofing provides high-quality solutions for leak repairs, replacements, and storm damage assessments. We focus on permanent results rather than temporary fixes."
-      buttons={[
-        {
-          text: "Schedule Inspection",
-          href: "/contact",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/construction-people-working-roof_23-2149343666.jpg?_wi=2"
-    />
-  </div>
+        <div id="services-page-content" data-section="services-page-content">
+          <MediaAbout
+            useInvertedBackground={false}
+            title="Specialized Roofing Expertise"
+            description="At Nobel View, we provide bespoke roofing solutions that prioritize both structural integrity and visual elegance. From detailed replacements to proactive system maintenance, our process is designed for property owners who demand the best."
+            buttons={[
+              { text: "Schedule Consultation", href: "/contact" },
+            ]}
+            imageSrc="http://img.b2bpic.net/free-photo/construction-people-working-roof_23-2149343666.jpg"
+          />
+        </div>
 
-  <div id="about" data-section="about">
-      <AboutMetric
-      useInvertedBackground={false}
-      title="Our Track Record"
-      metrics={[
-        {
-          icon: CheckCircle,
-          label: "Projects Completed",
-          value: "2,500+",
-        },
-        {
-          icon: Clock,
-          label: "Years in Business",
-          value: "15",
-        },
-        {
-          icon: ShieldCheck,
-          label: "Warranties Issued",
-          value: "100%",
-        },
-        {
-          icon: Star,
-          label: "Average Rating",
-          value: "4.9/5",
-        },
-      ]}
-      metricsAnimation="blur-reveal"
-    />
-  </div>
+        <div id="metrics" data-section="metrics">
+          <MetricSplitMediaAbout
+            useInvertedBackground={false}
+            title="Service Metrics"
+            description="Key indicators of our commitment to excellence and reliability in every roofing project we undertake."
+            metrics={[
+              { title: "Years of Experience", value: "15+" },
+              { title: "Custom Projects", value: "1,200+" },
+              { title: "Warranty Coverage", value: "100%" },
+              { title: "Client Satisfaction", value: "99%" },
+            ]}
+            metricsAnimation="blur-reveal"
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterLogoReveal
-      logoText="Apex Roofing © 2024"
-      leftLink={{
-        text: "Licensed & Insured",
-        href: "#",
-      }}
-      rightLink={{
-        text: "555-555-5555",
-        href: "tel:5555555555",
-      }}
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterLogoReveal
+            logoText="Nobel View Roofing © 2025"
+            leftLink={{ text: "Licensed & Insured", href: "#" }}
+            rightLink={{ text: "Contact Support", href: "/contact" }}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}