Merge version_2_1782147972754 into main #1

Merged
bender merged 2 commits from version_2_1782147972754 into main 2026-06-22 17:09:46 +00:00
11 changed files with 377 additions and 280 deletions

View File

@@ -43,10 +43,6 @@ export default function Layout() {
<SectionErrorBoundary name="navbar">
<NavbarInline
logo="Creative Colours"
ctaButton={{
text: "+968 92490393",
href: "tel:+96892490393",
}}
navItems={navItems} />
</SectionErrorBoundary>
<main className="flex-grow">

View File

@@ -3,7 +3,7 @@ import Button from "@/components/ui/Button";
interface NavbarInlineProps {
logo: string;
navItems: { name: string; href: string }[];
ctaButton: { text: string; href: string };
ctaButton?: { text: string; href: string };
}
const handleNavClick = (e: React.MouseEvent<HTMLAnchorElement>, href: string, onClose?: () => void) => {
@@ -34,10 +34,10 @@ const NavbarInline = ({ logo, navItems, ctaButton }: NavbarInlineProps) => {
))}
</div>
<Button text={ctaButton.text} href={ctaButton.href} variant="primary" animate={false} />
{ctaButton && <Button text={ctaButton.text} href={ctaButton.href} variant="primary" animate={false} />}
</div>
</nav>
);
};
export default NavbarInline;
export default NavbarInline;

View File

@@ -1,285 +1,36 @@
import AboutTestimonial from '@/components/sections/about/AboutTestimonial';
import ContactCta from '@/components/sections/contact/ContactCta';
import FeaturesDetailedSteps from '@/components/sections/features/FeaturesDetailedSteps';
import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
import HeroSplitVerticalMarquee from '@/components/sections/hero/HeroSplitVerticalMarquee';
import MetricsMediaCards from '@/components/sections/metrics/MetricsMediaCards';
import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
import TestimonialOverlayCards from '@/components/sections/testimonial/TestimonialOverlayCards';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
// AUTO-GENERATED shell by per-section-migrate.
// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
// files directly. Non-block content (wrappers, non-inlinable sections) is
// preserved inline; extracted section blocks become <XSection/> refs.
export default function HomePage() {
import React from 'react';
import HeroSection from './HomePage/sections/Hero';
import AboutSection from './HomePage/sections/About';
import ServicesSection from './HomePage/sections/Services';
import PortfolioSection from './HomePage/sections/Portfolio';
import MetricsSection from './HomePage/sections/Metrics';
import TestimonialsSection from './HomePage/sections/Testimonials';
import SocialProofSection from './HomePage/sections/SocialProof';
import ContactSection from './HomePage/sections/Contact';
export default function HomePage(): React.JSX.Element {
return (
<>
<div id="hero" data-section="hero">
<SectionErrorBoundary name="hero">
<HeroSplitVerticalMarquee
tag="Since 2006"
title="Creative Colours LLC Digital Print Excellence in Oman"
description="We specialize in high-end branding, digital printing, and signage solutions in Muscat. Dedicated to delivering unsurpassed quality with integrity and innovation."
primaryButton={{
text: "Request a Quote",
href: "#contact",
}}
secondaryButton={{
text: "Our Portfolio",
href: "#portfolio",
}}
leftItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/object-thrown-floor-ghetto-hideout-after-criminals-rushed-evacuate_482257-124637.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/full-frame-shot-patterned-wall_1359-435.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/grey-haired-male-plant-engineer-hardhat-glasses-standing-industrial-machine-using-digital-device_74855-16385.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-day_52683-160825.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/still-life-fashion-designer-s-office_23-2150543709.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/hands-male-graphic-designer-using-computer_1170-873.jpg",
},
]}
rightItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/color-swatch-cmyk-design-spectrum-sample-concept_53876-127515.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/scenes-famous-vlogger-recording-social-media-creative-young-man_482257-24887.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/detail-shot-patterned-wall_1359-879.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/car-wrapping-material-different-colors_23-2149342624.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/two-male-graphic-designers-holding-color-swatch_1170-765.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/young-female-client-frame-store-is-showing-male-employee-her-painting-because-she-is-looking-buy-new-frame_662251-226.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
<>
<HeroSection />
<div id="about" data-section="about">
<SectionErrorBoundary name="about">
<AboutTestimonial
tag="Our Story"
quote="To be the most successful and respected printing and branding specialty establishment in Oman, by employing dedicated people, insightful technology, and delivering unsurpassed solutions."
author="Creative Colours LLC"
role="Since 2006 in Muscat"
imageSrc="http://img.b2bpic.net/free-photo/interior-part-modern-open-space-office_181624-20722.jpg"
/>
</SectionErrorBoundary>
</div>
<AboutSection />
<div id="services" data-section="services">
<SectionErrorBoundary name="services">
<FeaturesDetailedSteps
tag="Services"
title="Our Printing & Branding Solutions"
description="Premium services to help your brand stand out with quality and precision."
steps={[
{
tag: "Signage",
title: "Sign Boards",
subtitle: "Indoor & Outdoor",
description: "High-quality 3D sign boards and light boxes.",
imageSrc: "http://img.b2bpic.net/free-vector/greyscale-abstract-business-banner-design-templates-with-white-background_1097-1064.jpg",
},
{
tag: "Branding",
title: "Vehicle Branding",
subtitle: "Fleet Solutions",
description: "Professional vehicle wraps and high-impact graphics.",
imageSrc: "http://img.b2bpic.net/free-vector/banner-collection-with-modern-shapes_1361-1152.jpg",
},
{
tag: "Events",
title: "Exhibitions",
subtitle: "Booth & Stalls",
description: "Complete exhibition branding, popups, and rollups.",
imageSrc: "http://img.b2bpic.net/free-photo/empty-blue-sign-posts-wall_23-2147764778.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
<ServicesSection />
<div id="portfolio" data-section="portfolio">
<SectionErrorBoundary name="portfolio">
<FeaturesRevealCardsBento
tag="Portfolio"
title="Major Projects & Clients"
description="Showcasing projects for top-tier organizations like BP Oman, Huawei, and Shell."
items={[
{
title: "Corporate Events",
description: "Backdrops & Stage branding for AGM meetings.",
href: "#",
imageSrc: "http://img.b2bpic.net/free-photo/technological-background-concept_23-2148882657.jpg",
},
{
title: "Hoardings",
description: "High-impact outdoor branding.",
href: "#",
imageSrc: "http://img.b2bpic.net/free-photo/female-artist-mixing-water-color-from-palette-with-brush_23-2147889940.jpg",
},
{
title: "Vehicle Branding",
description: "Custom fleet solutions.",
href: "#",
imageSrc: "http://img.b2bpic.net/free-vector/creative-business-card-with-abstract-shapes_23-2147949241.jpg",
},
{
title: "Exhibition Stalls",
description: "Complete booth design and production.",
href: "#",
imageSrc: "http://img.b2bpic.net/free-photo/artistic-colorful-paper-leaves-table_23-2148317503.jpg",
},
{
title: "Retail Signage",
description: "Indoor & Outdoor shop signage.",
href: "#",
imageSrc: "http://img.b2bpic.net/free-photo/unfocused-entry-disco-colors_1208-251.jpg",
},
{
title: "Wall Branding",
description: "Frosted film & interior graphics.",
href: "#",
imageSrc: "http://img.b2bpic.net/free-photo/person-working-car-wrapping_23-2149342633.jpg",
},
{
title: "Custom Printing",
description: "ID cards, banners, and textile.",
href: "#",
imageSrc: "http://img.b2bpic.net/free-photo/outdoor-empty-advertising-billboard-against-blue-sky_23-2147901032.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
<PortfolioSection />
<div id="metrics" data-section="metrics">
<SectionErrorBoundary name="metrics">
<MetricsMediaCards
tag="Performance"
title="Proven Track Record"
description="Years of expertise and high-quality in-house production."
metrics={[
{
value: "18+",
title: "Years of Experience",
description: "Serving Oman's corporate sector since 2006.",
imageSrc: "http://img.b2bpic.net/free-photo/front-view-man-developing-photographs_23-2149894032.jpg",
},
{
value: "100%",
title: "In-house Production",
description: "Guaranteed quality and timely delivery.",
imageSrc: "http://img.b2bpic.net/free-photo/detail-shot-modern-architecture-facade_1359-1039.jpg",
},
{
value: "500+",
title: "Projects Completed",
description: "Serving top-tier organizations.",
imageSrc: "http://img.b2bpic.net/free-photo/small-coffee-shop-items-arrangement_23-2149434608.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
<MetricsSection />
<div id="testimonials" data-section="testimonials">
<SectionErrorBoundary name="testimonials">
<TestimonialOverlayCards
tag="Trust"
title="What Clients Say"
description="Committed to integrity, efficiency, and respect."
testimonials={[
{
name: "Ahmed Al-Saadi",
role: "Marketing Head",
company: "BP Oman",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/man-portrait_1296-491.jpg",
},
{
name: "Sarah Jenkins",
role: "Events Lead",
company: "Shell Lubricants",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/successful-senior-businesswoman-eyeglasses_1262-5856.jpg",
},
{
name: "Mohammed Omar",
role: "Manager",
company: "Majan College",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-businessman-with-crossed-arms_23-2147955274.jpg",
},
{
name: "David Smith",
role: "Events Coordinator",
company: "Huawei Oman",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/business-woman-posing-street_23-2148213468.jpg",
},
{
name: "Layla Hassan",
role: "Brand Manager",
company: "Al Mouj",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/closeup-serious-business-leader-sitting_1262-4831.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
<TestimonialsSection />
<div id="social-proof" data-section="social-proof">
<SectionErrorBoundary name="social-proof">
<SocialProofMarquee
tag="Partners"
title="Our Valued Clients"
description="Trusted by leading companies in Oman."
names={[
"Oman Oil Marketing Company",
"BP Oman",
"Huawei Oman",
"Shell Lubricants",
"Majan College",
"Bank of Beirut",
"Al Mouj",
]}
/>
</SectionErrorBoundary>
</div>
<SocialProofSection />
<div id="contact" data-section="contact">
<SectionErrorBoundary name="contact">
<ContactCta
tag="Get Started"
text="Need professional printing or branding solutions for your business? We're here to help."
primaryButton={{
text: "Contact Us Now",
href: "tel:+96892490393",
}}
secondaryButton={{
text: "Request a Quote",
href: "#",
}}
/>
</SectionErrorBoundary>
</div>
<ContactSection />
</>
);
}

View File

@@ -0,0 +1,22 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "about" section.
import React from 'react';
import AboutTestimonial from '@/components/sections/about/AboutTestimonial';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function AboutSection(): React.JSX.Element {
return (
<div id="about" data-section="about">
<SectionErrorBoundary name="about">
<AboutTestimonial
tag="Our Story"
quote="To be the most successful and respected printing and branding specialty establishment in Oman, by employing dedicated people, insightful technology, and delivering unsurpassed solutions."
author="Creative Colours LLC"
role="Since 2006 in Muscat"
imageSrc="http://img.b2bpic.net/free-photo/interior-part-modern-open-space-office_181624-20722.jpg"
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,27 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "contact" section.
import React from 'react';
import ContactCta from '@/components/sections/contact/ContactCta';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function ContactSection(): React.JSX.Element {
return (
<div id="contact" data-section="contact">
<SectionErrorBoundary name="contact">
<ContactCta
tag="Get Started"
text="Need professional printing or branding solutions for your business? We're here to help."
primaryButton={{
text: "Contact Us Now",
href: "tel:+96892490393",
}}
secondaryButton={{
text: "Request a Quote",
href: "#",
}}
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,68 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "hero" section.
import React from 'react';
import HeroSplitVerticalMarquee from '@/components/sections/hero/HeroSplitVerticalMarquee';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function HeroSection(): React.JSX.Element {
return (
<div id="hero" data-section="hero">
<SectionErrorBoundary name="hero">
<HeroSplitVerticalMarquee
tag="Since 2006"
title="Creative Colours LLC Digital Print Excellence in Oman"
description="We specialize in high-end branding, digital printing, and signage solutions in Muscat. Dedicated to delivering unsurpassed quality with integrity and innovation."
primaryButton={{
text: "Request a Quote",
href: "#contact",
}}
secondaryButton={{
text: "Our Portfolio",
href: "#portfolio",
}}
leftItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/object-thrown-floor-ghetto-hideout-after-criminals-rushed-evacuate_482257-124637.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/full-frame-shot-patterned-wall_1359-435.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/grey-haired-male-plant-engineer-hardhat-glasses-standing-industrial-machine-using-digital-device_74855-16385.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-day_52683-160825.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/still-life-fashion-designer-s-office_23-2150543709.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/hands-male-graphic-designer-using-computer_1170-873.jpg",
},
]}
rightItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/color-swatch-cmyk-design-spectrum-sample-concept_53876-127515.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/scenes-famous-vlogger-recording-social-media-creative-young-man_482257-24887.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/detail-shot-patterned-wall_1359-879.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/car-wrapping-material-different-colors_23-2149342624.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/two-male-graphic-designers-holding-color-swatch_1170-765.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/young-female-client-frame-store-is-showing-male-employee-her-painting-because-she-is-looking-buy-new-frame_662251-226.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,40 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "metrics" section.
import React from 'react';
import MetricsMediaCards from '@/components/sections/metrics/MetricsMediaCards';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function MetricsSection(): React.JSX.Element {
return (
<div id="metrics" data-section="metrics">
<SectionErrorBoundary name="metrics">
<MetricsMediaCards
tag="Performance"
title="Proven Track Record"
description="Years of expertise and high-quality in-house production."
metrics={[
{
value: "18+",
title: "Years of Experience",
description: "Serving Oman's corporate sector since 2006.",
imageSrc: "http://img.b2bpic.net/free-photo/front-view-man-developing-photographs_23-2149894032.jpg",
},
{
value: "100%",
title: "In-house Production",
description: "Guaranteed quality and timely delivery.",
imageSrc: "http://img.b2bpic.net/free-photo/detail-shot-modern-architecture-facade_1359-1039.jpg",
},
{
value: "500+",
title: "Projects Completed",
description: "Serving top-tier organizations.",
imageSrc: "http://img.b2bpic.net/free-photo/small-coffee-shop-items-arrangement_23-2149434608.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,64 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "portfolio" section.
import React from 'react';
import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function PortfolioSection(): React.JSX.Element {
return (
<div id="portfolio" data-section="portfolio">
<SectionErrorBoundary name="portfolio">
<FeaturesRevealCardsBento
tag="Portfolio"
title="Major Projects & Clients"
description="Showcasing projects for top-tier organizations like BP Oman, Huawei, and Shell."
items={[
{
title: "Corporate Events",
description: "Backdrops & Stage branding for AGM meetings.",
href: "#",
imageSrc: "http://img.b2bpic.net/free-photo/technological-background-concept_23-2148882657.jpg",
},
{
title: "Hoardings",
description: "High-impact outdoor branding.",
href: "#",
imageSrc: "http://img.b2bpic.net/free-photo/female-artist-mixing-water-color-from-palette-with-brush_23-2147889940.jpg",
},
{
title: "Vehicle Branding",
description: "Custom fleet solutions.",
href: "#",
imageSrc: "http://img.b2bpic.net/free-vector/creative-business-card-with-abstract-shapes_23-2147949241.jpg",
},
{
title: "Exhibition Stalls",
description: "Complete booth design and production.",
href: "#",
imageSrc: "http://img.b2bpic.net/free-photo/artistic-colorful-paper-leaves-table_23-2148317503.jpg",
},
{
title: "Retail Signage",
description: "Indoor & Outdoor shop signage.",
href: "#",
imageSrc: "http://img.b2bpic.net/free-photo/unfocused-entry-disco-colors_1208-251.jpg",
},
{
title: "Wall Branding",
description: "Frosted film & interior graphics.",
href: "#",
imageSrc: "http://img.b2bpic.net/free-photo/person-working-car-wrapping_23-2149342633.jpg",
},
{
title: "Custom Printing",
description: "ID cards, banners, and textile.",
href: "#",
imageSrc: "http://img.b2bpic.net/free-photo/outdoor-empty-advertising-billboard-against-blue-sky_23-2147901032.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,43 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "services" section.
import React from 'react';
import FeaturesDetailedSteps from '@/components/sections/features/FeaturesDetailedSteps';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function ServicesSection(): React.JSX.Element {
return (
<div id="services" data-section="services">
<SectionErrorBoundary name="services">
<FeaturesDetailedSteps
tag="Services"
title="Our Printing & Branding Solutions"
description="Premium services to help your brand stand out with quality and precision."
steps={[
{
tag: "Signage",
title: "Sign Boards",
subtitle: "Indoor & Outdoor",
description: "High-quality 3D sign boards and light boxes.",
imageSrc: "http://img.b2bpic.net/free-vector/greyscale-abstract-business-banner-design-templates-with-white-background_1097-1064.jpg",
},
{
tag: "Branding",
title: "Vehicle Branding",
subtitle: "Fleet Solutions",
description: "Professional vehicle wraps and high-impact graphics.",
imageSrc: "http://img.b2bpic.net/free-vector/banner-collection-with-modern-shapes_1361-1152.jpg",
},
{
tag: "Events",
title: "Exhibitions",
subtitle: "Booth & Stalls",
description: "Complete exhibition branding, popups, and rollups.",
imageSrc: "http://img.b2bpic.net/free-photo/empty-blue-sign-posts-wall_23-2147764778.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,29 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "social-proof" section.
import React from 'react';
import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function SocialProofSection(): React.JSX.Element {
return (
<div id="social-proof" data-section="social-proof">
<SectionErrorBoundary name="social-proof">
<SocialProofMarquee
tag="Partners"
title="Our Valued Clients"
description="Trusted by leading companies in Oman."
names={[
"Oman Oil Marketing Company",
"BP Oman",
"Huawei Oman",
"Shell Lubricants",
"Majan College",
"Bank of Beirut",
"Al Mouj",
]}
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,57 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "testimonials" section.
import React from 'react';
import TestimonialOverlayCards from '@/components/sections/testimonial/TestimonialOverlayCards';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function TestimonialsSection(): React.JSX.Element {
return (
<div id="testimonials" data-section="testimonials">
<SectionErrorBoundary name="testimonials">
<TestimonialOverlayCards
tag="Trust"
title="What Clients Say"
description="Committed to integrity, efficiency, and respect."
testimonials={[
{
name: "Ahmed Al-Saadi",
role: "Marketing Head",
company: "BP Oman",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/man-portrait_1296-491.jpg",
},
{
name: "Sarah Jenkins",
role: "Events Lead",
company: "Shell Lubricants",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/successful-senior-businesswoman-eyeglasses_1262-5856.jpg",
},
{
name: "Mohammed Omar",
role: "Manager",
company: "Majan College",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-businessman-with-crossed-arms_23-2147955274.jpg",
},
{
name: "David Smith",
role: "Events Coordinator",
company: "Huawei Oman",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/business-woman-posing-street_23-2148213468.jpg",
},
{
name: "Layla Hassan",
role: "Brand Manager",
company: "Al Mouj",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/closeup-serious-business-leader-sitting_1262-4831.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
);
}