Spaces:
Running
Running
Design a single-page, scrolling website for a sizzle reel production service. The entire site must be built around this core message: 'Turn your script from a document into an experience. I create compelling sizzle reels and proof-of-concept trailers that grab a producer's attention in 60 seconds and make them feel your story, so you can close the deal.'
0a1d0f6
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ScriptSpark Studio - Sizzle Reel Production</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"> | |
| </head> | |
| <body class="bg-gray-900 text-white font-sans"> | |
| <!-- Sticky CTA --> | |
| <div id="sticky-cta" class="fixed bottom-0 left-0 right-0 bg-indigo-600 py-4 px-6 shadow-lg z-50 transform translate-y-full transition-transform duration-300"> | |
| <div class="max-w-4xl mx-auto flex justify-between items-center"> | |
| <p class="text-lg font-semibold">Ready to turn your script into an experience?</p> | |
| <button onclick="scrollToForm()" class="bg-white text-indigo-600 font-bold py-3 px-6 rounded-lg hover:bg-gray-100 transition-colors"> | |
| Get My Trailer Now | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Hero Section --> | |
| <section class="min-h-screen flex items-center justify-center px-4 pt-20 pb-32 relative"> | |
| <div class="max-w-4xl text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight"> | |
| Turn your script from a document into an experience. | |
| </h1> | |
| <p class="text-xl md:text-2xl text-gray-300 mb-10 max-w-3xl mx-auto"> | |
| I create compelling sizzle reels and proof-of-concept trailers that grab a producer's attention in 60 seconds and make them feel your story, so you can close the deal. | |
| </p> | |
| <button onclick="scrollToForm()" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-4 px-8 rounded-lg text-lg transition-colors shadow-lg"> | |
| Get My Trailer Now | |
| </button> | |
| </div> | |
| <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce"> | |
| <i data-feather="chevron-down" class="w-8 h-8"></i> | |
| </div> | |
| </section> | |
| <!-- Problem Section --> | |
| <section class="py-20 px-4 bg-gray-800"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-8">Is Your Script Getting Lost in the Slush Pile?</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-12"> | |
| <div class="bg-gray-700 p-6 rounded-lg"> | |
| <div class="text-indigo-400 mb-4"> | |
| <i data-feather="file-text" class="w-12 h-12 mx-auto"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">The Written Word Limitation</h3> | |
| <p class="text-gray-300">Reading scripts is time-consuming and doesn't convey the visual storytelling potential.</p> | |
| </div> | |
| <div class="bg-gray-700 p-6 rounded-lg"> | |
| <div class="text-indigo-400 mb-4"> | |
| <i data-feather="eye-off" class="w-12 h-12 mx-auto"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Attention Deficit</h3> | |
| <p class="text-gray-300">Producers skim dozens of scripts daily, missing the emotional core of your story.</p> | |
| </div> | |
| <div class="bg-gray-700 p-6 rounded-lg"> | |
| <div class="text-indigo-400 mb-4"> | |
| <i data-feather="trending-down" class="w-12 h-12 mx-auto"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Missed Opportunities</h3> | |
| <p class="text-gray-300">Without visual representation, even brilliant concepts fail to secure funding.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Proof Section --> | |
| <section class="py-20 px-4"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16">Trailer Showcase</h2> | |
| <div class="mb-20"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h3 class="text-2xl font-bold">Psychological Thriller</h3> | |
| <span class="bg-green-500 text-white px-3 py-1 rounded-full text-sm font-semibold">Optioned</span> | |
| </div> | |
| <div class="aspect-w-16 aspect-h-9 bg-gray-800 rounded-lg overflow-hidden"> | |
| <iframe width="100%" height="100%" src="https://www.youtube.com/embed/dQw4w9WgXcQ?si=QzGZQzGzQzGzQzGz" title="Thriller Trailer" frameborder="0" allowfullscreen></iframe> | |
| </div> | |
| <p class="mt-4 text-gray-300 max-w-2xl">A mind-bending thriller about identity and deception. This trailer secured a development deal within 48 hours of submission.</p> | |
| </div> | |
| <div class="mb-20"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h3 class="text-2xl font-bold">Sci-Fi Adventure</h3> | |
| <span class="bg-green-500 text-white px-3 py-1 rounded-full text-sm font-semibold">Pre-Sold</span> | |
| </div> | |
| <div class="aspect-w-16 aspect-h-9 bg-gray-800 rounded-lg overflow-hidden"> | |
| <iframe width="100%" height="100%" src="https://www.youtube.com/embed/dQw4w9WgXcQ?si=QzGZQzGzQzGzQzGz" title="Sci-Fi Trailer" frameborder="0" allowfullscreen></iframe> | |
| </div> | |
| <p class="mt-4 text-gray-300 max-w-2xl">Set in a dystopian future, this trailer helped secure pre-sales worth $2.3M before principal photography began.</p> | |
| </div> | |
| <div> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h3 class="text-2xl font-bold">Character Drama</h3> | |
| <span class="bg-green-500 text-white px-3 py-1 rounded-full text-sm font-semibold">Festival Selection</span> | |
| </div> | |
| <div class="aspect-w-16 aspect-h-9 bg-gray-800 rounded-lg overflow-hidden"> | |
| <iframe width="100%" height="100%" src="https://www.youtube.com/embed/dQw4w9WgXcQ?si=QzGZQzGzQzGzQzGz" title="Drama Trailer" frameborder="0" allowfullscreen></iframe> | |
| </div> | |
| <p class="mt-4 text-gray-300 max-w-2xl">An intimate character study that earned a spot at Sundance after the trailer went viral on social media.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact-form" class="py-20 px-4 bg-gray-800"> | |
| <div class="max-w-2xl mx-auto"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Let's Bring Your Story to Life</h2> | |
| <p class="text-center text-gray-300 mb-12">Fill out this quick form and I'll reach out within 24 hours</p> | |
| <form id="trailer-form" class="space-y-6"> | |
| <div> | |
| <label for="name" class="block text-lg mb-2">Full Name</label> | |
| <input type="text" id="name" name="name" required class="w-full bg-gray-700 border border-gray-600 rounded-lg py-3 px-4 focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-lg mb-2">Email Address</label> | |
| <input type="email" id="email" name="email" required class="w-full bg-gray-700 border border-gray-600 rounded-lg py-3 px-4 focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| </div> | |
| <div> | |
| <label for="logline" class="block text-lg mb-2">Script Logline (1-2 sentences)</label> | |
| <textarea id="logline" name="logline" rows="3" required class="w-full bg-gray-700 border border-gray-600 rounded-lg py-3 px-4 focus:outline-none focus:ring-2 focus:ring-indigo-500"></textarea> | |
| </div> | |
| <div class="pt-4"> | |
| <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-4 px-6 rounded-lg text-lg transition-colors"> | |
| Send My Logline | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="py-10 px-4 border-t border-gray-700"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <p class="text-gray-400">© 2023 ScriptSpark Studio. All rights reserved.</p> | |
| </div> | |
| </footer> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |