227 lines
14 KiB
TypeScript
227 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
|
import HeroLogoBillboardSplit from "@/components/sections/hero/HeroLogoBillboardSplit";
|
|
import AboutMetric from "@/components/sections/about/AboutMetric";
|
|
import FeatureCardTwentyThree from "@/components/sections/feature/FeatureCardTwentyThree";
|
|
import ProductCardOne from "@/components/sections/product/ProductCardOne";
|
|
import TestimonialCardThirteen from "@/components/sections/testimonial/TestimonialCardThirteen";
|
|
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
|
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
|
import { Sparkles, Music, Film, Award, ArrowRight } from "lucide-react";
|
|
|
|
export default function HomePage() {
|
|
const navItems = [
|
|
{ name: "Work", id: "/work" },
|
|
{ name: "About", id: "/about" },
|
|
{ name: "Services", id: "/services" },
|
|
{ name: "Contact", id: "/contact" },
|
|
{ name: "Projects", id: "/work" },
|
|
];
|
|
|
|
const footerColumns = [
|
|
{
|
|
items: [
|
|
{ label: "Work", href: "/work" },
|
|
{ label: "About", href: "/about" },
|
|
{ label: "Services", href: "/services" },
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Contact", href: "/contact" },
|
|
{ label: "Creative Direction", href: "/services" },
|
|
{ label: "Projects", href: "/work" },
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Email", href: "mailto:hello@visionfirst.studio" },
|
|
{ label: "Instagram", href: "https://instagram.com/visionfirst" },
|
|
{ label: "LinkedIn", href: "https://linkedin.com/company/visionfirst" },
|
|
],
|
|
},
|
|
];
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="expand-hover"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="mediumLarge"
|
|
sizing="largeSmallSizeMediumTitles"
|
|
background="circleGradient"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="medium"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={navItems}
|
|
brandName="VISION FIRST"
|
|
bottomLeftText="Concept before image"
|
|
bottomRightText="hello@visionfirst.studio"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogoBillboardSplit
|
|
logoText="VISION FIRST"
|
|
description="Concept before image. We build visual worlds grounded in strategy and narrative intelligence. Creative direction across music, film, advertising, and cultural projects."
|
|
background={{ variant: "plain" }}
|
|
buttons={[
|
|
{ text: "View Selected Work", href: "/work" },
|
|
{ text: "Get in Touch", href: "/contact" },
|
|
]}
|
|
buttonAnimation="none"
|
|
layoutOrder="default"
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ3EMGqlmy084kV3KwAVtpJqrq/cinematic-wide-composition-showing-an-ab-1772510960802-e043c272.png"
|
|
imageAlt="Creative direction studio workspace with conceptual visual planning"
|
|
mediaAnimation="none"
|
|
frameStyle="card"
|
|
ariaLabel="Vision First hero section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<AboutMetric
|
|
title="Vision First is a creative direction studio developing visual concepts for music, film, and advertising. Every project begins with narrative, strategy, and meaning before aesthetics. We specialize in art direction, music visual identity, cinematic video production, and advertising campaigns that communicate authority through restraint."
|
|
metrics={[
|
|
{ icon: Sparkles, label: "Creative Projects", value: "50+" },
|
|
{ icon: Music, label: "Music Collaborations", value: "20+" },
|
|
{ icon: Film, label: "Cinematic Works", value: "15+" },
|
|
{ icon: Award, label: "Cultural Impact", value: "Global" },
|
|
]}
|
|
metricsAnimation="none"
|
|
useInvertedBackground={false}
|
|
ariaLabel="Vision First metrics and achievements"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardTwentyThree
|
|
features={[
|
|
{
|
|
id: "1", title: "Creative Direction", tags: ["Strategy", "Concept Development"],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ3EMGqlmy084kV3KwAVtpJqrq/music-video-visual-concept-or-album-cove-1772510963993-fbcb646c.jpg?_wi=1", imageAlt: "Creative direction visual concept"},
|
|
{
|
|
id: "2", title: "Art Direction", tags: ["Visual Storytelling", "Aesthetic Development"],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ3EMGqlmy084kV3KwAVtpJqrq/advertising-campaign-visual-concept-bold-1772510961006-578598a3.png?_wi=1", imageAlt: "Art direction for advertising campaign"},
|
|
{
|
|
id: "3", title: "Music Visual Identity", tags: ["Album Artwork", "Music Video Direction"],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ3EMGqlmy084kV3KwAVtpJqrq/ai-cinematic-production-storyboard-or-ke-1772510960910-0b25ce0f.png?_wi=1", imageAlt: "Music visual identity and album art"},
|
|
{
|
|
id: "4", title: "AI Cinematic Video Production", tags: ["Advanced Production", "Visual Effects"],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ3EMGqlmy084kV3KwAVtpJqrq/music-video-visual-concept-or-album-cove-1772510963993-fbcb646c.jpg?_wi=2", imageAlt: "AI-driven cinematic video production"},
|
|
{
|
|
id: "5", title: "Concept Development", tags: ["Pre-Production", "Ideation"],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ3EMGqlmy084kV3KwAVtpJqrq/advertising-campaign-visual-concept-bold-1772510961006-578598a3.png?_wi=2", imageAlt: "Visual concept development process"},
|
|
{
|
|
id: "6", title: "Advertising & Cultural Projects", tags: ["Brand Strategy", "Cultural Positioning"],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ3EMGqlmy084kV3KwAVtpJqrq/ai-cinematic-production-storyboard-or-ke-1772510960910-0b25ce0f.png?_wi=2", imageAlt: "Advertising creative direction for campaigns"},
|
|
]}
|
|
animationType="none"
|
|
title="Services"
|
|
description="We provide strategic creative direction across disciplines, positioning your vision through visual narrative and refined execution."
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
tag="EXPERTISE"
|
|
tagAnimation="none"
|
|
ariaLabel="Vision First services and expertise"
|
|
/>
|
|
</div>
|
|
|
|
<div id="work" data-section="work">
|
|
<ProductCardOne
|
|
products={[
|
|
{
|
|
id: "1", name: "Worn by the City", price: "Music Visual Identity", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ3EMGqlmy084kV3KwAVtpJqrq/music-video-visual-concept-or-album-cove-1772510963993-fbcb646c.jpg?_wi=3", imageAlt: "Worn by the City music visual concept"},
|
|
{
|
|
id: "2", name: "Nocturne Campaign", price: "Advertising Direction", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ3EMGqlmy084kV3KwAVtpJqrq/advertising-campaign-visual-concept-bold-1772510961006-578598a3.png?_wi=3", imageAlt: "Nocturne advertising campaign visual direction"},
|
|
{
|
|
id: "3", name: "Synthetic Dreams", price: "Cinematic Production", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ3EMGqlmy084kV3KwAVtpJqrq/ai-cinematic-production-storyboard-or-ke-1772510960910-0b25ce0f.png?_wi=3", imageAlt: "Synthetic Dreams AI cinematic video"},
|
|
]}
|
|
title="Selected Work"
|
|
description="Curated projects demonstrating strategic creative direction across music, film, and advertising."
|
|
tag="PORTFOLIO"
|
|
tagAnimation="none"
|
|
animationType="none"
|
|
gridVariant="uniform-all-items-equal"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
ariaLabel="Vision First selected work and portfolio"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardThirteen
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Marcus Chen", handle: "@marcuschenvisuals", testimonial:
|
|
"Vision First elevated our visual identity from concept to cultural statement. Their strategic approach to art direction transformed how we present our work.", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ3EMGqlmy084kV3KwAVtpJqrq/professional-headshot-of-a-music-artist--1772510960853-93c61614.png?_wi=1", imageAlt: "Marcus Chen, Music Director"},
|
|
{
|
|
id: "2", name: "Elena Rodriguez", handle: "@elenarpro", testimonial:
|
|
"Working with Vision First was a masterclass in creative discipline. They understand that the strongest visuals emerge from strategy, not decoration.", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ3EMGqlmy084kV3KwAVtpJqrq/professional-headshot-of-a-film-producer-1772510960455-e933b059.png?_wi=1", imageAlt: "Elena Rodriguez, Film Producer"},
|
|
{
|
|
id: "3", name: "David Winters", handle: "@davidwintersbrand", testimonial:
|
|
"Their creative direction brought architecture and narrative to our advertising. Every decision was purposeful, every visual element served the strategy.", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ3EMGqlmy084kV3KwAVtpJqrq/professional-headshot-of-a-brand-strateg-1772510960762-2c1b8cf4.png?_wi=1", imageAlt: "David Winters, Brand Strategist"},
|
|
{
|
|
id: "4", name: "Sophia Moretti", handle: "@sophiamvisuals", testimonial:
|
|
"Vision First's approach to cinematic production combines technical excellence with conceptual depth. They create work that feels both innovative and timeless.", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ3EMGqlmy084kV3KwAVtpJqrq/professional-headshot-of-an-advertising--1772510960573-7489f101.png", imageAlt: "Sophia Moretti, Advertising Creative"},
|
|
{
|
|
id: "5", name: "James Park", handle: "@jamespark_music", testimonial:
|
|
"For music visual identity, Vision First is uncompromising. They don't create trend—they create vision. That's the difference between good work and great work.", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ3EMGqlmy084kV3KwAVtpJqrq/professional-headshot-of-a-music-video-d-1772510960163-915dcbe3.png", imageAlt: "James Park, Music Director"},
|
|
{
|
|
id: "6", name: "Clara Antonov", handle: "@claraantonov", testimonial:
|
|
"Their cultural project strategy redefined how we communicate with our audience. Vision First understands that meaning precedes image.", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ3EMGqlmy084kV3KwAVtpJqrq/professional-headshot-of-a-creative-stra-1772510960429-98e6207b.png", imageAlt: "Clara Antonov, Cultural Producer"},
|
|
]}
|
|
showRating={true}
|
|
animationType="none"
|
|
title="Trusted by Creative Leaders"
|
|
description="Collaborations with artists, directors, and brands who demand strategic vision and refined execution."
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
tag="COLLABORATIONS"
|
|
tagAnimation="none"
|
|
carouselMode="buttons"
|
|
ariaLabel="Vision First client testimonials and collaborations"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
tag="Let's Collaborate"
|
|
tagIcon={ArrowRight}
|
|
tagAnimation="none"
|
|
title="For Creative Collaborations and Cultural Projects"
|
|
description="We develop visual concepts and creative direction for projects rooted in strategy and narrative intelligence. If your vision requires refined execution and strategic thinking, let's connect."
|
|
buttons={[
|
|
{ text: "Contact Studio", href: "mailto:hello@visionfirst.studio" },
|
|
{ text: "Explore More", href: "/work" },
|
|
]}
|
|
buttonAnimation="none"
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground={false}
|
|
ariaLabel="Vision First contact call to action"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
columns={footerColumns}
|
|
logoText="VISION FIRST"
|
|
ariaLabel="Vision First footer navigation"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |