Merge version_14_1783179056409 into main #18
@@ -43,7 +43,7 @@ const NavbarDropdown = ({ logo, navItems, ctaButton }: NavbarDropdownProps) => {
|
||||
return (
|
||||
<nav data-section="navbar" ref={navRef} className="fixed z-1000 top-5 left-1/2 -translate-x-1/2 w-content-width">
|
||||
<div className="flex items-center justify-between p-2 xl:p-3 2xl:p-4 rounded backdrop-blur-sm card">
|
||||
<a href="/" className="pl-2 flex items-center">\n <img src="https://storage.googleapis.com/webild/users/user_3G2Ozqag2ovb8not76KWtboL8LU/uploaded-1783179055454-3sn7308q.png" alt="Logo" className="h-8 w-auto" />\n </a>
|
||||
<a href="/" className="pl-2 text-xl font-medium text-foreground">{logo}</a>
|
||||
|
||||
<div className="flex items-center gap-2 xl:gap-3 2xl:gap-4">
|
||||
<Button text={ctaButton.text} href={ctaButton.href} variant="primary" animate={false} />
|
||||
|
||||
@@ -1,46 +1,265 @@
|
||||
// AUTO-GENERATED shell by per-section-migrate.
|
||||
// Section bodies live in the sibling sections/ folder (one file per section).
|
||||
// Edit those section files directly. Non-block content (wrappers,
|
||||
// non-inlinable sections) is preserved inline; extracted section blocks
|
||||
// become component refs.
|
||||
|
||||
import { StyleProvider } from "@/components/ui/StyleProvider";
|
||||
import SiteBackgroundSlot from "@/components/ui/SiteBackgroundSlot";
|
||||
import React from 'react';
|
||||
import HeroSection from './HomePage/sections/Hero';
|
||||
import ServicesSection from './HomePage/sections/Services';
|
||||
import WorkSection from './HomePage/sections/Work';
|
||||
import PromiseSection from './HomePage/sections/Promise';
|
||||
import TestimonialsSection from './HomePage/sections/Testimonials';
|
||||
import MetricsSection from './HomePage/sections/Metrics';
|
||||
import TeamSection from './HomePage/sections/Team';
|
||||
import FaqSection from './HomePage/sections/Faq';
|
||||
import ContactSection from './HomePage/sections/Contact';
|
||||
import HeroSplitVerticalMarqueeTall from "@/components/sections/hero/HeroSplitVerticalMarqueeTall";
|
||||
import FeaturesBento from "@/components/sections/features/FeaturesBento";
|
||||
import FeaturesMediaCarousel from "@/components/sections/features/FeaturesMediaCarousel";
|
||||
import FeaturesBorderGlow from "@/components/sections/features/FeaturesBorderGlow";
|
||||
import TestimonialTrustCard from "@/components/sections/testimonial/TestimonialTrustCard";
|
||||
import MetricsFeatureCards from "@/components/sections/metrics/MetricsFeatureCards";
|
||||
import TeamStackedCards from "@/components/sections/team/TeamStackedCards";
|
||||
import FaqSimple from "@/components/sections/faq/FaqSimple";
|
||||
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
||||
import { Monitor, Zap, Shield, ArrowUpRight, Code, Palette, Layers, PenTool, Sparkles } from "lucide-react";
|
||||
|
||||
export default function HomePage(): React.JSX.Element {
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<StyleProvider siteBackground="aurora" heroBackground="lightRaysCorner" buttonVariant="stagger">
|
||||
<SiteBackgroundSlot />
|
||||
|
||||
|
||||
|
||||
<HeroSection />
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitVerticalMarqueeTall
|
||||
textAnimation="fade-blur"
|
||||
tag="Award-Winning Agency"
|
||||
title="We Build Digital Experiences"
|
||||
description="Transform your brand with cutting-edge web design and development. We craft stunning websites that convert visitors into customers."
|
||||
primaryButton={{ text: "Start Project", href: "#contact" }}
|
||||
secondaryButton={{ text: "View Work", href: "#work" }}
|
||||
leftItems={[
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp?_wi=1" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-4.webp?_wi=1" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-6.webp?_wi=1" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-7.webp?_wi=1" },
|
||||
]}
|
||||
rightItems={[
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-2.webp?_wi=1" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-5.webp?_wi=1" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-3.webp?_wi=1" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-8.webp?_wi=1" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ServicesSection />
|
||||
<div id="services" data-section="services">
|
||||
<FeaturesBento
|
||||
textAnimation="fade-blur"
|
||||
tag="Services"
|
||||
title="Services That Drive Results"
|
||||
description="We offer a full suite of digital services to help your brand stand out online."
|
||||
features={[
|
||||
{
|
||||
title: "Web Development",
|
||||
description: "Custom-built websites that are fast, responsive, and designed to convert.",
|
||||
bentoComponent: "checklist-timeline",
|
||||
heading: "Project Timeline",
|
||||
subheading: "Week 1-2",
|
||||
checklistItems: [
|
||||
{ label: "Discovery & Strategy", detail: "Day 1-3" },
|
||||
{ label: "Design & Prototype", detail: "Day 4-7" },
|
||||
{ label: "Development & Launch", detail: "Day 8-14" },
|
||||
],
|
||||
completedLabel: "Live",
|
||||
},
|
||||
{
|
||||
title: "SEO Optimization",
|
||||
description: "We optimize your website to rank higher on search engines and drive organic traffic.",
|
||||
bentoComponent: "animated-bar-chart",
|
||||
},
|
||||
{
|
||||
title: "Branding",
|
||||
description: "Build a memorable brand identity that resonates with your audience.",
|
||||
bentoComponent: "orbiting-icons",
|
||||
centerIcon: Sparkles,
|
||||
orbitIcons: [Palette, Layers, PenTool, Code],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<WorkSection />
|
||||
<div id="work" data-section="work">
|
||||
<FeaturesMediaCarousel
|
||||
textAnimation="fade-blur"
|
||||
tag="Our Work"
|
||||
title="Work We're Proud Of"
|
||||
description="A selection of projects we've crafted for clients across industries."
|
||||
items={[
|
||||
{
|
||||
title: "Vitality Wellness",
|
||||
description: "Health & wellbeing platform",
|
||||
imageSrc: "https://storage.googleapis.com/webild/default/templates/web-agency-2/projectnew1.webp?_wi=1",
|
||||
buttonIcon: ArrowUpRight,
|
||||
buttonHref: "#",
|
||||
},
|
||||
{
|
||||
title: "Mailflow AI",
|
||||
description: "AI-powered email marketing platform",
|
||||
imageSrc: "https://storage.googleapis.com/webild/default/templates/web-agency-2/projectnew2.webp?_wi=1",
|
||||
buttonIcon: ArrowUpRight,
|
||||
buttonHref: "#",
|
||||
},
|
||||
{
|
||||
title: "Kinetic Studios",
|
||||
description: "Motion graphics & visual effects",
|
||||
imageSrc: "https://storage.googleapis.com/webild/default/templates/web-agency-2/projectnew3.webp?_wi=1",
|
||||
buttonIcon: ArrowUpRight,
|
||||
buttonHref: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<PromiseSection />
|
||||
<div id="promise" data-section="promise">
|
||||
<FeaturesBorderGlow
|
||||
textAnimation="fade-blur"
|
||||
tag="Our Promise"
|
||||
title="Why business owner Choose VisionWeb"
|
||||
description="We deliver results that speak for themselves."
|
||||
features={[
|
||||
{
|
||||
icon: Monitor,
|
||||
title: "Responsive Design",
|
||||
description: "Pixel-perfect websites that look stunning on every screen size and device.",
|
||||
},
|
||||
{
|
||||
icon: Zap,
|
||||
title: "Fast Turnaround",
|
||||
description: "From concept to launch in record time without sacrificing quality.",
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Secure Hosting",
|
||||
description: "Enterprise-grade security and 99.9% uptime for your website.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<TestimonialsSection />
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialTrustCard
|
||||
textAnimation="fade-blur"
|
||||
quote="VisionWeb completely transformed our online presence. The team delivered a stunning website that exceeded our expectations and doubled our conversion rate."
|
||||
rating={5}
|
||||
author="— Maria Santos, CEO at Luxuria Travel"
|
||||
avatars={[
|
||||
{ name: "Maria Santos", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp?_wi=1" },
|
||||
{ name: "James Chen", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-2.webp?_wi=1" },
|
||||
{ name: "Sofia Reyes", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-3.webp?_wi=1" },
|
||||
{ name: "David Kim", imageSrc: "https://randomuser.me/api/portraits/men/32.jpg?_wi=1" },
|
||||
{ name: "Emma Wilson", imageSrc: "https://randomuser.me/api/portraits/women/44.jpg?_wi=1" },
|
||||
{ name: "Alex Thompson", imageSrc: "https://randomuser.me/api/portraits/men/67.jpg?_wi=1" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<MetricsSection />
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricsFeatureCards
|
||||
textAnimation="fade-blur"
|
||||
tag="Results"
|
||||
title="Trusted by Industry Leaders"
|
||||
description="Years of experience gorwth businesses."
|
||||
metrics={[
|
||||
{
|
||||
value: "100+",
|
||||
title: "Projects Delivered",
|
||||
features: [
|
||||
"E-commerce platforms",
|
||||
"Corporate websites",
|
||||
"SaaS applications",
|
||||
"Mobile-first designs",
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "99%",
|
||||
title: "Client Satisfaction",
|
||||
features: [
|
||||
" delivery in 24h",
|
||||
"Clear communication",
|
||||
"Post-launch support",
|
||||
"Ongoing partnerships",
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "5+",
|
||||
title: "Years Experience",
|
||||
features: [
|
||||
"Industry expertise",
|
||||
"Award-winning work",
|
||||
"Global clientele",
|
||||
"Proven methodology",
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<TeamSection />
|
||||
<div id="team" data-section="team">
|
||||
<TeamStackedCards
|
||||
textAnimation="fade-blur"
|
||||
tag="Team"
|
||||
title="The Team Behind the Work"
|
||||
description="The creative minds behind your next project."
|
||||
members={[
|
||||
{
|
||||
name: "Nedine Soltani",
|
||||
role: "Lead Developer",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp?_wi=2",
|
||||
},
|
||||
{
|
||||
name: "Yahya Sahraoui",
|
||||
role: "Creative Director",
|
||||
imageSrc: "https://storage.googleapis.com/webild/users/user_3G2Ozqag2ovb8not76KWtboL8LU/uploaded-1783172732979-6cqr1t3h.png?_wi=1",
|
||||
},
|
||||
{
|
||||
name: "Nader amri",
|
||||
role: "UX Designer",
|
||||
imageSrc: "https://storage.googleapis.com/webild/users/user_3G2Ozqag2ovb8not76KWtboL8LU/uploaded-1783172630842-tmba3pi4.png?_wi=1",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FaqSection />
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSimple
|
||||
textAnimation="fade-blur"
|
||||
tag="FAQ"
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know about working with us."
|
||||
items={[
|
||||
{
|
||||
question: "How long does a typical project take?",
|
||||
answer: "Most projects are completed within 2-4 weeks depending on scope and complexity. We'll provide a detailed timeline during our initial consultation.",
|
||||
},
|
||||
{
|
||||
question: "What is your pricing structure?",
|
||||
answer: "We offer project-based pricing tailored to your needs. Every project includes design, development, SEO optimization, and post-launch support.",
|
||||
},
|
||||
{
|
||||
question: "Do you offer ongoing maintenance?",
|
||||
answer: "Yes! We provide ongoing support and maintenance packages to keep your website updated, secure, and performing at its best.",
|
||||
},
|
||||
{
|
||||
question: "Can you redesign my existing website?",
|
||||
answer: "Absolutely. We specialize in website redesigns that modernize your brand while preserving your existing content and SEO rankings.",
|
||||
},
|
||||
{
|
||||
question: "What technologies do you use?",
|
||||
answer: "We build with modern technologies including Next.js, React, and Tailwind CSS to ensure fast, scalable, and maintainable websites.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ContactSection />
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
textAnimation="fade-blur"
|
||||
tag="Get in Touch"
|
||||
title="Ready to Transform Your Digital Presence?"
|
||||
description="Let's build something extraordinary together. Get in touch and let's discuss your next project."
|
||||
inputPlaceholder="Enter your email"
|
||||
buttonText="Start Your Project"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
</StyleProvider>
|
||||
|
||||
@@ -15,16 +15,16 @@ export default function HeroSection(): React.JSX.Element {
|
||||
primaryButton={{ text: "Start Project", href: "#contact" }}
|
||||
secondaryButton={{ text: "View Work", href: "#work" }}
|
||||
leftItems={[
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-4.webp" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-6.webp" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-7.webp" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp?_wi=2" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-4.webp?_wi=2" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-6.webp?_wi=2" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-7.webp?_wi=2" },
|
||||
]}
|
||||
rightItems={[
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-2.webp" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-5.webp" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-3.webp" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-8.webp" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-2.webp?_wi=2" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-5.webp?_wi=2" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-3.webp?_wi=2" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-8.webp?_wi=2" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -16,17 +16,17 @@ export default function TeamSection(): React.JSX.Element {
|
||||
{
|
||||
name: "Nedine Soltani",
|
||||
role: "Lead Developer",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp?_wi=2",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp?_wi=1",
|
||||
},
|
||||
{
|
||||
name: "Yahya Sahraoui",
|
||||
role: "Creative Director",
|
||||
imageSrc: "https://storage.googleapis.com/webild/users/user_3G2Ozqag2ovb8not76KWtboL8LU/uploaded-1783172732979-6cqr1t3h.png",
|
||||
imageSrc: "https://storage.googleapis.com/webild/users/user_3G2Ozqag2ovb8not76KWtboL8LU/uploaded-1783172732979-6cqr1t3h.png?_wi=2",
|
||||
},
|
||||
{
|
||||
name: "Nader amri",
|
||||
role: "UX Designer",
|
||||
imageSrc: "https://storage.googleapis.com/webild/users/user_3G2Ozqag2ovb8not76KWtboL8LU/uploaded-1783172630842-tmba3pi4.png",
|
||||
imageSrc: "https://storage.googleapis.com/webild/users/user_3G2Ozqag2ovb8not76KWtboL8LU/uploaded-1783172630842-tmba3pi4.png?_wi=2",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
@@ -13,12 +13,12 @@ export default function TestimonialsSection(): React.JSX.Element {
|
||||
rating={5}
|
||||
author="— Maria Santos, CEO at Luxuria Travel"
|
||||
avatars={[
|
||||
{ name: "Maria Santos", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp?_wi=1" },
|
||||
{ name: "James Chen", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-2.webp" },
|
||||
{ name: "Sofia Reyes", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-3.webp" },
|
||||
{ name: "David Kim", imageSrc: "https://randomuser.me/api/portraits/men/32.jpg" },
|
||||
{ name: "Emma Wilson", imageSrc: "https://randomuser.me/api/portraits/women/44.jpg" },
|
||||
{ name: "Alex Thompson", imageSrc: "https://randomuser.me/api/portraits/men/67.jpg" },
|
||||
{ name: "Maria Santos", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp?_wi=2" },
|
||||
{ name: "James Chen", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-2.webp?_wi=2" },
|
||||
{ name: "Sofia Reyes", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-3.webp?_wi=2" },
|
||||
{ name: "David Kim", imageSrc: "https://randomuser.me/api/portraits/men/32.jpg?_wi=2" },
|
||||
{ name: "Emma Wilson", imageSrc: "https://randomuser.me/api/portraits/women/44.jpg?_wi=2" },
|
||||
{ name: "Alex Thompson", imageSrc: "https://randomuser.me/api/portraits/men/67.jpg?_wi=2" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -17,21 +17,21 @@ export default function WorkSection(): React.JSX.Element {
|
||||
{
|
||||
title: "Vitality Wellness",
|
||||
description: "Health & wellbeing platform",
|
||||
imageSrc: "https://storage.googleapis.com/webild/default/templates/web-agency-2/projectnew1.webp",
|
||||
imageSrc: "https://storage.googleapis.com/webild/default/templates/web-agency-2/projectnew1.webp?_wi=2",
|
||||
buttonIcon: ArrowUpRight,
|
||||
buttonHref: "#",
|
||||
},
|
||||
{
|
||||
title: "Mailflow AI",
|
||||
description: "AI-powered email marketing platform",
|
||||
imageSrc: "https://storage.googleapis.com/webild/default/templates/web-agency-2/projectnew2.webp",
|
||||
imageSrc: "https://storage.googleapis.com/webild/default/templates/web-agency-2/projectnew2.webp?_wi=2",
|
||||
buttonIcon: ArrowUpRight,
|
||||
buttonHref: "#",
|
||||
},
|
||||
{
|
||||
title: "Kinetic Studios",
|
||||
description: "Motion graphics & visual effects",
|
||||
imageSrc: "https://storage.googleapis.com/webild/default/templates/web-agency-2/projectnew3.webp",
|
||||
imageSrc: "https://storage.googleapis.com/webild/default/templates/web-agency-2/projectnew3.webp?_wi=2",
|
||||
buttonIcon: ArrowUpRight,
|
||||
buttonHref: "#",
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user