4FWEARS — E-commerce Landing Page

Overview

A polished, conversion-focused landing page for 4FWEARS — a fictional apparel brand. Built as a standalone HTML page with Tailwind CSS and vanilla JavaScript.

Key Features

• Overlapping Hero — Full-bleed model image on the right with layered headline and brand partner row (Adidas, Levi's, Nike, Zara)
• Identity Section — Decorative rotated shapes and overlapping polaroid-style images framing the value proposition
• Sweatshirt Collections — Asymmetric two-column product showcase with hover scale and arrow CTAs
• Bestseller Grid — Three-up product cards with hover-reveal add-to-cart buttons
• Featured Collections Grid — Mosaic layout for hoodie, pants, and shoes categories with hover zoom
• Testimonials Carousel — Dark-themed review cards with avatar badges and prev/next navigation
• Brand Story Video — Full-width video cover with play button overlay
• Newsletter Marquee — Infinite CSS keyframe scrolling CTA strip
• Demo Modal — Global click handler intercepts dummy links/buttons and routes to toorhamza.com portfolio
• Responsive Design — Mobile-first layout with Tailwind responsive breakpoints

Tech Stack & Architecture

• Core Markup: Semantic HTML5 (header, main, section, article, footer) structured for maximum accessibility and SEO crawler discoverability.
• Styling: Tailwind CSS with utility-first responsive modifiers (sm:, md:, lg:) handling dynamic fluid typography and grid shifts.
• Iconography & Fonts: FontAwesome 6 icons and Google Fonts (Plus Jakarta Sans) loaded with preconnect hints for optimized font display.
• Scripting: Pure vanilla JavaScript handling carousel navigation, modal traps, and micro-interactions with zero third-party framework dependencies.

Performance & Accessibility Highlights

• Near-Instant Load Time: Operating without heavy client-side JavaScript runtimes guarantees a First Contentful Paint (FCP) well under 0.8s on standard mobile connections.
• WCAG 2.1 AA Compliance: High contrast ratios (4.5:1 minimum) across text overlays, keyboard-accessible navigation buttons, and explicit ARIA labels on all interactive sliders and dialogs.
• Mobile-First Touch Architecture: Every interactive target satisfies the 44x44px minimum touch area requirement, ensuring seamless mobile usability without accidental misclicks.

You can preview the live experience directly in the interactive 4FWEARS Landing Page Demo.