Update src/app/products/page.tsx

Update src/app/page.tsx
Add src/app/products/page.tsx
2026-03-05 16:00:40 +00:00 · 2026-03-05 16:00:40 +00:00 · 2026-03-05 15:59:50 +00:00 · 2026-03-05 15:59:49 +00:00 · 2026-03-05 15:59:49 +00:00 · 2026-03-05 15:55:56 +00:00
3 changed files with 149 additions and 50 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,50 +1,20 @@
 import type { Metadata } from "next";
-import { Halant } from "next/font/google";
 import { Inter } from "next/font/google";
 import "./globals.css";
-import { ServiceWrapper } from "@/components/ServiceWrapper";
-import Tag from "@/tag/Tag";

-const halant = Halant({
-  variable: "--font-halant",  subsets: ["latin"],
-  weight: ["300", "400", "500", "600", "700"],
-});
-
-const inter = Inter({
-  variable: "--font-inter",  subsets: ["latin"],
-});
+const inter = Inter({ subsets: ["latin"] });

 export const metadata: Metadata = {
-  title: "Premium Cinematic Video Editor & AI Content Creator",  description: "Elite video editing and AI-enhanced content creation for brands and creators. Cinematic storytelling meets cutting-edge technology.",  keywords: "video editor, cinematic editing, AI content creation, short-form content, motion graphics, color grading",  robots: {
-    index: true,
-    follow: true,
-  },
-  openGraph: {
-    title: "Premium Cinematic Video Editor & AI Content Creator",    description: "Transform your vision into stunning cinematic content with AI-enhanced editing and professional storytelling.",    type: "website",    siteName: "Cinematic Studio",    images: [
-      {
-        url: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWd5CVi6eS00aQna2oL1acQvBq/a-cinematic-video-editing-montage-interf-1772725989421-b8fa86c9.png",        alt: "Cinematic editing portfolio showcase"},
-    ],
-  },
-  twitter: {
-    card: "summary_large_image",    title: "Premium Cinematic Video Editor & AI Content Creator",    description: "Elite video editing and AI-powered content creation for brands and creators.",    images: [
-      "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWd5CVi6eS00aQna2oL1acQvBq/a-cinematic-video-editing-montage-interf-1772725989421-b8fa86c9.png"],
-  },
-};
+  title: "Cinematic Studio",  description: "Professional cinematic video editing and production services"};

 export default function RootLayout({
  children,
-}: Readonly<{
+}: {
  children: React.ReactNode;
-}>) {
+}) {
  return (
-    <html lang="en" suppressHydrationWarning>
-      <ServiceWrapper>
-        <body
-          className={`${halant.variable} ${inter.variable} antialiased`}
-        >
-          <Tag />
-          {children}
-        
+    <html lang="en">
+      <body className={inter.className}>{children}
        <script
          dangerouslySetInnerHTML={{
            __html: `
@@ -1412,7 +1382,6 @@ export default function RootLayout({
          }}
        />
      </body>
-      </ServiceWrapper>
    </html>
  );
 }
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -45,13 +45,13 @@ export default function LandingPage() {
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={[
-            { name: "Home", id: "home" },
-            { name: "Work", id: "work" },
-            { name: "About", id: "about" },
-            { name: "Services", id: "services" },
-            { name: "Contact", id: "contact" },
+            { name: "Home", id: "/" },
+            { name: "Products", id: "/products" },
+            { name: "Work", id: "#work" },
+            { name: "Services", id: "#services" },
+            { name: "Contact", id: "#contact" },
          ]}
-          button={{ text: "Hire Me", href: "contact" }}
+          button={{ text: "Hire Me", href: "#contact" }}
          brandName="Cinematic Studio"
        />
      </div>
@@ -71,7 +71,7 @@ export default function LandingPage() {
          background={{ variant: "radial-gradient" }}
          dashboard={{
            title: "Production Metrics",            logoIcon: Film,
-            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWd5CVi6eS00aQna2oL1acQvBq/uploaded-1772725939189-viw5e96a.png",            searchPlaceholder: "Search projects...",            sidebarItems: [
+            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWd5CVi6eS00aQna2oL1acQvBq/uploaded-1772725939189-viw5e96a.png?_wi=1",            searchPlaceholder: "Search projects...",            sidebarItems: [
              { icon: Home },
              { icon: Video, active: true },
              { icon: Zap },
@@ -135,11 +135,11 @@ export default function LandingPage() {
          carouselMode="buttons"
          products={[
            {
-              id: "proj-1",              name: "Brand Cinematic Campaign",              price: "2024",              variant: "Commercial | 4K Cinematic",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWd5CVi6eS00aQna2oL1acQvBq/professional-cinematic-video-thumbnail-s-1772725989437-dc932bb6.png",              imageAlt: "Brand campaign cinematic edit"},
+              id: "proj-1",              name: "Brand Cinematic Campaign",              price: "2024",              variant: "Commercial | 4K Cinematic",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWd5CVi6eS00aQna2oL1acQvBq/professional-cinematic-video-thumbnail-s-1772725989437-dc932bb6.png?_wi=1",              imageAlt: "Brand campaign cinematic edit"},
            {
-              id: "proj-2",              name: "Social Media Series",              price: "2024",              variant: "Shorts | Fast Paced",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWd5CVi6eS00aQna2oL1acQvBq/youtube-shorts-video-thumbnail-with-dyna-1772725989554-2edc9f78.png",              imageAlt: "YouTube Shorts compilation"},
+              id: "proj-2",              name: "Social Media Series",              price: "2024",              variant: "Shorts | Fast Paced",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWd5CVi6eS00aQna2oL1acQvBq/youtube-shorts-video-thumbnail-with-dyna-1772725989554-2edc9f78.png?_wi=1",              imageAlt: "YouTube Shorts compilation"},
            {
-              id: "proj-3",              name: "Trending Content Edit",              price: "2024",              variant: "Reels | High Energy",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWd5CVi6eS00aQna2oL1acQvBq/instagram-reels-thumbnail-showing-creati-1772725991475-2ab0c99b.png",              imageAlt: "Instagram Reels editing showcase"},
+              id: "proj-3",              name: "Trending Content Edit",              price: "2024",              variant: "Reels | High Energy",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWd5CVi6eS00aQna2oL1acQvBq/instagram-reels-thumbnail-showing-creati-1772725991475-2ab0c99b.png?_wi=1",              imageAlt: "Instagram Reels editing showcase"},
          ]}
        />
      </div>
@@ -254,14 +254,14 @@ export default function LandingPage() {
          columns={[
            {
              items: [
-                { label: "Home", href: "#home" },
-                { label: "Work", href: "#work" },
+                { label: "Home", href: "/" },
+                { label: "Products", href: "/products" },
                { label: "Services", href: "#services" },
              ],
            },
            {
              items: [
-                { label: "About", href: "#about" },
+                { label: "Work", href: "#work" },
                { label: "Contact", href: "#contact" },
                { label: "Privacy", href: "#" },
              ],
--- a/src/app/products/page.tsx
+++ b/src/app/products/page.tsx
@@ -0,0 +1,130 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import HeroLogoBillboardSplit from "@/components/sections/hero/HeroLogoBillboardSplit";
+import ProductCardOne from "@/components/sections/product/ProductCardOne";
+import ContactCenter from "@/components/sections/contact/ContactCenter";
+import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
+import { ArrowRight, Send } from "lucide-react";
+
+export default function ProductsPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="soft"
+      contentWidth="compact"
+      sizing="mediumSizeLargeTitles"
+      background="circleGradient"
+      cardStyle="subtle-shadow"
+      primaryButtonStyle="diagonal-gradient"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="semibold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Products", id: "/products" },
+            { name: "Work", id: "#work" },
+            { name: "Services", id: "#services" },
+            { name: "Contact", id: "#contact" },
+          ]}
+          button={{ text: "Hire Me", href: "#contact" }}
+          brandName="Cinematic Studio"
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroLogoBillboardSplit
+          logoText="Products"
+          description="Explore our collection of premium video editing services, motion graphics packages, and content creation solutions designed to elevate your brand."
+          background={{ variant: "radial-gradient" }}
+          buttons={[
+            { text: "Browse Products", href: "#products" },
+            { text: "Get Started", href: "#contact" },
+          ]}
+          buttonAnimation="slide-up"
+          layoutOrder="default"
+          mediaAnimation="slide-up"
+          frameStyle="card"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWd5CVi6eS00aQna2oL1acQvBq/uploaded-1772725939189-viw5e96a.png?_wi=2"
+          imageAlt="Products showcase"
+        />
+      </div>
+
+      <div id="products" data-section="products">
+        <ProductCardOne
+          title="Our Premium Products"
+          description="High-quality video editing services and creative packages tailored to meet diverse production needs"
+          tag="Featured Offerings"
+          tagAnimation="slide-up"
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground={false}
+          gridVariant="three-columns-all-equal-width"
+          carouselMode="buttons"
+          products={[
+            {
+              id: "prod-1",              name: "4K Cinema Package",              price: "$2,500",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWd5CVi6eS00aQna2oL1acQvBq/professional-cinematic-video-thumbnail-s-1772725989437-dc932bb6.png?_wi=2",              imageAlt: "4K Cinema Package"},
+            {
+              id: "prod-2",              name: "Social Media Shorts",              price: "$899",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWd5CVi6eS00aQna2oL1acQvBq/youtube-shorts-video-thumbnail-with-dyna-1772725989554-2edc9f78.png?_wi=2",              imageAlt: "Social Media Shorts"},
+            {
+              id: "prod-3",              name: "Motion Graphics Suite",              price: "$1,499",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWd5CVi6eS00aQna2oL1acQvBq/instagram-reels-thumbnail-showing-creati-1772725991475-2ab0c99b.png?_wi=2",              imageAlt: "Motion Graphics Suite"},
+            {
+              id: "prod-4",              name: "Color Grading Mastery",              price: "$1,299",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWd5CVi6eS00aQna2oL1acQvBq/professional-cinematic-video-thumbnail-s-1772725989437-dc932bb6.png?_wi=3",              imageAlt: "Color Grading Mastery"},
+            {
+              id: "prod-5",              name: "AI Enhancement Bundle",              price: "$1,799",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWd5CVi6eS00aQna2oL1acQvBq/youtube-shorts-video-thumbnail-with-dyna-1772725989554-2edc9f78.png?_wi=3",              imageAlt: "AI Enhancement Bundle"},
+            {
+              id: "prod-6",              name: "Full Production Suite",              price: "$4,999",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWd5CVi6eS00aQna2oL1acQvBq/instagram-reels-thumbnail-showing-creati-1772725991475-2ab0c99b.png?_wi=3",              imageAlt: "Full Production Suite"},
+          ]}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCenter
+          tag="Ready to Order?"
+          tagIcon={Send}
+          tagAnimation="slide-up"
+          title="Start Your Project Today"
+          description="Get in touch with our team to discuss your specific needs and find the perfect product package for your vision."
+          background={{ variant: "radial-gradient" }}
+          useInvertedBackground={false}
+          inputPlaceholder="your@email.com"
+          buttonText="Get Started"
+          termsText="We'll respond within 24 hours. Your information is kept private."
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoEmphasis
+          logoText="Cinematic Studio"
+          columns={[
+            {
+              items: [
+                { label: "Home", href: "/" },
+                { label: "Products", href: "/products" },
+                { label: "Services", href: "#services" },
+              ],
+            },
+            {
+              items: [
+                { label: "Work", href: "#work" },
+                { label: "Contact", href: "#contact" },
+                { label: "Privacy", href: "#" },
+              ],
+            },
+            {
+              items: [
+                { label: "Instagram", href: "https://instagram.com" },
+                { label: "YouTube", href: "https://youtube.com" },
+                { label: "LinkedIn", href: "https://linkedin.com" },
+              ],
+            },
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}
Author	SHA1	Message	Date
bender	e6abc272b0	Update src/app/products/page.tsx	2026-03-05 16:00:40 +00:00
bender	1ccf259208	Update src/app/page.tsx	2026-03-05 16:00:40 +00:00
bender	675a7fedc7	Add src/app/products/page.tsx	2026-03-05 15:59:50 +00:00
bender	49bbbdcf64	Update src/app/page.tsx	2026-03-05 15:59:49 +00:00
bender	4c4730ed6f	Update src/app/layout.tsx	2026-03-05 15:59:49 +00:00
bender	0c269a3390	Merge version_1 into main Merge version_1 into main	2026-03-05 15:55:56 +00:00
bender	85a428e955	Merge version_1 into main Merge version_1 into main	2026-03-05 15:55:01 +00:00
bender	90bd6f278c	Merge version_1 into main Merge version_1 into main	2026-03-05 15:53:53 +00:00