Skip to content

Improve the ui #168

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Dipanita45 wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Improve the ui #168

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3fe9078
Update
Dipanita45 Jan 17, 2026
202c0df
Merge branch 'main' of https://github.com/hitesh-kumar123/Smart-Rent-…
Dipanita45 Jan 17, 2026
a65c680
Improve the ui
Dipanita45 Feb 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
73 changes: 33 additions & 40 deletions frontend/src/components/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,24 +50,23 @@ const Footer = () => {

return (
<footer
className="bg-neutral-900 text-white pt-12 sm:pt-16 pb-8 sm:pb-10"
className="bg-gradient-to-b from-neutral-950 to-neutral-900 text-white pt-16 pb-8"
role="contentinfo"
aria-label="Site footer"
>
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
<div
className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 sm:gap-12 mb-12 text-center sm:text-left"
role="navigation"
aria-label="Footer navigation"
>
{/* Main Footer Content */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-10 lg:gap-12 mb-14">
{/* Company Info */}
<div className="flex flex-col items-center sm:items-start">
<h3 className="text-xl sm:text-2xl font-semibold mb-4 sm:mb-6 text-white inline-flex items-center">
<span className="text-primary-500 font-bold">Smart</span>
<span className="font-light">RentSystem</span>
</h3>
<p className="text-neutral-400 mb-6 leading-relaxed max-w-sm">
{descriptionText}
Find your perfect home away from home. SmartRent provides a secure
platform for property rental with verified hosts and quality
listings.
</p>
<div className="flex space-x-4">
<a
Expand Down Expand Up @@ -114,7 +113,7 @@ const Footer = () => {
{/* Quick Links */}
<div className="mt-4 sm:mt-0">
<h3 className="text-lg font-semibold mb-4 sm:mb-6 text-white inline-block border-b-2 border-primary-500 pb-1">
{quickLinksText}
Quick Links
</h3>
<ul className="space-y-2.5 sm:space-y-3">
<li>
Expand All @@ -124,7 +123,7 @@ const Footer = () => {
onClick={() => window.scrollTo(0, 0)}
>
<i className="fas fa-chevron-right text-xs mr-2 text-primary-500"></i>
{homeText}
Home
</Link>
</li>
<li>
Expand All @@ -134,7 +133,7 @@ const Footer = () => {
onClick={() => window.scrollTo(0, 0)}
>
<i className="fas fa-chevron-right text-xs mr-2 text-primary-500"></i>
{aboutUsText}
About Us
</Link>
</li>
<li>
Expand All @@ -144,7 +143,7 @@ const Footer = () => {
onClick={() => window.scrollTo(0, 0)}
>
<i className="fas fa-chevron-right text-xs mr-2 text-primary-500"></i>
{contactText}
Contact
</Link>
</li>
<li>
Expand All @@ -154,15 +153,15 @@ const Footer = () => {
onClick={() => window.scrollTo(0, 0)}
>
<i className="fas fa-chevron-right text-xs mr-2 text-primary-500"></i>
{blogText}
Blog
</Link>
</li>
</ul>
</div>

{/* Support */}
<div>
<h3 className="text-lg font-semibold mb-6 text-white">{supportText}</h3>
<h3 className="text-lg font-semibold mb-6 text-white">Support</h3>
<ul className="space-y-3">
<li>
<Link
Expand All @@ -171,7 +170,7 @@ const Footer = () => {
onClick={() => window.scrollTo(0, 0)}
>
<i className="fas fa-chevron-right text-xs mr-2 text-primary-500"></i>
{helpText}
Help
</Link>
</li>
<li>
Expand All @@ -181,7 +180,7 @@ const Footer = () => {
onClick={() => window.scrollTo(0, 0)}
>
<i className="fas fa-chevron-right text-xs mr-2 text-primary-500"></i>
{safetyText}
Safety Information
</Link>
</li>
<li>
Expand All @@ -191,7 +190,7 @@ const Footer = () => {
onClick={() => window.scrollTo(0, 0)}
>
<i className="fas fa-chevron-right text-xs mr-2 text-primary-500"></i>
{cancellationText}
Cancellation Options
</Link>
</li>
<li>
Expand All @@ -201,7 +200,7 @@ const Footer = () => {
onClick={() => window.scrollTo(0, 0)}
>
<i className="fas fa-chevron-right text-xs mr-2 text-primary-500"></i>
{ReportText}
Report Concern
</Link>
</li>
<li>
Expand All @@ -211,16 +210,16 @@ const Footer = () => {
onClick={() => window.scrollTo(0, 0)}
>
<i className="fas fa-chevron-right text-xs mr-2 text-primary-500"></i>
{FAQText}
FAQ
</Link>
</li>
</ul>
</div>
</nav>

{/* Contact */}
<div className="mt-4 sm:mt-0">
<h3 className="text-lg font-semibold mb-4 sm:mb-6 text-white inline-block border-b-2 border-primary-500 pb-1">
{contactUsText}
Contact Us
</h3>
<ul className="space-y-4 text-neutral-400">
<li className="flex items-start justify-center sm:justify-start group">
Expand All @@ -229,28 +228,22 @@ const Footer = () => {
123 Rent Street, City, Country
</span>
</li>
<li className="flex items-center justify-center sm:justify-start group">
<i className="fas fa-phone-alt mr-3 text-primary-500 group-hover:scale-110 transition-transform duration-300"></i>
<a
href="tel:+11234567890"
className="group-hover:text-neutral-300 transition-colors duration-300"
>
+1 (123) 456-7890
</a>
<li>
<Link to="/cancellation" className="group text-neutral-400 hover:text-primary-400 text-sm transition-colors duration-200 flex items-center" onClick={() => window.scrollTo(0, 0)}>
<span className="inline-block w-0 h-0.5 bg-primary-400 mr-2 group-hover:w-4 transition-all duration-300"></span>
Cancellation
</Link>
</li>
<li className="flex items-center justify-center sm:justify-start group">
<i className="fas fa-envelope mr-3 text-primary-500 group-hover:scale-110 transition-transform duration-300"></i>
<a
href="mailto:info@smartrentsystem.com"
className="group-hover:text-neutral-300 transition-colors duration-300"
>
info@smartrentsystem.com
</a>
<li>
<Link to="/report-concern" className="group text-neutral-400 hover:text-primary-400 text-sm transition-colors duration-200 flex items-center" onClick={() => window.scrollTo(0, 0)}>
<span className="inline-block w-0 h-0.5 bg-primary-400 mr-2 group-hover:w-4 transition-all duration-300"></span>
Report Issue
</Link>
</li>
</ul>
<div className="mt-8">
<h4 className="text-sm font-semibold mb-4 text-white">
{subscribeText}
Subscribe to Newsletter
</h4>
<form onSubmit={handleSubscribe} className="space-y-2">
<div className="flex max-w-sm mx-auto sm:mx-0 group focus-within:scale-[1.02] transition-transform duration-300">
Expand Down Expand Up @@ -325,23 +318,23 @@ const Footer = () => {
className="text-neutral-400 hover:text-primary-400 text-sm transition-all duration-300 hover:translate-y-[-1px]"
onClick={() => window.scrollTo(0, 0)}
>
{privacyPolicyText}
Privacy Policy
</Link>
<span className="hidden sm:block text-neutral-600">•</span>
<Link
to="/terms"
className="text-neutral-400 hover:text-primary-400 text-sm transition-all duration-300 hover:translate-y-[-1px]"
onClick={() => window.scrollTo(0, 0)}
>
{termsOFServiceText}
Terms of Service
</Link>
<span className="hidden sm:block text-neutral-600">•</span>
<Link
to="/cookies"
className="text-neutral-400 hover:text-primary-400 text-sm transition-all duration-300 hover:translate-y-[-1px]"
onClick={() => window.scrollTo(0, 0)}
>
{cookiePolicyText}
Cookie Policy
</Link>
</div>
</div>
Expand Down
139 changes: 71 additions & 68 deletions frontend/src/pages/Home.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,13 @@ const Home = () => {
setRecentSearches([]);
};

// Quick random property type navigation for the 'Surprise me' CTA
const surpriseMe = () => {
const types = ["apartment", "house", "cabin", "villa"];
const t = types[Math.floor(Math.random() * types.length)];
navigate(`/listings?type=${t}`);
};


// Sample featured destinations data
const destinations = [
Expand Down Expand Up @@ -331,80 +338,76 @@ const Home = () => {
{uniqueAccommodationsText}
</p>

{/* Property types grid */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
{/* Apartments property type */}
<Link to="/listings?type=apartment" className="group">
<div className="rounded-xl overflow-hidden">
<div className="h-60 relative overflow-hidden">
<img
src="https://images.unsplash.com/photo-1502672260266-1c1ef2d93688?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
alt="Apartments"
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
/>
</div>
<div className="p-3">
<h3 className="text-lg font-medium text-neutral-800 group-hover:text-primary-500 transition duration-300">
{apartmentsText}
</h3>
<p className="text-neutral-600 text-sm">{urbanComfortText}</p>
</div>
</div>
</Link>
{/* Houses property type */}
<Link to="/listings?type=house" className="group">
<div className="rounded-xl overflow-hidden">
<div className="h-60 relative overflow-hidden">
<img
src="https://images.unsplash.com/photo-1564013799919-ab600027ffc6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
alt="Houses"
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
/>
</div>
<div className="p-3">
<h3 className="text-lg font-medium text-neutral-800 group-hover:text-primary-500 transition duration-300">
{housesText}
</h3>
<p className="text-neutral-600 text-sm">{entireHomesText}</p>
{/* Redesigned property types with a featured card + compact cards */}
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 items-stretch">
{/* Featured wide card */}
<Link to="/listings" className="group col-span-1 lg:col-span-2 focus:outline-none focus:ring-2 focus:ring-primary-500 rounded-2xl">
<div className="relative rounded-2xl overflow-hidden h-96 shadow-card hover:shadow-card-hover transition-transform duration-500 transform-gpu group-hover:-translate-y-1">
<img
src="https://images.unsplash.com/photo-1522708323590-d24dbb6b0267?auto=format&fit=crop&w=1400&q=80"
alt="Featured stays"
className="w-full h-full object-cover"
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/65 via-black/30 to-transparent"></div>
<div className="absolute left-6 bottom-6 text-white">
<span className="inline-flex items-center gap-2 bg-white/10 px-3 py-1 rounded-full text-sm backdrop-blur-sm">
<MapPin className="w-4 h-4" /> {apartmentsText} • {housesText}
</span>
<h3 className="text-3xl font-bold mt-3">{stayAnywhereText}</h3>
<p className="mt-2 max-w-lg text-white/90">From cozy cabins to luxury villas — find the perfect stay for every trip.</p>
<div className="mt-4 flex items-center gap-3">
<Link to="/listings" className="bg-white text-primary-600 px-4 py-2 rounded-lg font-medium hover:bg-white/90 transition focus:outline-none focus:ring-2 focus:ring-primary-500">Browse stays</Link>
<button onClick={surpriseMe} className="bg-white/10 border border-white/20 text-white px-3 py-2 rounded-lg hover:bg-white/5 transition focus:outline-none focus:ring-2 focus:ring-white/30">Surprise me</button>
</div>
</div>
</div>
</Link>
{/* Cabins property type */}
<Link to="/listings?type=cabin" className="group">
<div className="rounded-xl overflow-hidden">
<div className="h-60 relative overflow-hidden">
<img
src="https://images.unsplash.com/photo-1470240731273-7821a6eeb6bd?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
alt="Cabins"
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
/>
</div>
<div className="p-3">
<h3 className="text-lg font-medium text-neutral-800 group-hover:text-primary-500 transition duration-300">
{cabinsText}
</h3>
<p className="text-neutral-600 text-sm">{rusticRetreatsText}</p>

{/* Compact cards stack */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 gap-6">
<Link to="/listings?type=cabin" className="group focus:outline-none focus:ring-2 focus:ring-primary-500 rounded-xl">
<div className="rounded-xl overflow-hidden h-44 shadow-card hover:shadow-card-hover transition duration-300 transform-gpu group-hover:scale-105">
<div className="h-full relative">
<img
src="https://images.unsplash.com/photo-1470240731273-7821a6eeb6bd?auto=format&fit=crop&w=800&q=60"
alt="Cabins"
className="w-full h-full object-cover"
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/50"></div>
<div className="absolute left-4 bottom-4 text-white">
<h4 className="font-semibold">{cabinsText}</h4>
<p className="text-sm text-white/90">{rusticRetreatsText}</p>
</div>
</div>
</div>
</div>
</Link>
{/* Villas property type */}
<Link to="/listings?type=villa" className="group">
<div className="rounded-xl overflow-hidden">
<div className="h-60 relative overflow-hidden">
<img
src="https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
alt="Villas"
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
/>
</Link>

<Link to="/listings?type=villa" className="group focus:outline-none focus:ring-2 focus:ring-primary-500 rounded-xl">
<div className="rounded-xl overflow-hidden h-44 shadow-card hover:shadow-card-hover transition duration-300 transform-gpu group-hover:scale-105">
<div className="h-full relative">
<img
src="https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?auto=format&fit=crop&w=800&q=60"
alt="Villas"
className="w-full h-full object-cover"
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/40"></div>
<div className="absolute left-4 bottom-4 text-white">
<h4 className="font-semibold">{villasText}</h4>
<p className="text-sm text-white/90">{luxuryStaysText}</p>
</div>
</div>
</div>
<div className="p-3">
<h3 className="text-lg font-medium text-neutral-800 group-hover:text-primary-500 transition duration-300">
{villasText}
</h3>
<p className="text-neutral-600 text-sm">{luxuryStaysText}</p>
</Link>

{/* Surprise card */}
<button onClick={surpriseMe} className="group rounded-xl overflow-hidden h-44 shadow-card hover:shadow-card-hover transition duration-300 transform-gpu hover:scale-105 bg-gradient-to-t from-primary-600 to-primary-500 text-white flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-primary-500">
<div className="text-center p-4">
<h4 className="text-lg font-semibold">Feeling adventurous?</h4>
<p className="text-sm opacity-90">Let us pick a stay for you</p>
<span className="mt-3 inline-block bg-white/20 px-3 py-1 rounded-full text-sm">Try it</span>
</div>
</div>
</Link>
</button>
</div>
</div>
</div>
</div>
Expand Down