1. The Visual Aesthetic: "Modern Noir Luxury"Primary Background: Deep Charcoal or Matte Black (avoid pure #000000; use a "rich black" like #1A1A1A).Accent Color: "Champagne Gold" or "Refined Brass." Use this for call-to-action buttons, thin borders, and icon outlines.Typography: * Headings: A sophisticated, high-contrast Serif (e.g., Playfair Display or Cinzel) to evoke "The Krest."Body Text: A clean, minimalist Sans-Serif (e.g., Montserrat or Inter) to evoke "The Key" (precision and logic).2. Homepage Structure (The User Journey)The Hero Section (Above the Fold)Background: A cinematic, slow-motion video loop. Start with the Dar es Salaam skyline at dusk, transitioning into a high-stakes corporate ballroom setup.Overlay: Your motto: "The Krest of Elite Service. The Key to Your Vision." in gold foil-effect lettering.CTA Button: A minimalist gold-bordered button that says: [Unlock Your Experience].The "Dual-Focus" SectionA split-screen layout or two large interactive cards.Left (Corporate): Image of a sleek boardroom or summit. Text: "ROI Engineering."Right (Social): Image of a candlelit luxury dinner on the Peninsula. Text: "Emotional Impact."Interaction: When you hover over one side, the image expands slightly, and the gold accents glow brighter.The Three Keys (Service Tiers)Use a horizontal three-card layout that looks like premium membership cards.The Essential Key: Silver/Steel accents.The Master Key: Soft Gold accents.The Golden Key: Deep Metallic Gold with a subtle "shimmer" animation.Feature: A "Compare Tiers" toggle that shows the 3D Visualization and VIP Concierge benefits exclusive to the Golden Key.3. Unique "Architectural" FeaturesLive Budget Dashboard Preview: A small graphic or animation showing a clean, professional interface. This reinforces your "Transparency" value proposition and makes you look more tech-forward than competitors.The 24-Hour Countdown: On your contact page, include a "Response Guarantee" timer that reinforces your 24-hour proposal promise.Blueprint Graphics: Use subtle, thin gold lines (like architectural floor plans) as background watermarks to reinforce the "Event Architecture" branding.4. Mobile ExperienceSince many elite clients in Dar es Salaam will browse via iPhone/Android, the mobile site must be "Thumb-Friendly":Sticky Header: A small gold "K&K" monogram that stays at the top.Fast Loading: High-res images must be optimized so the "luxury" doesn't feel "laggy."5. Suggested Page ListPageContent FocusThe Atelier (About)Evans’ leadership, the "No Contract, No Work" philosophy, and the Dar es Salaam heritage.The PortfolioHigh-resolution "Legacy Galleries" of past events (Corporate vs. Social).The ServicesDeep dive into the Three Keys and the ROI/Emotional Impact framework.InquiryA sophisticated multi-step form (Date, Location, Vision) rather than a basic contact box.A "Pro" Suggestion for the "Dar" Touch:Include a section titled "Beyond the CBD" featuring stunning photography of the Serengeti and Zanzibar. This positions you not just as a city planner, but as a master of Tanzanian luxury logistics.
5b84f8d verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>KeyKrest | Event Architects | Unlock Your Vision</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Montserrat:wght@300;400;600;800&display=swap" rel="stylesheet"> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| </head> | |
| <body> | |
| <!-- Hero Section --> | |
| <section class="hero"> | |
| <video autoplay muted loop class="hero-video"> | |
| <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" type="video/mp4"> | |
| </video> | |
| <div class="hero-overlay"></div> | |
| <div class="hero-content"> | |
| <h1 class="hero-motto headline shimmer-gold">The Krest of Elite Service.<br>The Key to Your Vision.</h1> | |
| <button class="btn-gold">Unlock Your Experience</button> | |
| </div> | |
| </section> | |
| <!-- Dual Focus Section --> | |
| <section class="section dual-focus"> | |
| <div class="container"> | |
| <div class="grid-2"> | |
| <div class="focus-card"> | |
| <img src="http://static.photos/business/1200x630/42" alt="Corporate Event" class="focus-image"> | |
| <div class="focus-overlay"> | |
| <h3 class="focus-title">ROI Engineering</h3> | |
| <p>Precision planning for measurable business outcomes</p> | |
| </div> | |
| </div> | |
| <div class="focus-card"> | |
| <img src="http://static.photos/wedding/1200x630/133" alt="Social Event" class="focus-image"> | |
| <div class="focus-overlay"> | |
| <h3 class="focus-title">Emotional Impact</h3> | |
| <p>Crafting unforgettable moments that resonate</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Three Keys Section --> | |
| <section class="section blueprint-bg"> | |
| <div class="container"> | |
| <h2 class="section-title headline">The Three Keys</h2> | |
| <div class="grid-3"> | |
| <div class="service-card"> | |
| <h3 class="gold-text">The Essential Key</h3> | |
| <p>Foundational event planning with core services and attention to detail.</p> | |
| <ul> | |
| <li>Venue selection</li> | |
| <li>Basic catering coordination</li> | |
| <li>Standard decor package</li> | |
| </ul> | |
| </div> | |
| <div class="service-card card-silver"> | |
| <h3 class="silver-text">The Master Key</h3> | |
| <p>Comprehensive event management with premium touches and dedicated support.</p> | |
| <ul> | |
| <li>All Essential services</li> | |
| <li>Premium vendor network</li> | |
| <li>Dedicated event coordinator</li> | |
| <li>Custom design elements</li> | |
| </ul> | |
| </div> | |
| <div class="service-card card-gold"> | |
| <h3 class="gold-text">The Golden Key</h3> | |
| <p>Bespoke luxury experiences with full-service concierge and exclusive benefits.</p> | |
| <ul> | |
| <li>All Master services</li> | |
| <li>Personal event architect</li> | |
| <li>Exclusive venue access</li> | |
| <li>VIP guest management</li> | |
| </ul> | |
| <button class="btn-gold" style="margin-top: 20px;">Compare Tiers</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Live Budget Dashboard Preview --> | |
| <section class="section"> | |
| <div class="container"> | |
| <h2 class="section-title headline">Transparent Planning</h2> | |
| <div style="background: rgba(30, 30, 30, 0.8); border: 1px solid rgba(230, 195, 146, 0.3); border-radius: 8px; padding: 30px; max-width: 800px; margin: 0 auto;"> | |
| <h3 class="gold-text" style="text-align: center; margin-bottom: 20px;">Live Budget Dashboard</h3> | |
| <div style="display: flex; justify-content: space-between; margin-bottom: 20px;"> | |
| <div> | |
| <p>Total Budget</p> | |
| <p class="gold-text" style="font-size: 1.5rem;">$50,000</p> | |
| </div> | |
| <div> | |
| <p>Spent</p> | |
| <p style="font-size: 1.5rem;">$32,500</p> | |
| </div> | |
| <div> | |
| <p>Remaining</p> | |
| <p style="font-size: 1.5rem;">$17,500</p> | |
| </div> | |
| </div> | |
| <div style="height: 20px; background: rgba(20, 20, 20, 0.8); border-radius: 10px; overflow: hidden;"> | |
| <div style="height: 100%; width: 65%; background: var(--champagne-gold);"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- 24-Hour Countdown --> | |
| <section class="section"> | |
| <div class="container"> | |
| <h2 class="section-title headline">24-Hour Response Guarantee</h2> | |
| <div class="countdown-container"> | |
| <p>We guarantee a response to all inquiries within 24 hours</p> | |
| <div class="countdown-timer"> | |
| <div class="countdown-item"> | |
| <div class="countdown-number" id="hours">24</div> | |
| <div class="countdown-label">Hours</div> | |
| </div> | |
| <div class="countdown-item"> | |
| <div class="countdown-number" id="minutes">00</div> | |
| <div class="countdown-label">Minutes</div> | |
| </div> | |
| <div class="countdown-item"> | |
| <div class="countdown-number" id="seconds">00</div> | |
| <div class="countdown-label">Seconds</div> | |
| </div> | |
| </div> | |
| <button class="btn-gold">Contact Us Today</button> | |
| </div> | |
| </div> | |
| </section> | |
| <script src="script.js"></script> | |
| <script> | |
| // Simple countdown implementation | |
| function updateCountdown() { | |
| const hoursEl = document.getElementById('hours'); | |
| const minutesEl = document.getElementById('minutes'); | |
| const secondsEl = document.getElementById('seconds'); | |
| let hours = 24; | |
| let minutes = 0; | |
| let seconds = 0; | |
| const interval = setInterval(() => { | |
| seconds--; | |
| if (seconds < 0) { | |
| seconds = 59; | |
| minutes--; | |
| if (minutes < 0) { | |
| minutes = 59; | |
| hours--; | |
| if (hours < 0) { | |
| hours = 24; | |
| } | |
| } | |
| } | |
| hoursEl.textContent = hours.toString().padStart(2, '0'); | |
| minutesEl.textContent = minutes.toString().padStart(2, '0'); | |
| secondsEl.textContent = seconds.toString().padStart(2, '0'); | |
| }, 1000); | |
| } | |
| updateCountdown(); | |
| </script> | |
| </body> | |
| </html> | |