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
Veranda, a luxury residential concept landing page
Veranda is a concept build I created for a fictional luxury residential brand. It is not client work or a real property. The images and hero motion were generated with AI as part of the creative process.
I wanted to explore something that matters when building high-fidelity landing pages: after several rounds of changes, how do you make sure the final page still looks like the design that was approved?
The site is built in Next.js with responsive layouts, self-hosted fonts, GSAP motion and an interactive walkthrough. I also built in a proper QA process around it, not just checking that the page loads and the buttons work.
It compares 12 sections across five screen sizes against approved visual baselines. It flags visual drift, missing baselines and changes that have not been reviewed. I also tested interactions, accessibility, contrast, performance, browser behaviour and reduced-motion states.
The main lesson for me was simple: a page can pass functional tests and still no longer be the page that was agreed.
Nice project!
Thank you so much!
Building a QA process that flags visual drift against approved baselines is such an underrated skill, most people just eyeball it after changes go in. What first made you start checking for that instead of trusting the build looked right?
Honestly, I learned it the slightly embarrassing way 😅 The build was technically green, but when I revisited the original plan, I realised I’d quietly replaced two approved design decisions with choices I personally preferred. None of the functional, performance or...
That gap between passing every test and still being the approved design is such a sneaky one, especially when the swap felt like an improvement in the moment. Do you catch that now by diffing against the original comps directly, or is it more of a gut check before you ship?
Every detail has been carefully considered!
Thank you so much, I really tried to think everything through and break it into phases
Feels premium, well done!
Thank you so much Nikas, I really appreciate it!
Looks so cool man
Thank you so much Mahmudul!
Stunning attention to detail! Every single element feels intentional and perfectly placed. Great job!
Thank you for your kind words, I really appreciate it!
The design is premium 👌
Really well executed! 🌟
The old 19s classic vibe.
I loved it so much
You got my attention tbh
concept builds always hit harder than real ones
well done!
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
I bet you’ve NEVER seen button hover effects quite like these. And honestly, this time, I COOKED!
I went into this wanting to build a portfolio website. Somewhere along the way, it became so good that I’m genuinely considering making it my MAIN portfolio.
The scroll. The transitions. The interactions. But especially the button hover effects. Every little detail makes the experience feel alive, and I’ve probably spent more time hovering over these buttons than I’d like to admit.
But this wasn't just about making something that looks good. I wanted to build something that actually works for me.
THE BRANDING: I built the entire experience around my existing Sup* identity, keeping the personality intact while giving it a website that feels distinctly mine. From the visual language to the interactions, I wanted every part of the experience to feel intentional rather than like another template with a name slapped on it.
THE EXPERIENCE: As a designer, I obsess over the little things. The way an element responds when you hover over it. How scrolling feels. How one section transitions into the next. And how all of it comes together into an experience that feels cohesive.
The button interactions were easily one of my favourite parts to work on. But don't just take my word for it. Go try them yourself.
And yes, I designed a mobile-specific menu experience too. Please don't skip that part!
THE AUTOMATION: A portfolio shouldn't just display your work. It should help you get work.
One of my biggest goals was to turn this website into a funnel that brings potential clients directly to my Contra profile. I wanted to make it easier for people to discover my work, get in touch, and take the next step.
So, I built in form automation that delivers incoming submissions straight to my email and the website's admin side. No manually checking submissions across different places. The enquiries come to me, giving me a more direct way to keep track of potential opportunities.
It's a small but meaningful workflow that makes the website more than just a pretty front end.
THE STORY BEHIND THE BUILD - I've always wanted a portfolio website that properly showcases my work, personality, and approach to design. And once I found Contra, I realised I had the perfect opportunity to do more than just build a portfolio.
I could create a funnel that showcases my work and helps bring potential clients directly to my Contra profile.
When the @Base44 x @Contra HQ contest came along, it felt like the perfect excuse to bring that idea to life finally.
And the best part? This was my FIRST time trying @Base44. (Process video in the comments)
I've never had to type so little to get something this good. The recommendations were surprisingly on point, and instead of constantly fighting the tool to get what I had in mind, I could focus on what matters most to me: the experience, the details, and making the final product feel right.
As someone who genuinely enjoys pushing interfaces beyond the expected, that was a pretty exciting experience.
Because building something that looks good is one thing. Building something that looks good, feels good, works behind the scenes, and has an actual purpose? That's where the fun begins.
And Base44 made getting there ridiculously enjoyable.
This one's for the Base44 x Contra contest, and I might've accidentally built my new favourite portfolio in the process.
A couple of things I want you to try:
1. Hover over the buttons. Like Seriously.
2. Experience the mobile-specific menu.
3. Check out the custom favicon. Yes, that's me. 😉
Live website: https://supreet.base44.app/
Built around my Sup* identity. Designed to showcase my work. Automated to capture enquiries. Created to turn visitors into potential clients.
Now, please go hover over those buttons. You'll understand.
Base 44 Usage Proof:
Built this free SaaS portfolio template in Framer a few months ago, and it’s been amazing to see the momentum it’s gaining! 🚀
It’s now ranked #18 in Framer’s Marketing category, bringing in more visibility, views, and commissions.
I’ve shared the full case study here, covering the project and how it came together.
Take a look if you’re curious! 🙌
This is amazing Fawaz! 🚀 Ranked #18 in Framer's Marketing category is huge! Love how you turned a free SaaS template into visibility + commissions. That's smart product thinking. Can't wait to read the full case study, congrats on the momentum!
A fresh digital identity, a premium workspace designed for creative professionals.
From an elegant, editorial-style website to a functional mobile app for bookings and studio management, the goal was to make every interaction feel as refined as the space itself.
Clean layouts, timeless typography and a deep green palette bring the whole experience together.
This looks super premium Kabir! Love how you carried the same refined, editorial feel from the website to the mobile app. The clean layouts and booking flow feel exactly like a high-end creative studio should - elegant but functional. The desktop + mobile mockups show the consistency really well. Great execution!
