10 Commits

Author SHA1 Message Date
da2dd0fae2 Update src/app/page.tsx 2026-05-06 22:03:44 +00:00
95167d3fa4 Merge version_3 into main
Merge version_3 into main
2026-05-06 22:00:32 +00:00
7f1a181bbe Update src/app/page.tsx 2026-05-06 22:00:29 +00:00
3bb58111bd Merge version_2 into main
Merge version_2 into main
2026-05-06 21:57:42 +00:00
bf03d904e1 Update src/app/page.tsx 2026-05-06 21:57:39 +00:00
f0fbc76ddb Merge version_2 into main
Merge version_2 into main
2026-05-06 21:57:12 +00:00
1bbbb47160 Update src/app/page.tsx 2026-05-06 21:57:09 +00:00
7aa2142aa2 Merge version_1 into main
Merge version_1 into main
2026-05-06 21:48:43 +00:00
09c2aaebd0 Merge version_1 into main
Merge version_1 into main
2026-05-06 21:48:19 +00:00
bef93dad7f Merge version_1 into main
Merge version_1 into main
2026-05-06 21:47:49 +00:00

View File

@@ -31,49 +31,29 @@ export default function LandingPage() {
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay <NavbarLayoutFloatingOverlay
navItems={[ navItems={[
{ name: "Portfolio", id: "#portfolio" }, { name: "Work", id: "#portfolio" },
{ name: "Process", id: "#process" }, { name: "Process", id: "#process" },
{ name: "Pricing", id: "#pricing" }, { name: "Packages", id: "#pricing" },
{ name: "Contact", id: "#contact" }, { name: "Audit", id: "#contact" },
]} ]}
brandName="Studio Morocco" brandName="Studio Noir"
/> />
</div> </div>
<div id="hero" data-section="hero"> <div id="hero" data-section="hero">
<HeroOverlayTestimonial <HeroOverlayTestimonial
title="Websites That Make Businesses Look Expensive — And Sell Better." title="Digital Authority for Local Leaders."
description="We design high-converting websites for restaurants, clinics, agencies, gyms and salons that want to look premium and turn visitors into customers." description="We help local business owners double their lead volume while maintaining a premium brand aesthetic, architecting high-performance digital ecosystems that demand attention."
buttons={[ buttons={[
{ text: "Get a Free Website Audit", href: "#contact" }, { text: "Request Your Audit", href: "#contact" },
{ text: "View Demo Projects", href: "#portfolio" }, { text: "See Our Work", href: "#portfolio" },
]} ]}
imageSrc="http://img.b2bpic.net/free-photo/row-identical-laptops-monochrome-light-corporate-teams-digital-device-fleet_169016-70819.jpg" imageSrc="http://img.b2bpic.net/free-photo/row-identical-laptops-monochrome-light-corporate-teams-digital-device-fleet_169016-70819.jpg"
imageAlt="Professional website agency mockup" imageAlt="Professional premium design studio"
avatars={[ avatarText="Trusted by leading local enterprises"
{ src: "http://img.b2bpic.net/free-photo/web-design-user-interface-concept_53876-120767.jpg", alt: "Client profile 1" },
{ src: "http://img.b2bpic.net/free-photo/close-up-it-remote-employee-writing-code-using-mockup-notebook_482257-116241.jpg", alt: "Client profile 2" },
{ src: "http://img.b2bpic.net/free-photo/laptop-with-copy-space-display-empty-desk-performance-metrics_482257-126532.jpg", alt: "Client profile 3" },
{ src: "http://img.b2bpic.net/free-photo/arabic-laptop-front-side_187299-38055.jpg", alt: "Client profile 4" },
{ src: "http://img.b2bpic.net/free-photo/man-restaurant-concentrating-laptop_23-2147826852.jpg", alt: "Client profile 5" },
]}
avatarText="Trusted by 50+ local businesses"
testimonials={[ testimonials={[
{ { name: "Alex Rivera", handle: "@arivera", testimonial: "The site transformation increased our leads by 40% in just two months. Unmatched quality.", rating: 5 },
name: "Sarah Miller", handle: "@sarahsmiller", testimonial: "The design quality is unmatched. My restaurant bookings doubled within the first month of the new site.", rating: 5, { name: "Sarah Chen", handle: "@schen", testimonial: "Finally, a team that understands how to position premium services. Exceptional execution.", rating: 5 }
imageSrc: "http://img.b2bpic.net/free-photo/man-restaurant-concentrating-laptop_23-2147826852.jpg"},
{
name: "Dr. James Aris", handle: "@drjamesaris", testimonial: "Finally, a website that looks professional and builds trust with my patients. Seamless experience.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/health-specialist-showing-horizontal-greenscreen-tablet-patient-looking-display-mockup-isolated-template-with-blank-copyspace-chroma-key-background-gadget-close-up_482257-45685.jpg"},
{
name: "Elena Rossi", handle: "@elena_rossi", testimonial: "Studio Morocco made my architecture portfolio look world-class. The attention to detail is superb.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/architecture-real-estate-building-concept_53876-124771.jpg"},
{
name: "Mark Thornton", handle: "@thorntonfitness", testimonial: "High-converting, sleek, and fast. My gym sign-ups have increased significantly since launch.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/build-body-daily-workout-concept_53876-13877.jpg"},
{
name: "Linda Vance", handle: "@lvancebeauty", testimonial: "The booking system integrated perfectly. My clients love the elegant, feminine aesthetic.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/stylish-beauty-women-elegent-enjoy-concept_53876-132577.jpg"},
]} ]}
/> />
</div> </div>
@@ -81,10 +61,10 @@ export default function LandingPage() {
<div id="problem" data-section="problem"> <div id="problem" data-section="problem">
<MediaAbout <MediaAbout
useInvertedBackground={false} useInvertedBackground={false}
title="Most businesses lose customers before they even get a message." title="Your website should be your best salesperson."
description="Is your current website costing you potential clients? We fix outdated layouts, mobile-unfriendly experiences, and unclear calls to action that drive visitors away. We build digital assets that work 24/7." description="If your digital presence isn't driving consistent lead flow, you're leaving revenue on the table. We replace friction-filled, outdated designs with streamlined, high-trust digital experiences tailored for your specific market."
imageSrc="http://img.b2bpic.net/free-photo/side-view-man-using-laptop-outdoors_23-2150747668.jpg" imageSrc="http://img.b2bpic.net/free-photo/side-view-man-using-laptop-outdoors_23-2150747668.jpg"
imageAlt="Outdated website frustration" imageAlt="Modern professional design"
/> />
</div> </div>
@@ -95,36 +75,36 @@ export default function LandingPage() {
useInvertedBackground={false} useInvertedBackground={false}
features={[ features={[
{ {
title: "Business Website", description: "Professional hub for your brand.", icon: Globe, title: "Authority Platforms", description: "Full-scale digital hubs engineered for trust.", icon: Globe,
mediaItems: [ mediaItems: [
{ imageSrc: "http://img.b2bpic.net/free-photo/high-angle-nutritional-counter-app-composition_23-2149880622.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/high-angle-nutritional-counter-app-composition_23-2149880622.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/laptop-with-replaceable-screen-hospital-cabinet-doctor-wearing-coat-arriving-health-clinic-nurse-writing-prescription-notebook-with-green-screen-medic-clinic_482257-3034.jpg" } { imageSrc: "http://img.b2bpic.net/free-photo/laptop-with-replaceable-screen-hospital-cabinet-doctor-wearing-coat-arriving-health-clinic-nurse-writing-prescription-notebook-with-green-screen-medic-clinic_482257-3034.jpg" }
] ]
}, },
{ {
title: "Landing Page", description: "High-conversion single page focus.", icon: Zap, title: "Conversion Funnels", description: "Strategic landing pages that focus on one goal: leads.", icon: Zap,
mediaItems: [ mediaItems: [
{ imageSrc: "http://img.b2bpic.net/free-photo/real-estate-accommodation-property-investment-graphic-word_53876-124687.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/real-estate-accommodation-property-investment-graphic-word_53876-124687.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/arrangement-with-laptop-seaside_23-2148968962.jpg" } { imageSrc: "http://img.b2bpic.net/free-photo/arrangement-with-laptop-seaside_23-2148968962.jpg" }
] ]
}, },
{ {
title: "Booking Website", description: "Seamless scheduling for your services.", icon: Calendar, title: "Integrated Systems", description: "Automated booking and scheduling workflows.", icon: Calendar,
mediaItems: [ mediaItems: [
{ imageSrc: "http://img.b2bpic.net/free-photo/beauty-salon-with-cosmetology-equipment-anime-style_23-2151500977.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/beauty-salon-with-cosmetology-equipment-anime-style_23-2151500977.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-korean-woman-making-toast-watching-video-digital-tablet-looking-screen_1258-190989.jpg" } { imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-korean-woman-making-toast-watching-video-digital-tablet-looking-screen_1258-190989.jpg" }
] ]
}, },
{ {
title: "Website Redesign", description: "Modernize your existing presence.", icon: RefreshCw, title: "Brand Refinement", description: "Modernizing your existing digital assets.", icon: RefreshCw,
mediaItems: [ mediaItems: [
{ imageSrc: "http://img.b2bpic.net/free-photo/coffee-relaxation-beverage-planning-data-digital-concept_53876-63189.jpg?_wi=1" }, { imageSrc: "http://img.b2bpic.net/free-photo/coffee-relaxation-beverage-planning-data-digital-concept_53876-63189.jpg?_wi=1" },
{ imageSrc: "http://img.b2bpic.net/free-photo/homepage-seen-laptop-screen_23-2149416731.jpg?_wi=1" } { imageSrc: "http://img.b2bpic.net/free-photo/homepage-seen-laptop-screen_23-2149416731.jpg?_wi=1" }
] ]
} }
]} ]}
title="We turn your online presence into a sales asset." title="Engineering conversion, not just code."
description="Our solutions are tailored to local business needs, focusing on trust and conversion." description="Every element is crafted to position your brand as the premium choice in your local market."
/> />
</div> </div>
@@ -135,15 +115,13 @@ export default function LandingPage() {
gridVariant="uniform-all-items-equal" gridVariant="uniform-all-items-equal"
useInvertedBackground={false} useInvertedBackground={false}
products={[ products={[
{ id: "p1", name: "Premium Café Redesign", price: "Concept Project", variant: "Hospitality", imageSrc: "http://img.b2bpic.net/free-photo/coffee-relaxation-beverage-planning-data-digital-concept_53876-63189.jpg?_wi=2" }, { id: "p1", name: "Hospitality Ecosystem", price: "Custom Strategy", variant: "Premium", imageSrc: "http://img.b2bpic.net/free-photo/coffee-relaxation-beverage-planning-data-digital-concept_53876-63189.jpg?_wi=2" },
{ id: "p2", name: "Dental Clinic Landing", price: "Demo Redesign", variant: "Medical", imageSrc: "http://img.b2bpic.net/free-photo/homepage-seen-laptop-screen_23-2149416731.jpg?_wi=2" }, { id: "p2", name: "Clinic Performance Site", price: "Conversion Asset", variant: "Growth", imageSrc: "http://img.b2bpic.net/free-photo/homepage-seen-laptop-screen_23-2149416731.jpg?_wi=2" },
{ id: "p3", name: "Real Estate Agency", price: "Concept Project", variant: "Real Estate", imageSrc: "http://img.b2bpic.net/free-photo/real-estate-accommodation-property-investment-graphic-word_53876-127370.jpg" }, { id: "p3", name: "Elite Real Estate Portfolio", price: "Premium Branding", variant: "Authority", imageSrc: "http://img.b2bpic.net/free-photo/real-estate-accommodation-property-investment-graphic-word_53876-127370.jpg" },
{ id: "p4", name: "Fitness Coach Booking", price: "Sample Case Study", variant: "Wellness", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-training-with-laptop_23-2150384088.jpg" }, { id: "p4", name: "Wellness Booking System", price: "Operational Asset", variant: "System", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-training-with-laptop_23-2150384088.jpg" },
{ id: "p5", name: "Architecture Portfolio", price: "Concept Project", variant: "Studio", imageSrc: "http://img.b2bpic.net/free-photo/architects-working-project_53876-46878.jpg" },
{ id: "p6", name: "Beauty Salon Booking", price: "Demo Redesign", variant: "Beauty", imageSrc: "http://img.b2bpic.net/free-vector/appointment-booking-landing-page_23-2148552092.jpg" },
]} ]}
title="Concept Demo Projects" title="Curated Work"
description="Built to demonstrate our process and capabilities." description="Examples of how we position brands to command authority."
/> />
</div> </div>
@@ -153,14 +131,14 @@ export default function LandingPage() {
textboxLayout="default" textboxLayout="default"
useInvertedBackground={false} useInvertedBackground={false}
metrics={[ metrics={[
{ id: "m1", value: "01", title: "Audit", items: ["Deep dive into current site", "Competitor research", "Identify growth opportunities"] }, { id: "m1", value: "01", title: "Discovery", items: ["Market landscape audit", "Audience mapping", "Revenue goal alignment"] },
{ id: "m2", value: "02", title: "Strategy", items: ["Define business goals", "Target audience analysis", "Conversion path design"] }, { id: "m2", value: "02", title: "Architecture", items: ["Strategic wireframing", "Conversion journey design", "Tech stack selection"] },
{ id: "m3", value: "03", title: "Design", items: ["Premium interface mockups", "Modern brand alignment", "User experience focus"] }, { id: "m3", value: "03", title: "Execution", items: ["Premium interface design", "Sophisticated animation", "Brand voice implementation"] },
{ id: "m4", value: "04", title: "Build", items: ["Responsive web development", "Performance optimization", "SEO foundations"] }, { id: "m4", value: "04", title: "Engineering", items: ["Performance optimization", "Responsive fluidity", "SEO infrastructure"] },
{ id: "m5", value: "05", title: "Launch", items: ["Deployment & testing", "Quality assurance", "Final handover & support"] }, { id: "m5", value: "05", title: "Launch", items: ["Deployment protocol", "Final quality assurance", "Support transition"] },
]} ]}
title="Simple process. Fast delivery." title="A rigorous path to authority."
description="Our five-step framework ensures quality, clarity, and speed." description="Our framework is designed for speed, precision, and measurable outcomes."
/> />
</div> </div>
@@ -170,22 +148,22 @@ export default function LandingPage() {
textboxLayout="default" textboxLayout="default"
useInvertedBackground={false} useInvertedBackground={false}
plans={[ plans={[
{ id: "starter", tag: "Starter", period: "once", price: "Starting from $999", description: "Professional entry-level presence.", button: { text: "Get Quote", href: "#contact" }, featuresTitle: "Includes:", features: ["1-3 pages", "Responsive design", "Contact form", "WhatsApp button"] }, { id: "starter", tag: "Essential", period: "project", price: "From $1,500", description: "High-impact digital presence.", button: { text: "Request Quote", href: "#contact" }, featuresTitle: "Core Features:", features: ["Performance Design", "Responsive Architecture", "Lead Capture Flow", "SEO Foundation"] },
{ id: "growth", tag: "Growth", period: "once", price: "Starting from $1,999", description: "Lead-focused digital growth.", button: { text: "Get Quote", href: "#contact" }, featuresTitle: "Everything in Starter, plus:", features: ["4-6 pages", "SEO Basics", "Booking/contact flow", "Analytics setup"] }, { id: "growth", tag: "Growth", period: "project", price: "From $2,800", description: "Scale your local reach.", button: { text: "Request Quote", href: "#contact" }, featuresTitle: "Everything in Essential, plus:", features: ["Booking Integration", "Advanced Analytics", "Content Strategy", "Enhanced Trust Modules"] },
{ id: "premium", tag: "Premium", period: "once", price: "Starting from $3,499", description: "Full-service digital system.", button: { text: "Get Quote", href: "#contact" }, featuresTitle: "Everything in Growth, plus:", features: ["Landing page strategy", "Brand direction", "SEO structure", "Content guidance"] }, { id: "premium", tag: "Authority", period: "project", price: "From $4,500", description: "Total digital dominance.", button: { text: "Request Quote", href: "#contact" }, featuresTitle: "Everything in Growth, plus:", features: ["Custom UI System", "Full Sales Funnel", "Performance Automations", "Priority Support"] },
]} ]}
title="Flexible Service Packages" title="Investment Packages"
description="Professional web systems tailored to your needs." description="Tailored digital systems for premium outcomes."
/> />
</div> </div>
<div id="about" data-section="about"> <div id="about" data-section="about">
<MediaAbout <MediaAbout
useInvertedBackground={false} useInvertedBackground={false}
title="Built for ambitious businesses." title="Studio Noir: Design for Leaders."
description="I started this studio to help local businesses stop looking average online. With a background in design and digital strategy, I build websites that are beautiful, functional, and built to sell." description="We don't believe in 'template' business. We believe in crafting deliberate digital experiences that mirror the quality of the service you provide. When your brand looks expensive, your clients expect premium results."
imageSrc="http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345417.jpg" imageSrc="http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345417.jpg"
imageAlt="About the designer" imageAlt="About Studio Noir"
/> />
</div> </div>
@@ -193,33 +171,33 @@ export default function LandingPage() {
<ContactCTA <ContactCTA
useInvertedBackground={false} useInvertedBackground={false}
background={{ variant: "radial-gradient" }} background={{ variant: "radial-gradient" }}
tag="FREE AUDIT" tag="GET STARTED"
title="Want to know what your website is costing you?" title="Ready to raise your standards?"
description="Get a custom audit to see how we can improve your conversion and customer trust." description="Schedule your complimentary website strategy audit. Let's build something worth talking about."
buttons={[{ text: "Get Free Website Audit", href: "#" }]} buttons={[{ text: "Get My Strategy Audit", href: "#" }]}
/> />
</div> </div>
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">
<FooterBaseReveal <FooterBaseReveal
logoText="Studio Morocco" logoText="Studio Noir"
columns={[ columns={[
{ {
title: "Navigation", items: [ title: "Links", items: [
{ label: "Portfolio", href: "#portfolio" }, { label: "Work", href: "#portfolio" },
{ label: "Process", href: "#process" }, { label: "Process", href: "#process" },
{ label: "Pricing", href: "#pricing" }, { label: "Packages", href: "#pricing" },
], ],
}, },
{ {
title: "Contact", items: [ title: "Connect", items: [
{ label: "WhatsApp", href: "#" }, { label: "Strategy Audit", href: "#contact" },
{ label: "Email", href: "#" }, { label: "Direct Inquiry", href: "#" },
{ label: "Instagram", href: "#" }, { label: "Press", href: "#" },
], ],
}, },
]} ]}
copyrightText="© 2024 Studio Morocco. All rights reserved." copyrightText="© 2024 Studio Noir. All rights reserved."
/> />
</div> </div>
</ReactLenis> </ReactLenis>