186 lines
9.7 KiB
TypeScript
186 lines
9.7 KiB
TypeScript
"use client"
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
|
|
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
|
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
|
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
|
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
|
import { Dribbble, Instagram, Linkedin, Mail, Palette } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="icon-arrow"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="rounded"
|
|
contentWidth="smallMedium"
|
|
sizing="largeSmall"
|
|
background="fluid"
|
|
cardStyle="solid"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="medium"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="Alex Design"
|
|
navItems={[
|
|
{ name: "Work", id: "portfolio" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Services", id: "services" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{
|
|
text: "Let's Talk", href: "#contact"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroOverlay
|
|
title="Visual Design That Moves People"
|
|
description="Crafting bold, meaningful designs that elevate brands and create lasting impressions"
|
|
tag="Creative Studio"
|
|
imageSrc="http://img.b2bpic.net/free-photo/workplace-with-laptop_23-2147651756.jpg"
|
|
imageAlt="Creative workspace with design tools"
|
|
textPosition="bottom-left"
|
|
showBlur={true}
|
|
showDimOverlay={true}
|
|
buttons={[
|
|
{ text: "View Portfolio", href: "#portfolio" },
|
|
{ text: "Get in Touch", href: "#contact" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TestimonialAboutCard
|
|
tag="About Me"
|
|
title="With 8+ years of experience, I transform ideas into visually compelling solutions that drive business results."
|
|
description="Alex Rivera"
|
|
subdescription="Creative Director & Brand Designer"
|
|
icon={Palette}
|
|
imageSrc="http://img.b2bpic.net/free-photo/portrait-handsome-bearded-man-suit_23-2149705918.jpg"
|
|
imageAlt="Portrait of Alex Rivera, creative director"
|
|
mediaAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardThree
|
|
title="Design Services"
|
|
description="Comprehensive design solutions tailored to your brand's unique story"
|
|
tag="What I Do"
|
|
features={[
|
|
{
|
|
id: "01", title: "Brand Identity", description: "Logo design, color palettes, and complete brand guidelines that define your visual presence", imageSrc: "http://img.b2bpic.net/free-vector/branding-restaurant-stationery_23-2147564031.jpg", imageAlt: "Brand identity design samples"
|
|
},
|
|
{
|
|
id: "02", title: "Web Design", description: "Beautiful, functional websites and digital interfaces that engage and convert", imageSrc: "http://img.b2bpic.net/free-psd/go-cashless-website-template_23-2149111230.jpg", imageAlt: "Web design mockup"
|
|
},
|
|
{
|
|
id: "03", title: "Packaging Design", description: "Product packaging that captures attention on shelves and tells your brand story", imageSrc: "http://img.b2bpic.net/free-vector/box-with-cosmetics-hair-with-place-text-botanical-therapy-place-brand_1268-15046.jpg", imageAlt: "Packaging design mockup"
|
|
},
|
|
{
|
|
id: "04", title: "Marketing Collateral", description: "Business cards, brochures, and promotional materials that make a lasting impression", imageSrc: "http://img.b2bpic.net/free-vector/watercolor-leaflets-with-geometric-shapes-vintage-style_23-2147589461.jpg", imageAlt: "Marketing collateral design"
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
animationType="slide-up"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="portfolio" data-section="portfolio">
|
|
<ProductCardTwo
|
|
title="Featured Projects"
|
|
description="A selection of recent work showcasing diverse design approaches and successful outcomes"
|
|
tag="Portfolio"
|
|
products={[
|
|
{
|
|
id: "1", brand: "Sustainable Fashion", name: "Eco Brand Identity", price: "Featured Project", rating: 5,
|
|
reviewCount: "Award Winner", imageSrc: "http://img.b2bpic.net/free-psd/botanical-garden-facebook-template_23-2150258224.jpg", imageAlt: "Eco brand identity design"
|
|
},
|
|
{
|
|
id: "2", brand: "Tech Startup", name: "SaaS Platform Redesign", price: "Featured Project", rating: 5,
|
|
reviewCount: "Industry Recognition", imageSrc: "http://img.b2bpic.net/free-photo/determined-ceo-works-office-analyzing-infographics-setting-business-goals_482257-123120.jpg", imageAlt: "SaaS platform design"
|
|
},
|
|
{
|
|
id: "3", brand: "Luxury Hospitality", name: "Hotel Brand Design", price: "Featured Project", rating: 5,
|
|
reviewCount: "Client Favorite", imageSrc: "http://img.b2bpic.net/free-vector/creative-hotel-landing-page-with-photo_23-2148892578.jpg", imageAlt: "Luxury hotel brand design"
|
|
},
|
|
{
|
|
id: "4", brand: "Food & Beverage", name: "Restaurant Visual Identity", price: "Featured Project", rating: 5,
|
|
reviewCount: "10K+ Views", imageSrc: "http://img.b2bpic.net/free-vector/restaurant-menu-template-business-card_23-2148442834.jpg", imageAlt: "Restaurant branding design"
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwelve
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Mitchell", imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg?_wi=1"
|
|
},
|
|
{
|
|
id: "2", name: "James Chen", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=1"
|
|
},
|
|
{
|
|
id: "3", name: "Emma Rodriguez", imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg?_wi=2"
|
|
},
|
|
{
|
|
id: "4", name: "Michael Thompson", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=2"
|
|
},
|
|
{
|
|
id: "5", name: "Lisa Anderson", imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg?_wi=3"
|
|
},
|
|
{
|
|
id: "6", name: "David Park", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=3"
|
|
}
|
|
]}
|
|
cardTitle="Trusted by leading brands and innovative startups worldwide"
|
|
cardTag="Client Success Stories"
|
|
cardAnimation="slide-up"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
text="Ready to transform your brand vision into stunning visual reality? Let's collaborate and create something extraordinary together."
|
|
animationType="background-highlight"
|
|
buttons={[
|
|
{ text: "Start Your Project", href: "mailto:hello@alexdesign.com" },
|
|
{ text: "Schedule Consultation", href: "#" }
|
|
]}
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="Alex Design"
|
|
copyrightText="© 2025 Alex Design. All rights reserved."
|
|
socialLinks={[
|
|
{ icon: Instagram, href: "https://instagram.com", ariaLabel: "Instagram" },
|
|
{ icon: Dribbble, href: "https://dribbble.com", ariaLabel: "Dribbble" },
|
|
{ icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn" },
|
|
{ icon: Mail, href: "mailto:hello@alexdesign.com", ariaLabel: "Email" }
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |