content-creator-tools / index.html
wadidoank's picture
change color theme this website more dark, high tech and modern - Follow Up Deployment
ed99664 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OpusClip: #1 AI Video Clipping Tool</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.creator-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.creator-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.testimonial-card {
transition: all 0.3s ease;
}
.testimonial-card:hover {
transform: scale(1.02);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.feature-card {
transition: all 0.3s ease;
}
.feature-card:hover {
transform: translateY(-5px);
}
.logo-grid img {
filter: grayscale(100%);
opacity: 0.7;
transition: all 0.3s ease;
}
.logo-grid img:hover {
filter: grayscale(0%);
opacity: 1;
}
.animate-float {
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
</style>
</head>
<body class="font-sans bg-white text-gray-800">
<!-- Hero Section -->
<header class="bg-gradient-to-r from-purple-600 to-blue-600 text-white py-20">
<div class="container mx-auto px-6 text-center">
<h1 class="text-4xl md:text-6xl font-bold mb-6">OpusClip</h1>
<p class="text-xl md:text-2xl mb-8">#1 AI video clipping tool to create viral shorts</p>
<div class="flex justify-center gap-4">
<a href="#try-now" class="bg-white text-purple-600 px-8 py-3 rounded-full font-bold hover:bg-gray-100 transition duration-300">Try for Free</a>
<a href="#how-it-works" class="border-2 border-white px-8 py-3 rounded-full font-bold hover:bg-white hover:bg-opacity-10 transition duration-300">How It Works</a>
</div>
</div>
</header>
<!-- Used By Section -->
<section class="py-16 bg-gray-50">
<div class="container mx-auto px-6">
<h2 class="text-center text-2xl md:text-3xl font-bold mb-12">Used by <span class="text-purple-600">12M+</span> creators and businesses</h2>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6">
<!-- Creator Cards -->
<div class="creator-card bg-white p-4 rounded-xl shadow-md flex flex-col items-center">
<img src="https://cdn.prod.website-files.com/6388604483b03a9ecb34d695/64f5a1eba3b8835d0f8fc437_Grant%20Cardone.webp" alt="Grant Cardone" class="w-20 h-20 rounded-full mb-3 object-cover">
<h3 class="font-bold">Grant Cardone</h3>
<p class="text-gray-500 text-sm">4.7M</p>
</div>
<div class="creator-card bg-white p-4 rounded-xl shadow-md flex flex-col items-center">
<img src="https://cdn.prod.website-files.com/6388604483b03a9ecb34d695/64f5a1eb90b0b3ec96b14542_Scott%20Galloway.webp" alt="Scott Galloway" class="w-20 h-20 rounded-full mb-3 object-cover">
<h3 class="font-bold">Scott Galloway</h3>
<p class="text-gray-500 text-sm">192K</p>
</div>
<div class="creator-card bg-white p-4 rounded-xl shadow-md flex flex-col items-center">
<img src="https://cdn.prod.website-files.com/6388604483b03a9ecb34d695/64f5a1eb6921a8f1356431cd_What%20If.webp" alt="What If" class="w-20 h-20 rounded-full mb-3 object-cover">
<h3 class="font-bold">What If</h3>
<p class="text-gray-500 text-sm">7.9M</p>
</div>
<div class="creator-card bg-white p-4 rounded-xl shadow-md flex flex-col items-center">
<img src="https://cdn.prod.website-files.com/6388604483b03a9ecb34d695/668c6776f01b5af9b933530c_output.png" alt="Jenny Hoyos" class="w-20 h-20 rounded-full mb-3 object-cover">
<h3 class="font-bold">Jenny Hoyos</h3>
<p class="text-gray-500 text-sm">4M</p>
</div>
<div class="creator-card bg-white p-4 rounded-xl shadow-md flex flex-col items-center">
<img src="https://cdn.prod.website-files.com/6388604483b03a9ecb34d695/66b2aa757e55394356a09456_unnamed%20(4).jpg" alt="Linguamarina" class="w-20 h-20 rounded-full mb-3 object-cover">
<h3 class="font-bold">Linguamarina</h3>
<p class="text-gray-500 text-sm">8.52M</p>
</div>
<div class="creator-card bg-white p-4 rounded-xl shadow-md flex flex-col items-center">
<img src="https://cdn.prod.website-files.com/6388604483b03a9ecb34d695/67f857a0d05efe7f2aeb3cb9_podcasret_studio.png" alt="Dhar Mann Studios" class="w-20 h-20 rounded-full mb-3 object-cover">
<h3 class="font-bold">Dhar Mann Studios</h3>
<p class="text-gray-500 text-sm">24.8M</p>
</div>
</div>
<!-- View More Button -->
<div class="text-center mt-10">
<button class="text-purple-600 font-bold hover:text-purple-800 transition duration-300">
View More Creators <i class="fas fa-chevron-down ml-2"></i>
</button>
</div>
</div>
</section>
<!-- Trusted By Logos -->
<section class="py-12 bg-white">
<div class="container mx-auto px-6">
<h3 class="text-center text-gray-500 mb-8">TRUSTED BY LEADING BRANDS</h3>
<div class="logo-grid grid grid-cols-3 md:grid-cols-5 lg:grid-cols-7 gap-6 items-center">
<img src="https://cdn.prod.website-files.com/6388604483b03a9ecb34d695/673c86b3b368c15926532d46_zoominfo%20logo.avif" alt="ZoomInfo" class="w-full h-auto max-h-12 object-contain">
<img src="https://cdn.prod.website-files.com/6388604483b03a9ecb34d695/673c86b10293a3095a7906fb_memphis%20grizzlies%20logo.avif" alt="Memphis Grizzlies" class="w-full h-auto max-h-12 object-contain">
<img src="https://cdn.prod.website-files.com/6388604483b03a9ecb34d695/673c86b10dfb9a3bdf39822a_chili%20piper%20logo.avif" alt="Chili Piper" class="w-full h-auto max-h-12 object-contain">
<img src="https://cdn.prod.website-files.com/6388604483b03a9ecb34d695/673c86b2c7631aa2bd6c8dc7_univision%20logo.avif" alt="Univision" class="w-full h-auto max-h-12 object-contain">
<img src="https://cdn.prod.website-files.com/6388604483b03a9ecb34d695/673c86b1cb69a346bc581f96_audacy%20logo.avif" alt="Audacy" class="w-full h-auto max-h-12 object-contain">
<img src="https://cdn.prod.website-files.com/6388604483b03a9ecb34d695/673c86b3e3f3388adfbfe2e0_visa%20logo.avif" alt="Visa" class="w-full h-auto max-h-12 object-contain">
<img src="https://cdn.prod.website-files.com/6388604483b03a9ecb34d695/673c86b1c7631aa2bd6c8d00_iHeartMedia%20logo.avif" alt="iHeartMedia" class="w-full h-auto max-h-12 object-contain">
</div>
</div>
</section>
<!-- AI Editing Models -->
<section id="how-it-works" class="py-20 bg-gray-50">
<div class="container mx-auto px-6">
<div class="flex flex-col lg:flex-row items-center gap-12">
<div class="lg:w-1/2">
<h2 class="text-3xl md:text-4xl font-bold mb-6">AI that understands every pixel of your video</h2>
<p class="text-lg text-gray-600 mb-8">The most powerful AI editing models that work on any video. Built for speed, accuracy, and creative flexibility.</p>
<div class="space-y-8">
<div class="feature-card bg-white p-6 rounded-xl shadow-md">
<div class="flex items-start">
<div class="bg-purple-100 p-3 rounded-full mr-4">
<i class="fas fa-cut text-purple-600 text-xl"></i>
</div>
<div>
<h3 class="text-xl font-bold mb-2">ClipAnything</h3>
<p class="text-gray-600">Every other AI clipping tool only works with video podcasts. ClipAnything is the only AI clipping model that turns any genre — vlogs, gaming, sports, interviews, explainer videos — into viral clips in 1 click.</p>
</div>
</div>
</div>
<div class="feature-card bg-white p-6 rounded-xl shadow-md">
<div class="flex items-start">
<div class="bg-blue-100 p-3 rounded-full mr-4">
<i class="fas fa-expand text-blue-600 text-xl"></i>
</div>
<div>
<h3 class="text-xl font-bold mb-2">ReframeAnything</h3>
<p class="text-gray-600">The only AI reframe model that resizes any video for any platform and keeps moving subjects centered with AI object tracking. If you want more control, use manual tracking to instruct AI exactly what to follow.</p>
</div>
</div>
</div>
</div>
</div>
<div class="lg:w-1/2 animate-float">
<img src="https://cdn.prod.website-files.com/6388604483b03a9ecb34d695/684c2798958314e4a8958d21_ClipAnything.avif" alt="ClipAnything" class="w-full rounded-xl shadow-xl">
</div>
</div>
</div>
</section>
<!-- Workflow Automation -->
<section class="py-20 bg-white">
<div class="container mx-auto px-6">
<div class="flex flex-col lg:flex-row-reverse items-center gap-12">
<div class="lg:w-1/2">
<h2 class="text-3xl md:text-4xl font-bold mb-6">Your video creation process — now on autopilot</h2>
<p class="text-lg text-gray-600 mb-8">Create and publish videos 5x faster with OpusClip's web app and API, so you can go on vacation and still keep your content rolling.</p>
<div class="space-y-4">
<div class="flex items-center">
<div class="bg-green-100 p-2 rounded-full mr-4">
<i class="fas fa-bolt text-green-600"></i>
</div>
<p class="text-gray-700">Automated clip generation from your long videos</p>
</div>
<div class="flex items-center">
<div class="bg-green-100 p-2 rounded-full mr-4">
<i class="fas fa-robot text-green-600"></i>
</div>
<p class="text-gray-700">AI-powered editing with human-like quality</p>
</div>
<div class="flex items-center">
<div class="bg-green-100 p-2 rounded-full mr-4">
<i class="fas fa-share-alt text-green-600"></i>
</div>
<p class="text-gray-700">Direct publishing to social platforms</p>
</div>
</div>
</div>
<div class="lg:w-1/2">
<img src="https://cdn.prod.website-files.com/6388604483b03a9ecb34d695/684dbfb6a4157e1095cf61af_workflow.avif" alt="Workflow Automation" class="w-full rounded-xl shadow-xl">
</div>
</div>
</div>
</section>
<!-- AI Editor Section -->
<section class="py-20 bg-purple-50">
<div class="container mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-6">AI that edits with you, not just for you</h2>
<p class="text-xl text-gray-600 mb-12 max-w-3xl mx-auto">Take full editing control, or let our AI take over. Either way, it's effortless.</p>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white p-8 rounded-xl shadow-md">
<div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
<i class="fas fa-magic text-purple-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">Smart AI Editing</h3>
<p class="text-gray-600">Our AI understands context and edits videos like a professional editor would.</p>
</div>
<div class="bg-white p-8 rounded-xl shadow-md">
<div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
<i class="fas fa-sliders-h text-blue-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">Manual Controls</h3>
<p class="text-gray-600">Fine-tune every aspect of your video with our intuitive editing tools.</p>
</div>
<div class="bg-white p-8 rounded-xl shadow-md">
<div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
<i class="fas fa-sync-alt text-green-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">Real-time Preview</h3>
<p class="text-gray-600">See changes instantly as you edit, with no rendering delays.</p>
</div>
</div>
</div>
</section>
<!-- OpusClip for Teams -->
<section class="py-20 bg-white">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Scale your creative output without scaling overhead</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Every business is becoming video-first. OpusClip helps your brand stay top of mind.</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white p-6 rounded-xl shadow-md border border-gray-100">
<img src="https://cdn.prod.website-files.com/6388604483b03a9ecb34d695/684c306adfce8ae39556b260_Brand%20templates.avif" alt="Brand templates" class="w-full rounded-lg mb-6">
<h3 class="text-xl font-bold mb-3">Brand templates</h3>
<p class="text-gray-600">Create various brand templates with on-brand font style, color, logo, intro&outro and more.</p>
</div>
<div class="bg-white p-6 rounded-xl shadow-md border border-gray-100">
<img src="https://cdn.prod.website-files.com/6388604483b03a9ecb34d695/684c305996ac160131ce654f_Team%20workspace.avif" alt="Team workspace" class="w-full rounded-lg mb-6">
<h3 class="text-xl font-bold mb-3">Team workspace</h3>
<p class="text-gray-600">Easily set up a team account to collaborate and manage creative projects with your team members.</p>
</div>
<div class="bg-white p-6 rounded-xl shadow-md border border-gray-100">
<img src="https://cdn.prod.website-files.com/6388604483b03a9ecb34d695/684c3059b3eecf81e4af57dc_Workflow%20integration.avif" alt="Workflow integration" class="w-full rounded-lg mb-6">
<h3 class="text-xl font-bold mb-3">Workflow integration</h3>
<p class="text-gray-600">With our API, you can integrate OpusClip with your CMS and other tools to automate your video creation workflow.</p>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="py-20 bg-gray-50">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">A partner to your growth</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">The only AI editor that actually drives growth. Just ask millions of creators and brands.</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Testimonial 1 -->
<div class="testimonial-card bg-white p-8 rounded-xl shadow-md">
<div class="flex items-center mb-6">
<img src="https://cdn.prod.website-files.com/6388604483b03a9ecb34d695/684fcee619f9388091839f0c_Jason%20Lemkin.avif" alt="Jason Lemkin" class="w-16 h-16 rounded-full mr-4">
<div>
<h4 class="font-bold">Jason Lemkin</h4>
<p class="text-gray-500 text-sm">CEO, SaaStr</p>
</div>
</div>
<p class="text-gray-700 italic mb-6">"It used to take days to create clips. Now it takes us minutes to create them."</p>
<div class="flex text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
<!-- Testimonial 2 -->
<div class="testimonial-card bg-white p-8 rounded-xl shadow-md">
<div class="flex items-center mb-6">
<img src="https://cdn.prod.website-files.com/6388604483b03a9ecb34d695/684fcee6a0d5ba51a3be55b6_Jacksfilms.avif" alt="Jacksfilms" class="w-16 h-16 rounded-full mr-4">
<div>
<h4 class="font-bold">Jacksfilms</h4>
<p class="text-gray-500 text-sm">Content Creator</p>
</div>
</div>
<p class="text-gray-700 italic mb-6">"Opusclip has been crucial in helping me upload more short form videos. I get to throw more things at the wall to see what sticks, rather than waste time editing a short that underperforms. It's a no-brainer for anyone aiming to convert their long, wide form videos to vertical shorts."</p>
<div class="flex text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
<!-- Testimonial 3 -->
<div class="testimonial-card bg-white p-8 rounded-xl shadow-md">
<div class="flex items-center mb-6">
<img src="https://cdn.prod.website-files.com/6388604483b03a9ecb34d695/684fcee662b5bcf08a3b3b0e_5fc6f5f576adf69310b463662da38b61_WildBrain.avif" alt="WildBrain" class="w-16 h-16 rounded-full mr-4">
<div>
<h4 class="font-bold">WildBrain</h4>
<p class="text-gray-500 text-sm">Media Company</p>
</div>
</div>
<p class="text-gray-700 italic mb-6">"We love YT shorts' massive reach but hate its revenue - that's why we use OpusClip to bring the cost down."</p>
<div class="flex text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
</div>
</div>
</section>
<!-- Results Section -->
<section class="py-20 bg-purple-600 text-white">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Real Results from Real Users</h2>
<p class="text-xl text-purple-100 max-w-3xl mx-auto">See how OpusClip is transforming content creation for creators and businesses</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-white bg-opacity-10 p-8 rounded-xl backdrop-blur-sm">
<p class="italic mb-6">"Watch time increased by 57%. There has been an increase across the board."</p>
<a href="https://www.tiktok.com/@jraahpodcast" class="font-bold hover:underline">jraahpodcast</a>
</div>
<div class="bg-white bg-opacity-10 p-8 rounded-xl backdrop-blur-sm">
<p class="italic mb-6">"The percentage of those that watch the whole video has increased from 1-3% to 12+%."</p>
<a href="https://www.tiktok.com/@veteransarchives" class="font-bold hover:underline">veteransarchives</a>
</div>
<div class="bg-white bg-opacity-10 p-8 rounded-xl backdrop-blur-sm">
<p class="italic mb-6">"Some OpusClip videos were the top performing ones on our YouTube and TikTok. On average, our views have gone up 2x in the last few months."</p>
<a href="https://www.youtube.com/@wakeupwarrior2969" class="font-bold hover:underline">Wake Up Warrior</a>
</div>
<div class="bg-white bg-opacity-10 p-8 rounded-xl backdrop-blur-sm">
<p class="italic mb-6">"Increased my watch time by over 40%, and I tend to gain more subscribers due to my clips versus my long form content."</p>
<a href="https://www.youtube.com/@closetedkicksconvos" class="font-bold hover:underline">Closeted Kicks Convos</a>
</div>
<div class="bg-white bg-opacity-10 p-8 rounded-xl backdrop-blur-sm">
<p class="italic mb-6">"OpusClip videos drive more people to long form podcasts. Viewers up by 30%."</p>
<a href="https://www.youtube.com/@minddog" class="font-bold hover:underline">matt nappo</a>
</div>
<div class="bg-white bg-opacity-10 p-8 rounded-xl backdrop-blur-sm">
<p class="italic mb-6">"Increased my watch time by hundreds of views. I was getting 60-200 views prior to OpusClip. Since using OpusClip, my views range from 500-1,000."</p>
<a href="https://www.tiktok.com/@burstonwithcomedy" class="font-bold hover:underline">BurstonWithComedy</a>
</div>
</div>
</div>
</section>
<!-- FAQ Section -->
<section id="faq" class="py-20 bg-white">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Got questions?</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">We've got answers. Here are some of the most common questions we get.</p>
</div>
<div class="max-w-3xl mx-auto space-y-6">
<div class="border-b border-gray-200 pb-6">
<h3 class="text-xl font-bold mb-3">How does OpusClip work?</h3>
<p class="text-gray-600">OpusClip leverages big data to analyze your video content in relation to the latest social and marketing trends from major platforms, and generates a comprehensive understanding of your video for a data-driven decision on content repurposing. It then picks the highlighting moments of your long video, rearranges them into a viral-worthy short and polishes it with dynamic captions, AI-relayout, smooth transition to ensure that the clip is coherent and attention-grabbing, and ends with a strong call-to-action. <a href="https://www.opus.pro/how-does-opus-clip-work" class="text-purple-600 hover:underline">Learn more</a></p>
</div>
<div class="border-b border-gray-200 pb-6">
<h3 class="text-xl font-bold mb-3">What types of videos can I upload?</h3>
<p class="text-gray-600">You can use OpusClip to clip any video type that you have with our newest model <a href="https://www.opus.pro/clipanything" class="text-purple-600 hover:underline">ClipAnything</a>. Whether it's talking-head videos like podcasts and interviews, vlogs, sports, TV shows, or videos with little to no dialogue, ClipAnything understands all the visual, audio and sentiment cues throughout the video, and can clip the best moments from your video. You can also use natural language prompts to clip a specific moment. To learn more about it, please visit the <a href="https://www.opus.pro/clipanything" class="text-purple-600 hover:underline">ClipAnything</a> page.</p>
</div>
<div class="border-b border-gray-200 pb-6">
<h3 class="text-xl font-bold mb-3">Which languages are supported?</h3>
<p class="text-gray-600">We support English, German, Spanish, French, Portuguese, Italian, Dutch, Russian, Polish, Indonesian, Ukrainian, Swedish, Turkish, Norwegian, Croatian, Romanian, Slovak, Greek, Danish, Finnish and more to come.</p>
</div>
<div class="border-b border-gray-200 pb-6">
<h3 class="text-xl font-bold mb-3">Can I add captions?</h3>
<p class="text-gray-600">Absolutely! In fact, OpusClip automatically adds captions for you with over 97% accuracy! You can change text and edit it freely.</p>
</div>
<div class="border-b border-gray-200 pb-6">
<h3 class="text-xl font-bold mb-3">Is OpusClip free to use?</h3>
<p class="text-gray-600">OpusClip is free to use. If you are a new user, you will enjoy a 7-day free trial of our Pro Plan, which gives you 90 minutes of video processing time (~30 downloadable clips). Once your free trial ends, you can either upgrade to paid subscription, or use our free-forever plan with 60 minutes of video processing time refreshed monthly. We offer paid subscription plans with flexible upload credits, available on both a monthly and yearly basis.</p>
</div>
<div>
<h3 class="text-xl font-bold mb-3">I have more questions!</h3>
<p class="text-gray-600">Please join our <a href="https://discord.com/invite/wqbb7ZKhjg" class="text-purple-600 hover:underline">Discord</a> or email us at <a href="mailto:contact@opus.pro" class="text-purple-600 hover:underline">contact@opus.pro</a> if you need help or have any questions or advice for us.</p>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section id="try-now" class="py-20 bg-gradient-to-r from-purple-600 to-blue-600 text-white">
<div class="container mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to create viral shorts effortlessly?</h2>
<p class="text-xl mb-8 max-w-2xl mx-auto">Join 12M+ creators and businesses who are using OpusClip to save time and grow their audience.</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<a href="#" class="bg-white text-purple-600 px-8 py-4 rounded-full font-bold hover:bg-gray-100 transition duration-300 text-lg">Start Free Trial</a>
<a href="#" class="border-2 border-white px-8 py-4 rounded-full font-bold hover:bg-white hover:bg-opacity-10 transition duration-300 text-lg">See Pricing</a>
</div>
<p class="mt-4 text-purple-100">No credit card required. 7-day free trial.</p>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-12">
<div class="container mx-auto px-6">
<div class="grid md:grid-cols-4 gap-8 mb-8">
<div>
<h3 class="text-xl font-bold mb-4">OpusClip</h3>
<p class="text-gray-400">The #1 AI video clipping tool to create viral shorts.</p>
</div>
<div>
<h3 class="text-lg font-bold mb-4">Product</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Features</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Pricing</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">API</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Integrations</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-bold mb-4">Resources</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Blog</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Help Center</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Community</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Status</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-bold mb-4">Company</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">About</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Careers</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Contact</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Press</a></li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
<div class="flex space-x-6 mb-4 md:mb-0">
<a href="#" class="text-gray-400 hover:text-white transition duration-300"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition duration-300"><i class="fab fa-facebook"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition duration-300"><i class="fab fa-instagram"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition duration-300"><i class="fab fa-linkedin"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition duration-300"><i class="fab fa-youtube"></i></a>
</div>
<div class="text-gray-400 text-sm">
<p>&copy; 2023 OpusClip. All rights reserved.</p>
</div>
</div>
</div>
</footer>
<script>
// Simple JavaScript for demonstration
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=wadidoank/content-creator-tools" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>