192 lines
9.7 KiB
TypeScript
192 lines
9.7 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
|
|
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="mediumSmall"
|
|
sizing="medium"
|
|
background="circleGradient"
|
|
cardStyle="gradient-bordered"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="bold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
navItems={[
|
|
{
|
|
name: "Services", id: "#services"},
|
|
{
|
|
name: "About", id: "#about"},
|
|
{
|
|
name: "Contact", id: "#contact"},
|
|
]}
|
|
brandName="VEXO"
|
|
button={{
|
|
text: "Contact Us", href: "#contact"}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardRotatedCarousel
|
|
background={{
|
|
variant: "rotated-rays-animated"}}
|
|
title="Transform Your Vision"
|
|
description="We are a creative agency specializing in digital transformation. From social media to web development, we bring your ideas to life with cutting-edge technology and artistic excellence.\n\nنحن وكالة إبداعية متخصصة في التحول الرقمي. من وسائل التواصل الاجتماعي إلى تطوير الويب، نحن نحول أفكارك إلى واقع بتقنية حديثة وتميز فني."
|
|
buttons={[
|
|
{
|
|
text: "Get Started", href: "#contact"},
|
|
{
|
|
text: "Learn More", href: "#services"},
|
|
]}
|
|
carouselItems={[
|
|
{
|
|
id: "1", imageSrc: "http://img.b2bpic.net/free-photo/mixing-paint-cold-colors_23-2147763461.jpg", imageAlt: "futuristic 3d abstract sphere"},
|
|
{
|
|
id: "2", imageSrc: "http://img.b2bpic.net/free-photo/cyber-security-experts-working-with-tech-devices-neon-lights_23-2151645615.jpg", imageAlt: "cyberpunk data viz"},
|
|
{
|
|
id: "3", imageSrc: "http://img.b2bpic.net/free-photo/rendering-abstract-futuristic-background-with-glowing-neon-lights_181624-34479.jpg", imageAlt: "glowing abstract geometry"},
|
|
{
|
|
id: "4", imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-futuristic-with-low-poly-design-with-connecting-lines-dots_1048-12728.jpg", imageAlt: "neural network background"},
|
|
{
|
|
id: "5", imageSrc: "http://img.b2bpic.net/free-photo/black-white-liquid-marble-background-diy-abstract-flowing-texture-experimental-art_53876-128369.jpg", imageAlt: "abstract audio wave visual"},
|
|
{
|
|
id: "6", imageSrc: "http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-96724.jpg", imageAlt: "cinematic abstract background"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardEight
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{
|
|
title: "Social Media Management", description: "Manage and grow your social presence (إدارة وتنمية حضورك)", imageSrc: "http://img.b2bpic.net/free-photo/communication-social-media-icons-laptop-device_23-2150781052.jpg", imageAlt: "social media icon digital"},
|
|
{
|
|
title: "Graphic Design", description: "Stunning visuals (إنشاء تصاميم بصرية مذهلة)", imageSrc: "http://img.b2bpic.net/free-photo/arrow-with-bright-neon-colors_23-2151205013.jpg", imageAlt: "graphic design icon vector"},
|
|
{
|
|
title: "Video Production", description: "Professional video (خدمات احترافية للفيديوهات)", imageSrc: "http://img.b2bpic.net/free-photo/retro-vhs-packaging-indoors_23-2150172431.jpg", imageAlt: "video production camera symbol"},
|
|
{
|
|
title: "Photography", description: "High-quality captures (تصوير عالي الجودة)", imageSrc: "http://img.b2bpic.net/free-photo/mini-instant-camera-empty-border-frame-blue-background_23-2147916441.jpg", imageAlt: "photography icon modern neon"},
|
|
{
|
|
title: "Content Creation", description: "Engaging content (محتوى جذاب)", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-tablet-desk-mock-up_23-2148339337.jpg", imageAlt: "content creation digital pen"},
|
|
{
|
|
title: "Web Development", description: "Modern responsive websites (بناء مواقع حديثة)", imageSrc: "http://img.b2bpic.net/free-photo/arrow-with-bright-neon-colors_23-2151205010.jpg", imageAlt: "web development code symbol"},
|
|
]}
|
|
title="Our Services"
|
|
description="Comprehensive creative solutions for your brand"
|
|
/>
|
|
</div>
|
|
|
|
<div id="why-choose" data-section="why-choose">
|
|
<MetricCardSeven
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "1", value: "01", title: "Expert Team", items: [
|
|
"Years of experience", "Creative excellence"],
|
|
},
|
|
{
|
|
id: "2", value: "02", title: "Cutting-Edge Tech", items: [
|
|
"Modern tools", "Innovation focus"],
|
|
},
|
|
{
|
|
id: "3", value: "03", title: "Custom Solutions", items: [
|
|
"Tailored branding", "Unique designs"],
|
|
},
|
|
{
|
|
id: "4", value: "04", title: "Proven Track Record", items: [
|
|
"Client success", "Reliable results"],
|
|
},
|
|
{
|
|
id: "5", value: "05", title: "24/7 Support", items: [
|
|
"Always available", "Dedicated consult"],
|
|
},
|
|
]}
|
|
title="Why Choose Vexo"
|
|
description="Experience innovation at every step."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonial" data-section="testimonial">
|
|
<TestimonialCardThirteen
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
title="Client Feedback"
|
|
description="Hear what our partners say about us."
|
|
showRating={true}
|
|
testimonials={[
|
|
{
|
|
id: "t1", name: "Alex Rivers", handle: "@alexr", testimonial: "Vexo transformed our digital identity completely. Exceptional work.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/sad-man-woman-looking-her-friend-holding-digital-tablet_23-2147842175.jpg", imageAlt: "Sad man and woman looking at her friend holding digital tablet"},
|
|
{
|
|
id: "t2", name: "Sarah Chen", handle: "@schen", testimonial: "The attention to detail and futuristic design approach is unmatched.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/hand-graphic-designer-working-with-stilus-tablet_93675-131361.jpg", imageAlt: "Hand of graphic designer working with stilus and tablet"},
|
|
{
|
|
id: "t3", name: "Marcus Vane", handle: "@mvane", testimonial: "Fast, reliable, and incredibly innovative. Highly recommended.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/unrecognizable-man-drawing-graphic-tablet_74855-6098.jpg", imageAlt: "Unrecognizable man drawing on graphic tablet"},
|
|
{
|
|
id: "t4", name: "Elena Rossi", handle: "@erossi", testimonial: "They captured our vision better than we imagined. Great agency.", rating: 4,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/closeup-person-working-using-tablet-smartphone_1262-14872.jpg", imageAlt: "Closeup of person working and using tablet and smartphone"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
tag="Contact"
|
|
useInvertedBackground={true}
|
|
background={{
|
|
variant: "gradient-bars"}}
|
|
title="Get In Touch"
|
|
description="We are ready to start your next creative project."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
logoText="VEXO"
|
|
columns={[
|
|
{
|
|
title: "Services", items: [
|
|
{
|
|
label: "Social Media", href: "#services"},
|
|
{
|
|
label: "Graphic Design", href: "#services"},
|
|
],
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{
|
|
label: "About", href: "#about"},
|
|
{
|
|
label: "Contact", href: "#contact"},
|
|
],
|
|
},
|
|
]}
|
|
copyrightText="© 2026 Vexo Media. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|