bender/76d530ac-dee1-4fbb-bdcc-dc312b769053
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_12_1783178367557 into main #15

Merged
bender merged 3 commits from version_12_1783178367557 into main 2026-07-04 15:21:33 +00:00
Conversation 0 Commits 3 Files Changed 3 +246 -35
3 changed files with 246 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/Layout.tsx
View File

@@ -24,7 +24,6 @@ export default function Layout() {
</main>
<FooterSimpleReveal
brand="Webild"
brandImageSrc="https://storage.googleapis.com/webild/users/user_3G2Ozqag2ovb8not76KWtboL8LU/uploaded-1783178366242-zh3dbt7o.png"
columns={[
{
title: "Company",

9
src/components/sections/footer/FooterSimpleReveal.tsx
View File

@@ -1,6 +1,5 @@
import { useRef, useEffect, useState } from "react";
import { useButtonClick } from "@/hooks/useButtonClick";
import ImageOrVideo from "@/components/ui/ImageOrVideo";
type FooterColumn = {
title: string;
@@ -41,13 +40,11 @@ const FooterBottomLink = ({ label, href, onClick }: FooterLink) => {
const FooterSimpleReveal = ({
brand,
brandImageSrc,
columns,
copyright,
links,
}: {
brand: string;
brandImageSrc?: string;
columns: FooterColumn[];
copyright: string;
links: FooterLink[];
@@ -92,11 +89,7 @@ const FooterSimpleReveal = ({
>
<div className="w-content-width mx-auto">
<div className="flex flex-col md:flex-row gap-10 md:gap-0 justify-between items-start mb-10">
{brandImageSrc ? (
<ImageOrVideo imageSrc={brandImageSrc} className="h-12 w-auto object-contain" />
) : (
<h2 className="text-4xl font-semibold">{brand}</h2>
)}
<h2 className="text-4xl font-semibold">{brand}</h2>
<div className="w-full md:w-fit flex flex-wrap gap-y-10 md:gap-12">
{columns.map((column) => (

271
src/pages/HomePage.tsx
View File

@@ -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" },
{ 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" },
]}
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" },
]}
/>
</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",
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",
buttonIcon: ArrowUpRight,
buttonHref: "#",
},
{
title: "Kinetic Studios",
description: "Motion graphics & visual effects",
imageSrc: "https://storage.googleapis.com/webild/default/templates/web-agency-2/projectnew3.webp",
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" },
{ 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" },
]}
/>
</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",
},
{
name: "Nader amri",
role: "UX Designer",
imageSrc: "https://storage.googleapis.com/webild/users/user_3G2Ozqag2ovb8not76KWtboL8LU/uploaded-1783172630842-tmba3pi4.png",
},
]}
/>
</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>