Ana Sayfa AI Eğitimler Projeler Araçlar
Vibe Kit / Prompt / Hero Sayfa Promptları

Premium Black Hero — Mobilya (Furniture) Theme

Mobilya/ev odaklı, siyah arkaplan, karakter karakter typing animasyonu. Liquid glass nav + glass cards.

Yazar: VibeCodingEx Team Custom ↑ 0 kopyalama 👁 0
Create a high-end, dark-themed hero section for a luxury furniture brand called 'Haven' using React and Tailwind CSS. The design must be responsive and follow these precise specifications:

1. Background & Layout:

Background: Implement a full-screen background video using the source: https://vibecodingex.com/public/video/mobilya.mp4. The video must be autoplay, loop, muted, and cover the entire viewport with object-cover.

Overlays: Set the video to 80% opacity. Add a dark linear gradient from the left (#0a0a0a to transparent) and a bottom-up gradient for readability.

Grid System: Add three thin vertical grid lines (white/10 opacity) at the 25%, 50%, and 75% marks across the screen (visible on desktop).

Central Glow: Place a large horizontal SVG ellipse glow in the center-top area with a warm amber/gold hue, using a 25px Gaussian blur filter.

2. The Liquid Glass Card:

Component: Create a 200x200px floating card positioned above the main headline, shifted exactly 50px upwards using translate-y-[-50px].

CSS Styling (Liquid Glass):
background: rgba(255, 255, 255, 0.01) with background-blend-mode: luminosity.
backdrop-filter: blur(4px).
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1).
Border Effect: A ::before pseudo-element with inset: 0, padding: 1.4px, and a 180-degree white linear gradient. Use -webkit-mask-composite: xor and mask-composite: exclude to create a sharp, high-end border frame.

Content: '[ 2025 ]' tag (14px), 'Crafted by Artisans' headline (18px, using Instrument Serif italic for 'Artisans'), and a small description (11px).

3. Hero Content & Typography:

Eyebrow: 'Premium Collection' in Plus Jakarta Sans, bold, 11px, color #d4a574.

Main Headline: 'ELEVATE YOUR LIVING SPACE.' in Inter Extra Bold, uppercase, tracking-tight. Scale from 40px (mobile) to 72px (desktop). The final period must be gold (#d4a574).

Description: 'Discover furniture that transforms your home...' in Inter, 14px, 70% white opacity, max-width 512px.

Primary CTA: 'Explore Collection' button with an ArrowRight icon. Rounded-full, background #d4a574, text #0a0a0a, uppercase, bold.

4. Global Navigation:

Header: Sticky/Absolute header with a white minimalist logo.

Desktop Menu: Links for 'COLLECTION', 'JOURNAL', 'ABOUT', 'CONTACT' in Inter, 16px. Hover state: #d4a574.

Mobile Menu: A functional hamburger menu that toggles a full-screen dark overlay.

5. Required Imports:

Fonts: Inter, Plus Jakarta Sans, and Instrument Serif (italic).
Icons: lucide-react (ArrowRight, Menu, X).
📸 Örnek Görsel

Tam boy görmek için tıkla ↗