Bob AI: Add reels-products page

src/App.tsx

@@ -3,12 +3,14 @@ import Layout from './components/Layout';
 import HomePage from './pages/HomePage';
 
 import ProductsPage from "@/pages/ProductsPage";
+import ReelsProductsPage from "@/pages/ReelsProductsPage";
 export default function App() {
   return (
     <Routes>
       <Route element={<Layout />}>
         <Route path="/" element={<HomePage />} />
         <Route path="/products" element={<ProductsPage />} />
+        <Route path="/reels-products" element={<ReelsProductsPage />} />
       </Route>
     </Routes>
   );

src/components/Layout.tsx

@@ -29,6 +29,8 @@ export default function Layout() {
     "name": "Brands",    "href": "#brands"
   },
   { name: "Products", href: "/products" },
+  { name: "Reels Products", href: "/reels-products" },
+
 
 ];
 

src/pages/ReelsProductsPage.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+import { routes } from "@/routes";
+import NavbarCentered from "@/components/ui/NavbarCentered";
+import HeroBillboardScroll from "@/components/sections/hero/HeroBillboardScroll";
+import ProductMediaCards from "@/components/sections/product/ProductMediaCards";
+import FeaturesBento from "@/components/sections/features/FeaturesBento";
+import FooterMinimal from "@/components/sections/footer/FooterMinimal";
+
+export default function ReelsProductsPage() {
+  return (
+    <div className="min-h-screen bg-background text-foreground flex flex-col">
+      <NavbarCentered
+        logo="ReelPro"
+        navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
+        ctaButton={{ text: "Get Started", href: "/contact" }}
+      />
+
+      <main className="flex-grow">
+        <HeroBillboardScroll
+          tag="Short-Form Mastery"
+          title="Scroll-Stopping Reels for Your Brand"
+          description="High-converting short-form video content designed to engage your audience, build trust, and drive sales on autopilot."
+          primaryButton={{ text: "View Packages", href: "#packages" }}
+          secondaryButton={{ text: "Book a Strategy Call", href: "/contact" }}
+          imageSrc="https://images.unsplash.com/photo-1611162617474-5b21e879e113?q=80&w=2000&auto=format&fit=crop"
+        />
+
+        <div id="packages">
+          <ProductMediaCards
+            tag="Our Packages"
+            title="Choose Your Content Engine"
+            description="From single viral hits to complete monthly content management, we have a package that fits your growth goals."
+            products={[
+              {
+                name: "Starter Pack",
+                price: "$499/mo",
+                imageSrc: "https://images.unsplash.com/photo-1616469829581-73993eb86b02?q=80&w=800&auto=format&fit=crop",
+                onClick: () => console.log("Starter Pack clicked")
+              },
+              {
+                name: "Growth Engine",
+                price: "$1,299/mo",
+                imageSrc: "https://images.unsplash.com/photo-1533227260879-1090f11683f5?q=80&w=800&auto=format&fit=crop",
+                onClick: () => console.log("Growth Engine clicked")
+              },
+              {
+                name: "Viral Mastery",
+                price: "$2,499/mo",
+                imageSrc: "https://images.unsplash.com/photo-1516280440502-65f5363e3b5e?q=80&w=800&auto=format&fit=crop",
+                onClick: () => console.log("Viral Mastery clicked")
+              }
+            ]}
+          />
+        </div>
+
+        <FeaturesBento
+          tag="Why Us"
+          title="Built for the Algorithm"
+          description="We don't just make videos; we engineer attention using data-backed strategies and high-end production."
+          features={[
+            {
+              title: "Trend Analysis",
+              description: "We monitor platforms 24/7 to hop on audio and visual trends before they peak, maximizing your organic reach.",
+              imageSrc: "https://images.unsplash.com/photo-1611162616305-c69b3fa7fbe0?q=80&w=800&auto=format&fit=crop"
+            },
+            {
+              title: "Hook Engineering",
+              description: "The first 3 seconds dictate success. We script and design visual hooks optimized for maximum viewer retention.",
+              imageSrc: "https://images.unsplash.com/photo-1611162618071-b39a2ec055fb?q=80&w=800&auto=format&fit=crop"
+            },
+            {
+              title: "High-End Editing",
+              description: "Crisp cuts, dynamic captions, and immersive sound design that keeps viewers glued to the screen until the end.",
+              imageSrc: "https://images.unsplash.com/photo-1611162616475-46b635cb6868?q=80&w=800&auto=format&fit=crop"
+            }
+          ]}
+        />
+      </main>
+
+      <FooterMinimal
+        brand="ReelPro"
+        copyright="© 2024 ReelPro Agency. All rights reserved."
+      />
+    </div>
+  );
+}

src/routes.ts

@@ -7,4 +7,5 @@ export interface Route {
 export const routes: Route[] = [
   { path: '/', label: 'Home', pageFile: 'HomePage' },
   { path: '/products', label: 'Products', pageFile: 'ProductsPage' },
+  { path: '/reels-products', label: 'Reels Products', pageFile: 'ReelsProductsPage' },
 ];