The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Project Name: VertiCare
Tagline: A premium exterior service interface brought to life with Google Stitch.
Description:
VertiCare is an ultra-premium exterior maintenance and arboriculture landing page concept designed for the Bordeaux region. Starting with a static Tailwind CSS codebase, I leveraged Google Stitch's in-place AI editing capabilities to rapidly transform a flat layout into a living, high-converting prototype.
Key features built during the hackathon include:
Interactive Hero: A dynamic fluid canvas background that reacts smoothly to cursor movements.
Engagement Boosters: Modern 3D tilt effects on service cards to enhance visual feedback.
Functional Embeds: A fully interactive Leaflet.js & OpenStreetMap zone map centered on Bordeaux, complete with customized styling.
Conversion Anchors: Micro-animated floating widgets for instant contact (WhatsApp and a pulsing AI Assistant button) alongside an upgraded, premium footer featuring institutional trust markers like Garantie Décennale.
Stitch perfectly bridged the gap between static code and an immersive, premium user experience in just minutes.
Tech Stack: Google Stitch, Tailwind CSS, Leaflet.js, OpenStreetMap, HTML5, JavaScript.
Looked at this three times already and it gets better each time.
Thank you for your comment, it's very motivating😊
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
🚨 TYPOGRAPHY ISN'T JUST AESTHETICS—IT'S USER PSYCHOLOGY & PERFORMANCE
Most people choose fonts solely based on looks. High-performance engineers optimize typography based on visual hierarchy, eye-scanning psychology, and load speed.
When a visitor lands on a digital product, typography dictates where their eyes move in 0.05 seconds. If your custom web fonts cause Layout Shifts (CLS) or slow down initial rendering, you lose user trust before they even read your headline.
How I engineer typography directly in VS Code:
• Fluid Typography: Using CSS clamp() to build smooth, proportional text scaling across every screen size without bloated libraries.
• Zero Layout Shift: Preloading critical variable fonts and executing fallback strategies so rendering is instant and crisp.
• Typography in Code: Blending monospace code fonts with modern UI elements (using RML & WGSL Shaders) to create deep visual contrast.
Great typography captures attention. Hand-coded optimization ensures it delivers results without sacrificing speed.
💬 Quick Question for Designers & Engineers:
What is your go-to typography stack for modern web applications, and how do you handle web font performance?
👇 Drop your favorite font pairings below—let's connect and share workflows!
#Typography #WebDevelopment #UIUX #CleanCode #DesignSystems #VSCode #FullStack
clamp() for fluid type saved me so many breakpoints. inter plus a variable serif usually
I'm experimenting with two responsive designs for mobile bottom navigation and would love to hear your thoughts.
Which approach would you prefer? 👇
A — Multi-row Grid
Navigation items wrap into multiple rows to accommodate smaller screens.
B — Horizontally Scrollable Bar
A single-row navigation bar that users can scroll horizontally to access more options.
Which feels more intuitive, accessible, and user-friendly?
Vote for A or B and let me know why in the comments. I'd love to hear your perspective! 🚀
2 voted
50%
2 voted
50%
4 votes
Closed
Multi-row Grid is more practical I like it great job 🎉🎉🔥🔥
Heres a project is will soon be starting i wanted to share the web design showcase.
The oversized type and the can bursting out of the peach make this pop. Strong first screen. One small idea: "click now" could say what happens next, like "Shop the 6-pack" or "Find it near you", since a specific action tends to get more clicks than a generic one. If the build...