hamidul islam maruf
Landing pages that help marketing teams launch faster
New to Contra
hamidul islam is ready for their next project!
Bellver Cards | Realistic Financial Landing Page
A landing page built for a financial card product, with a strong focus on realistic visuals, responsive design, and polished interactions.
The project started from an AI-generated design concept. Instead of treating the design as final, I refined the UI/UX and turned the concept into a production-ready responsive website.
What I worked on
- Built the landing page with HTML, Tailwind CSS, and JavaScript
- Created responsive layouts for desktop, tablet, and mobile
- Refined AI-generated design elements to feel more natural and realistic
- Implemented smooth scroll-reveal animations
- Added different animation directions for split sections
- Built an interactive language selector with country flags
- Added a YouTube video modal with proper playback cleanup
- Created responsive card/product sections
- Refined spacing, typography, borders, shadows, and visual hierarchy
- Optimized the layout for different screen sizes
The result
A polished financial product landing page that takes an AI-generated visual direction and turns it into a real, responsive, production-ready web experience.
Tech: HTML · Tailwind CSS · JavaScript · Responsive Design · UI/UX · Landing Page Development
0
3
I just launched a free framework for turning Figma designs into production-ready websites.
Over the past few weeks, I worked on something based on problems I've repeatedly faced while building real websites from Figma.
I called it:
From Figma to Live Website
The framework covers the full process:
- Figma readiness
- Design audit
- Component structure
- Responsive development
- Pixel-perfect QA
- Performance optimization
- Pre-launch testing
I created it mainly for founders, designers, and developers who want a smoother transition from design to a finished website.
This isn't a fancy design ebook.
I'm not a professional graphic designer, so I kept the visual design simple and focused my time on what matters most:
The actual value inside.
Every checklist and process comes from things I've learned through my own frontend projects, including mistakes I've made and problems I've had to solve.
And it's 100% free.
If you work with Figma designs or build websites from them, I hope you find it useful.
Get the framework here:
https://drive.google.com/file/d/1OESHNRaSQoA7L0JozwUnCEIKAvBYmgLj/view?usp=sharing
I'd love to hear what you think and what you'd add to the next version.
0
10
Developed a responsive real estate website focused on delivering a seamless property browsing experience across desktop, tablet, and mobile devices. Transformed the design into a clean, scalable frontend using React and Tailwind CSS while maintaining consistency, performance, and usability throughout the application.
Key contributions included building reusable UI components, implementing responsive layouts, optimizing page performance, and creating intuitive navigation to help users easily discover properties and explore listings. The project emphasized clean code architecture, maintainability, and a modern user experience.
Tech Stack: React, JavaScript, Tailwind CSS, HTML, CSS
Feel free to explore the project and share your thoughts. I'm always open to connecting with founders, designers, and fellow developers who are building impactful digital products.
0
23
Built a modern, high-performance frontend focused on smooth user experience and responsiveness.
What I worked on:
built the UI in React using reusable components
used Tailwind CSS for a clean, responsive layout across all devices
integrated Lenis for smooth scrolling and better user experience
Tech stack:
React, Tailwind CSS, Lenis, Vite
A project where design, motion, and performance came together nicely.
Skills: figma to react, React.js, +2 skills
0
27