Merge version_2 into main #2
274
src/app/page.tsx
274
src/app/page.tsx
@@ -12,7 +12,7 @@ import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||||
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
||||
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
||||
import { BarChart, Play, Zap } from "lucide-react";
|
||||
import { BarChart, Play, Zap, Cpu } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -32,26 +32,11 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "#hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "#about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "#features",
|
||||
},
|
||||
{
|
||||
name: "Work",
|
||||
id: "#work",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
{ name: "Home", id: "#hero" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Services", id: "#features" },
|
||||
{ name: "Work", id: "#work" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
brandName="Shuttlerock"
|
||||
/>
|
||||
@@ -59,61 +44,24 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Creative Performance at Scale"
|
||||
description="Shuttlerock Vietnam transforms your brand assets into high-performing creative for every digital channel."
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/entrepreneur-having-remote-discussion-with-company-team_482257-77571.jpg?_wi=1"
|
||||
buttons={[{ text: "Get Started", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/entrepreneur-having-remote-discussion-with-company-team_482257-77571.jpg"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/executive-managers-analyzing-financial-statistics-discussing-investment-strategy-while-working-overhours-startup-office-businessmen-planning-brainstorming-management-ideas-business-concept_482257-63805.jpg",
|
||||
alt: "Executive manager",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/executive-managers-looking-marketing-statistics-computer_482257-77621.jpg",
|
||||
alt: "Marketing lead",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/positive-manager-dancing-having-fun-startup-office-enjoying-listening-music-work-break-businesswoman-wearing-headphone-while-working-overtime-financial-growth-report_482257-66843.jpg",
|
||||
alt: "Creative strategist",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-adult-businesswoman-holding-tablet_23-2148452638.jpg",
|
||||
alt: "Digital designer",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/businessman-smiling-looking-camera_23-2148112827.jpg",
|
||||
alt: "Project manager",
|
||||
},
|
||||
{ src: "http://img.b2bpic.net/free-photo/executive-managers-analyzing-financial-statistics-discussing-investment-strategy-while-working-overhours-startup-office-businessmen-planning-brainstorming-management-ideas-business-concept_482257-63805.jpg", alt: "Executive manager" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/executive-managers-looking-marketing-statistics-computer_482257-77621.jpg", alt: "Marketing lead" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/positive-manager-dancing-having-fun-startup-office-enjoying-listening-music-work-break-businesswoman-wearing-headphone-while-working-overtime-financial-growth-report_482257-66843.jpg", alt: "Creative strategist" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-adult-businesswoman-holding-tablet_23-2148452638.jpg", alt: "Digital designer" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/businessman-smiling-looking-camera_23-2148112827.jpg", alt: "Project manager" },
|
||||
]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Data-Driven",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Performance",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Creative",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Scale",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Innovation",
|
||||
},
|
||||
{ type: "text", text: "Data-Driven" },
|
||||
{ type: "text", text: "Performance" },
|
||||
{ type: "text", text: "Creative" },
|
||||
{ type: "text", text: "Scale" },
|
||||
{ type: "text", text: "Innovation" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -126,7 +74,7 @@ export default function LandingPage() {
|
||||
description="We bridge the gap between creative excellence and performance marketing."
|
||||
subdescription="Empowering brands in Vietnam with data-backed creative solutions."
|
||||
icon={Zap}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/teammates-working-late-office_23-2148991368.jpg?_wi=1"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/teammates-working-late-office_23-2148991368.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
@@ -138,52 +86,19 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Motion Graphics",
|
||||
description: "Dynamic ad designs.",
|
||||
media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/african-woman-videographer-with-headset-processing-film-montage-working-greenscreen-chroma-key-isolated-display-computer_482257-5429.jpg",
|
||||
},
|
||||
items: [
|
||||
{
|
||||
icon: Play,
|
||||
text: "Video Assets",
|
||||
},
|
||||
],
|
||||
reverse: false,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/entrepreneur-having-remote-discussion-with-company-team_482257-77571.jpg?_wi=2",
|
||||
imageAlt: "motion graphic design screen",
|
||||
title: "Motion Graphics", description: "Dynamic ad designs.", media: { imageSrc: "http://img.b2bpic.net/free-photo/african-woman-videographer-with-headset-processing-film-montage-working-greenscreen-chroma-key-isolated-display-computer_482257-5429.jpg" },
|
||||
items: [{ icon: Play, text: "Video Assets" }],
|
||||
reverse: false
|
||||
},
|
||||
{
|
||||
title: "Performance Analytics",
|
||||
description: "Data-driven insights.",
|
||||
media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-manager-working-with-report-data_1262-3723.jpg",
|
||||
},
|
||||
items: [
|
||||
{
|
||||
icon: BarChart,
|
||||
text: "Ad Optimization",
|
||||
},
|
||||
],
|
||||
reverse: true,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/teammates-working-late-office_23-2148991368.jpg?_wi=2",
|
||||
imageAlt: "motion graphic design screen",
|
||||
title: "Performance Analytics", description: "Data-driven insights.", media: { imageSrc: "http://img.b2bpic.net/free-photo/close-up-manager-working-with-report-data_1262-3723.jpg" },
|
||||
items: [{ icon: BarChart, text: "Ad Optimization" }],
|
||||
reverse: true
|
||||
},
|
||||
{
|
||||
title: "AI Creative",
|
||||
description: "Next-gen automation.",
|
||||
media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-triangles-background_1048-15984.jpg",
|
||||
},
|
||||
items: [
|
||||
{
|
||||
icon: Cpu,
|
||||
text: "AI Design",
|
||||
},
|
||||
],
|
||||
reverse: false,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-facebook-logo-with-colorful-elements_23-2152000293.jpg?_wi=1",
|
||||
imageAlt: "motion graphic design screen",
|
||||
title: "AI Creative", description: "Next-gen automation.", media: { imageSrc: "http://img.b2bpic.net/free-photo/abstract-triangles-background_1048-15984.jpg" },
|
||||
items: [{ icon: Cpu, text: "AI Design" }],
|
||||
reverse: false
|
||||
},
|
||||
]}
|
||||
title="Comprehensive Creative Solutions"
|
||||
@@ -198,42 +113,12 @@ export default function LandingPage() {
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Ad Campaign A",
|
||||
price: "Creative",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-facebook-logo-with-colorful-elements_23-2152000293.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Ad Campaign B",
|
||||
price: "Creative",
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/gradient-graphic-design-template_23-2150831726.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Ad Campaign C",
|
||||
price: "Creative",
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/digital-marketing-agency-social-media-banner-instagram-post-template_511564-2217.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Ad Campaign D",
|
||||
price: "Creative",
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/fashion-trends-square-flyer-template_23-2150773651.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Ad Campaign E",
|
||||
price: "Creative",
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/creativity-template-design_23-2151196195.jpg",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "Ad Campaign F",
|
||||
price: "Creative",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/waistup-shot-optimistic-joyful-female-showing-cool-digital-tablet-pointing-device-screen-smiling-broadly-camera-giving-advice-what-app-useful-posing-glasses-against-pink-wall_1258-307032.jpg",
|
||||
},
|
||||
{ id: "1", name: "Ad Campaign A", price: "Creative", imageSrc: "http://img.b2bpic.net/free-photo/3d-facebook-logo-with-colorful-elements_23-2152000293.jpg" },
|
||||
{ id: "2", name: "Ad Campaign B", price: "Creative", imageSrc: "http://img.b2bpic.net/free-psd/gradient-graphic-design-template_23-2150831726.jpg" },
|
||||
{ id: "3", name: "Ad Campaign C", price: "Creative", imageSrc: "http://img.b2bpic.net/free-psd/digital-marketing-agency-social-media-banner-instagram-post-template_511564-2217.jpg" },
|
||||
{ id: "4", name: "Ad Campaign D", price: "Creative", imageSrc: "http://img.b2bpic.net/free-psd/fashion-trends-square-flyer-template_23-2150773651.jpg" },
|
||||
{ id: "5", name: "Ad Campaign E", price: "Creative", imageSrc: "http://img.b2bpic.net/free-psd/creativity-template-design_23-2151196195.jpg" },
|
||||
{ id: "6", name: "Ad Campaign F", price: "Creative", imageSrc: "http://img.b2bpic.net/free-photo/waistup-shot-optimistic-joyful-female-showing-cool-digital-tablet-pointing-device-screen-smiling-broadly-camera-giving-advice-what-app-useful-posing-glasses-against-pink-wall_1258-307032.jpg" },
|
||||
]}
|
||||
title="Work Showcase"
|
||||
description="Explore our recent high-performing creative projects."
|
||||
@@ -244,13 +129,7 @@ export default function LandingPage() {
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
names={[
|
||||
"Google",
|
||||
"Facebook",
|
||||
"TikTok",
|
||||
"Instagram",
|
||||
"Pinterest",
|
||||
]}
|
||||
names={["Google", "Facebook", "TikTok", "Instagram", "Pinterest"]}
|
||||
title="Trusted by Brands"
|
||||
description="Collaborating with leading global and local brands."
|
||||
/>
|
||||
@@ -260,31 +139,11 @@ export default function LandingPage() {
|
||||
<TestimonialCardTwelve
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Alex T.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-young-professional-posing-office_1262-21170.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Kim L.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beauty-style-fashion-age-concept-close-up-portrait-positive-elegant-50-year-old-female-with-gray-hair-wrinkled-face-posing-against-white-brick-wall_344912-1852.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Minh D.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-cute-girl-looking-away_23-2148436134.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Sarah P.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-wearing-pajamas-while-sitting-bed_273609-13215.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "David W.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/confident-middle-aged-businesswoman-looking-camera_74855-4120.jpg",
|
||||
},
|
||||
{ id: "1", name: "Alex T.", imageSrc: "http://img.b2bpic.net/free-photo/happy-young-professional-posing-office_1262-21170.jpg" },
|
||||
{ id: "2", name: "Kim L.", imageSrc: "http://img.b2bpic.net/free-photo/beauty-style-fashion-age-concept-close-up-portrait-positive-elegant-50-year-old-female-with-gray-hair-wrinkled-face-posing-against-white-brick-wall_344912-1852.jpg" },
|
||||
{ id: "3", name: "Minh D.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-cute-girl-looking-away_23-2148436134.jpg" },
|
||||
{ id: "4", name: "Sarah P.", imageSrc: "http://img.b2bpic.net/free-photo/woman-wearing-pajamas-while-sitting-bed_273609-13215.jpg" },
|
||||
{ id: "5", name: "David W.", imageSrc: "http://img.b2bpic.net/free-photo/confident-middle-aged-businesswoman-looking-camera_74855-4120.jpg" },
|
||||
]}
|
||||
cardTitle="Client Success"
|
||||
cardTag="Reviews"
|
||||
@@ -297,21 +156,9 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "How long for creative?",
|
||||
content: "Usually 3-5 business days.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Do you work with startups?",
|
||||
content: "Yes, we support businesses of all sizes.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Can you handle video ads?",
|
||||
content: "Yes, motion and video are our specialties.",
|
||||
},
|
||||
{ id: "1", title: "How long for creative?", content: "Usually 3-5 business days." },
|
||||
{ id: "2", title: "Do you work with startups?", content: "Yes, we support businesses of all sizes." },
|
||||
{ id: "3", title: "Can you handle video ads?", content: "Yes, motion and video are our specialties." },
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Everything you need to know about our services."
|
||||
@@ -322,16 +169,9 @@ export default function LandingPage() {
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
text="Ready to scale your creative performance? Let's connect."
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Us",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Contact Us", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -340,26 +180,14 @@ export default function LandingPage() {
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Work",
|
||||
href: "#work",
|
||||
},
|
||||
{ label: "About", href: "#about" },
|
||||
{ label: "Work", href: "#work" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Services",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
{ label: "Services", href: "#features" },
|
||||
{ label: "Contact", href: "#contact" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
@@ -369,4 +197,4 @@ export default function LandingPage() {
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user