225 lines
14 KiB
TypeScript
225 lines
14 KiB
TypeScript
"use client"
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import HeroCentered from '@/components/sections/hero/HeroCentered';
|
|
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
|
|
import AboutMetric from '@/components/sections/about/AboutMetric';
|
|
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
|
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
|
import { Film, Music, Award, TrendingUp, Video, Users, Globe, Star } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-magnetic"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="mediumSmall"
|
|
sizing="largeSmall"
|
|
background="circleGradient"
|
|
cardStyle="gradient-radial"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="ShotByKyi"
|
|
navItems={[
|
|
{ name: "Portfolio", id: "portfolio" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Services", id: "services" },
|
|
{ name: "Testimonials", id: "testimonials" }
|
|
]}
|
|
button={{ text: "Book Now", href: "#contact" }}
|
|
animateOnLoad={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroCentered
|
|
title="ShotByKyi"
|
|
description="Cinematic Music Videos & Creative Visuals for Hip-Hop and Rap Artists. Elevate your sound with premium videography, VFX, and production that captures your artistry."
|
|
background={{ variant: "sparkles-gradient" }}
|
|
avatars={[
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AdZrEDAT4ZcjpJMex1iTgM9TZY/a-professional-portrait-of-a-creative-di-1772924665516-4f0420ae.png", alt: "ShotByKyi Creative Director"
|
|
}
|
|
]}
|
|
avatarText="Trusted by 100+ Artists Worldwide"
|
|
buttons={[
|
|
{ text: "View Portfolio", href: "#portfolio" },
|
|
{ text: "Book a Session", href: "#contact" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
marqueeItems={[
|
|
{ type: "text", text: "Music Videos" },
|
|
{ type: "text", text: "VFX Production" },
|
|
{ type: "text", text: "Color Grading" },
|
|
{ type: "text", text: "Cinematography" },
|
|
{ type: "text", text: "Post-Production" }
|
|
]}
|
|
marqueeSpeed={40}
|
|
showMarqueeCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="portfolio" data-section="portfolio">
|
|
<FeatureCardMedia
|
|
title="Featured Projects"
|
|
description="Cinematic music videos showcasing bold artistic direction and premium production quality"
|
|
features={[
|
|
{
|
|
id: "1", title: "Urban Dreams", description: "High-energy hip-hop music video with dynamic choreography and stunning visual effects", tag: "Music Video", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AdZrEDAT4ZcjpJMex1iTgM9TZY/a-stylish-music-video-frame-featuring-an-1772924667295-ed29ff46.png?_wi=1", imageAlt: "Urban Dreams Music Video"
|
|
},
|
|
{
|
|
id: "2", title: "Neon City", description: "Cinematic rap video with striking color grading and elaborate production design", tag: "Premium Production", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AdZrEDAT4ZcjpJMex1iTgM9TZY/a-dramatic-music-video-production-shot-s-1772924665941-952a6b04.png?_wi=1", imageAlt: "Neon City Music Video"
|
|
},
|
|
{
|
|
id: "3", title: "Revolution", description: "Bold artistic music video with complex choreography and professional cinematography", tag: "Cinematic Vision", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AdZrEDAT4ZcjpJMex1iTgM9TZY/a-high-energy-music-video-scene-with-mul-1772924666129-9e6feca5.png?_wi=1", imageAlt: "Revolution Music Video"
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<AboutMetric
|
|
title="ShotByKyi: Where Vision Meets Motion. Premium cinematography and creative direction for artists who demand excellence."
|
|
metrics={[
|
|
{ icon: Film, label: "Music Videos Produced", value: "100+" },
|
|
{ icon: Music, label: "Artist Collaborations", value: "85+" },
|
|
{ icon: Award, label: "Industry Recognition", value: "15+" },
|
|
{ icon: TrendingUp, label: "Combined Views", value: "50M+" }
|
|
]}
|
|
metricsAnimation="blur-reveal"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardMedia
|
|
title="Premium Services"
|
|
description="Full-spectrum music video production and creative direction for ambitious artists"
|
|
features={[
|
|
{
|
|
id: "1", title: "Cinematic Music Videos", description: "Concept development through final delivery. Professional cinematography, color grading, and post-production", tag: "Production", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AdZrEDAT4ZcjpJMex1iTgM9TZY/a-cinematic-camera-movement-or-cinematog-1772924666406-d7e89087.png", imageAlt: "Cinematic Music Videos"
|
|
},
|
|
{
|
|
id: "2", title: "Visual Effects & VFX", description: "High-end visual effects, motion graphics, and digital enhancements to elevate your creative vision", tag: "Post-Production", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AdZrEDAT4ZcjpJMex1iTgM9TZY/a-showcase-of-vfx-and-visual-effects-fro-1772924666299-ac3cc2ae.png", imageAlt: "Visual Effects & VFX"
|
|
},
|
|
{
|
|
id: "3", title: "Color Grading & Editing", description: "Professional color correction, grading, and editing to achieve your desired aesthetic", tag: "Finishing", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AdZrEDAT4ZcjpJMex1iTgM9TZY/a-professional-color-grading-and-post-pr-1772924667915-cb8ff707.png", imageAlt: "Color Grading & Editing"
|
|
}
|
|
]}
|
|
animationType="opacity"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFive
|
|
title="What Artists Are Saying"
|
|
description="Real testimonials from hip-hop and rap artists who've worked with ShotByKyi"
|
|
tag="Client Testimonials"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "King Cole, Platinum Recording Artist", date: "Date: November 2024", title: "The Best Video Production Experience", quote: "ShotByKyi delivered an absolutely stunning music video that exceeded all my expectations. The cinematography, color grading, and creative direction were on point. They truly understand the hip-hop aesthetic.", tag: "Hip-Hop Artist", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AdZrEDAT4ZcjpJMex1iTgM9TZY/a-professional-headshot-of-a-hip-hop-or--1772924665782-d1bf7b40.png", avatarAlt: "King Cole", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AdZrEDAT4ZcjpJMex1iTgM9TZY/a-stylish-music-video-frame-featuring-an-1772924667295-ed29ff46.png?_wi=2", imageAlt: "King Cole Testimonial"
|
|
},
|
|
{
|
|
id: "2", name: "Lyric Genius, Rising Rap Star", date: "Date: October 2024", title: "Elevated My Art to New Heights", quote: "Working with ShotByKyi was a game-changer for my career. They brought my vision to life with incredible cinematography and professional production. Highly recommended for any serious artist.", tag: "Rap Artist", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AdZrEDAT4ZcjpJMex1iTgM9TZY/a-professional-headshot-of-another-hip-h-1772924666237-5cccdbce.png", avatarAlt: "Lyric Genius", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AdZrEDAT4ZcjpJMex1iTgM9TZY/a-dramatic-music-video-production-shot-s-1772924665941-952a6b04.png?_wi=2", imageAlt: "Lyric Genius Testimonial"
|
|
},
|
|
{
|
|
id: "3", name: "Urban Flow, Independent Rapper", date: "Date: September 2024", title: "Premium Quality, Professional Team", quote: "ShotByKyi's attention to detail and creative expertise is unmatched. They handled every aspect of production with professionalism and delivered a video that represents my brand perfectly.", tag: "Independent Artist", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AdZrEDAT4ZcjpJMex1iTgM9TZY/a-professional-headshot-of-a-third-hip-h-1772924666013-6f231012.png", avatarAlt: "Urban Flow", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AdZrEDAT4ZcjpJMex1iTgM9TZY/a-high-energy-music-video-scene-with-mul-1772924666129-9e6feca5.png?_wi=2", imageAlt: "Urban Flow Testimonial"
|
|
},
|
|
{
|
|
id: "4", name: "Beat Master, Producer & Artist", date: "Date: August 2024", title: "True Creative Partner", quote: "ShotByKyi isn't just a videographer - they're a creative partner who understands the hip-hop culture deeply. The visual storytelling in my video was exceptional.", tag: "Producer/Artist", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AdZrEDAT4ZcjpJMex1iTgM9TZY/a-professional-headshot-of-a-fourth-hip--1772924667766-e8795936.png", avatarAlt: "Beat Master", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AdZrEDAT4ZcjpJMex1iTgM9TZY/a-stylish-music-video-frame-featuring-an-1772924667295-ed29ff46.png?_wi=3", imageAlt: "Beat Master Testimonial"
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardThree
|
|
title="By The Numbers"
|
|
description="ShotByKyi's track record of excellence and impact"
|
|
metrics={[
|
|
{ id: "1", icon: Video, title: "Videos Created", value: "100+" },
|
|
{ id: "2", icon: Users, title: "Artists Served", value: "85+" },
|
|
{ id: "3", icon: Globe, title: "Global Reach", value: "50M+" },
|
|
{ id: "4", icon: Star, title: "Client Rating", value: "4.9/5" }
|
|
]}
|
|
animationType="scale-rotate"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
tag="Book Your Project"
|
|
title="Ready to Create Something Amazing?"
|
|
description="Get in touch to discuss your music video project. Share your vision and let's bring it to life with premium cinematography and creative direction."
|
|
background={{ variant: "sparkles-gradient" }}
|
|
useInvertedBackground={false}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AdZrEDAT4ZcjpJMex1iTgM9TZY/a-high-energy-music-video-production-sce-1772924666456-35bcb98b.png"
|
|
imageAlt="Contact Section Visual"
|
|
mediaAnimation="slide-up"
|
|
mediaPosition="right"
|
|
inputPlaceholder="your@email.com"
|
|
buttonText="Send Inquiry"
|
|
termsText="We'll be in touch within 24 hours to discuss your project needs."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterSimple
|
|
columns={[
|
|
{
|
|
title: "Navigate", items: [
|
|
{ label: "Portfolio", href: "#portfolio" },
|
|
{ label: "Services", href: "#services" },
|
|
{ label: "About", href: "#about" },
|
|
{ label: "Contact", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
title: "Services", items: [
|
|
{ label: "Music Videos", href: "#services" },
|
|
{ label: "VFX Production", href: "#services" },
|
|
{ label: "Color Grading", href: "#services" },
|
|
{ label: "Consulting", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
title: "Connect", items: [
|
|
{ label: "Instagram", href: "https://instagram.com" },
|
|
{ label: "YouTube", href: "https://youtube.com" },
|
|
{ label: "Vimeo", href: "https://vimeo.com" },
|
|
{ label: "Email", href: "mailto:hello@shotbykyi.com" }
|
|
]
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Booking Agreement", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
bottomLeftText="© 2025 ShotByKyi. All rights reserved."
|
|
bottomRightText="Premium Music Video Production"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|