DieteticRodri/ruby-bloom-studios
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Ruby Bloom Studios | Creative Marketing Agency</title>7 <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🌹</text></svg>">8 <link rel="stylesheet" href="style.css">9 <script src="https://cdn.tailwindcss.com"></script>10 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>11 <script>12 tailwind.config = {13 darkMode: 'class',14 theme: {15 extend: {16 colors: {17 primary: {18 50: '#fef2f2',19 100: '#fee2e2',20 200: '#fecaca',21 300: '#fca5a5',22 400: '#f87171',23 500: '#ef4444',24 600: '#dc2626',25 700: '#b91c1c',26 800: '#991b1b',27 900: '#7f1d1d',28 },29 secondary: {30 50: '#fff7ed',31 100: '#ffedd5',32 200: '#fed7aa',33 300: '#fdba74',34 400: '#fb923c',35 500: '#f97316',36 600: '#ea580c',37 700: '#c2410c',38 800: '#9a3412',39 900: '#7c2d12',40 }41 }42 }43 }44 }45 </script>46</head>47<body class="bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-100 transition-colors duration-300">48 <custom-navbar></custom-navbar>49 50 <!-- Hero Section -->51 <section class="relative min-h-screen flex items-center overflow-hidden">52 <!-- Animated Background Elements -->53 <div class="absolute inset-0 overflow-hidden">54 <div class="absolute -top-40 -right-40 w-96 h-96 bg-primary-500/10 rounded-full blur-3xl"></div>55 <div class="absolute top-1/2 -left-20 w-72 h-72 bg-secondary-500/10 rounded-full blur-3xl"></div>56 <div class="absolute bottom-0 right-1/4 w-80 h-80 bg-primary-500/5 rounded-full blur-3xl"></div>57 </div>58 59 <div class="container mx-auto px-6 relative z-10">60 <div class="max-w-4xl mx-auto text-center">61 <div class="inline-flex items-center gap-2 bg-primary-50 dark:bg-primary-900/30 px-4 py-2 rounded-full mb-6 border border-primary-200 dark:border-primary-800">62 <span class="w-2 h-2 bg-primary-500 rounded-full animate-pulse"></span>63 <span class="text-sm font-medium text-primary-700 dark:text-primary-300">Award-Winning Agency 2024</span>64 </div>65 <h1 class="text-5xl md:text-7xl font-bold mb-6 leading-tight">66 Bloom Your Brand with 67 <span class="bg-gradient-to-r from-primary-500 to-secondary-500 bg-clip-text text-transparent">Creative Fire</span>68 </h1>69 <p class="text-xl text-gray-600 dark:text-gray-300 mb-10 max-w-2xl mx-auto">70 We transform businesses through strategic marketing, stunning design, and compelling storytelling that captivates your audience.71 </p>72 <div class="flex flex-col sm:flex-row gap-4 justify-center">73 <a href="#contact" class="inline-flex items-center justify-center gap-2 bg-primary-600 hover:bg-primary-700 text-white px-8 py-4 rounded-full font-semibold transition-all hover:scale-105 hover:shadow-lg hover:shadow-primary-500/25">74 <span>Start Your Journey</span>75 <i data-feather="arrow-right" class="w-5 h-5"></i>76 </a>77 <a href="#portfolio" class="inline-flex items-center justify-center gap-2 bg-white dark:bg-gray-800 text-gray-800 dark:text-white border-2 border-gray-200 dark:border-gray-700 hover:border-primary-500 dark:hover:border-primary-500 px-8 py-4 rounded-full font-semibold transition-all">78 <span>View Our Work</span>79 <i data-feather="play" class="w-5 h-5"></i>80 </a>81 </div>82 83 <!-- Stats -->84 <div class="grid grid-cols-3 gap-8 mt-16 pt-16 border-t border-gray-200 dark:border-gray-800">85 <div>86 <div class="text-4xl font-bold text-primary-600 dark:text-primary-400">150+</div>87 <div class="text-sm text-gray-500 dark:text-gray-400 mt-1">Projects Delivered</div>88 </div>89 <div>90 <div class="text-4xl font-bold text-primary-600 dark:text-primary-400">98%</div>91 <div class="text-sm text-gray-500 dark:text-gray-400 mt-1">Client Satisfaction</div>92 </div>93 <div>94 <div class="text-4xl font-bold text-primary-600 dark:text-primary-400">12</div>95 <div class="text-sm text-gray-500 dark:text-gray-400 mt-1">Years Experience</div>96 </div>97 </div>98 </div>99 </div>100 101 <!-- Scroll Indicator -->102 <div class="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">103 <i data-feather="chevron-down" class="w-6 h-6 text-gray-400 dark:text-gray-500"></i>104 </div>105 </section>106 107 <!-- Services Section -->108 <section id="services" class="py-24 bg-gray-50 dark:bg-gray-800/50">109 <div class="container mx-auto px-6">110 <div class="max-w-2xl mx-auto text-center mb-16">111 <span class="text-primary-600 dark:text-primary-400 font-semibold tracking-wider uppercase text-sm">Our Services</span>112 <h2 class="text-4xl md:text-5xl font-bold mt-3 mb-4">What We Do Best</h2>113 <p class="text-gray-600 dark:text-gray-300 text-lg">Comprehensive marketing solutions tailored to elevate your brand and drive meaningful results.</p>114 </div>115 116 <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">117 <!-- Service Card 1 -->118 <div class="service-card group bg-white dark:bg-gray-800 rounded-2xl p-8 transition-all duration-500 hover:-translate-y-2 border border-gray-100 dark:border-gray-700 hover:border-primary-200 dark:hover:border-primary-700 relative overflow-hidden">119 <div class="absolute top-0 right-0 w-32 h-32 bg-primary-500/5 rounded-full -translate-y-16 translate-x-16 group-hover:scale-150 transition-transform duration-500"></div>120 <div class="w-14 h-14 bg-primary-100 dark:bg-primary-900/30 rounded-xl flex items-center justify-center mb-6 group-hover:bg-primary-500 transition-colors duration-300">121 <i data-feather="target" class="w-7 h-7 text-primary-600 dark:text-primary-400 group-hover:text-white transition-colors"></i>122 </div>123 <h3 class="text-xl font-bold mb-3">Brand Strategy</h3>124 <p class="text-gray-600 dark:text-gray-400 mb-4 leading-relaxed">Strategic positioning and brand architecture that differentiates you in the market and resonates with your target audience.</p>125 <a href="#contact" class="inline-flex items-center gap-2 text-primary-600 dark:text-primary-400 font-semibold group-hover:gap-3 transition-all">126 <span>Learn More</span>127 <i data-feather="arrow-right" class="w-4 h-4"></i>128 </a>129 </div>130 131 <!-- Service Card 2 -->132 <div class="service-card group bg-white dark:bg-gray-800 rounded-2xl p-8 transition-all duration-500 hover:-translate-y-2 border border-gray-100 dark:border-gray-700 hover:border-primary-200 dark:hover:border-primary-700 relative overflow-hidden">133 <div class="absolute top-0 right-0 w-32 h-32 bg-secondary-500/5 rounded-full -translate-y-16 translate-x-16 group-hover:scale-150 transition-transform duration-500"></div>134 <div class="w-14 h-14 bg-secondary-100 dark:bg-secondary-900/30 rounded-xl flex items-center justify-center mb-6 group-hover:bg-secondary-500 transition-colors duration-300">135 <i data-feather="pen-tool" class="w-7 h-7 text-secondary-600 dark:text-secondary-400 group-hover:text-white transition-colors"></i>136 </div>137 <h3 class="text-xl font-bold mb-3">Creative Design</h3>138 <p class="text-gray-600 dark:text-gray-400 mb-4 leading-relaxed">Visually stunning designs from logos to complete brand identities that capture attention and communicate your values.</p>139 <a href="#contact" class="inline-flex items-center gap-2 text-primary-600 dark:text-primary-400 font-semibold group-hover:gap-3 transition-all">140 <span>Learn More</span>141 <i data-feather="arrow-right" class="w-4 h-4"></i>142 </a>143 </div>144 145 <!-- Service Card 3 -->146 <div class="service-card group bg-white dark:bg-gray-800 rounded-2xl p-8 transition-all duration-500 hover:-translate-y-2 border border-gray-100 dark:border-gray-700 hover:border-primary-200 dark:hover:border-primary-700 relative overflow-hidden">147 <div class="absolute top-0 right-0 w-32 h-32 bg-primary-500/5 rounded-full -translate-y-16 translate-x-16 group-hover:scale-150 transition-transform duration-500"></div>148 <div class="w-14 h-14 bg-primary-100 dark:bg-primary-900/30 rounded-xl flex items-center justify-center mb-6 group-hover:bg-primary-500 transition-colors duration-300">149 <i data-feather="share-2" class="w-7 h-7 text-primary-600 dark:text-primary-400 group-hover:text-white transition-colors"></i>150 </div>151 <h3 class="text-xl font-bold mb-3">Social Media</h3>152 <p class="text-gray-600 dark:text-gray-400 mb-4 leading-relaxed">Engaging content strategies and community management that builds genuine connections and drives platform growth.</p>153 <a href="#contact" class="inline-flex items-center gap-2 text-primary-600 dark:text-primary-400 font-semibold group-hover:gap-3 transition-all">154 <span>Learn More</span>155 <i data-feather="arrow-right" class="w-4 h-4"></i>156 </a>157 </div>158 159 <!-- Service Card 4 -->160 <div class="service-card group bg-white dark:bg-gray-800 rounded-2xl p-8 transition-all duration-500 hover:-translate-y-2 border border-gray-100 dark:border-gray-700 hover:border-primary-200 dark:hover:border-primary-700 relative overflow-hidden">161 <div class="absolute top-0 right-0 w-32 h-32 bg-secondary-500/5 rounded-full -translate-y-16 translate-x-16 group-hover:scale-150 transition-transform duration-500"></div>162 <div class="w-14 h-14 bg-secondary-100 dark:bg-secondary-900/30 rounded-xl flex items-center justify-center mb-6 group-hover:bg-secondary-500 transition-colors duration-300">163 <i data-feather="bar-chart-2" class="w-7 h-7 text-secondary-600 dark:text-secondary-400 group-hover:text-white transition-colors"></i>164 </div>165 <h3 class="text-xl font-bold mb-3">Digital Marketing</h3>166 <p class="text-gray-600 dark:text-gray-400 mb-4 leading-relaxed">Data-driven campaigns across SEO, PPC, and display advertising that maximize ROI and accelerate growth.</p>167 <a href="#contact" class="inline-flex items-center gap-2 text-primary-600 dark:text-primary-400 font-semibold group-hover:gap-3 transition-all">168 <span>Learn More</span>169 <i data-feather="arrow-right" class="w-4 h-4"></i>170 </a>171 </div>172 173 <!-- Service Card 5 -->174 <div class="service-card group bg-white dark:bg-gray-800 rounded-2xl p-8 transition-all duration-500 hover:-translate-y-2 border border-gray-100 dark:border-gray-700 hover:border-primary-200 dark:hover:border-primary-700 relative overflow-hidden">175 <div class="absolute top-0 right-0 w-32 h-32 bg-primary-500/5 rounded-full -translate-y-16 translate-x-16 group-hover:scale-150 transition-transform duration-500"></div>176 <div class="w-14 h-14 bg-primary-100 dark:bg-primary-900/30 rounded-xl flex items-center justify-center mb-6 group-hover:bg-primary-500 transition-colors duration-300">177 <i data-feather="video" class="w-7 h-7 text-primary-600 dark:text-primary-400 group-hover:text-white transition-colors"></i>178 </div>179 <h3 class="text-xl font-bold mb-3">Video Production</h3>180 <p class="text-gray-600 dark:text-gray-400 mb-4 leading-relaxed">Cinematic storytelling from concept to final cut, creating compelling video content that moves audiences.</p>181 <a href="#contact" class="inline-flex items-center gap-2 text-primary-600 dark:text-primary-400 font-semibold group-hover:gap-3 transition-all">182 <span>Learn More</span>183 <i data-feather="arrow-right" class="w-4 h-4"></i>184 </a>185 </div>186 187 <!-- Service Card 6 -->188 <div class="service-card group bg-white dark:bg-gray-800 rounded-2xl p-8 transition-all duration-500 hover:-translate-y-2 border border-gray-100 dark:border-gray-700 hover:border-primary-200 dark:hover:border-primary-700 relative overflow-hidden">189 <div class="absolute top-0 right-0 w-32 h-32 bg-secondary-500/5 rounded-full -translate-y-16 translate-x-16 group-hover:scale-150 transition-transform duration-500"></div>190 <div class="w-14 h-14 bg-secondary-100 dark:bg-secondary-900/30 rounded-xl flex items-center justify-center mb-6 group-hover:bg-secondary-500 transition-colors duration-300">191 <i data-feather="code" class="w-7 h-7 text-secondary-600 dark:text-secondary-400 group-hover:text-white transition-colors"></i>192 </div>193 <h3 class="text-xl font-bold mb-3">Web Development</h3>194 <p class="text-gray-600 dark:text-gray-400 mb-4 leading-relaxed">High-performance websites and applications with exceptional user experiences that convert visitors into customers.</p>195 <a href="#contact" class="inline-flex items-center gap-2 text-primary-600 dark:text-primary-400 font-semibold group-hover:gap-3 transition-all">196 <span>Learn More</span>197 <i data-feather="arrow-right" class="w-4 h-4"></i>198 </a>199 </div>200 </div>201 </div>202 </section>203 204 <!-- Video Section -->205 <section id="video" class="py-24 relative overflow-hidden">206 <!-- Background Pattern -->207 <div class="absolute inset-0 bg-primary-600">208 <div class="absolute inset-0 opacity-10" style="background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0); background-size: 40px 40px;"></div>209 </div>210 211 <div class="container mx-auto px-6 relative z-10">212 <div class="max-w-4xl mx-auto text-center mb-12">213 <span class="text-primary-100 font-semibold tracking-wider uppercase text-sm">Behind The Scenes</span>214 <h2 class="text-4xl md:text-5xl font-bold mt-3 mb-4 text-white">See How We Create Magic</h2>215 <p class="text-primary-100 text-lg">Take a glimpse into our creative process and see why brands trust us with their stories.</p>216 </div>217 218 <!-- Video Container -->219 <div class="relative max-w-5xl mx-auto">220 <div class="relative aspect-video rounded-3xl overflow-hidden shadow-2xl shadow-black/30 group">221 <!-- Video Thumbnail -->222 <img src="http://static.photos/workspace/1200x630/42" alt="Video Thumbnail" id="videoThumbnail" class="w-full h-full object-cover">223 224 <!-- Play Overlay -->225 <div class="absolute inset-0 bg-black/40 flex items-center justify-center group-hover:bg-black/30 transition-colors cursor-pointer" id="playOverlay">226 <div class="w-24 h-24 bg-white rounded-full flex items-center justify-center group-hover:scale-110 transition-transform shadow-lg">227 <i data-feather="play" class="w-10 h-10 text-primary-600 ml-1 fill-current"></i>228 </div>229 </div>230 231 <!-- Actual Video (Hidden initially) -->232 <video id="showreelVideo" class="absolute inset-0 w-full h-full object-cover hidden" controls poster="http://static.photos/workspace/1200x630/42">233 <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">234 Your browser does not support the video tag.235 </video>236 </div>237 238 <!-- Floating Cards -->239 <div class="absolute -bottom-6 -left-6 bg-white dark:bg-gray-800 p-4 rounded-2xl shadow-xl hidden md:block animate-float-slow">240 <div class="flex items-center gap-3">241 <div class="w-12 h-12 bg-green-100 dark:bg-green-900/30 rounded-xl flex items-center justify-center">242 <i data-feather="trending-up" class="w-6 h-6 text-green-600 dark:text-green-400"></i>243 </div>244 <div>245 <div class="text-2xl font-bold text-gray-900 dark:text-white">340%</div>246 <div class="text-sm text-gray-500 dark:text-gray-400">Avg. ROI Increase</div>247 </div>248 </div>249 </div>250 251 <div class="absolute -top-6 -right-6 bg-white dark:bg-gray-800 p-4 rounded-2xl shadow-xl hidden md:block animate-float">252 <div class="flex items-center gap-3">253 <div class="w-12 h-12 bg-primary-100 dark:bg-primary-900/30 rounded-xl flex items-center justify-center">254 <i data-feather="heart" class="w-6 h-6 text-primary-600 dark:text-primary-400"></i>255 </div>256 <div>257 <div class="text-2xl font-bold text-gray-900 dark:text-white">2.5M+</div>258 <div class="text-sm text-gray-500 dark:text-gray-400">Lives Impacted</div>259 </div>260 </div>261 </div>262 </div>263 </div>264 </section>265 266 <!-- Portfolio Section -->267 <section id="portfolio" class="py-24 bg-white dark:bg-gray-900">268 <div class="container mx-auto px-6">269 <div class="max-w-2xl mx-auto text-center mb-12">270 <span class="text-primary-600 dark:text-primary-400 font-semibold tracking-wider uppercase text-sm">Our Portfolio</span>271 <h2 class="text-4xl md:text-5xl font-bold mt-3 mb-4">Selected Works</h2>272 <p class="text-gray-600 dark:text-gray-300 text-lg">A curated selection of our most impactful projects across industries.</p>273 </div>274 275 <!-- Filter Buttons -->276 <div class="flex flex-wrap justify-center gap-3 mb-12">277 <button class="filter-btn active px-6 py-2 rounded-full font-medium transition-all bg-primary-600 text-white" data-filter="all">All Projects</button>278 <button class="filter-btn px-6 py-2 rounded-full font-medium transition-all bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300 hover:bg-primary-100 dark:hover:bg-primary-900/40 hover:text-primary-600 dark:hover:text-primary-400" data-filter="branding">Branding</button>279 <button class="filter-btn px-6 py-2 rounded-full font-medium transition-all bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300 hover:bg-primary-100 dark:hover:bg-primary-900/40 hover:text-primary-600 dark:hover:text-primary-400" data-filter="digital">Digital</button>280 <button class="filter-btn px-6 py-2 rounded-full font-medium transition-all bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300 hover:bg-primary-100 dark:hover:bg-primary-900/40 hover:text-primary-600 dark:hover:text-primary-400" data-filter="video">Video</button>281 </div>282 283 <!-- Portfolio Grid -->284 <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8" id="portfolioGrid">285 <!-- Portfolio Item 1 -->286 <div class="portfolio-item group relative rounded-2xl overflow-hidden cursor-pointer" data-category="branding">287 <img src="http://static.photos/cosmetic/640x360/88" alt="Luxe Beauty Rebrand" class="w-full h-80 object-cover transition-transform duration-700 group-hover:scale-110">288 <div class="absolute inset-0 bg-gradient-to-t from-primary-900/90 via-primary-900/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">289 <span class="text-primary-300 text-sm font-medium mb-1">Branding</span>290 <h3 class="text-2xl font-bold text-white mb-2">Luxe Beauty Rebrand</h3>291 <p class="text-gray-200 text-sm mb-4">Complete brand identity overhaul for premium cosmetics line</p>292 <button class="inline-flex items-center gap-2 text-white font-semibold">293 <span>View Case Study</span>294 <i data-feather="arrow-right" class="w-4 h-4"></i>295 </button>296 </div>297 </div>298 299 <!-- Portfolio Item 2 -->300 <div class="portfolio-item group relative rounded-2xl overflow-hidden cursor-pointer" data-category="digital">301 <img src="http://static.photos/technology/640x360/15" alt="TechFlow Platform" class="w-full h-80 object-cover transition-transform duration-700 group-hover:scale-110">302 <div class="absolute inset-0 bg-gradient-to-t from-primary-900/90 via-primary-900/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">303 <span class="text-primary-300 text-sm font-medium mb-1">Digital</span>304 <h3 class="text-2xl font-bold text-white mb-2">TechFlow Platform</h3>305 <p class="text-gray-200 text-sm mb-4">SaaS marketing strategy and product launch campaign</p>306 <button class="inline-flex items-center gap-2 text-white font-semibold">307 <span>View Case Study</span>308 <i data-feather="arrow-right" class="w-4 h-4"></i>309 </button>310 </div>311 </div>312 313 <!-- Portfolio Item 3 -->314 <div class="portfolio-item group relative rounded-2xl overflow-hidden cursor-pointer" data-category="video">315 <img src="http://static.photos/food/640x360/92" alt="Gourmet Kitchen Series" class="w-full h-80 object-cover transition-transform duration-700 group-hover:scale-110">316 <div class="absolute inset-0 bg-gradient-to-t from-primary-900/90 via-primary-900/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">317 <span class="text-primary-300 text-sm font-medium mb-1">Video</span>318 <h3 class="text-2xl font-bold text-white mb-2">Gourmet Kitchen Series</h3>319 <p class="text-gray-200 text-sm mb-4">12-episode cooking show production and distribution</p>320 <button class="inline-flex items-center gap-2 text-white font-semibold">321 <span>View Case Study</span>322 <i data-feather="arrow-right" class="w-4 h-4"></i>323 </button>324 </div>325 </div>326 327 <!-- Portfolio Item 4 -->328 <div class="portfolio-item group relative rounded-2xl overflow-hidden cursor-pointer" data-category="branding">329 <img src="http://static.photos/automotive/640x360/27" alt="Velocity Motors Launch" class="w-full h-80 object-cover transition-transform duration-700 group-hover:scale-110">330 <div class="absolute inset-0 bg-gradient-to-t from-primary-900/90 via-primary-900/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">331 <span class="text-primary-300 text-sm font-medium mb-1">Branding</span>332 <h3 class="text-2xl font-bold text-white mb-2">Velocity Motors Launch</h3>333 <p class="text-gray-200 text-sm mb-4">Electric vehicle brand creation and market entry strategy</p>334 <button class="inline-flex items-center gap-2 text-white font-semibold">335 <span>View Case Study</span>336 <i data-feather="arrow-right" class="w-4 h-4"></i>337 </button>338 </div>339 </div>340 341 <!-- Portfolio Item 5 -->342 <div class="portfolio-item group relative rounded-2xl overflow-hidden cursor-pointer" data-category="digital">343 <img src="http://static.photos/finance/640x360/63" alt="WealthWise App" class="w-full h-80 object-cover transition-transform duration-700 group-hover:scale-110">344 <div class="absolute inset-0 bg-gradient-to-t from-primary-900/90 via-primary-900/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">345 <span class="text-primary-300 text-sm font-medium mb-1">Digital</span>346 <h3 class="text-2xl font-bold text-white mb-2">WealthWise App</h3>347 <p class="text-gray-200 text-sm mb-4">Fintech app UX design and go-to-market campaign</p>348 <button class="inline-flex items-center gap-2 text-white font-semibold">349 <span>View Case Study</span>350 <i data-feather="arrow-right" class="w-4 h-4"></i>351 </button>352 </div>353 </div>354 355 <!-- Portfolio Item 6 -->356 <div class="portfolio-item group relative rounded-2xl overflow-hidden cursor-pointer" data-category="video">357 <img src="http://static.photos/travel/640x360/55" alt="Wanderlust Documentary" class="w-full h-80 object-cover transition-transform duration-700 group-hover:scale-110">358 <div class="absolute inset-0 bg-gradient-to-t from-primary-900/90 via-primary-900/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">359 <span class="text-primary-300 text-sm font-medium mb-1">Video</span>360 <h3 class="text-2xl font-bold text-white mb-2">Wanderlust Documentary</h3>361 <p class="text-gray-200 text-sm mb-4">Feature-length travel documentary for streaming platform</p>362 <button class="inline-flex items-center gap-2 text-white font-semibold">363 <span>View Case Study</span>364 <i data-feather="arrow-right" class="w-4 h-4"></i>365 </button>366 </div>367 </div>368 </div>369 370 <!-- View All Button -->371 <div class="text-center mt-12">372 <a href="#contact" class="inline-flex items-center gap-2 border-2 border-gray-800 dark:border-gray-200 text-gray-800 dark:text-white px-8 py-4 rounded-full font-semibold hover:bg-gray-800 hover:text-white dark:hover:bg-white dark:hover:text-gray-900 transition-all">373 <span>View All Projects</span>374 <i data-feather="arrow-right" class="w-5 h-5"></i>375 </a>376 </div>377 </div>378 </section>379 380 <!-- Testimonials Section -->381 <section class="py-24 bg-gray-50 dark:bg-gray-800/50 overflow-hidden">382 <div class="container mx-auto px-6">383 <div class="max-w-2xl mx-auto text-center mb-16">384 <span class="text-primary-600 dark:text-primary-400 font-semibold tracking-wider uppercase text-sm">Testimonials</span>385 <h2 class="text-4xl md:text-5xl font-bold mt-3 mb-4">Client Love</h2>386 </div>387 388 <!-- Testimonial Slider -->389 <div class="relative max-w-4xl mx-auto">390 <div class="testimonial-slider" id="testimonialSlider">391 <!-- Testimonial 1 -->392 <div class="testimonial-slide active">393 <div class="bg-white dark:bg-gray-800 rounded-3xl p-8 md:p-12 shadow-xl">394 <div class="flex items-center gap-1 mb-6">395 <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current"></i>396 <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current"></i>397 <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current"></i>398 <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current"></i>399 <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current"></i>400 </div>401 <p class="text-xl md:text-2xl text-gray-700 dark:text-gray-200 leading-relaxed mb-8">"Ruby Bloom transformed our entire brand presence. Their strategic approach and creative execution exceeded all expectations. Our engagement increased by 400% within months."</p>402 <div class="flex items-center gap-4">403 <img src="http://static.photos/people/200x200/33" alt="Sarah Chen" class="w-16 h-16 rounded-full object-cover">404 <div>405 <div class="font-bold text-lg">Sarah Chen</div>406 <div class="text-gray-500 dark:text-gray-400">CEO, TechFlow Inc.</div>407 </div>408 </div>409 </div>410 </div>411 412 <!-- Testimonial 2 -->413 <div class="testimonial-slide">414 <div class="bg-white dark:bg-gray-800 rounded-3xl p-8 md:p-12 shadow-xl">415 <div class="flex items-center gap-1 mb-6">416 <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current"></i>417 <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current"></i>418 <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current"></i>419 <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current"></i>420 <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current"></i>421 </div>422 <p class="text-xl md:text-2xl text-gray-700 dark:text-gray-200 leading-relaxed mb-8">"The video production team at Ruby Bloom is world-class. They captured our brand story with such authenticity that our customers truly connected with our mission."</p>423 <div class="flex items-center gap-4">424 <img src="http://static.photos/people/200x200/67" alt="Marcus Johnson" class="w-16 h-16 rounded-full object-cover">425 <div>426 <div class="font-bold text-lg">Marcus Johnson</div>427 <div class="text-gray-500 dark:text-gray-400">Founder, Gourmet Kitchen</div>428 </div>429 </div>430 </div>431 </div>432 433 <!-- Testimonial 3 -->434 <div class="testimonial-slide">435 <div class="bg-white dark:bg-gray-800 rounded-3xl p-8 md:p-12 shadow-xl">436 <div class="flex items-center gap-1 mb-6">437 <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current"></i>438 <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current"></i>439 <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current"></i>440 <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current"></i>441 <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current"></i>442 </div>443 <p class="text-xl md:text-2xl text-gray-700 dark:text-gray-200 leading-relaxed mb-8">"Working with Ruby Bloom felt like having an in-house team. They understood our vision immediately and delivered results that drove real business growth."</p>444 <div class="flex items-center gap-4">445 <img src="http://static.photos/people/200x200/91" alt="Elena Rodriguez" class="w-16 h-16 rounded-full object-cover">446 <div>447 <div class="font-bold text-lg">Elena Rodriguez</div>448 <div class="text-gray-500 dark:text-gray-400">CMO, Velocity Motors</div>449 </div>450 </div>451 </div>452 </div>453 </div>454 455 <!-- Slider Controls -->456 <div class="flex justify-center gap-3 mt-8">457 <button class="slider-dot active w-3 h-3 rounded-full bg-gray-300 dark:bg-gray-600 transition-colors" data-index="0"></button>458 <button class="slider-dot w-3 h-3 rounded-full bg-gray-300 dark:bg-gray-600 transition-colors" data-index="1"></button>459 <button class="slider-dot w-3 h-3 rounded-full bg-gray-300 dark:bg-gray-600 transition-colors" data-index="2"></button>460 </div>461 </div>462 </div>463 </section>464 465 <!-- CTA Section -->466 <section id="contact" class="py-24 relative overflow-hidden">467 <div class="absolute inset-0 bg-gradient-to-br from-primary-600 to-secondary-600"></div>468 <div class="absolute inset-0 opacity-20" style="background-image: url('data:image/svg+xml,%3Csvg width=%2260%22 height=%2260%22 viewBox=%220 0 60 60%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg fill=%22none%22 fill-rule=%22evenodd%22%3E%3Cg fill=%22%23ffffff%22 fill-opacity=%220.4%22%3E%3Cpath d=%22M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');"></div>469 470 <div class="container mx-auto px-6 relative z-10 text-center">471 <h2 class="text-4xl md:text-6xl font-bold text-white mb-6">Ready to Bloom?</h2>472 <p class="text-xl text-primary-100 max-w-2xl mx-auto mb-10">Let's create something extraordinary together. Start your brand transformation journey today.</p>473 <div class="flex flex-col sm:flex-row gap-4 justify-center">474 <a href="mailto:hello@rubybloom.studio" class="inline-flex items-center justify-center gap-2 bg-white text-primary-600 px-8 py-4 rounded-full font-bold hover:bg-gray-100 transition-all hover:scale-105">475 <i data-feather="mail" class="w-5 h-5"></i>476 <span>Get In Touch</span>477 </a>478 <a href="tel:+1234567890" class="inline-flex items-center justify-center gap-2 bg-primary-700 text-white px-8 py-4 rounded-full font-semibold hover:bg-primary-800 transition-all border-2 border-primary-500">479 <i data-feather="phone" class="w-5 h-5"></i>480 <span>Schedule a Call</span>481 </a>482 </div>483 </div>484 </section>485 486 <custom-footer></custom-footer>487 488 <!-- Scripts -->489 <script src="components/navbar.js"></script>490 <script src="components/footer.js"></script>491 <script src="script.js"></script>492 <script src="https://unpkg.com/feather-icons"></script>493 <script>feather.replace();</script>494<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>495</body>496</html>