Hugging Face's logo

Spaces:
wicwurm
/
scriptspark-studio
Running

App Files Community
scriptspark-studio
File size: 8,961 Bytes 
0a1d0f6
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
 
<!DOCTYPE html>
<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>