Step into the world of modern web design with Greenbank, a cutting-edge React, Vite, and Tailwind CSS project. This blog post guides you through creating a responsive banking or credit card landing page with a sleek, professional design. Whether you’re new to frontend development or a seasoned developer, this project showcases essential techniques for building dynamic and stylish websites.
💻 What’s Inside?
Greenbank is a feature-rich responsive website designed to offer an engaging user experience. Here's what you'll find:
- Stylish Home Page: Captivating design to make a lasting first impression.
- Informative About Page: Share your bank's vision and services.
- Customizing Page: Allow users to personalize their options.
- Find Best Card Page: Compare credit card benefits with ease.
- Functional Contact Page: Help users connect with your bank.
✨ Why Build Greenbank?
If you're looking to create a responsive website with a modern design for the banking industry, Greenbank is the perfect inspiration. This project demonstrates how to:
- Turn a Figma design into a fully functional, responsive landing page.
- Create reusable React components.
- Optimize layouts for both mobile and desktop devices.
- Leverage the power of Tailwind CSS for advanced styling.
The skills and techniques you’ll learn here are invaluable for any frontend developer aspiring to master modern web development.
🔧 Tech Stack
- React: For creating dynamic user interfaces.
- Vite: A fast build tool for web development.
- TypeScript: Adds type safety to your React project.
- Tailwind CSS: Enables rapid, responsive UI design.
🚀 Project Walkthrough
The Greenbank project uses React Router to manage navigation across five main pages:
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import HomePage from './pages/HomePage';
import PersonalizedCard from './pages/PersonalizedCardPage';
import FindCardPage from './pages/FindCardPage';
import ContactPage from './pages/ContactPage';
import AboutPage from './pages/AboutPage';
import PageLayout from './layout/PageLayout';
import { Footer, ScrollToTop } from './components';
function App() {
return (
<Router>
<ScrollToTop />
<PageLayout>
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/about" element={<AboutPage />} />
<Route path="/personalizedcard" element={<PersonalizedCard />} />
<Route path="/findcard" element={<FindCardPage />} />
<Route path="/contact" element={<ContactPage />} />
</Routes>
<Footer/>
</PageLayout>
</Router>
);
}
export default App;
✨ Highlight: The Hero Section
The Hero component introduces a compelling call to action with a modern design. It uses Tailwind CSS for responsive styling and incorporates animations for visual appeal.
import React from 'react';
import { user1, user2, user3, cardHero, textLine } from '../images';
import { GoArrowRight } from "react-icons/go";
const Hero: React.FC = () => (
<section className="container mx-auto px-4 py-20 flex flex-col lg:flex-row items-center">
<div className="lg:w-1/2 mb-10 lg:mb-0">
<h1 className="text-4xl md:text-5xl font-bold mb-6 relative">
<div className="relative inline-flex items-center">
<span className="relative z-10 mb-3 xs:text-3xl">Discover the Perfect</span>
</div>
{/* Circle around "Credit Card" */}
<div className="relative inline-flex items-center">
<span className="relative z-10 ml-2 lg:ml-0">Credit Card</span> {/* Wrap "Credit Card" text */}
<img
src={textLine}
alt="Text Line"
className="absolute inset-0 -top-2 -left-1 z-50"
/>
</div>
<span className="relative z-10 xs:text-3xl"> for You</span> {/* Wrap the rest of the heading */}
</h1>
<p className="text-lg md:text-xl mb-8 text-gray-300 font-extralight mr-20">
Discover the power of our secure and rewarding credit cards. Explore our range of credit cards and take control of your finances today.
</p>
<button className="bg-primary text-white px-6 py-3 rounded-full text-sm font-normal hover:bg-green-500 transition duration-300 flex items-center">
Get Started <GoArrowRight className="ml-2 w-5 h-5" />
</button>
<div className="mt-8 flex items-center">
<div className="flex -space-x-4">
{[user1, user2, user3].map((src, index) => (
<img
key={index}
src={src}
width={40}
height={40}
alt={`User ${index + 1}`}
className="rounded-full border-2 border-white"
/>
))}
</div>
<div className="ml-4">
<div className="text-sm font-semibold text-white">10.2k+</div>
<div className="text-sm font-thin text-gray-300">users joined the waitlist</div>
</div>
</div>
</div>
<div className="lg:w-1/2 relative">
<img
src={cardHero}
width={500}
height={300}
alt="Credit Card"
className="w-full h-auto relative z-10"
/>
{/* Responsive sizing for the circle */}
<div className="absolute top-16 -right-20
w-64 h-64
xs:w-56 xs:h-56
sm:w-80 sm:h-80 sm:top-16
md:w-96 md:h-96 md:top-28
lg:w-112 lg:h-112 lg:-right-40 lg:top-10
between-1280-1480:w-102 between-1300-1450:h-102 between-1280-1480:top-20
xl:w-160 xl:h-160 xl:top-24
bg-primary rounded-full flex items-center justify-center z-0" />
</div>
</section>
);
export default Hero;
🌟 Why Tailwind CSS?
Tailwind CSS simplifies complex styling tasks, allowing you to focus on the design rather than debugging CSS. The Greenbank project uses custom Tailwind configuration for unique colors, fonts, and breakpoints:
/** @type {import('tailwindcss').Config} */
export default {
content: [
'./index.html',
'./src/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {
fontFamily: {
'mplus': ['"M PLUS 1"', 'sans-serif'],
'poppins': ['"Poppins"', 'sans-serif'],
},
spacing: {
'160': '30rem',
},
screens: {
'xs': {'max': '411px'},
'between-1280-1480': { 'min': '1280px', 'max': '1480px' }, // Custom breakpoint
},
colors: {
primary: '#2BB32A', // Primary color
secondary: '#3D544D', // Secondary color
background: '#010101', // Background color
},
},
},
plugins: [],
}
📥 Ready to Start?
You can download the complete project and start customizing it for your own needs.
Source Code 👉 Download Now
🎨 Design Inspiration:
Based on a creative and modern GreenBank Figma Template, this project brings the design to life with React and Tailwind CSS, delivering a sleek, professional user experience for the banking and credit card industry 👉 Figma File
👀 Join the Community!
If you found this guide helpful, like, share, and subscribe for more projects like this. Let us know in the comments how you would customize Greenbank for your own banking or fintech project!
🔗 Related Links
React Documentation
Vite Documentation
Tailwind CSS Documentation
Top comments (0)