1/3
"Build a bilingual product landing page for “ÚSTECKÁ EDICE”, a premium modern electric bike designed for urban riders, creators, commuters, and people who move through the city with intention.
Use React, Tailwind CSS, Framer Motion for all animations, and Lenis for smooth scroll.
The website must support two languages: English and Czech. Add a clean language switcher in the navigation: EN / CZ. The English version should be the default language. All main content, navigation labels, CTA buttons, product specifications, and section headlines must be available in both languages.
Product concept:
ÚSTECKÁ EDICE is not just an e-bike. It is a modern mobility object inspired by urban architecture, industrial landscapes, sharp city lines, the river, concrete, steel, black asphalt, early morning light, and the raw elegance of Northern Bohemia. The product should feel premium, technical, minimal, powerful, and local without becoming touristy or cliché.
Visual language:
Dark cinematic surfaces with a near-black base (
#0a0a0a), deep graphite, matte charcoal, brushed metal, and one distinctive electric accent color inspired by amber streetlights, sodium lamps, or electric copper. Use the accent color sparingly and intentionally as light, reflection, UI highlight, and call-to-action energy.
The bike should be the hero object. It should appear as if floating or standing in controlled studio darkness, lit with dramatic side lighting and soft reflections. The visual mood should feel like a luxury automotive launch, a high-end e-bike campaign, and an editorial design piece combined.
Avoid childish cycling visuals, generic outdoor stock photography, colorful sports branding, cheap eco clichés, gradients, noisy backgrounds, unnecessary decoration, and template-like sections. This should feel like a product page created by a luxury mobility brand.
Typography:
Use an editorial, premium type hierarchy. Oversized display headlines, thin technical labels, precise spacing, and sharp layout discipline. Headlines should feel bold, cinematic, and minimal. Use large typography, generous negative space, thin dividers, small uppercase technical labels, and product-spec inspired microcopy.
Suggested English headline:
“Built for the city. Shaped by the North.”
Suggested Czech headline:
„Stvořeno pro město. Vytvarováno severem.“
Navigation:
Overview
Engineering
Ride
Materials
Edition
Specs
Reserve
Czech navigation:
Přehled
Technologie
Jízda
Materiály
Edice
Specifikace
Rezervovat
Motion:
Use Lenis for smooth momentum scrolling throughout the entire page.
Use Framer Motion for:
Scroll-driven bike movement and rotation
Section reveals that feel like a curtain lifting or a product being revealed by light
Parallax depth between the bike, background shapes, typography, and technical UI elements
Animated specification counters on scroll
Micro-interactions on all clickable elements
Smooth language switch transition
CTA reveal animation
Hover states that feel premium and restrained
Do not use playful bounce animations. Motion should be smooth, precise, cinematic, and intentional. Every movement should feel engineered.
Hero section:
Create a full-bleed hero section with the bike as the main visual object. The background should be almost black, with a single controlled accent light. Use large editorial headline typography and one short supporting sentence.
English hero copy:
“An electric bike for sharp streets, long days, and quiet power.”
Czech hero copy:
„Elektrokolo pro ostré ulice, dlouhé dny a tichý výkon.“
Add two CTA buttons:
English:
Explore the Edition
Reserve Ride
Czech:
Prozkoumat edici
Rezervovat jízdu
Engineering section:
Tell the story through numbers and technical performance. Use animated counters on scroll.
Suggested specs:
Range: up to 120 km
Motor: 250 W silent drive
Torque: 85 Nm
Battery: 720 Wh integrated cell
Charge: 80% in 90 min
Weight: 18.7 kg
Frame: lightweight aluminum / carbon-inspired geometry
Assist modes: Eco, City, Flow, Boost
The specs should feel like luxury automotive data, not a cheap comparison table.
Ride section:
Create a cinematic section about movement through the city. Use large typography, minimal copy, and a feeling of silent acceleration. Include visual cards or panels for:
Morning commute
Night ride
Riverside route
Hill climb
Weekend escape
Czech equivalents:
Ranní dojíždění
Noční jízda
Trasa podél řeky
Výjezd do kopce
Víkendový únik
Materials section:
Show the bike rotating or shifting perspective as the user scrolls. Highlight key surfaces:
Matte graphite frame
Integrated battery line
Hidden cable routing
Minimal cockpit
Precision brake system
Premium saddle
Reflective edition details
Use very close product-detail shots or abstract close-ups. Make it feel like a premium watch, car, or high-end audio product page.
Edition section:
Explain the “ÚSTECKÁ EDICE” identity. It should be local, but refined.
English copy direction:
“Inspired by concrete, steel, river light, and the raw geometry of northern city streets.”
Czech copy direction:
„Inspirováno betonem, ocelí, světlem nad řekou a syrovou geometrií severního města.“
Use abstract background details inspired by:
Industrial silhouettes
River line
Urban concrete
Evening streetlight
Sharp hills and roads
Technical map-like lines
Do not use obvious tourist photos or cheesy city landmarks. Keep it premium and abstract.
Colorways section:
Create 3 refined color variants with instant background and lighting reaction on hover.
Suggested colorways:
Graphite Black
Industrial Copper
River Silver
Czech:
Grafitová černá
Industriální měď
Říční stříbrná
Hovering over each colorway should subtly change the accent light, background reflection, and bike detail highlights.
Specification section:
Create a clean technical specification block with tabs or grouped categories:
Power
Battery
Frame
Ride System
Safety
Connectivity
Czech:
Výkon
Baterie
Rám
Jízdní systém
Bezpečnost
Konektivita
Connectivity features:
Mobile app pairing
GPS tracking
Anti-theft lock
Ride statistics
Battery health
Service alerts
CTA section:
The final CTA should feel like a dramatic reveal, not a basic form. Use a large product silhouette, a single headline, and a minimal reservation module.
English CTA:
“Reserve the first ride.”
Czech CTA:
„Rezervovat první jízdu.“
Include fields:
Name
Email
Preferred language
City
Message
Czech:
Jméno
E-mail
Preferovaný jazyk
Město
Zpráva
Footer:
Minimal footer with:
Product name
Language switch
Social links
Legal links
Newsletter input
Short brand statement
Design references:
Bang & Olufsen product pages, Apple product storytelling, VanMoof, Cowboy Bikes, Polestar automotive pages, Teenage Engineering, Dior fragrance campaign visuals, luxury mobility editorials, Awwwards-level product websites.
Responsive behavior:
The website must be fully responsive for desktop, tablet, and mobile. On mobile, the product should remain visually dominant, but sections must become clean, readable, and easy to scroll. The language switcher must remain accessible.
Quality bar:
This should feel like a premium launch website for a modern electric bike brand. Every section should feel considered. Every motion should have a reason. Every pixel should support the feeling of silent power, urban precision, and refined local identity.
Build the page as a polished, production-ready frontend with excellent spacing, hierarchy, animations, responsive design, and bilingual content structure."