Switch to version 1: modified src/app/page.tsx
This commit is contained in:
160
src/app/page.tsx
160
src/app/page.tsx
@@ -2,143 +2,167 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
||||
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
|
||||
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
|
||||
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
||||
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||||
|
||||
export default function Home() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Projects", id: "/projects" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
];
|
||||
import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
|
||||
import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
|
||||
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
|
||||
import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
|
||||
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
||||
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="smallMedium"
|
||||
sizing="mediumLarge"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay navItems={navItems} />
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="Portfolio"
|
||||
navItems={[
|
||||
{ name: "Work", id: "work" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
button={{
|
||||
text: "Get in Touch", href: "contact"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
title="Welcome to Our Portfolio"
|
||||
description="Explore our latest design projects and creative work"
|
||||
background={{ variant: "animated-grid" }}
|
||||
title="Crafting Digital Experiences"
|
||||
description="Innovative design solutions that combine aesthetics with functionality. Explore a curated collection of projects that showcase creative excellence and strategic thinking."
|
||||
tag="Portfolio"
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Portfolio showcase 1"},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/a-stunning-creative-portfolio-showcasing-1773043068077-12221410.png", imageAlt: "Portfolio showcase project one"},
|
||||
{
|
||||
imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Portfolio showcase 2"},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/bold-creative-design-project-displayed-i-1773043067366-f2dd6201.png", imageAlt: "Portfolio showcase project two"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-piece-featuring-s-1773043067962-bd19ff43.png", imageAlt: "Portfolio showcase project three"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/high-end-portfolio-presentation-featurin-1773043068108-9dc5d0cb.png", imageAlt: "Portfolio showcase project four"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-portfolio-piece-with-1773043067431-feb1d48d.png", imageAlt: "Portfolio showcase project five"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/sleek-portfolio-presentation-displaying--1773043067678-cc62c707.png", imageAlt: "Portfolio showcase project six"},
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "View Projects", href: "/projects" },
|
||||
{ text: "Get In Touch", href: "contact" },
|
||||
{ text: "View Work", href: "work" },
|
||||
{ text: "Start a Project", href: "contact" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="work" data-section="work">
|
||||
<FeatureCardTwentyFour
|
||||
title="Our Featured Work"
|
||||
description="Discover the projects we're most proud of"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
title="Featured Projects"
|
||||
description="Showcase of selected works demonstrating design excellence and strategic approach"
|
||||
tag="Our Work"
|
||||
features={[
|
||||
{
|
||||
id: "1", title: "Digital Brand Identity", author: "Design Team", description: "Complete brand redesign for a tech startup", tags: ["Branding", "Design"],
|
||||
imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Digital brand identity project"},
|
||||
id: "1", title: "Digital Brand Identity System", author: "Brand Strategy", description: "Complete visual identity redesign for tech startup. Developed comprehensive brand guidelines, typography system, and digital asset library. Increased brand recognition by 40% within six months.", tags: ["Branding", "Identity", "Design System"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/a-beautiful-case-study-image-showing-a-c-1773043067456-ca425d2a.png", imageAlt: "Brand identity project showcase"},
|
||||
{
|
||||
id: "2", title: "E-commerce Platform Redesign", author: "UX Team", description: "Modern platform redesign with improved UX", tags: ["E-commerce", "UX"],
|
||||
imageSrc: "/placeholders/placeholder1.webp", imageAlt: "E-commerce platform project"},
|
||||
id: "2", title: "E-commerce Platform Redesign", author: "UX Design", description: "User-centered redesign of enterprise e-commerce platform. Improved conversion rate by 35% through streamlined navigation and optimized checkout flow. Implemented accessible design patterns and mobile-first approach.", tags: ["UX Design", "E-commerce", "Accessibility"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png", imageAlt: "E-commerce platform design"},
|
||||
{
|
||||
id: "3", title: "SaaS Product Interface Design", author: "Design Team", description: "Intuitive interface for enterprise SaaS product", tags: ["SaaS", "UI Design"],
|
||||
imageSrc: "/placeholders/placeholder1.webp", imageAlt: "SaaS interface project"},
|
||||
id: "3", title: "SaaS Product Interface Design", author: "Product Design", description: "Designed intuitive interface for data analytics SaaS platform. Created interactive prototypes and design system for 15+ component variations. Enhanced user onboarding experience and reduced support tickets by 50%.", tags: ["SaaS", "Product Design", "UI Design"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png", imageAlt: "SaaS product interface design"},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
title="About Our Studio"
|
||||
title="About My Practice"
|
||||
description={[
|
||||
"We are a creative studio specializing in digital design and brand strategy. With over a decade of experience, we help businesses transform their vision into reality.", "Our team of talented designers, strategists, and developers work collaboratively to create exceptional digital experiences that inspire and engage."]}
|
||||
useInvertedBackground={false}
|
||||
"With over a decade of experience in digital design, I specialize in creating meaningful visual experiences that solve real problems. My approach combines strategic thinking with meticulous attention to detail.", "I believe great design goes beyond aesthetics—it should drive business results while delighting users. Every project is an opportunity to push creative boundaries and establish new standards in digital craftsmanship.", "I collaborate closely with clients and teams to understand vision, challenge assumptions, and deliver work that exceeds expectations. Let's create something extraordinary together."]}
|
||||
buttons={[
|
||||
{ text: "Learn More", href: "/about" },
|
||||
{ text: "Download Resume", href: "#" },
|
||||
{ text: "Connect", href: "contact" },
|
||||
]}
|
||||
showBorder={true}
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwentyFour
|
||||
title="Our Services"
|
||||
description="Comprehensive design and development solutions"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
title="Services Offered"
|
||||
description="Comprehensive design solutions tailored to your business objectives"
|
||||
tag="Expertise"
|
||||
features={[
|
||||
{
|
||||
id: "1", title: "Brand Strategy", author: "Strategy Team", description: "Develop compelling brand identities and positioning", tags: ["Strategy", "Branding"],
|
||||
imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Brand strategy service"},
|
||||
id: "1", title: "Brand Strategy & Identity", author: "Strategic Design", description: "Develop compelling brand narratives and visual identities that resonate with target audiences. From logo design to complete brand systems, I create cohesive visual languages.", tags: ["Branding", "Strategy", "Identity"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/abstract-illustration-representing-creat-1773043067648-d1f91d56.png?_wi=1", imageAlt: "Brand strategy service"},
|
||||
{
|
||||
id: "2", title: "UX/UI Design", author: "Design Team", description: "Create intuitive and beautiful digital interfaces", tags: ["Design", "UX"],
|
||||
imageSrc: "/placeholders/placeholder1.webp", imageAlt: "UX/UI design service"},
|
||||
id: "2", title: "Digital Product Design", author: "UX/UI", description: "User-centered design for web and mobile applications. I create intuitive interfaces, conduct user research, and build design systems that scale with your product.", tags: ["UX Design", "UI Design", "Product"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/modern-illustration-depicting-branding-a-1773043067558-0eccfee5.png", imageAlt: "Digital product design service"},
|
||||
{
|
||||
id: "3", title: "Web Development", author: "Dev Team", description: "Build responsive and performant web experiences", tags: ["Development", "Web"],
|
||||
imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Web development service"},
|
||||
id: "3", title: "Design Systems & Component Libraries", author: "System Design", description: "Build scalable design systems and component libraries that improve workflow efficiency and maintain consistency across products. Documentation included for seamless developer handoff.", tags: ["Design System", "Components", "Scalability"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/abstract-illustration-representing-creat-1773043067648-d1f91d56.png?_wi=2", imageAlt: "Design systems service"},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwelve
|
||||
cardTitle="Client Success Stories"
|
||||
cardTag="Testimonials"
|
||||
cardTitle="Trusted by leading brands and organizations worldwide"
|
||||
cardTag="Client feedback"
|
||||
cardAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Sarah Johnson", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Sarah Johnson"},
|
||||
id: "1", name: "Sarah Chen", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-headshot-portrait-of-a-crea-1773043067225-0aed98b9.png", imageAlt: "Sarah Chen"},
|
||||
{
|
||||
id: "2", name: "Michael Chen", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Michael Chen"},
|
||||
id: "2", name: "Marcus Johnson", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portrait-photograph-of-busi-1773043067191-64c1ffe8.png", imageAlt: "Marcus Johnson"},
|
||||
{
|
||||
id: "3", name: "Emma Williams", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Emma Williams"},
|
||||
id: "3", name: "Elena Rodriguez", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-headshot-of-creative-indust-1773043067885-58b8d4c1.png", imageAlt: "Elena Rodriguez"},
|
||||
{
|
||||
id: "4", name: "James Williams", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-business-portrait-photograp-1773043066896-7b04d7eb.png", imageAlt: "James Williams"},
|
||||
{
|
||||
id: "5", name: "Sophie Laurent", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-headshot-portrait-of-busine-1773043067827-a52a508e.png", imageAlt: "Sophie Laurent"},
|
||||
{
|
||||
id: "6", name: "David Kumar", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-business-portrait-photograp-1773043067750-9681fff7.png", imageAlt: "David Kumar"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
tag="Get In Touch"
|
||||
title="Let's Work Together"
|
||||
description="Have a project in mind? We'd love to hear about it. Contact us today."
|
||||
background={{ variant: "plain" }}
|
||||
tag="Let's Talk"
|
||||
title="Ready to Start Your Next Project?"
|
||||
description="Get in touch to discuss your design needs, project vision, and how we can collaborate to create exceptional digital experiences."
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
inputPlaceholder="Enter your email address"
|
||||
buttonText="Send Message"
|
||||
termsText="I'll respond within 24 hours. We respect your privacy and will never share your information."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Our Studio"
|
||||
leftLink={{ text: "Privacy Policy", href: "/privacy" }}
|
||||
rightLink={{ text: "Contact", href: "contact" }}
|
||||
logoText="Portfolio"
|
||||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||||
rightLink={{ text: "Terms of Service", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
|
||||
Reference in New Issue
Block a user