286 lines
16 KiB
TypeScript
286 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
|
|
import HeroCentered from '@/components/sections/hero/HeroCentered';
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
|
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
|
import { Layers, Lightbulb, Rocket, Sparkles, User } from "lucide-react";
|
|
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="expand-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="rounded"
|
|
contentWidth="smallMedium"
|
|
sizing="medium"
|
|
background="noise"
|
|
cardStyle="layered-gradient"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="normal"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "#home"},
|
|
{
|
|
name: "About", id: "#about"},
|
|
{
|
|
name: "Services", id: "#services"},
|
|
{
|
|
name: "Projects", id: "#projects"},
|
|
{
|
|
name: "Testimonials", id: "#testimonials"},
|
|
{
|
|
name: "FAQ", id: "#faq"},
|
|
{
|
|
name: "Clients", id: "#clients"},
|
|
{
|
|
name: "Contact", id: "#contact"},
|
|
]}
|
|
logoSrc="http://img.b2bpic.net/free-photo/battery-empty-left-side-with-white-background_187299-39721.jpg"
|
|
logoAlt="Plex Arts Logo"
|
|
brandName="Plex Arts"
|
|
/>
|
|
</div>
|
|
|
|
<div id="home" data-section="home">
|
|
<HeroCentered
|
|
background={{
|
|
variant: "sparkles-gradient"}}
|
|
title="Creative Excellence for Your Vision"
|
|
description="Plex Arts crafts stunning digital experiences that captivate audiences and drive results. Let's bring your ideas to life."
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/smiling-african-american-man-posing-library_74855-1619.jpg", alt: "Creative Director Valentina"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/happy-executive-analyzing-document_1098-3324.jpg", alt: "Lead Designer Marco"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/man-having-videocall-work_23-2148940772.jpg", alt: "Project Manager Sofia"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg", alt: "Senior Developer Luca"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/smiling-african-american-girl-sitting-cafe_1262-3083.jpg", alt: "Smiling African American girl sitting in cafe"},
|
|
]}
|
|
avatarText="Join our team of innovators"
|
|
buttons={[
|
|
{
|
|
text: "Explore Our Work", href: "#projects"},
|
|
{
|
|
text: "Get a Free Quote", href: "#contact"},
|
|
]}
|
|
buttonAnimation="blur-reveal"
|
|
marqueeItems={[
|
|
{
|
|
type: "text-icon", text: "Innovative Design", icon: Lightbulb
|
|
},
|
|
{
|
|
type: "text-icon", text: "Strategic Solutions", icon: Rocket
|
|
},
|
|
{
|
|
type: "text-icon", text: "Creative Excellence", icon: Sparkles
|
|
},
|
|
{
|
|
type: "text-icon", text: "User-Centric Approach", icon: User
|
|
},
|
|
{
|
|
type: "text-icon", text: "Seamless Integration", icon: Layers
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextSplitAbout
|
|
useInvertedBackground={false}
|
|
title="About Plex Arts: Where Creativity Meets Strategy"
|
|
description={[
|
|
"We are a passionate team of designers, developers, and strategists dedicated to transforming your brand's digital presence. From concept to launch, we deliver tailor-made solutions that resonate with your target audience.", "Our collaborative approach ensures every project is a masterpiece, blending aesthetic appeal with robust functionality. We believe in innovation, quality, and building lasting relationships with our clients."]}
|
|
buttons={[
|
|
{
|
|
text: "Learn More About Us", href: "#contact"},
|
|
]}
|
|
buttonAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardMedia
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
features={[
|
|
{
|
|
id: "f1", title: "Web Design & Development", description: "Crafting responsive, intuitive, and visually stunning websites tailored to your brand's unique identity.", tag: "Digital", imageSrc: "http://img.b2bpic.net/free-photo/bucharest-romania-july-30th-2024-young-ceo-reading-online-news-webpage_482257-123239.jpg", imageAlt: "Responsive web design on laptop"},
|
|
{
|
|
id: "f2", title: "Brand Identity & Strategy", description: "Building strong, memorable brand identities that stand out and communicate your core values effectively.", tag: "Branding", imageSrc: "http://img.b2bpic.net/free-photo/fashion-designer-s-studio-with-essential-elements_23-2150414729.jpg", imageAlt: "Branding guidelines and logo concepts"},
|
|
{
|
|
id: "f3", title: "Graphic Design Solutions", description: "From logos to marketing materials, our designs are compelling, creative, and conversion-focused.", tag: "Visuals", imageSrc: "http://img.b2bpic.net/free-photo/cool-background-blank-wallpaper-place-your-concept_1194-641450.jpg", imageAlt: "Graphic design tools and illustration"},
|
|
{
|
|
id: "f4", title: "UI/UX Experience Design", description: "Designing seamless and engaging user experiences that delight your customers and optimize interaction.", tag: "Experience", imageSrc: "http://img.b2bpic.net/free-photo/female-web-designer-office-with-notebook_23-2149749858.jpg", imageAlt: "UI/UX design for mobile and web"},
|
|
]}
|
|
title="Our Creative Services"
|
|
description="Discover how we can elevate your brand with our comprehensive suite of digital solutions."
|
|
/>
|
|
</div>
|
|
|
|
<div id="projects" data-section="projects">
|
|
<ProductCardFour
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="two-columns-alternating-heights"
|
|
useInvertedBackground={false}
|
|
carouselMode="buttons"
|
|
products={[
|
|
{
|
|
id: "p1", name: "EcoBrand Refresh", price: "View Case Study", variant: "Web Design", imageSrc: "http://img.b2bpic.net/free-photo/diverse-business-experts-working-with-mockup-display-tablet_482257-124426.jpg", imageAlt: "Eco-friendly brand website redesign"},
|
|
{
|
|
id: "p2", name: "FutureTech App", price: "View Case Study", variant: "UI/UX", imageSrc: "http://img.b2bpic.net/free-photo/world-mental-health-day-awareness-illustration_23-2151859110.jpg", imageAlt: "Futuristic tech app UI interface"},
|
|
{
|
|
id: "p3", name: "Cafe Logo Suite", price: "View Case Study", variant: "Brand Identity", imageSrc: "http://img.b2bpic.net/free-photo/japanese-designer-showing-digital-tablet-screen-outside-his-sh_53876-119717.jpg", imageAlt: "Cafe brand identity and logo"},
|
|
{
|
|
id: "p4", name: "Summit Campaign", price: "View Case Study", variant: "Graphic Design", imageSrc: "http://img.b2bpic.net/free-photo/front-view-confused-young-male-with-leather-gloves-backpack_179666-34768.jpg", imageAlt: "Outdoor adventure marketing campaign"},
|
|
{
|
|
id: "p5", name: "CityScape Marketing", price: "View Case Study", variant: "Digital Marketing", imageSrc: "http://img.b2bpic.net/free-photo/new-york-city-skyscrapers-rooftop-urban-view_649448-4732.jpg", imageAlt: "Urban real estate marketing visuals"},
|
|
{
|
|
id: "p6", name: "ArtGallery e-Comm", price: "View Case Study", variant: "Web Development", imageSrc: "http://img.b2bpic.net/free-photo/female-painter-her-art-studio_273609-12943.jpg", imageAlt: "Online art gallery e-commerce site"},
|
|
]}
|
|
title="Our Recent Creative Projects"
|
|
description="Explore a selection of our finest work, showcasing diverse industries and innovative solutions we've delivered."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSix
|
|
animationType="scale-rotate"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "t1", name: "Valentina Rossi", handle: "@ValentinaR", testimonial: "Plex Arts transformed our old website into a modern, engaging platform. The team was professional and incredibly creative!", imageSrc: "http://img.b2bpic.net/free-photo/smiling-successful-middle-aged-business-leader_1262-5690.jpg", imageAlt: "Valentina Rossi"},
|
|
{
|
|
id: "t2", name: "Marco Bianchi", handle: "@MarcoBia", testimonial: "Outstanding branding work! Our new logo and guidelines perfectly capture our company's essence and vision.", imageSrc: "http://img.b2bpic.net/free-photo/happy-businessman-with-smartphone-smiling-camera_23-2148112961.jpg", imageAlt: "Marco Bianchi"},
|
|
{
|
|
id: "t3", name: "Sofia Rizzo", handle: "@Sofia_Rizzo", testimonial: "Their graphic design skills are unmatched. Our marketing materials have never looked better and are truly impactful.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-young-female-with-hair-bun-having-joyful-look-smiling-cheerfully-happy-with-some-positive-news_273609-9042.jpg", imageAlt: "Sofia Rizzo"},
|
|
{
|
|
id: "t4", name: "Luca Gallo", handle: "@LucaGalloDesign", testimonial: "The UI/UX design for our new app was flawless. Intuitive and beautiful, truly a pleasure to work with their team.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-busy-cheerful-man_329181-14520.jpg", imageAlt: "Luca Gallo"},
|
|
{
|
|
id: "t5", name: "Chiara Costa", handle: "@ChiaraC", testimonial: "Professional, efficient, and incredibly talented. Plex Arts delivered beyond our expectations and on time!", imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-handsome-male-smiling_181624-41237.jpg", imageAlt: "Chiara Costa"},
|
|
]}
|
|
title="What Our Clients Say"
|
|
description="Hear directly from businesses who have transformed their digital presence with Plex Arts and achieved remarkable results."
|
|
speed={35}
|
|
topMarqueeDirection="left"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "faq1", title: "What is your typical project timeline?", content: "Project timelines vary depending on scope and complexity. A standard website redesign can take 4-8 weeks, while a full brand identity project might extend to 6-12 weeks from kickoff to launch."},
|
|
{
|
|
id: "faq2", title: "How do you handle client communication and feedback?", content: "We maintain open and transparent communication through regular updates, dedicated project managers, and scheduled review meetings. We utilize platforms like Slack and Asana for seamless collaboration and efficient feedback loops."},
|
|
{
|
|
id: "faq3", title: "Do you offer ongoing support after launch?", content: "Yes, we offer various post-launch support and maintenance packages. These include regular updates, security monitoring, performance optimization, and technical assistance to ensure your digital presence remains robust."},
|
|
{
|
|
id: "faq4", title: "What is your payment structure for projects?", content: "Typically, we require an upfront deposit (e.g., 30-50%) to commence work, with subsequent payments tied to key project milestones. The final payment is due upon project completion and client approval."},
|
|
]}
|
|
title="Frequently Asked Questions"
|
|
description="Find answers to common questions about our services, process, and pricing models."
|
|
faqsAnimation="slide-up"
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="clients" data-section="clients">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={[
|
|
"InnovateTech", "GreenCo", "FoodieHub", "UrbanVista", "FitnessFlow", "EduSphere", "CraftBrew", "HealthPulse", "FashionForward"]}
|
|
title="Trusted by Leading Brands"
|
|
description="We've had the privilege of collaborating with a diverse range of clients, helping them achieve their digital goals and grow their presence."
|
|
speed={40}
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "sparkles-gradient"}}
|
|
text="Ready to start your next creative project? Let's connect and turn your vision into a stunning reality. Reach out today!"
|
|
buttons={[
|
|
{
|
|
text: "Send us a Message", href: "mailto:info@plexarts.com"},
|
|
{
|
|
text: "Schedule a Call", href: "#"},
|
|
]}
|
|
animationType="reveal-blur"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoText="Plex Arts"
|
|
columns={[
|
|
{
|
|
title: "Services", items: [
|
|
{
|
|
label: "Web Design", href: "#services"},
|
|
{
|
|
label: "Branding", href: "#services"},
|
|
{
|
|
label: "Graphic Design", href: "#services"},
|
|
{
|
|
label: "UI/UX", href: "#services"},
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{
|
|
label: "About Us", href: "#about"},
|
|
{
|
|
label: "Our Work", href: "#projects"},
|
|
{
|
|
label: "Clients", href: "#clients"},
|
|
{
|
|
label: "FAQ", href: "#faq"},
|
|
]
|
|
},
|
|
{
|
|
title: "Connect", items: [
|
|
{
|
|
label: "Contact", href: "#contact"},
|
|
{
|
|
label: "LinkedIn", href: "#"},
|
|
{
|
|
label: "Instagram", href: "#"},
|
|
{
|
|
label: "Behance", href: "#"},
|
|
]
|
|
}
|
|
]}
|
|
copyrightText="© 2024 Plex Arts. All rights reserved. Privacy Policy · Terms of Service"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|