Skip to content

fixed some ui #11

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

Merged
Planetxlive merged 1 commit into from
Jun 30, 2025
Merged

fixed some ui #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
13 changes: 13 additions & 0 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,15 @@
}
}

@keyframes slide-up {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}

.animate-float {
animation: float 6s ease-in-out infinite;
}
Expand All @@ -111,6 +120,10 @@
animation-delay: 2s;
}

.animate-slide-up {
animation: slide-up 0.3s ease-out forwards;
}

/* Smooth Scrolling */
html {
scroll-behavior: smooth;
Expand Down
2 changes: 1 addition & 1 deletion app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export default function RootLayout({
<body className={inter.className}>
<Navbar />
<main className="min-h-screen">{children}</main>
<Footer />
<Footer showScrollToTop={false} />
</body>
</html>
</StoreProvider>
Expand Down
5 changes: 5 additions & 0 deletions app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,21 @@ import FeatureCards from '@/components/FeatureCards';
import ChatSection from '@/components/ChatSection';
import StatsSection from '@/components/StatsSection';
import Destination from '@/components/Destination/Destination';
import ScreenshotSection from '@/components/ScreenshotSection';
import Newsletter from '@/components/NewsLetter';

export default function Home() {
return (
<main className="min-h-screen bg-white">
<Hero />
<ScreenshotSection />
<Destination />

{/* <Hotel /> */}
<FeatureCards />
<ChatSection />
<StatsSection />
<Newsletter />
</main>
);
}
53 changes: 21 additions & 32 deletions components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,23 @@ import {
} from 'lucide-react';
import Link from 'next/link';

export default function Footer() {
interface FooterProps {
className?: string;
showScrollToTop?: boolean;
}

export default function Footer({
className = '',
showScrollToTop = true,
}: FooterProps) {
const scrollToTop = () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
};

return (
<footer className="bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 text-white">
<footer
className={`bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 text-white ${className}`}
>
{/* Main Footer Content */}
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
Expand Down Expand Up @@ -250,29 +260,6 @@ export default function Footer() {
</div>
</div>
</div>

{/* Newsletter Subscription */}
<div className="mt-12 pt-8 border-t border-gray-700">
<div className="max-w-2xl mx-auto text-center">
<h4 className="text-xl font-semibold text-white mb-3">
Stay Updated with Latest Properties
</h4>
<p className="text-gray-300 mb-6">
Subscribe to our newsletter for exclusive property listings and
market insights
</p>
<div className="flex flex-col sm:flex-row gap-3 max-w-md mx-auto">
<input
type="email"
placeholder="Enter your email address"
className="flex-1 px-4 py-3 bg-gray-800 border border-gray-600 rounded-lg focus:outline-none focus:border-emerald-400 text-white placeholder-gray-400"
/>
<button className="px-6 py-3 bg-emerald-500 hover:bg-emerald-600 text-white font-semibold rounded-lg transition-colors duration-200">
Subscribe
</button>
</div>
</div>
</div>
</div>

{/* Bottom Bar */}
Expand Down Expand Up @@ -319,13 +306,15 @@ export default function Footer() {
</div>

{/* Scroll to Top Button */}
<button
onClick={scrollToTop}
className="fixed bottom-6 right-6 w-12 h-12 bg-emerald-500 hover:bg-emerald-600 text-white rounded-full shadow-lg flex items-center justify-center transition-all duration-200 hover:scale-110 z-50"
aria-label="Scroll to top"
>
<ArrowUp className="w-6 h-6" />
</button>
{showScrollToTop && (
<button
onClick={scrollToTop}
className="fixed bottom-6 right-6 w-12 h-12 bg-emerald-500 hover:bg-emerald-600 text-white rounded-full shadow-lg flex items-center justify-center transition-all duration-200 hover:scale-110 z-50"
aria-label="Scroll to top"
>
<ArrowUp className="w-6 h-6" />
</button>
)}
</footer>
);
}
23 changes: 23 additions & 0 deletions components/FooterWithNewsletter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
'use client';

import Footer from './Footer';
import Newsletter from './NewsLetter';

interface FooterWithNewsletterProps {
className?: string;
showScrollToTop?: boolean;
newsletterVariant?: 'default' | 'compact';
}

export default function FooterWithNewsletter({
className = '',
showScrollToTop = true,
newsletterVariant = 'default',
}: FooterWithNewsletterProps) {
return (
<>
<Newsletter variant={newsletterVariant} />
<Footer className={className} showScrollToTop={showScrollToTop} />
</>
);
}
53 changes: 29 additions & 24 deletions components/Hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,31 +3,34 @@ import SearchBox from './SearchBarComp/SearchBox';

export default function Hero() {
return (
<section className="relative mt-20 px-4">
<div className="relative bg-gradient-to-br from-purple-600 via-purple-700 to-purple-800 rounded-3xl px-6 sm:px-10 py-16 sm:py-24 max-w-7xl mx-auto shadow-lg overflow-hidden">
<section className="relative mt-16 sm:mt-20 px-3 sm:px-4">
<div className="relative bg-gradient-to-br from-purple-600 via-purple-700 to-purple-800 rounded-2xl sm:rounded-3xl px-4 sm:px-6 lg:px-10 py-12 sm:py-16 lg:py-24 max-w-7xl mx-auto shadow-lg overflow-hidden">
<div className="absolute inset-0 z-0">
<div className="absolute top-20 sm:top-32 right-10 sm:right-20 w-3 h-3 sm:w-4 sm:h-4 bg-yellow-400 rounded-full animate-pulse"></div>
{/* Animated dots - adjusted for mobile */}
<div className="absolute top-16 sm:top-20 lg:top-32 right-6 sm:right-10 lg:right-20 w-2 h-2 sm:w-3 sm:h-3 lg:w-4 lg:h-4 bg-yellow-400 rounded-full animate-pulse"></div>
<div
className="absolute top-32 sm:top-48 right-20 sm:right-32 w-2 h-2 sm:w-3 sm:h-3 bg-green-400 rounded-full animate-pulse"
className="absolute top-24 sm:top-32 lg:top-48 right-12 sm:right-20 lg:right-32 w-1.5 h-1.5 sm:w-2 sm:h-2 lg:w-3 lg:h-3 bg-green-400 rounded-full animate-pulse"
style={{ animationDelay: '1s' }}
></div>
<div
className="absolute top-48 sm:top-64 right-8 sm:right-16 w-2 h-2 bg-blue-400 rounded-full animate-pulse"
className="absolute top-32 sm:top-48 lg:top-64 right-4 sm:right-8 lg:right-16 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-blue-400 rounded-full animate-pulse"
style={{ animationDelay: '2s' }}
></div>
<div
className="absolute top-56 sm:top-80 right-24 sm:right-40 w-3 h-3 sm:w-5 sm:h-5 bg-pink-400 rounded-full animate-pulse"
className="absolute top-40 sm:top-56 lg:top-80 right-16 sm:right-24 lg:right-40 w-2 h-2 sm:w-3 sm:h-3 lg:w-5 lg:h-5 bg-pink-400 rounded-full animate-pulse"
style={{ animationDelay: '0.5s' }}
></div>
<div
className="absolute top-64 sm:top-96 right-12 sm:right-24 w-2 h-2 sm:w-3 sm:h-3 bg-orange-400 rounded-full animate-pulse"
className="absolute top-48 sm:top-64 lg:top-96 right-8 sm:right-12 lg:right-24 w-1.5 h-1.5 sm:w-2 sm:h-2 lg:w-3 lg:h-3 bg-orange-400 rounded-full animate-pulse"
style={{ animationDelay: '1.5s' }}
></div>

{/* Border circles - hidden on mobile for cleaner look */}
<div className="hidden sm:block absolute top-40 right-8 w-6 h-6 sm:w-8 sm:h-8 border-2 border-white/20 rounded-full"></div>
<div className="hidden sm:block absolute top-72 right-12 w-4 h-4 sm:w-6 sm:h-6 border-2 border-white/30 rounded-full"></div>
<div className="hidden sm:block absolute bottom-40 right-20 w-3 h-3 sm:w-4 sm:h-4 border-2 border-white/25 rounded-full"></div>

{/* Desktop floating cards */}
<div className="hidden lg:block absolute top-32 right-20 animate-float">
<div className="bg-white/90 backdrop-blur-sm rounded-2xl p-4 shadow-lg transform rotate-12 hover:rotate-6 transition-transform duration-700">
<div className="w-16 h-12 bg-gradient-to-r from-blue-400 to-purple-400 rounded-lg mb-2"></div>
Expand Down Expand Up @@ -56,21 +59,22 @@ export default function Hero() {
</div>
</div>

<div className="lg:hidden absolute top-24 right-4 animate-float">
<div className="bg-white/90 backdrop-blur-sm rounded-xl p-2 shadow-lg transform rotate-12">
<div className="w-8 h-6 bg-gradient-to-r from-blue-400 to-purple-400 rounded mb-1"></div>
{/* Mobile floating cards - simplified and better positioned */}
<div className="lg:hidden absolute top-20 sm:top-24 right-3 sm:right-4 animate-float">
<div className="bg-white/90 backdrop-blur-sm rounded-lg sm:rounded-xl p-2 sm:p-3 shadow-lg transform rotate-6 sm:rotate-12">
<div className="w-6 h-4 sm:w-8 sm:h-6 bg-gradient-to-r from-blue-400 to-purple-400 rounded mb-1"></div>
<p className="text-xs font-medium text-gray-800">Villa</p>
</div>
</div>

<div className="lg:hidden absolute top-48 right-8 animate-float-delayed">
<div className="bg-white/90 backdrop-blur-sm rounded-xl p-2 shadow-lg transform -rotate-12">
<div className="w-8 h-6 bg-gradient-to-r from-green-400 to-blue-400 rounded mb-1"></div>
<div className="lg:hidden absolute top-36 sm:top-48 right-6 sm:right-8 animate-float-delayed">
<div className="bg-white/90 backdrop-blur-sm rounded-lg sm:rounded-xl p-2 sm:p-3 shadow-lg transform -rotate-6 sm:-rotate-12">
<div className="w-6 h-4 sm:w-8 sm:h-6 bg-gradient-to-r from-green-400 to-blue-400 rounded mb-1"></div>
<p className="text-xs font-medium text-gray-800">Apartment</p>
</div>
</div>

{/* Chat Bubbles */}
{/* Chat Bubbles - hidden on mobile for cleaner look */}
<div className="hidden md:block absolute top-32 sm:top-40 right-20 sm:right-32 bg-white/90 backdrop-blur-sm rounded-2xl p-2 sm:p-3 shadow-lg animate-float">
<p className="text-xs font-medium text-gray-800">
Property tour, 3pm?
Expand All @@ -90,15 +94,15 @@ export default function Hero() {

{/* Main Heading & Text */}
<div className="relative z-10 text-center text-white">
<h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold mb-4">
<h1 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-bold mb-3 sm:mb-4 leading-tight">
Find your dream <span className="text-white">property.</span>
</h1>
<p className="text-lg sm:text-xl md:text-2xl text-purple-100 max-w-3xl mx-auto px-4">
<p className="text-base sm:text-lg md:text-xl lg:text-2xl text-purple-100 max-w-2xl sm:max-w-3xl mx-auto px-2 sm:px-4 leading-relaxed">
Choose where to live and we&lsquo;ll show you the perfect home!
</p>

{/* Dashed Arrow */}
<div className="hidden sm:flex justify-center my-6">
{/* Dashed Arrow - hidden on mobile for cleaner look */}
<div className="hidden sm:flex justify-center my-4 sm:my-6">
<svg
width="120"
height="60"
Expand All @@ -121,11 +125,11 @@ export default function Hero() {
</svg>
</div>

<div className="mt-8 sm:mt-12">
<div className="inline-flex items-center space-x-2 bg-white/10 backdrop-blur-sm rounded-full px-4 sm:px-6 py-2 sm:py-3 text-white">
<div className="w-5 h-5 sm:w-6 sm:h-6 bg-green-500 rounded-full flex items-center justify-center">
<div className="mt-6 sm:mt-8 lg:mt-12">
<div className="inline-flex items-center space-x-2 bg-white/10 backdrop-blur-sm rounded-full px-3 sm:px-4 lg:px-6 py-2 sm:py-3 text-white">
<div className="w-4 h-4 sm:w-5 sm:h-5 lg:w-6 lg:h-6 bg-green-500 rounded-full flex items-center justify-center flex-shrink-0">
<svg
className="w-3 h-3 sm:w-4 sm:h-4 text-white"
className="w-2.5 h-2.5 sm:w-3 sm:h-3 lg:w-4 lg:h-4 text-white"
fill="currentColor"
viewBox="0 0 20 20"
>
Expand All @@ -136,15 +140,16 @@ export default function Hero() {
/>
</svg>
</div>
<span className="text-sm sm:text-base font-medium">
<span className="text-xs sm:text-sm lg:text-base font-medium leading-tight">
Free Consultation & Flexible Booking available
</span>
</div>
</div>
</div>
</div>

<div className="relative max-w-4xl mx-auto -mt-10 z-10">
{/* Search Box - adjusted positioning for mobile */}
<div className="relative max-w-4xl mx-auto -mt-6 sm:-mt-8 lg:-mt-10 z-10 px-2 sm:px-4">
<SearchBox />
</div>
</section>
Expand Down
Loading
Loading