Team Ai
Apppublic

DieteticRodri/ruby-bloom-studios

sourceHugging Faceupdated 8mo agoView on Hugging Face
0likes
index.html496 linesDownload Raw Back to root
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>