Add production-ready HyperFrames reel template for Phoenix Salon

2026-06-24 00:19:47 +00:00
parent 8cbfd66947
commit 82ca3a2fc3
1 changed files with 142 additions and 0 deletions
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Phoenix Salon Reel Template</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Playfair+Display:wght@700&display=swap');
+    
+    :root {
+      --salon-gold: #C5A26F;
+      --salon-dark: #2C2522;
+    }
+
+    body {
+      font-family: 'Inter', system_ui, sans-serif;
+    }
+
+    .heading-font {
+      font-family: 'Playfair Display', Georgia, serif;
+    }
+
+    .reel-container {
+      width: 1080px;
+      height: 1920px;
+      background: #1a1816;
+      position: relative;
+      overflow: hidden;
+      box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.4);
+    }
+
+    .caption {
+      font-size: 72px;
+      line-height: 1.1;
+      font-weight: 600;
+      color: white;
+      text-shadow: 0 4px 20px rgba(0,0,0,0.6);
+      padding: 0 60px;
+      text-align: center;
+    }
+
+    .caption-small {
+      font-size: 48px;
+      font-weight: 500;
+    }
+
+    .logo {
+      position: absolute;
+      bottom: 80px;
+      left: 50%;
+      transform: translateX(-50%);
+      font-size: 42px;
+      font-weight: 700;
+      color: #C5A26F;
+      letter-spacing: 4px;
+    }
+
+    .section {
+      position: absolute;
+      width: 100%;
+      padding: 0 80px;
+      box-sizing: border-box;
+    }
+  </style>
+</head>
+<body class="bg-zinc-950 flex items-center justify-center min-h-screen p-8">
+  
+  <!-- REEL PREVIEW -->
+  <div class="reel-container mx-auto" id="reel">
+    
+    <!-- Background Video / Image Placeholder -->
+    <div id="background" 
+         class="absolute inset-0 bg-cover bg-center"
+         style="background-image: url('https://picsum.photos/id/1011/1080/1920');">
+      <div class="absolute inset-0 bg-black/40"></div>
+    </div>
+
+    <!-- Top Branding -->
+    <div class="absolute top-0 left-0 right-0 p-8 flex justify-between items-center z-10">
+      <div class="flex items-center gap-x-3">
+        <div class="w-9 h-9 rounded-full bg-[#C5A26F] flex items-center justify-center">
+          <i class="fa-solid fa-spa text-[#2C2522] text-xl"></i>
+        </div>
+        <div>
+          <div class="text-white text-2xl font-semibold tracking-tight">PHOENIX</div>
+          <div class="text-[#C5A26F] text-xs -mt-1 tracking-[3px]">SALON & SPA</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Main Caption Area -->
+    <div class="section flex flex-col justify-center h-full z-20" style="top: 28%;">
+      
+      <!-- Hook Line -->
+      <div id="hook" 
+           class="caption heading-font mb-6 opacity-0"
+           style="animation: fadeUp 0.6s forwards 0.3s;">
+        Your scalp deserves
+        <span class="text-[#C5A26F]">this.</span>
+      </div>
+
+      <!-- Body Text -->
+      <div id="body-text" 
+           class="caption caption-small opacity-0"
+           style="animation: fadeUp 0.6s forwards 0.9s; max-width: 820px; margin: 0 auto;">
+        60 seconds to healthier hair this summer
+      </div>
+
+    </div>
+
+    <!-- Bottom CTA -->
+    <div class="absolute bottom-0 left-0 right-0 p-8 z-20">
+      <div class="flex flex-col items-center">
+        <div id="cta" 
+             class="bg-white text-[#2C2522] px-10 py-4 rounded-2xl font-semibold text-3xl tracking-tight mb-4 opacity-0"
+             style="animation: fadeUp 0.5s forwards 1.6s;">
+          Book now
+        </div>
+        <div class="text-white/70 text-xl">Cameron Park • Placerville</div>
+      </div>
+    </div>
+
+    <!-- Logo -->
+    <div class="logo tracking-[6px] opacity-90">PHOENIX</div>
+
+  </div>
+
+  <script>
+    // Tailwind script for any dynamic classes if needed
+    function updateReelContent(hook, body, cta) {
+      document.getElementById('hook').innerHTML = hook;
+      document.getElementById('body-text').innerHTML = body;
+      document.getElementById('cta').innerHTML = cta;
+    }
+
+    // Example: updateReelContent("Summer hair rescue", "Start with a scalp treatment", "Book your spot");
+  </script>
+
+</body>
+</html>