Update src/app/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -2,11 +2,14 @@
 
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 import HeroCentered from '@/components/sections/hero/HeroCentered';
+import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
+import FeatureBento from '@/components/sections/feature/FeatureBento';
+import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
 import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
 import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import { Sparkles, Rocket } from 'lucide-react';
+import { Globe, MessageCircle, Palette, Smartphone, TrendingUp, Zap, Sparkles, Rocket } from 'lucide-react';
 
 export default function LandingPage() {
   return (
@@ -26,8 +29,9 @@ export default function LandingPage() {
         <NavbarLayoutFloatingInline
           brandName="Nebula Studio"
           navItems={[
-            { name: "Our Offer", id: "pricing" },
+            { name: "Our Work", id: "portfolio" },
-            { name: "Get Started", id: "contact" }
+            { name: "What's Included", id: "features" },
+            { name: "Testimonials", id: "testimonials" }
           ]}
           button={{
             text: "Get Started",            href: "https://wa.me/971585636936?text=Hi%20Nebula%20Studio!%20I%20want%20to%20discuss%20building%20a%20website%20for%20my%20business."
@@ -55,6 +59,96 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="features" data-section="features">
+        <FeatureBorderGlow
+          features={[
+            { icon: Palette, title: "Custom Design", description: "Tailored design that reflects your brand and resonates with your customers." },
+            { icon: Smartphone, title: "Mobile-First", description: "Optimized for all devices. Your customers will have a perfect experience everywhere." },
+            { icon: MessageCircle, title: "WhatsApp Integration", description: "Direct WhatsApp buttons for instant customer connections and sales inquiries." },
+            { icon: Zap, title: "Fast Delivery", description: "24-hour turnaround. Get your website live and start converting customers immediately." },
+            { icon: Globe, title: "Hosting Setup", description: "Complete hosting configuration included. Fully managed and ready to go." },
+            { icon: TrendingUp, title: "Conversion Optimized", description: "Built for results. Every element designed to turn visitors into paying customers." }
+          ]}
+          title="What's Included"
+          description="Every website comes with everything you need to succeed online."
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="portfolio" data-section="portfolio">
+        <FeatureBento
+          features={[
+            {
+              title: "Premium Restaurant",              description: "Online menu, reservation system, and customer testimonials.",              bentoComponent: "media-stack",              items: [
+                { imageSrc: "http://img.b2bpic.net/free-psd/restaurant-landing-page-template-with-food_23-2149520321.jpg?_wi=1", imageAlt: "Restaurant website example 1" },
+                { imageSrc: "http://img.b2bpic.net/free-psd/restaurant-landing-page-template-with-food_23-2149520321.jpg?_wi=2", imageAlt: "Restaurant website example 2" },
+                { imageSrc: "http://img.b2bpic.net/free-psd/restaurant-landing-page-template-with-food_23-2149520321.jpg?_wi=3", imageAlt: "Restaurant website example 3" }
+              ]
+            },
+            {
+              title: "Modern Clinic",              description: "Appointment booking, service listings, and doctor profiles.",              bentoComponent: "media-stack",              items: [
+                { imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-female-doctor-showing-screen-digital-tablet_329181-409.jpg?_wi=1", imageAlt: "Clinic website example 1" },
+                { imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-female-doctor-showing-screen-digital-tablet_329181-409.jpg?_wi=2", imageAlt: "Clinic website example 2" },
+                { imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-female-doctor-showing-screen-digital-tablet_329181-409.jpg?_wi=3", imageAlt: "Clinic website example 3" }
+              ]
+            },
+            {
+              title: "Beauty Salon",              description: "Service showcase, booking system, and gallery integration.",              bentoComponent: "media-stack",              items: [
+                { imageSrc: "http://img.b2bpic.net/free-vector/flat-minimal-wedding-landing-page-template_23-2150101536.jpg?_wi=1", imageAlt: "Salon website example 1" },
+                { imageSrc: "http://img.b2bpic.net/free-vector/flat-minimal-wedding-landing-page-template_23-2150101536.jpg?_wi=2", imageAlt: "Salon website example 2" },
+                { imageSrc: "http://img.b2bpic.net/free-vector/flat-minimal-wedding-landing-page-template_23-2150101536.jpg?_wi=3", imageAlt: "Salon website example 3" }
+              ]
+            },
+            {
+              title: "Retail Store",              description: "Product catalog, shopping cart, and inventory management.",              bentoComponent: "media-stack",              items: [
+                { imageSrc: "http://img.b2bpic.net/free-vector/online-shoppings-landing-page-web-template_23-2148612133.jpg?_wi=1", imageAlt: "Retail store website example 1" },
+                { imageSrc: "http://img.b2bpic.net/free-vector/online-shoppings-landing-page-web-template_23-2148612133.jpg?_wi=2", imageAlt: "Retail store website example 2" },
+                { imageSrc: "http://img.b2bpic.net/free-vector/online-shoppings-landing-page-web-template_23-2148612133.jpg?_wi=3", imageAlt: "Retail store website example 3" }
+              ]
+            },
+            {
+              title: "Service Business",              description: "Service details, pricing, and easy contact forms.",              bentoComponent: "media-stack",              items: [
+                { imageSrc: "http://img.b2bpic.net/free-vector/modern-business-flyer-template_23-2147985835.jpg?_wi=1", imageAlt: "Service business website example 1" },
+                { imageSrc: "http://img.b2bpic.net/free-vector/modern-business-flyer-template_23-2147985835.jpg?_wi=2", imageAlt: "Service business website example 2" },
+                { imageSrc: "http://img.b2bpic.net/free-vector/modern-business-flyer-template_23-2147985835.jpg?_wi=3", imageAlt: "Service business website example 3" }
+              ]
+            },
+            {
+              title: "Training Center",              description: "Course listings, trainer bios, and enrollment system.",              bentoComponent: "media-stack",              items: [
+                { imageSrc: "http://img.b2bpic.net/free-psd/education-template-design_23-2150603696.jpg?_wi=1", imageAlt: "Training center website example 1" },
+                { imageSrc: "http://img.b2bpic.net/free-psd/education-template-design_23-2150603696.jpg?_wi=2", imageAlt: "Training center website example 2" },
+                { imageSrc: "http://img.b2bpic.net/free-psd/education-template-design_23-2150603696.jpg?_wi=3", imageAlt: "Training center website example 3" }
+              ]
+            }
+          ]}
+          title="Our Work"
+          description="Every site is built for your industry, your customers, your city."
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          carouselMode="buttons"
+        />
+      </div>
+
+      <div id="testimonials" data-section="testimonials">
+        <TestimonialCardFifteen
+          testimonial="Nebula Studio transformed our small restaurant with a beautiful website that brought in so many new customers. The WhatsApp integration is genius—we're getting bookings directly through it. Worth every dirham!"
+          rating={5}
+          author="Ahmed Al-Mansouri, Restaurant Owner"
+          avatars={[
+            { src: "http://img.b2bpic.net/free-photo/joyful-young-bald-call-center-man-showing-thumbs-up-isolated-olive-green_141793-84095.jpg", alt: "Ahmed Al-Mansouri" },
+            { src: "http://img.b2bpic.net/free-photo/afro-american-woman-smiling-close-up_23-2148336947.jpg", alt: "Client 2" },
+            { src: "http://img.b2bpic.net/free-photo/portrait-smiley-business-woman_23-2148603029.jpg", alt: "Client 3" },
+            { src: "http://img.b2bpic.net/free-photo/closeup-goodlooking-tender-friendly-pretty-middleaged-30s-woman-extend-arm-hold-camera-hand-smiling-broadly-taking-selfie-photographing-record-videomessage-calling-husband_176420-51274.jpg", alt: "Client 4" }
+          ]}
+          ratingAnimation="slide-up"
+          avatarsAnimation="slide-up"
+          useInvertedBackground={false}
+        />
+      </div>
+
       <div id="pricing" data-section="pricing">
         <PricingCardEight
           plans={[
@@ -95,8 +189,9 @@ export default function LandingPage() {
           columns={[
             {
               title: "Nebula Studio",              items: [
-                { label: "Our Offer", href: "/" },
+                { label: "Our Work", href: "#portfolio" },
-                { label: "Get Started", href: "#contact" }
+                { label: "What's Included", href: "#features" },
+                { label: "Testimonials", href: "#testimonials" }
               ]
             },
             {