VYBE — Streetwear Landing Page

Overview

A polished, interactive landing page for VYBE — a fictional streetwear brand. Built as a standalone HTML page with Tailwind CSS.

Key Features

• Overlapping Hero Layout — Brush-stroke typography overlaying a full-red product showcase with model image
• Trending Drops Grid — Product cards with hover-to-reveal Quick Add buttons
• Shop by Category — Full-bleed collection banners for menswear and womenswear
• Social Proof Section — Customer reviews with star ratings and verified buyer badges
• Newsletter Signup — Dark-themed "Join the Tribe" call-to-action
• Responsive Design — Mobile-first layout with Tailwind responsive classes

Tech Stack & Architecture

• Structural Layout: Single-file HTML5 architecture leveraging CSS Grid and Flexbox for asymmetric product card positioning.
• Utility Styling: Tailwind CSS for high-impact typography, dark-mode color palettes, and responsive breakpoints.
• Font & Asset Strategy: Google Fonts (Inter) with optimized display: swap to prevent FOIT (Flash of Invisible Text).
• Interactions: Pure vanilla JS event listeners for drop notification interactions and newsletter subscription validation.

Performance & Accessibility Highlights

• Sub-Second First Paint: Zero client-side hydration or framework bundles ensures lightning-fast LCP (Largest Contentful Paint) under 1.2s.
• High Contrast Aesthetic: Strict adherence to WCAG 2.1 AA text contrast requirements across bright red accents and deep slate backgrounds.
• Touch-Friendly Controls: Sized and spaced for effortless thumb navigation on smartphones, with explicit visual focus rings for keyboard users.

Explore the live page in the interactive VYBE Streetwear Demo.