Initial commit
This commit is contained in:
205
src/app/page.tsx
Normal file
205
src/app/page.tsx
Normal file
@@ -0,0 +1,205 @@
|
||||
"use client"
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
|
||||
import TagAbout from '@/components/sections/about/TagAbout';
|
||||
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
|
||||
import ProductCardSeven from '@/components/sections/product/ProductCardSeven';
|
||||
import ContactText from '@/components/sections/contact/ContactText';
|
||||
import FooterSocial from '@/components/sections/footer/FooterSocial';
|
||||
import { Dribbble, Instagram, Linkedin, Twitter } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="largeSmallSizeMediumTitles"
|
||||
background="noise"
|
||||
cardStyle="gradient-subtle"
|
||||
primaryButtonStyle="outline"
|
||||
secondaryButtonStyle="outline"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
brandName="Studio"
|
||||
navItems={[
|
||||
{ name: "Work", id: "work" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "Studio", id: "home" }
|
||||
]}
|
||||
bottomLeftText="Creative Studio"
|
||||
bottomRightText="hello@studio.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
title="Creative Work That Moves"
|
||||
description="We craft digital experiences that resonate. Design, strategy, and innovation in every project."
|
||||
tag="Creative Studio"
|
||||
buttons={[
|
||||
{ text: "View Our Work", href: "work" },
|
||||
{ text: "Get Started", href: "contact" }
|
||||
]}
|
||||
mediaItems={[
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767308569893-by35j6nh.jpg", imageAlt: "Creative portfolio showcase 1" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767308570837-ykqg9x84.jpg", imageAlt: "Creative portfolio showcase 2" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766401281537-bd695c8y.jpg", imageAlt: "Creative portfolio showcase 3" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766890613975-qn26d6fo.jpg", imageAlt: "Creative portfolio showcase 4" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767308571795-ltm84tjb.jpg", imageAlt: "Creative portfolio showcase 5" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767308572713-7scj2kqp.jpg", imageAlt: "Creative portfolio showcase 6" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TagAbout
|
||||
tag="Who We Are"
|
||||
description="We are a creative collective driven by precision, innovation, and a relentless commitment to excellence. Every project is an opportunity to push boundaries and create work that matters."
|
||||
useInvertedBackground="noInvert"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardThree
|
||||
title="Our Services"
|
||||
description="Comprehensive creative solutions tailored to your vision"
|
||||
tag="Services"
|
||||
features={[
|
||||
{
|
||||
id: "01",
|
||||
title: "Brand Strategy",
|
||||
description: "Develop authentic brand identity and positioning that resonates with your audience.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140103339-f3be0gdh.jpg",
|
||||
imageAlt: "Brand strategy"
|
||||
},
|
||||
{
|
||||
id: "02",
|
||||
title: "Design & UX",
|
||||
description: "Create beautiful, intuitive interfaces that users love to interact with.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766139083006-v50xgv4n.jpg",
|
||||
imageAlt: "Design and UX"
|
||||
},
|
||||
{
|
||||
id: "03",
|
||||
title: "Web Development",
|
||||
description: "Build fast, responsive websites that convert and perform flawlessly.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766320179601-o8gildtx.jpg",
|
||||
imageAlt: "Web development"
|
||||
},
|
||||
{
|
||||
id: "04",
|
||||
title: "Visual Identity",
|
||||
description: "Craft distinctive visual systems that elevate your brand presence.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766890620033-sckgfvwd.jpg",
|
||||
imageAlt: "Visual identity"
|
||||
}
|
||||
]}
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground="noInvert"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="work" data-section="work">
|
||||
<ProductCardSeven
|
||||
title="Featured Work"
|
||||
description="A selection of projects we are proud to have created"
|
||||
tag="Portfolio"
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Minimal Tech Platform",
|
||||
price: "2024",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767308573711-rb6r30ka.jpg",
|
||||
imageAlt: "Minimal tech platform"
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Brand Identity System",
|
||||
price: "2024",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766787040886-0ogjgmx4.jpg",
|
||||
imageAlt: "Brand identity system"
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Digital Experience",
|
||||
price: "2024",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767308574636-rqpllbah.jpg",
|
||||
imageAlt: "Digital experience"
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Premium Packaging",
|
||||
price: "2023",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767308575550-iwuw49pq.jpg",
|
||||
imageAlt: "Premium packaging"
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Marketing Campaign",
|
||||
price: "2023",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767308576373-qyx0mjff.jpg",
|
||||
imageAlt: "Marketing campaign"
|
||||
}
|
||||
]}
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground="noInvert"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
text="Ready to bring your vision to life? Let's create something extraordinary together."
|
||||
animationType="entrance-slide"
|
||||
buttons={[
|
||||
{ text: "Start a Project", href: "contact" },
|
||||
{ text: "Schedule a Call", href: "contact" }
|
||||
]}
|
||||
useInvertedBackground="noInvert"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSocial
|
||||
logoText="Studio"
|
||||
columns={[
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{ label: "About", href: "about" },
|
||||
{ label: "Services", href: "services" },
|
||||
{ label: "Work", href: "work" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{ label: "Privacy", href: "privacy" },
|
||||
{ label: "Terms", href: "terms" },
|
||||
{ label: "Contact", href: "contact" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
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: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" }
|
||||
]}
|
||||
copyrightText="© Studio, Inc. 2025"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user