
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.