bender/01d21200-b401-4f8d-bc99-37eea9f766b7
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

merge into: bender:version_1
Branches Tags
bender:main bender:version_2 bender:version_1
...
pull from: bender:version_2
Branches Tags
bender:main bender:version_2 bender:version_1

8 Commits
version_1 ... version_2

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
3 changed files with 149 additions and 50 deletions
Expand all files Collapse all files

43
src/app/layout.tsx
View File

@@ -1,50 +1,20 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Halant } from "next/font/google";
import { Inter } from "next/font/google"; import { Inter } from "next/font/google";
import "./globals.css"; import "./globals.css";
import { ServiceWrapper } from "@/components/ServiceWrapper";
import Tag from "@/tag/Tag";
const halant = Halant({ const inter = Inter({ subsets: ["latin"] });
variable: "--font-halant", subsets: ["latin"],
weight: ["300", "400", "500", "600", "700"],
});
const inter = Inter({
variable: "--font-inter", subsets: ["latin"],
});
export const metadata: Metadata = { 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: { title: "Cinematic Studio", description: "Professional cinematic video editing and production services"};
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"],
},
};
export default function RootLayout({ export default function RootLayout({
children, children,
}: Readonly<{ }: {
children: React.ReactNode; children: React.ReactNode;
}>) { }) {
return ( return (
<html lang="en" suppressHydrationWarning> <html lang="en">
<ServiceWrapper> <body className={inter.className}>{children}
<body
className={`${halant.variable} ${inter.variable} antialiased`}
>
<Tag />
{children}
<script <script
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: ` __html: `
@@ -1412,7 +1382,6 @@ export default function RootLayout({
}} }}
/> />
</body> </body>
</ServiceWrapper>
</html> </html>
); );
} }

26
src/app/page.tsx
View File

@@ -45,13 +45,13 @@ export default function LandingPage() {
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarStyleCentered <NavbarStyleCentered
navItems={[ navItems={[
{ name: "Home", id: "home" }, { name: "Home", id: "/" },
{ name: "Work", id: "work" }, { name: "Products", id: "/products" },
{ name: "About", id: "about" }, { name: "Work", id: "#work" },
{ name: "Services", id: "services" }, { name: "Services", id: "#services" },
{ name: "Contact", id: "contact" }, { name: "Contact", id: "#contact" },
]} ]}
button={{ text: "Hire Me", href: "contact" }} button={{ text: "Hire Me", href: "#contact" }}
brandName="Cinematic Studio" brandName="Cinematic Studio"
/> />
</div> </div>
@@ -71,7 +71,7 @@ export default function LandingPage() {
background={{ variant: "radial-gradient" }} background={{ variant: "radial-gradient" }}
dashboard={{ dashboard={{
title: "Production Metrics", logoIcon: Film, 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: Home },
{ icon: Video, active: true }, { icon: Video, active: true },
{ icon: Zap }, { icon: Zap },
@@ -135,11 +135,11 @@ export default function LandingPage() {
carouselMode="buttons" carouselMode="buttons"
products={[ 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> </div>
@@ -254,14 +254,14 @@ export default function LandingPage() {
columns={[ columns={[
{ {
items: [ items: [
{ label: "Home", href: "#home" }, { label: "Home", href: "/" },
{ label: "Work", href: "#work" }, { label: "Products", href: "/products" },
{ label: "Services", href: "#services" }, { label: "Services", href: "#services" },
], ],
}, },
{ {
items: [ items: [
{ label: "About", href: "#about" }, { label: "Work", href: "#work" },
{ label: "Contact", href: "#contact" }, { label: "Contact", href: "#contact" },
{ label: "Privacy", href: "#" }, { label: "Privacy", href: "#" },
], ],

130
src/app/products/page.tsx Normal file
View File

@@ -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>
);
}