Compare commits
101 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 76a54d582a | |||
| 8cfacd24f0 | |||
| fa363619c8 | |||
| e1d58392af | |||
| 7ab465d3c2 | |||
| d38a838abe | |||
| 2a30ade770 | |||
| afef49a060 | |||
| 1ea2663305 | |||
| 7c47e1d4ad | |||
| 0de34608c8 | |||
| 96d439b505 | |||
| 6c72f51c42 | |||
| f2b31ce705 | |||
| 4045629ca8 | |||
| d0558cf7b7 | |||
| f29702ca3d | |||
| aaf0434362 | |||
| baf09ef455 | |||
| caf19a75b5 | |||
| 41c98c4f7a | |||
| 8e075e033b | |||
| e0ed620731 | |||
| d8e4ab3766 | |||
| eaa9708b6a | |||
| 72ef11caff | |||
| 142ae79f34 | |||
| b7f7aecc75 | |||
| fc8e481b50 | |||
| b5016b084f | |||
| 81ebd9ba22 | |||
| a804a049ba | |||
| aedd678d11 | |||
| be22251d05 | |||
| 3231da3b19 | |||
| efd2ec196c | |||
| a7ba662e66 | |||
| 8de0bb4dff | |||
| bde0f158b7 | |||
| ce9b59d89e | |||
| e514e19c19 | |||
| d8be2f8682 | |||
| 0cf233b958 | |||
| dff270fdb1 | |||
| d7eb119b7c | |||
| 7c0e0b0739 | |||
| 2efb6353e4 | |||
| 9cf7933531 | |||
| b45ee0cf9a | |||
| dd113962c9 | |||
| 954425be5e | |||
| 5e6b536c02 | |||
| da3df162a6 | |||
| c00cfa963c | |||
| 21f7cd59df | |||
| c4fe62a30b | |||
| 8fa6c99b08 | |||
| 4b40aedfac | |||
| 3d1b4e1a2b | |||
| 2a91d4618a | |||
| f062914364 | |||
| 6a86b95467 | |||
| 70d8f1d750 | |||
| 7bfcb6b92f | |||
| 2fca410b38 | |||
| e9752f2626 | |||
| 1d59abc72a | |||
| 20304845ed | |||
| 2e575dc78d | |||
| 2cdcd68abd | |||
| 46af796237 | |||
| 3c03182d84 | |||
| c68a66a4b3 | |||
| 271b1b45ee | |||
| 1c03eef185 | |||
| 862defbac8 | |||
| ea4dc9a742 | |||
| 8ae23d6662 | |||
| c292dc6dda | |||
| 7f2cc23495 | |||
| 85f9e69507 | |||
| d0f59d10a9 | |||
| e0566e2592 | |||
| b6d8da8951 | |||
| af2d4f7b85 | |||
| 4a7fe129a3 | |||
| d47644ffb5 | |||
| f42d1a9944 | |||
| 0412b76dfc | |||
| 8207ecb73f | |||
| d7463d8691 | |||
| 9aed77f8bb | |||
| 7374e2d3cd | |||
| 457d112d1f | |||
| 7bbc68237f | |||
| 5ce2f73720 | |||
| 698e0618d5 | |||
| ee28b58719 | |||
| 4b34700cad | |||
| 0c154cc9f7 | |||
| 451d6481d0 |
0
src/app/contact/page.tsx
Normal file
0
src/app/contact/page.tsx
Normal file
@@ -1,58 +1,42 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Halant } from "next/font/google";
|
||||
import { Inter } from "next/font/google";
|
||||
import { Public_Sans } from "next/font/google";
|
||||
import { Poppins } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { ServiceWrapper } from "@/components/ServiceWrapper";
|
||||
import Tag from "@/tag/Tag";
|
||||
|
||||
const halant = Halant({
|
||||
variable: "--font-halant", subsets: ["latin"],
|
||||
weight: ["300", "400", "500", "600", "700"],
|
||||
});
|
||||
|
||||
const inter = Inter({
|
||||
variable: "--font-inter", subsets: ["latin"],
|
||||
});
|
||||
|
||||
const publicSans = Public_Sans({
|
||||
variable: "--font-public-sans", subsets: ["latin"],
|
||||
const poppins = Poppins({
|
||||
variable: "--font-poppins", subsets: ["latin"],
|
||||
weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Shortform Content Clipping & Viral Growth | Clipping Culture", description: "Transform your longform content into viral shortform clips. 10B+ views generated. TikTok, Reels, Shorts optimization. Proven methodology for organic creator growth.", keywords: "shortform content clipping, TikTok clips, viral growth, content repurposing, Instagram Reels, YouTube Shorts", metadataBase: new URL("https://clippingculture.com"),
|
||||
alternates: {
|
||||
canonical: "https://clippingculture.com"},
|
||||
openGraph: {
|
||||
title: "Turn Longform Into Viral Clips | Clipping Culture", description: "I transform your best podcast, stream, and video moments into high-retention shortform content optimized for TikTok, Instagram Reels, and YouTube Shorts.", url: "https://clippingculture.com", siteName: "Clipping Culture", type: "website", images: [
|
||||
{
|
||||
url: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/a-vibrant-tiktok-style-vertical-video-fr-1772847774345-4bf0afdb.png", alt: "Clipping Culture viral shortform content"},
|
||||
],
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image", title: "Turn Longform Into Viral Clips", description: "10B+ views generated. Transform your content into trending shortform clips.", images: [
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/a-vibrant-tiktok-style-vertical-video-fr-1772847774345-4bf0afdb.png"],
|
||||
},
|
||||
robots: {
|
||||
index: true,
|
||||
follow: true,
|
||||
},
|
||||
title: "billiscales | Clipper",
|
||||
description: "Turn longform content into viral clips for TikTok, Instagram Reels, and YouTube Shorts. Expert clipping services with 10M+ views generated.",
|
||||
openGraph: {
|
||||
title: "billiscales | Clipper",
|
||||
description: "Turn longform content into viral clips for TikTok, Instagram Reels, and YouTube Shorts. Expert clipping services with 10M+ views generated.",
|
||||
images: [
|
||||
{
|
||||
url: "/images/porsche.jpg",
|
||||
},
|
||||
],
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image",
|
||||
title: "billiscales | Clipper",
|
||||
description: "Turn longform content into viral clips for TikTok, Instagram Reels, and YouTube Shorts. Expert clipping services with 10M+ views generated.",
|
||||
images: ["/images/porsche.jpg"],
|
||||
},
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
}) {
|
||||
return (
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<ServiceWrapper>
|
||||
<body
|
||||
className={`${halant.variable} ${inter.variable} ${publicSans.variable} antialiased`}
|
||||
>
|
||||
<Tag />
|
||||
{children}
|
||||
|
||||
<body className={`${poppins.variable}`}>
|
||||
{children}
|
||||
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
@@ -1420,7 +1404,6 @@ export default function RootLayout({
|
||||
}}
|
||||
/>
|
||||
</body>
|
||||
</ServiceWrapper>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
530
src/app/page.tsx
530
src/app/page.tsx
@@ -7,291 +7,281 @@ import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
||||
import FeatureCardSix from "@/components/sections/feature/FeatureCardSix";
|
||||
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
|
||||
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
|
||||
import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
|
||||
import FaqBase from "@/components/sections/faq/FaqBase";
|
||||
import ContactText from "@/components/sections/contact/ContactText";
|
||||
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
||||
import ProductCardFour from "@/components/sections/product/ProductCardFour";
|
||||
import {
|
||||
Sparkles,
|
||||
TrendingUp,
|
||||
Zap,
|
||||
BarChart3,
|
||||
Trophy,
|
||||
MessageSquare,
|
||||
HelpCircle,
|
||||
Eye,
|
||||
Users,
|
||||
Award,
|
||||
Sparkles,
|
||||
TrendingUp,
|
||||
Zap,
|
||||
BarChart3,
|
||||
Trophy,
|
||||
HelpCircle,
|
||||
Eye,
|
||||
Users,
|
||||
Award,
|
||||
} from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="bounce-effect"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="mediumSizeLargeTitles"
|
||||
background="noise"
|
||||
cardStyle="soft-shadow"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="Clipping Culture"
|
||||
navItems={[
|
||||
{ name: "Case Studies", id: "case-studies" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Process", id: "process" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
button={{
|
||||
text: "Book A Call", href: "https://calendly.com"}}
|
||||
/>
|
||||
</div>
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="bounce-effect"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="mediumSizeLargeTitles"
|
||||
background="noise"
|
||||
cardStyle="soft-shadow"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="billiscales"
|
||||
navItems={[
|
||||
{ name: "Case Studies", id: "case-studies" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "My Work", id: "work" },
|
||||
{ name: "Process", id: "process" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
button={{
|
||||
text: "Book A Call", href: "https://calendly.com/ibbiyousuf420/30min"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDoubleCarousel
|
||||
title="Turn LongForm Into Viral Clips"
|
||||
description="I transform your best podcast, stream, and video moments into high-retention shortform content optimized for TikTok, Instagram Reels, and YouTube Shorts. More views, more followers, more growth—no ad spend required."
|
||||
tag="Shortform Specialist"
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "glowing-orb" }}
|
||||
leftCarouselItems={[
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/a-vibrant-tiktok-style-vertical-video-fr-1772847774345-4bf0afdb.png?_wi=1", imageAlt: "TikTok viral clip example"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/a-professional-shortform-content-editing-1772847775290-e59e3951.png?_wi=1", imageAlt: "Professional editing dashboard"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/an-instagram-reels-frame-showing-a-profe-1772847775330-4952935d.png?_wi=1", imageAlt: "Instagram Reels clip"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/a-youtube-shorts-vertical-video-frame-sh-1772847774790-1b515168.png", imageAlt: "YouTube Shorts content"},
|
||||
]}
|
||||
rightCarouselItems={[
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/a-dynamic-montage-of-multiple-trending-t-1772847775452-15beec39.png", imageAlt: "Trending clips montage"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/a-professional-shortform-content-editing-1772847775290-e59e3951.png?_wi=2", imageAlt: "Editing interface"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/a-vibrant-tiktok-style-vertical-video-fr-1772847774345-4bf0afdb.png?_wi=2", imageAlt: "Viral content creation"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/an-instagram-reels-frame-showing-a-profe-1772847775330-4952935d.png?_wi=2", imageAlt: "Social media optimization"},
|
||||
]}
|
||||
carouselPosition="right"
|
||||
buttons={[
|
||||
{ text: "See My Work", href: "#case-studies" },
|
||||
{ text: "Book A Call", href: "https://calendly.com" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDoubleCarousel
|
||||
title="Turn LongForm Into Viral Clips"
|
||||
description="I transform your best podcast, stream, and video moments into high-retention shortform content optimized for TikTok, Instagram Reels, and YouTube Shorts. More views, more followers, more growth—no ad spend required."
|
||||
tag="Shortform Specialist"
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "glowing-orb" }}
|
||||
leftCarouselItems={[
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1772881146961-mr1xedhd.jpg?_wi=1", imageAlt: "TikTok viral clip example"
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1772881146961-h65hjshx.jpg?_wi=1", imageAlt: "Professional editing dashboard"
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1772881146961-1pjxjkc4.jpg?_wi=1", imageAlt: "Instagram Reels clip"
|
||||
},
|
||||
]}
|
||||
rightCarouselItems={[
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1772881750051-0ym5nbmx.jpg?_wi=1", imageAlt: "YouTube Shorts content"
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1772881146961-mr1xedhd.jpg?_wi=2", imageAlt: "Trending clips montage"
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1772881146961-h65hjshx.jpg?_wi=2", imageAlt: "Editing interface"
|
||||
},
|
||||
]}
|
||||
carouselPosition="right"
|
||||
buttons={[
|
||||
{ text: "See My Work", href: "/work" },
|
||||
{ text: "Book A Call", href: "https://calendly.com/ibbiyousuf420/30min" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofOne
|
||||
title="Trusted By Top Creators & Brands"
|
||||
description="Over 10B+ views generated. I've powered viral campaigns for artists, influencers, TV shows, and products reaching hundreds of millions of followers."
|
||||
tag="10B+ Views Generated"
|
||||
tagIcon={TrendingUp}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"BBNO$ - 16.5M Listeners", "Dhar Mann - 136M Followers", "Paul American - 140M Followers", "Tate McCrae - 57.6M Listeners", "Hostage Tape - 150K Customers", "The Rolling Stones - 27M Listeners", "Monkey Tilt - 300K Users", "Selena Gomez - 42.4M Followers"]}
|
||||
speed={40}
|
||||
showCard={true}
|
||||
/>
|
||||
</div>
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofOne
|
||||
title="Trusted by Top Creators and Brands"
|
||||
description="Over 10M+ views generated. I've powered viral content for artists, influencers, TV shows, and products reaching hundreds of millions of followers."
|
||||
tag="10M+ Views Generated"
|
||||
tagIcon={TrendingUp}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"Brandon Clark 600K Followers", "Sexyishaan 60K Followers", "Ericcouu 300K Followers", "Brandon Clark 600K Followers", "Sexyishaan 60K Followers", "Ericcouu 300K Followers", "Brandon Clark 600K Followers", "Sexyishaan 60K Followers"
|
||||
]}
|
||||
speed={40}
|
||||
showCard={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="process" data-section="process">
|
||||
<FeatureCardSix
|
||||
title="The Process"
|
||||
description="Launching a campaign has never been easier. Say goodbye to slow agencies—with my clipping methodology, you launch, scale, and analyze viral campaigns in record time."
|
||||
tag="Proven Workflow"
|
||||
tagIcon={Zap}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
title: "Book an Intro Call", description: "We start with a quick intro call to understand your goals, target audience, and creative direction. I build a custom clipping strategy designed to maximize reach and engagement—whether you're a brand, artist, creator, or product.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/an-illustration-showing-a-consultation-v-1772847774769-61fe5500.png", imageAlt: "Consultation call strategy planning", buttons: [{ text: "Start Your Campaign", href: "https://calendly.com" }],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Clippers Start Posting", description: "Once your campaign is locked in, our network springs into action. Content gets distributed across TikTok, Instagram Reels, YouTube Shorts, and more—simultaneously—with my proven optimization techniques.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/an-illustration-showing-multiple-clipper-1772847774950-e137f1c3.png", imageAlt: "Content distribution across platforms"},
|
||||
{
|
||||
id: 3,
|
||||
title: "Track Real-Time Results", description: "Watch your clips climb trending charts in real-time. Full transparency with detailed analytics showing views, engagement, growth metrics, and ROI. Optimize on the fly based on what's working.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/an-analytics-dashboard-showing-real-time-1772847775477-be40e150.png", imageAlt: "Analytics dashboard real-time metrics"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="process" data-section="process">
|
||||
<FeatureCardSix
|
||||
title="The Process"
|
||||
description="Launching your private clipping project has never been easier. Say goodbye to slow agencies—with my personalized clipping methodology, you launch, scale, and analyze viral content in record time with direct team access."
|
||||
tag="Proven Workflow"
|
||||
tagIcon={Zap}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
title: "Step #1", description: "Book an Intro Call. We start with a quick intro call to understand your goals, target audience, and creative direction. From there, my team builds a custom private clipping project designed to maximize reach and engagement — whether you're a brand, artist, creator, or product.", buttons: [{ text: "Start Your Project", href: "https://calendly.com/ibbiyousuf420/30min" }],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Our Team Starts Posting", description: "Once we align on strategy, personalized content gets distributed across TikTok, Instagram Reels, YouTube Shorts, and more—simultaneously—with my proven optimization techniques. Direct team management ensures every clip reflects your brand's vision."
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Track Real-Time Results", description: "Watch your clips climb trending charts in real-time. Full transparency with detailed analytics showing views, engagement, growth metrics, and ROI. Optimize on the fly based on what's working with direct collaboration and personalized guidance."
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
title="Measurable Results That Speak"
|
||||
description="Track the impact of your clipping campaigns with clear, actionable metrics."
|
||||
tag="Performance Metrics"
|
||||
tagIcon={BarChart3}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "1", value: "10B", title: "Views Generated", description: "Cumulative views across all client campaigns", icon: Eye,
|
||||
},
|
||||
{
|
||||
id: "2", value: "40K", title: "Clipper Network", description: "Expert creators in the distribution network", icon: Users,
|
||||
},
|
||||
{
|
||||
id: "3", value: "100%", title: "Organic Growth", description: "Zero ad spend required—pure algorithmic reach", icon: TrendingUp,
|
||||
},
|
||||
{
|
||||
id: "4", value: "3-5x", title: "Avg ROI", description: "Return on investment vs traditional marketing", icon: Award,
|
||||
},
|
||||
]}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
title="Measurable Results That Speak"
|
||||
description="Track the impact of your private clipping projects with clear, actionable metrics from our dedicated team."
|
||||
tag="Performance Metrics"
|
||||
tagIcon={BarChart3}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "1", value: "10M ", title: "Views Generated", description: "Average Views per private project", icon: Eye,
|
||||
},
|
||||
{
|
||||
id: "2", value: "1000 ", title: "Expert Team", description: "Dedicated clipping specialists for your projects", icon: Users,
|
||||
},
|
||||
{
|
||||
id: "3", value: "💯 ", title: "Organic Growth", description: "Zero ad spend required—pure algorithmic reach", icon: TrendingUp,
|
||||
},
|
||||
{
|
||||
id: "4", value: "3-5x", title: "Avg ROI", description: "Return on investment vs traditional marketing", icon: Award,
|
||||
},
|
||||
]}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="case-studies" data-section="case-studies">
|
||||
<ProductCardFour
|
||||
title="Client Success Stories"
|
||||
description="From independent creators to global brands—here's the impact of optimized clipping campaigns."
|
||||
tag="Proven Results"
|
||||
tagIcon={Trophy}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "bbno", name: "BBNO$ - Music Artist", price: "16.5M", variant: "Listeners | Viral Growth", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/a-professional-case-study-showcase-for-a-1772847776081-4759a6fa.png?_wi=1", imageAlt: "BBNO$ campaign case study"},
|
||||
{
|
||||
id: "dhar-mann", name: "Dhar Mann - Influencer", price: "136M", variant: "Followers | Trending Content", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/a-professional-influencer-case-study-sho-1772847776930-7a6e87b3.png", imageAlt: "Dhar Mann case study"},
|
||||
{
|
||||
id: "paul-american", name: "Paul American - TV Show", price: "140M", variant: "Followers | Entertainment Clips", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/a-television-show-case-study-with-140m-f-1772847781498-064f7d24.png", imageAlt: "Paul American case study"},
|
||||
{
|
||||
id: "tate-mccrae", name: "Tate McCrae - Artist", price: "57.6M", variant: "Listeners | Music Clips", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/a-professional-case-study-showcase-for-a-1772847776081-4759a6fa.png?_wi=2", imageAlt: "Tate McCrae campaign"},
|
||||
]}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="case-studies" data-section="case-studies">
|
||||
<ProductCardFour
|
||||
title="Client Success Stories"
|
||||
description="From independent creators to global brands—here's the impact of our personalized clipping and team management approach."
|
||||
tag="Proven Results"
|
||||
tagIcon={Trophy}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "bbno", name: "Ericcouu - Influencer", price: "", variant: "Viral Growth", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1772881146961-h65hjshx.jpg", imageAlt: "Ericcouu success story"
|
||||
},
|
||||
{
|
||||
id: "dhar-mann", name: "Brandon Clark - Gym Coach", price: "", variant: "Followers | Trending Content", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1772881146961-mr1xedhd.jpg", imageAlt: "Brandon Clark success story"
|
||||
},
|
||||
{
|
||||
id: "paul-american", name: "PB Investing - Trader", price: "", variant: "Followers | Trading Content", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1772881750051-0ym5nbmx.jpg?_wi=2", imageAlt: "PB Investing success story"
|
||||
},
|
||||
{
|
||||
id: "tate-mccrae", name: "Sexyishaan - Influencer", price: "", variant: "Entertainment", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1772881146961-1pjxjkc4.jpg", imageAlt: "Sexyishaan success story"
|
||||
},
|
||||
]}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
title="Why I Do This"
|
||||
description={[
|
||||
"I started clipping because I saw creators and brands struggling to repurpose their best content. They were sitting on goldmines—podcasts, streams, videos—but lacked the time, skills, or network to turn them into viral clips.", "Now, with a network of 40,000+ expert clippers and a proven methodology, I've helped launch campaigns that generated over 10 billion views. No agencies. No gatekeeping. Just results.", "Every client I work with gets direct access to a team obsessed with viral growth, algorithmic optimization, and transparent metrics. Your success is my success."]}
|
||||
useInvertedBackground={false}
|
||||
showBorder={false}
|
||||
buttons={[{ text: "Schedule Consultation", href: "https://calendly.com" }]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
title="Why you need Clipping"
|
||||
description={[
|
||||
"I started private clipping work because I saw creators and brands struggling to repurpose their best content. They were sitting on goldmines—podcasts, streams, videos—but lacked the time, skills, or network to turn them into viral clips.", "Now, with a dedicated team of expert clippers and a proven personalized methodology, I've helped launch private projects that generated over 10 Million views. No agencies. No gatekeeping. Just direct collaboration and results.", "Every client I work with gets direct access to a team obsessed with viral growth, algorithmic optimization, and transparent metrics. Your success is my success, and my team is committed to your project's unique vision."
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
showBorder={false}
|
||||
buttons={[{ text: "Schedule Consultation", href: "https://calendly.com/ibbiyousuf420/30min" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
title="What Clients Say"
|
||||
description="Real feedback from creators and brands who've experienced the impact of optimized shortform campaigns."
|
||||
tag="Client Testimonials"
|
||||
tagIcon={MessageSquare}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Alex Rivera", role: "Podcast Host", testimonial: "Within 2 weeks of launching my clipping campaign, my podcast downloads tripled. The viral clips on TikTok and Instagram are driving real listeners to my full episodes. Best investment I've made.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/a-professional-headshot-of-a-successful--1772847773799-11aec6b8.png?_wi=1", imageAlt: "Alex Rivera podcast host"},
|
||||
{
|
||||
id: "2", name: "Jordan Chen", role: "Brand Marketing Director", testimonial: "We tried traditional agencies for months with minimal results. Clipping Culture delivered 25M views in the first month—all organic, zero ad spend. The transparency and speed are unmatched.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/a-professional-headshot-of-a-brand-marke-1772847774096-d4ca7a22.png", imageAlt: "Jordan Chen brand director"},
|
||||
{
|
||||
id: "3", name: "Sam Thompson", role: "Content Creator", testimonial: "I was drowning in content repurposing. Having a team of clippers handle it freed me up to focus on creating. My viral clips are now my #1 lead source for brand deals.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/a-professional-headshot-of-a-social-medi-1772847774170-c3d5b803.png", imageAlt: "Sam Thompson content creator"},
|
||||
{
|
||||
id: "4", name: "Maya Patel", role: "Music Producer", testimonial: "The clipping process was simple and collaborative. My music got in front of millions of new listeners through optimized short-form content. Highly recommend for any artist looking to scale.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/a-professional-headshot-of-a-different-c-1772847773694-573d36da.png", imageAlt: "Maya Patel music producer"},
|
||||
{
|
||||
id: "5", name: "David Lee", role: "Startup CEO", testimonial: "Our product launch videos became trending clips within days. The organic reach we got from Clipping Culture's network was worth 10x the investment in traditional advertising.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/a-professional-headshot-of-a-brand-repre-1772847774538-779f0ff6.png", imageAlt: "David Lee startup CEO"},
|
||||
{
|
||||
id: "6", name: "Emma Watson", role: "Influencer", testimonial: "Clear metrics, real-time updates, and clips that actually trend. This is how modern content distribution should work. No fluff, just results.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/a-professional-headshot-of-a-successful--1772847773799-11aec6b8.png?_wi=2", imageAlt: "Emma Watson influencer"},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know before starting your private clipping project with our dedicated team."
|
||||
tag="Help & Support"
|
||||
tagIcon={HelpCircle}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "1", title: "Whats Clipping ?", content: "Clipping is the process of turning long-form content such as podcasts, livestreams, and YouTube videos into short, high-impact clips designed for platforms like TikTok, Instagram Reels, and YouTube Shorts.Through private clipping collaboration, you work directly with my dedicated team to identify the most engaging moments from your content. We then transform those moments into high-retention short-form videos with optimized hooks, captions, and formatting designed to perform well in social media algorithms. "
|
||||
},
|
||||
{
|
||||
id: "2", title: "How does the process work?", content: "Step 1: Book an intro call where we discuss your goals, content strategy, and vision. Step 2: Your content gets assigned to our dedicated team who create and optimize clips for each platform while maintaining direct communication with you. Step 3: Clips launch simultaneously across social platforms and we track real-time performance together with detailed analytics and regular updates."
|
||||
},
|
||||
{
|
||||
id: "3", title: "How quickly can I Start?", content: "Within 2-5 business days after the initial strategy call. Your content goes through our personalized optimization process, and begins gaining traction immediately. Real-time results start appearing within hours, with our team providing direct updates on performance."
|
||||
},
|
||||
{
|
||||
id: "4", title: "What types of creators and businesses do you work with?", content: "I work with podcasters, streamers, influencers, TV shows, brands, product launches, apps, startups, and content entrepreneurs seeking personalized team management. Essentially, if you have longform or short-form content and want to maximize viral reach through direct collaboration with expert clippers, we're a fit."
|
||||
},
|
||||
{
|
||||
id: "5", title: "Is there a cost to start? What's the pricing model?", content: "Pricing varies based on your project scope, content volume, and dedicated team support level. I offer custom packages tailored to your specific goals and vision. Contact me for a consultation and I'll provide transparent pricing with no hidden fees."
|
||||
},
|
||||
{
|
||||
id: "6", title: "How is this different from hiring a video editor?", content: "I'm not just editing videos—I'm providing personalized team management and optimization for viral growth across platforms. My private clipping collaboration includes audience research, platform algorithms, trend analysis, optimal timing, direct communication with your dedicated team, and distribution through my network. It's a complete organic growth system with direct collaboration, not just editing."
|
||||
},
|
||||
{
|
||||
id: "7", title: "Do I retain ownership of my clips?", content: "100%. You retain full ownership of all clips created through our private collaboration. My team handles creation, optimization, and distribution, but the content is yours. We simply amplify it through our network to drive maximum views and engagement."
|
||||
},
|
||||
{
|
||||
id: "8", title: "What kind of results should I expect?", content: "Results vary based on content quality, audience size, and platform fit. My private collaboration clients typically see 3-5x ROI within the first month. Many experience viral clips (100K-500K+ views), new followers, lead generation, and increased Sales of their products All done by our dedicated team."
|
||||
},
|
||||
]}
|
||||
faqsAnimation="slide-up"
|
||||
animationType="smooth"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know before getting started with your clipping campaign."
|
||||
tag="Help & Support"
|
||||
tagIcon={HelpCircle}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "1", title: "What exactly is Clipping Culture?", content: "Clipping Culture is a shortform content clipping and distribution service. I transform your longform content (podcasts, streams, videos) into high-retention clips optimized for TikTok, Instagram Reels, and YouTube Shorts. I use a network of 40,000+ expert clippers to distribute your content across platforms, driving organic reach and viral growth."},
|
||||
{
|
||||
id: "2", title: "How does the clipping process work?", content: "Step 1: Book an intro call where we discuss your goals and content strategy. Step 2: Your content gets assigned to our network of clippers who create and optimize clips for each platform. Step 3: Clips launch simultaneously across social platforms and we track real-time performance with detailed analytics."},
|
||||
{
|
||||
id: "3", title: "How quickly can I launch a campaign?", content: "Most campaigns launch within 2-5 business days after the initial strategy call. Your content goes through our optimization process, gets distributed to the clipper network, and begins gaining traction immediately. Real-time results start appearing within hours."},
|
||||
{
|
||||
id: "4", title: "What types of creators and businesses do you work with?", content: "I work with podcasters, streamers, musicians, influencers, TV shows, brands, product launches, apps, startups, casinos, and content entrepreneurs. Essentially, if you have longform content and want to maximize viral reach through shortform clips, we're a fit."},
|
||||
{
|
||||
id: "5", title: "Is there a cost to start? What's the pricing model?", content: "Pricing varies based on your campaign scope, content volume, and distribution network size. I offer custom packages tailored to your goals. Contact me for a consultation and I'll provide transparent pricing with no hidden fees."},
|
||||
{
|
||||
id: "6", title: "How is this different from hiring a video editor?", content: "I'm not just editing videos—I'm optimizing them for viral growth across platforms. My clipping methodology includes audience research, platform algorithms, trend analysis, optimal timing, and distribution through a massive creator network. It's a complete organic growth system, not just editing."},
|
||||
{
|
||||
id: "7", title: "Do I retain ownership of my clips?", content: "100%. You retain full ownership of all clips created. I handle distribution and optimization, but the content is yours. We simply amplify it through my network to drive maximum views and engagement."},
|
||||
{
|
||||
id: "8", title: "What kind of results should I expect?", content: "Results vary based on content quality, audience size, and platform fit. My clients typically see 3-5x ROI within the first month. Many experience viral clips (100K-500K+ views), new followers, lead generation, and increased business opportunities from the exposure."},
|
||||
]}
|
||||
faqsAnimation="slide-up"
|
||||
animationType="smooth"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
text="Ready To Turn Your Content Into Viral Clips 👇 "
|
||||
animationType="entrance-slide"
|
||||
background={{ variant: "radial-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{ text: "Book A Call", href: "https://calendly.com/ibbiyousuf420/30min" },
|
||||
{ text: "See Case Studies", href: "#case-studies" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
text="Ready to turn your longform content into viral shortform campaigns? Let's discuss your strategy and explore how I can help you reach millions of engaged viewers—no ad spend required."
|
||||
animationType="entrance-slide"
|
||||
background={{ variant: "radial-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{ text: "Book A Call", href: "https://calendly.com" },
|
||||
{ text: "See Case Studies", href: "#case-studies" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
logoText="Clipping Culture"
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "Case Studies", href: "#case-studies" },
|
||||
{ label: "Process", href: "#process" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "About", href: "#about" },
|
||||
{ label: "Testimonials", href: "#testimonials" },
|
||||
{ label: "FAQ", href: "#faq" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Contact", href: "#contact" },
|
||||
{ label: "Book A Call", href: "https://calendly.com" },
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
logoText=""
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "Case Studies", href: "#case-studies" },
|
||||
{ label: "My Work", href: "/work" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Process", href: "#process" },
|
||||
{ label: "About", href: "#about" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "FAQ", href: "#faq" },
|
||||
{ label: "Contact", href: "#contact" },
|
||||
{ label: "Book A Call", href: "https://calendly.com/ibbiyousuf420/30min" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -11,7 +11,7 @@ html {
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-public-sans), sans-serif;
|
||||
font-family: var(--font-inter-tight), sans-serif;
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
overscroll-behavior: none;
|
||||
@@ -24,5 +24,5 @@ h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--font-public-sans), sans-serif;
|
||||
font-family: var(--font-inter-tight), sans-serif;
|
||||
}
|
||||
|
||||
182
src/app/work/page.tsx
Normal file
182
src/app/work/page.tsx
Normal file
@@ -0,0 +1,182 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
||||
import { useEffect, useRef } from "react";
|
||||
|
||||
interface Clip {
|
||||
id: string;
|
||||
src: string;
|
||||
title: string;
|
||||
link: string;
|
||||
}
|
||||
|
||||
const clips: Clip[] = [
|
||||
{
|
||||
id: "1", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1773165537767-sb172m93.png", title: "Viral Clip 1", link: "https://www.tiktok.com/@brandonclipd/video/7593877522681564446"
|
||||
},
|
||||
{
|
||||
id: "2", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1773165537769-ji09ma2s.png", title: "Viral Clip 2", link: "https://drive.google.com/file/d/1TFDj__ZvlvGQah-3T6YRsw6wwCGrR2YW/view?usp=drivesdk"
|
||||
},
|
||||
{
|
||||
id: "3", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1773165537769-p7aqg1q7.png", title: "Viral Clip 3", link: "https://drive.google.com/file/d/1QbP28qpbNlyWE-kJcLQXlZ70ai5ccjuw/view?usp=drivesdk"
|
||||
},
|
||||
{
|
||||
id: "4", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1773165537769-ecm4mns3.png", title: "Viral Clip 4", link: "https://www.tiktok.com/@brandonclipd/video/7594523303847415070"
|
||||
},
|
||||
{
|
||||
id: "5", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1773164050845-j8dxb4nc.png", title: "Viral Clip 5", link: "https://drive.google.com/file/d/1Pt43OPdW-tMbRB_3DLumnhedP87cDZzo/view?usp=share_link"
|
||||
}
|
||||
];
|
||||
|
||||
export default function WorkPage() {
|
||||
const scrollContainerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const scrollContainer = scrollContainerRef.current;
|
||||
if (!scrollContainer) return;
|
||||
|
||||
let scrollPosition = 0;
|
||||
const scrollSpeed = 2;
|
||||
const containerWidth = scrollContainer.scrollWidth;
|
||||
const viewportWidth = scrollContainer.clientWidth;
|
||||
|
||||
const scroll = () => {
|
||||
scrollPosition += scrollSpeed;
|
||||
// Loop back to start for infinite scroll
|
||||
if (scrollPosition >= containerWidth / 2) {
|
||||
scrollPosition = 0;
|
||||
}
|
||||
scrollContainer.scrollLeft = scrollPosition;
|
||||
};
|
||||
|
||||
const interval = setInterval(scroll, 30);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
const handleClipClick = (link: string) => {
|
||||
window.open(link, "_blank");
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="bounce-effect"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="mediumSizeLargeTitles"
|
||||
background="noise"
|
||||
cardStyle="soft-shadow"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="billiscales"
|
||||
navItems={[
|
||||
{ name: "Case Studies", id: "case-studies" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "My Work", id: "/work" },
|
||||
{ name: "Process", id: "process" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
button={{
|
||||
text: "Book A Call", href: "https://calendly.com/ibbiyousuf420/30min"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<main className="w-full min-h-screen bg-gradient-to-b from-background to-card pt-32 pb-20">
|
||||
<div className="w-full px-4 md:px-8 mb-16">
|
||||
<div className="text-center mb-12">
|
||||
<h1 className="text-5xl md:text-7xl font-bold text-foreground mb-4">
|
||||
My Work
|
||||
</h1>
|
||||
<p className="text-lg md:text-xl text-foreground/70 max-w-2xl mx-auto">
|
||||
Scroll through my latest viral clips and shortform content
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Horizontal Infinite Scrolling Container */}
|
||||
<div
|
||||
className="w-full overflow-hidden rounded-2xl"
|
||||
style={{
|
||||
background: "linear-gradient(135deg, rgba(var(--primary-cta), 0.05), rgba(var(--accent), 0.05))", border: "1px solid rgba(var(--foreground), 0.1)"
|
||||
}}
|
||||
>
|
||||
<div
|
||||
ref={scrollContainerRef}
|
||||
className="flex gap-6 p-6 overflow-x-scroll"
|
||||
style={{
|
||||
scrollBehavior: "smooth", scrollbarWidth: "none", msOverflowStyle: "none"
|
||||
}}
|
||||
>
|
||||
{/* Duplicate clips for infinite loop effect */}
|
||||
{[...clips, ...clips].map((clip, index) => (
|
||||
<div
|
||||
key={`${clip.id}-${index}`}
|
||||
className="flex-shrink-0 relative group cursor-pointer transition-all duration-300 hover:scale-110 hover:shadow-2xl"
|
||||
style={{
|
||||
width: "280px", aspectRatio: "9/16"
|
||||
}}
|
||||
onClick={() => handleClipClick(clip.link)}
|
||||
role="link"
|
||||
tabIndex={0}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
handleClipClick(clip.link);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{/* Clip Card Container */}
|
||||
<div
|
||||
className="w-full h-full rounded-xl overflow-hidden shadow-lg transition-all duration-300"
|
||||
style={{
|
||||
background: "var(--card)", border: "2px solid rgba(var(--primary-cta), 0.2)", boxShadow: "0 10px 30px rgba(0, 0, 0, 0.1)"
|
||||
}}
|
||||
>
|
||||
{/* Image */}
|
||||
<img
|
||||
src={clip.src}
|
||||
alt={clip.title}
|
||||
className="w-full h-full object-cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
|
||||
{/* Hover Overlay */}
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col items-center justify-end p-4">
|
||||
<div
|
||||
className="px-4 py-2 rounded-full text-sm font-semibold text-white transition-all duration-300 transform translate-y-8 group-hover:translate-y-0"
|
||||
style={{
|
||||
background: "var(--primary-cta)", backdropFilter: "blur(10px)"
|
||||
}}
|
||||
>
|
||||
View
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<div className="mt-3">
|
||||
<p className="text-sm font-medium text-foreground truncate">
|
||||
{clip.title}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Info Text */}
|
||||
<div className="text-center mt-8 text-foreground/60">
|
||||
<p className="text-sm md:text-base">
|
||||
👆 Continuous scroll • Click any card to view
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user