Bicycle eShop Landing Page
Kliknij, aby powiększyć

Bicycle eShop Landing Page

Landing pages Claude 4 Sonnet Official Promptzy.Art Prompt

UI Description

Bicycle ecommerce page with glassmorphism effect

Full prompt

Create a beautiful, minimalist landing page for a modern company that sells premium bicycles. Use Tailwind CSS as the CSS framework. The visual design should follow glassmorphism principles — semi-transparent containers, subtle blurs, soft shadows, and elegant gradients. The landing page should include the following sections: Hero Section – Full-screen background image or video of a high-end bicycle in nature or urban landscape. – Overlay a glassmorphism-style content box with the company logo, a short tagline (e.g., "Engineered for Freedom"), and a bold CTA button ("Shop Now"). Featured Bikes Section – Display 3–4 of the company’s top-selling bikes using responsive card layouts. – Each card should use a glass effect with a product image, bike name, short description, price, and a button (“View Details”). Why Choose Us Section – Use icons + text in a 3-column layout to highlight key selling points (e.g., Lightweight Frames, Eco-Friendly Materials, 10-Year Warranty). Testimonials Section – Carousel or grid layout of customer testimonials, styled in semi-transparent glass cards with rounded corners. Newsletter Signup / CTA Banner – Glass panel with a subtle background blur and a call to action: "Join our bike-loving community – get 10% off your first ride." Footer – Minimal footer with navigation links, social media icons, and a copyright notice. Requirements: – Use Tailwind CSS for styling. – Use Google Fonts (e.g., Inter or Poppins) for a clean and modern typeface. – Include responsive design for mobile and desktop. – Apply glassmorphism (frosted glass effect) consistently across cards and panels using Tailwind + custom styles. – Ensure accessibility: semantic HTML5, alt texts for images, proper contrast, and keyboard-navigable buttons. Optional (if you want to go further): – Use Framer Motion or GSAP for smooth animations on scroll and hover. – Make the site SEO-ready with meta tags and structured layout. – Organize the code into reusable components if using a framework like React or Vue. Output everything in one clean HTML file using TailwindCDN (no build tools). Use placeholder images and placeholder text where necessary.