bender/3e4a8ae7-8c73-4697-9f11-ed3dd32af484
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_1 into main #2

Merged
bender merged 6 commits from version_1 into main 2026-03-13 02:17:50 +00:00
Conversation 0 Commits 6 Files Changed 6 +89 -235
6 changed files with 89 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/app/contact/page.tsx
View File

@@ -10,17 +10,17 @@ import { Sparkles, Mail, Phone, Clock } from "lucide-react";
export default function ContactPage() {
const navItems = [
{ name: "Home", id: "/" },
{ name: "Photo & Video Production", id: "production" },
{ name: "Studio", id: "studio" },
{ name: "Why Work With Us", id: "why" },
{ name: "Contact", id: "contact" },
{ name: "Photo & Video Production", id: "/photo-video-production" },
{ name: "Studio", id: "/studio" },
{ name: "Why Work With Us", id: "/why-work-with-us" },
{ name: "Contact", id: "/contact" },
];
const footerColumns = [
{
items: [
{ label: "Home", href: "/" },
{ label: "Production", href: "/production" },
{ label: "Production", href: "/photo-video-production" },
{ label: "Studio", href: "/studio" },
],
},
@@ -47,7 +47,7 @@ export default function ContactPage() {
borderRadius="soft"
contentWidth="medium"
sizing="largeSizeMediumTitles"
background="aurora"
background="circleGradient"
cardStyle="outline"
primaryButtonStyle="flat"
secondaryButtonStyle="layered"
@@ -57,7 +57,7 @@ export default function ContactPage() {
<NavbarLayoutFloatingOverlay
brandName="Cramatic Media"
navItems={navItems}
button={{ text: "Start Your Project", href: "contact" }}
button={{ text: "Start Your Project", href: "/contact" }}
/>
</div>
@@ -75,7 +75,7 @@ export default function ContactPage() {
{ text: "View Our Portfolio", href: "#portfolio" },
]}
buttonAnimation="blur-reveal"
background={{ variant: "aurora" }}
background={{ variant: "plain" }}
useInvertedBackground={false}
/>
</div>

117
src/app/page.tsx
View File

@@ -21,7 +21,7 @@ export default function HomePage() {
borderRadius="soft"
contentWidth="medium"
sizing="largeSizeMediumTitles"
background="aurora"
background="circleGradient"
cardStyle="outline"
primaryButtonStyle="flat"
secondaryButtonStyle="layered"
@@ -39,9 +39,7 @@ export default function HomePage() {
{ name: "Contact", id: "/contact" },
]}
button={{
text: "Start Your Project",
href: "/contact",
}}
text: "Start Your Project", href: "/contact"}}
/>
</div>
@@ -53,35 +51,20 @@ export default function HomePage() {
tag="Premium Production"
tagIcon={Sparkles}
tagAnimation="slide-up"
background={{ variant: "aurora" }}
background={{ variant: "glowing-orb" }}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3As4ayxFhi7jkJrZgvQUXtUVugh/a-cinematic-split-screen-hero-image-show-1773368117102-3e8af7d0.png"
imageAlt="Premium automotive cinematic production"
mediaAnimation="slide-up"
testimonials={[
{
name: "Gravity Show Events",
handle: "UK's Largest Car Event",
testimonial: "Cramatic brings automotive visuals to life with unprecedented cinematic quality. Their work consistently stands out.",
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3As4ayxFhi7jkJrZgvQUXtUVugh/a-professional-headshot-of-a-confident-a-1773368116413-098aff99.png",
imageAlt: "Gravity Show Events representative",
},
name: "Gravity Show Events", handle: "UK's Largest Car Event", testimonial: "Cramatic brings automotive visuals to life with unprecedented cinematic quality. Their work consistently stands out.", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3As4ayxFhi7jkJrZgvQUXtUVugh/a-professional-headshot-of-a-confident-a-1773368116413-098aff99.png", imageAlt: "Gravity Show Events representative"},
{
name: "Premium Vehicle Rental Co",
handle: "Automotive Industry",
testimonial: "800K+ views in 24 hours. This is strategy, not luck. Cramatic understands platform psychology and delivers.",
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3As4ayxFhi7jkJrZgvQUXtUVugh/a-professional-headshot-of-a-premium-aut-1773368116717-384c36e1.png",
imageAlt: "Premium Vehicle Rental Co representative",
},
name: "Premium Vehicle Rental Co", handle: "Automotive Industry", testimonial: "800K+ views in 24 hours. This is strategy, not luck. Cramatic understands platform psychology and delivers.", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3As4ayxFhi7jkJrZgvQUXtUVugh/a-professional-headshot-of-a-premium-aut-1773368116717-384c36e1.png", imageAlt: "Premium Vehicle Rental Co representative"},
{
name: "Car Wrapping Specialist",
handle: "Automotive Services",
testimonial: "400K+ views, 44K+ likes within 48 hours. They don't just create content—they create momentum.",
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3As4ayxFhi7jkJrZgvQUXtUVugh/a-professional-headshot-of-a-car-wrappin-1773368116602-89a5cd05.png",
imageAlt: "Car Wrapping Specialist representative",
},
name: "Car Wrapping Specialist", handle: "Automotive Services", testimonial: "400K+ views, 44K+ likes within 48 hours. They don't just create content—they create momentum.", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3As4ayxFhi7jkJrZgvQUXtUVugh/a-professional-headshot-of-a-car-wrappin-1773368116602-89a5cd05.png", imageAlt: "Car Wrapping Specialist representative"},
]}
buttons={[
{ text: "View Work", href: "#" },
@@ -104,32 +87,16 @@ export default function HomePage() {
features={[
{
id: 1,
title: "Automotive",
description: "Precision-led cinematic visual storytelling for dealerships, rentals, launches, automotive brands, edits, and car-based campaigns. This is our strongest authority niche.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3As4ayxFhi7jkJrZgvQUXtUVugh/a-cinematic-behind-the-scenes-shot-of-pr-1773368116344-1c1df29f.png?_wi=1",
imageAlt: "Professional automotive videography production",
},
title: "Automotive", description: "Precision-led cinematic visual storytelling for dealerships, rentals, launches, automotive brands, edits, and car-based campaigns. This is our strongest authority niche.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3As4ayxFhi7jkJrZgvQUXtUVugh/a-cinematic-behind-the-scenes-shot-of-pr-1773368116344-1c1df29f.png", imageAlt: "Professional automotive videography production"},
{
id: 2,
title: "Commercial Production",
description: "Business adverts, branded campaigns, premium visual commercials, product campaigns, and business storytelling across all industries.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3As4ayxFhi7jkJrZgvQUXtUVugh/a-modern-commercial-production-setup-wit-1773368116957-97834591.png?_wi=1",
imageAlt: "Commercial video production setup",
},
title: "Commercial Production", description: "Business adverts, branded campaigns, premium visual commercials, product campaigns, and business storytelling across all industries.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3As4ayxFhi7jkJrZgvQUXtUVugh/a-modern-commercial-production-setup-wit-1773368116957-97834591.png", imageAlt: "Commercial video production setup"},
{
id: 3,
title: "Studio",
description: "Cyclorama wall, backdrop systems, podcast setup, and controlled visual production environment. Full in-house creative control.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3As4ayxFhi7jkJrZgvQUXtUVugh/an-interior-shot-of-a-professional-cyclo-1773368116832-cc916973.png?_wi=1",
imageAlt: "Professional cyclorama studio setup",
},
title: "Studio", description: "Cyclorama wall, backdrop systems, podcast setup, and controlled visual production environment. Full in-house creative control.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3As4ayxFhi7jkJrZgvQUXtUVugh/an-interior-shot-of-a-professional-cyclo-1773368116832-cc916973.png", imageAlt: "Professional cyclorama studio setup"},
{
id: 4,
title: "Social Growth",
description: "Content strategy, platform-led visuals, social media performance optimization, and organic audience growth with measurable results.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3As4ayxFhi7jkJrZgvQUXtUVugh/a-modern-dashboard-view-showing-social-m-1773368117505-28279590.png?_wi=1",
imageAlt: "Social media analytics dashboard",
},
title: "Social Growth", description: "Content strategy, platform-led visuals, social media performance optimization, and organic audience growth with measurable results.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3As4ayxFhi7jkJrZgvQUXtUVugh/a-modern-dashboard-view-showing-social-m-1773368117505-28279590.png", imageAlt: "Social media analytics dashboard"},
]}
/>
</div>
@@ -145,7 +112,7 @@ export default function HomePage() {
{ text: "Learn More", href: "/why-work-with-us" },
]}
buttonAnimation="blur-reveal"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3As4ayxFhi7jkJrZgvQUXtUVugh/a-strategic-production-planning-scene-wi-1773368117194-35979484.png?_wi=1"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3As4ayxFhi7jkJrZgvQUXtUVugh/a-strategic-production-planning-scene-wi-1773368117194-35979484.png"
imageAlt="Strategic content production planning"
useInvertedBackground={false}
/>
@@ -164,28 +131,12 @@ export default function HomePage() {
carouselMode="buttons"
metrics={[
{
id: "1",
value: "800K+",
title: "TikTok Views — Vehicle Rental Campaign",
items: [
"30K+ likes organically",
"800+ followers gained",
"Achieved within 24 hours",
"Precision location + music selection",
"Audience-targeted visual style",
],
id: "1", value: "800K+", title: "TikTok Views — Vehicle Rental Campaign", items: [
"30K+ likes organically", "800+ followers gained", "Achieved within 24 hours", "Precision location + music selection", "Audience-targeted visual style"],
},
{
id: "2",
value: "400K+",
title: "Instagram Views — Car Wrapping Campaign",
items: [
"44K+ likes organically",
"250+ engaged comments",
"1,100 new followers in 48 hours",
"Platform-specific content strategy",
"Viral organic reach",
],
id: "2", value: "400K+", title: "Instagram Views — Car Wrapping Campaign", items: [
"44K+ likes organically", "250+ engaged comments", "1,100 new followers in 48 hours", "Platform-specific content strategy", "Viral organic reach"],
},
]}
/>
@@ -201,14 +152,7 @@ export default function HomePage() {
textboxLayout="default"
useInvertedBackground={true}
names={[
"Gravity Show Events",
"Adebayo Akinfenwa",
"Alfie Buttle",
"Diogo Dalot",
"Premium Automotive Brands",
"TikTok Influencers",
"Commercial Brands",
]}
"Gravity Show Events", "Adebayo Akinfenwa", "Alfie Buttle", "Diogo Dalot", "Premium Automotive Brands", "TikTok Influencers", "Commercial Brands"]}
speed={35}
showCard={true}
/>
@@ -227,26 +171,11 @@ export default function HomePage() {
gridVariant="three-columns-all-equal-width"
products={[
{
id: "1",
name: "Cyclorama Wall",
price: "Professional Studio",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3As4ayxFhi7jkJrZgvQUXtUVugh/a-professional-cyclorama-white-infinity--1773368115923-febd9089.png?_wi=1",
imageAlt: "Professional cyclorama infinity wall",
},
id: "1", name: "Cyclorama Wall", price: "Professional Studio", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3As4ayxFhi7jkJrZgvQUXtUVugh/a-professional-cyclorama-white-infinity--1773368115923-febd9089.png", imageAlt: "Professional cyclorama infinity wall"},
{
id: "2",
name: "Backdrop System",
price: "3.55m Infinity",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3As4ayxFhi7jkJrZgvQUXtUVugh/a-professional-backdrop-system-showing-m-1773368118450-40f15fc1.png?_wi=1",
imageAlt: "Professional backdrop system with color options",
},
id: "2", name: "Backdrop System", price: "3.55m Infinity", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3As4ayxFhi7jkJrZgvQUXtUVugh/a-professional-backdrop-system-showing-m-1773368118450-40f15fc1.png", imageAlt: "Professional backdrop system with color options"},
{
id: "3",
name: "Podcast Setup",
price: "Professional Audio",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3As4ayxFhi7jkJrZgvQUXtUVugh/a-professional-podcast-production-setup--1773368116794-634f84fc.png?_wi=1",
imageAlt: "Professional podcast production setup",
},
id: "3", name: "Podcast Setup", price: "Professional Audio", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3As4ayxFhi7jkJrZgvQUXtUVugh/a-professional-podcast-production-setup--1773368116794-634f84fc.png", imageAlt: "Professional podcast production setup"},
]}
/>
</div>
@@ -264,7 +193,7 @@ export default function HomePage() {
{ text: "View Portfolio", href: "#" },
]}
buttonAnimation="blur-reveal"
background={{ variant: "aurora" }}
background={{ variant: "plain" }}
useInvertedBackground={false}
/>
</div>

49
src/app/photo-video-production/page.tsx
View File

@@ -13,9 +13,9 @@ export default function ProductionPage() {
const navItems = [
{ name: "Home", id: "/" },
{ name: "Photo & Video Production", id: "/photo-video-production" },
{ name: "Studio", id: "#studio" },
{ name: "Why Work With Us", id: "#why" },
{ name: "Contact", id: "#cta" },
{ name: "Studio", id: "/studio" },
{ name: "Why Work With Us", id: "/why-work-with-us" },
{ name: "Contact", id: "/contact" },
];
const footerColumns = [
@@ -23,13 +23,13 @@ export default function ProductionPage() {
items: [
{ label: "Home", href: "/" },
{ label: "Production", href: "/photo-video-production" },
{ label: "Studio", href: "#studio" },
{ label: "Studio", href: "/studio" },
],
},
{
items: [
{ label: "Why Work With Us", href: "#why" },
{ label: "Contact", href: "#cta" },
{ label: "Why Work With Us", href: "/why-work-with-us" },
{ label: "Contact", href: "/contact" },
{ label: "Portfolio", href: "#" },
],
},
@@ -49,7 +49,7 @@ export default function ProductionPage() {
borderRadius="soft"
contentWidth="medium"
sizing="largeSizeMediumTitles"
background="aurora"
background="circleGradient"
cardStyle="outline"
primaryButtonStyle="flat"
secondaryButtonStyle="layered"
@@ -60,9 +60,7 @@ export default function ProductionPage() {
brandName="Cramatic Media"
navItems={navItems}
button={{
text: "Start Your Project",
href: "#cta",
}}
text: "Start Your Project", href: "/contact"}}
/>
</div>
@@ -77,25 +75,13 @@ export default function ProductionPage() {
features={[
{
id: 1,
title: "Automotive Photography & Videography",
description: "Precision-led cinematic visual storytelling for dealerships, vehicle rentals, automotive launches, and brand campaigns. We specialize in capturing movement, detail, and visual impact that drives engagement and sales.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3As4ayxFhi7jkJrZgvQUXtUVugh/a-cinematic-behind-the-scenes-shot-of-pr-1773368116344-1c1df29f.png?_wi=2",
imageAlt: "Professional automotive videography",
},
title: "Automotive Photography & Videography", description: "Precision-led cinematic visual storytelling for dealerships, vehicle rentals, automotive launches, and brand campaigns. We specialize in capturing movement, detail, and visual impact that drives engagement and sales.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3As4ayxFhi7jkJrZgvQUXtUVugh/a-cinematic-behind-the-scenes-shot-of-pr-1773368116344-1c1df29f.png", imageAlt: "Professional automotive videography"},
{
id: 2,
title: "Commercial & Branded Production",
description: "Business adverts, product campaigns, premium commercials, and branded storytelling. We create visual content that communicates your brand message with authority and sophistication across all industries.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3As4ayxFhi7jkJrZgvQUXtUVugh/a-modern-commercial-production-setup-wit-1773368116957-97834591.png?_wi=2",
imageAlt: "Commercial production setup",
},
title: "Commercial & Branded Production", description: "Business adverts, product campaigns, premium commercials, and branded storytelling. We create visual content that communicates your brand message with authority and sophistication across all industries.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3As4ayxFhi7jkJrZgvQUXtUVugh/a-modern-commercial-production-setup-wit-1773368116957-97834591.png", imageAlt: "Commercial production setup"},
{
id: 3,
title: "In-Studio Production",
description: "Professional cyclorama wall, backdrop systems, podcast setup, and controlled production environment. Complete creative control with in-house facilities for faster turnaround and premium execution.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3As4ayxFhi7jkJrZgvQUXtUVugh/an-interior-shot-of-a-professional-cyclo-1773368116832-cc916973.png?_wi=2",
imageAlt: "Professional studio facility",
},
title: "In-Studio Production", description: "Professional cyclorama wall, backdrop systems, podcast setup, and controlled production environment. Complete creative control with in-house facilities for faster turnaround and premium execution.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3As4ayxFhi7jkJrZgvQUXtUVugh/an-interior-shot-of-a-professional-cyclo-1773368116832-cc916973.png", imageAlt: "Professional studio facility"},
]}
/>
</div>
@@ -109,14 +95,7 @@ export default function ProductionPage() {
textboxLayout="default"
useInvertedBackground={true}
names={[
"Gravity Show Events",
"Premium Vehicle Rental",
"Car Wrapping Specialist",
"Automotive Brands",
"Commercial Businesses",
"TikTok & Instagram",
"YouTube Creators",
]}
"Gravity Show Events", "Premium Vehicle Rental", "Car Wrapping Specialist", "Automotive Brands", "Commercial Businesses", "TikTok & Instagram", "YouTube Creators"]}
speed={35}
showCard={true}
/>
@@ -130,11 +109,11 @@ export default function ProductionPage() {
title="Transform Your Brand With Professional Production"
description="Whether you need automotive content, commercial production, or studio work, Cramatic delivers cinematic quality that drives results. Let's discuss your project."
buttons={[
{ text: "Start Your Project", href: "#" },
{ text: "Start Your Project", href: "/contact" },
{ text: "View Our Work", href: "#" },
]}
buttonAnimation="blur-reveal"
background={{ variant: "aurora" }}
background={{ variant: "plain" }}
useInvertedBackground={false}
/>
</div>

31
src/app/studio/page.tsx
View File

@@ -17,7 +17,7 @@ export default function StudioPage() {
borderRadius="soft"
contentWidth="medium"
sizing="largeSizeMediumTitles"
background="aurora"
background="circleGradient"
cardStyle="outline"
primaryButtonStyle="flat"
secondaryButtonStyle="layered"
@@ -35,9 +35,7 @@ export default function StudioPage() {
{ name: "Contact", id: "/contact" },
]}
button={{
text: "Start Your Project",
href: "/contact",
}}
text: "Start Your Project", href: "/contact"}}
/>
</div>
@@ -52,7 +50,7 @@ export default function StudioPage() {
{ text: "Book Your Session", href: "/contact" },
]}
buttonAnimation="blur-reveal"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3As4ayxFhi7jkJrZgvQUXtUVugh/an-interior-shot-of-a-professional-cyclo-1773368116832-cc916973.png?_wi=3"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3As4ayxFhi7jkJrZgvQUXtUVugh/an-interior-shot-of-a-professional-cyclo-1773368116832-cc916973.png"
imageAlt="Professional cyclorama studio with modern equipment"
useInvertedBackground={false}
/>
@@ -71,26 +69,11 @@ export default function StudioPage() {
gridVariant="three-columns-all-equal-width"
products={[
{
id: "1",
name: "Cyclorama Wall",
price: "Seamless Infinity",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3As4ayxFhi7jkJrZgvQUXtUVugh/a-professional-cyclorama-white-infinity--1773368115923-febd9089.png?_wi=2",
imageAlt: "Professional white cyclorama infinity wall",
},
id: "1", name: "Cyclorama Wall", price: "Seamless Infinity", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3As4ayxFhi7jkJrZgvQUXtUVugh/a-professional-cyclorama-white-infinity--1773368115923-febd9089.png", imageAlt: "Professional white cyclorama infinity wall"},
{
id: "2",
name: "Backdrop System",
price: "3.55m Professional",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3As4ayxFhi7jkJrZgvQUXtUVugh/a-professional-backdrop-system-showing-m-1773368118450-40f15fc1.png?_wi=2",
imageAlt: "Professional motorized backdrop system with multiple colors",
},
id: "2", name: "Backdrop System", price: "3.55m Professional", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3As4ayxFhi7jkJrZgvQUXtUVugh/a-professional-backdrop-system-showing-m-1773368118450-40f15fc1.png", imageAlt: "Professional motorized backdrop system with multiple colors"},
{
id: "3",
name: "Podcast Studio",
price: "Broadcast Quality",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3As4ayxFhi7jkJrZgvQUXtUVugh/a-professional-podcast-production-setup--1773368116794-634f84fc.png?_wi=2",
imageAlt: "Professional podcast production setup with microphones",
},
id: "3", name: "Podcast Studio", price: "Broadcast Quality", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3As4ayxFhi7jkJrZgvQUXtUVugh/a-professional-podcast-production-setup--1773368116794-634f84fc.png", imageAlt: "Professional podcast production setup with microphones"},
]}
/>
</div>
@@ -108,7 +91,7 @@ export default function StudioPage() {
{ text: "View Our Work", href: "#" },
]}
buttonAnimation="blur-reveal"
background={{ variant: "aurora" }}
background={{ variant: "plain" }}
useInvertedBackground={false}
/>
</div>

48
src/app/why-work-with-us/page.tsx
View File

@@ -17,7 +17,7 @@ export default function WhyWorkWithUsPage() {
borderRadius="soft"
contentWidth="medium"
sizing="largeSizeMediumTitles"
background="aurora"
background="circleGradient"
cardStyle="outline"
primaryButtonStyle="flat"
secondaryButtonStyle="layered"
@@ -35,9 +35,7 @@ export default function WhyWorkWithUsPage() {
{ name: "Contact", id: "/contact" },
]}
button={{
text: "Start Your Project",
href: "/contact",
}}
text: "Start Your Project", href: "/contact"}}
/>
</div>
@@ -53,25 +51,13 @@ export default function WhyWorkWithUsPage() {
features={[
{
id: 1,
title: "Strategic Testing",
description: "We don't guess. We test content styles, study audience reactions, and iterate based on real performance data. Every decision is data-backed.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3As4ayxFhi7jkJrZgvQUXtUVugh/a-strategic-production-planning-scene-wi-1773368117194-35979484.png?_wi=2",
imageAlt: "Strategic content production planning",
},
title: "Strategic Testing", description: "We don't guess. We test content styles, study audience reactions, and iterate based on real performance data. Every decision is data-backed.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3As4ayxFhi7jkJrZgvQUXtUVugh/a-strategic-production-planning-scene-wi-1773368117194-35979484.png", imageAlt: "Strategic content production planning"},
{
id: 2,
title: "In-House Control",
description: "Everything is produced in-house. This means faster turnaround, complete creative control, and consistent quality. No outsourcing, no compromises.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3As4ayxFhi7jkJrZgvQUXtUVugh/an-interior-shot-of-a-professional-cyclo-1773368116832-cc916973.png?_wi=4",
imageAlt: "Professional in-house production studio",
},
title: "In-House Control", description: "Everything is produced in-house. This means faster turnaround, complete creative control, and consistent quality. No outsourcing, no compromises.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3As4ayxFhi7jkJrZgvQUXtUVugh/an-interior-shot-of-a-professional-cyclo-1773368116832-cc916973.png", imageAlt: "Professional in-house production studio"},
{
id: 3,
title: "Proven Track Record",
description: "800K+ views in 24 hours. 400K+ views with 44K+ likes in 48 hours. When performance is this consistent, it's not luck—it's strategy and expertise.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3As4ayxFhi7jkJrZgvQUXtUVugh/a-modern-dashboard-view-showing-social-m-1773368117505-28279590.png?_wi=2",
imageAlt: "Social media analytics and performance metrics",
},
title: "Proven Track Record", description: "800K+ views in 24 hours. 400K+ views with 44K+ likes in 48 hours. When performance is this consistent, it's not luck—it's strategy and expertise.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3As4ayxFhi7jkJrZgvQUXtUVugh/a-modern-dashboard-view-showing-social-m-1773368117505-28279590.png", imageAlt: "Social media analytics and performance metrics"},
]}
/>
</div>
@@ -89,26 +75,12 @@ export default function WhyWorkWithUsPage() {
carouselMode="buttons"
metrics={[
{
id: "1",
value: "15+",
title: "Years of Production Excellence",
items: [
"Established automotive authority",
"Multi-industry commercial experience",
"Consistent high-performance results",
"Trusted by leading brands",
],
id: "1", value: "15+", title: "Years of Production Excellence", items: [
"Established automotive authority", "Multi-industry commercial experience", "Consistent high-performance results", "Trusted by leading brands"],
},
{
id: "2",
value: "100%",
title: "In-House Production",
items: [
"No outsourcing, no delays",
"Complete creative control",
"Faster project turnaround",
"Guaranteed quality standards",
],
id: "2", value: "100%", title: "In-House Production", items: [
"No outsourcing, no delays", "Complete creative control", "Faster project turnaround", "Guaranteed quality standards"],
},
]}
/>
@@ -127,7 +99,7 @@ export default function WhyWorkWithUsPage() {
{ text: "View Our Portfolio", href: "#" },
]}
buttonAnimation="blur-reveal"
background={{ variant: "aurora" }}
background={{ variant: "plain" }}
useInvertedBackground={false}
/>
</div>

63
src/components/shared/SvgTextLogo/SvgTextLogo.tsx
View File

@@ -1,51 +1,42 @@
"use client";
import { memo } from "react";
import useSvgTextLogo from "./useSvgTextLogo";
import { cls } from "@/lib/utils";
import React from "react";
interface SvgTextLogoProps {
logoText: string;
adjustHeightFactor?: number;
verticalAlign?: "top" | "center";
text: string;
className?: string;
fontSize?: number;
fontWeight?: string | number;
letterSpacing?: number;
fill?: string;
dominantBaseline?: "auto" | "middle" | "hanging" | "central" | "text-after-edge" | "ideographic" | "text-before-edge" | "mathematical";
}
const SvgTextLogo = memo<SvgTextLogoProps>(function SvgTextLogo({
logoText,
adjustHeightFactor,
verticalAlign = "top",
className = "",
}) {
const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor);
const SvgTextLogo: React.FC<SvgTextLogoProps> = ({
text,
className = "", fontSize = 48,
fontWeight = 700,
letterSpacing = 0,
fill = "currentColor", dominantBaseline = "middle"}) => {
return (
<svg
ref={svgRef}
viewBox={viewBox}
className={cls("w-full", className)}
style={{ aspectRatio: aspectRatio }}
preserveAspectRatio="none"
role="img"
aria-label={`${logoText} logo`}
viewBox={`0 0 ${text.length * fontSize * 0.6} ${fontSize * 1.5}`}
xmlns="http://www.w3.org/2000/svg"
className={className}
preserveAspectRatio="xMidYMid meet"
>
<text
ref={textRef}
x="0"
y={verticalAlign === "center" ? "50%" : "0"}
className="font-bold fill-current"
style={{
fontSize: "20px",
letterSpacing: "-0.02em",
dominantBaseline: verticalAlign === "center" ? "middle" : "text-before-edge"
}}
x="50%"
y="50%"
textAnchor="middle"
dominantBaseline={dominantBaseline}
fontSize={fontSize}
fontWeight={fontWeight}
letterSpacing={letterSpacing}
fill={fill}
>
{logoText}
{text}
</text>
</svg>
);
});
SvgTextLogo.displayName = "SvgTextLogo";
};
export default SvgTextLogo;