correction are fixed
This commit is contained in:
akash
parent
8a1c1c414d
commit
3c6a8ac5ff
@ -15,9 +15,20 @@ export default function CompareBar() {
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-4 flex-1 overflow-x-auto hide-scrollbar">
|
||||
<div className="flex items-center gap-2 flex-shrink-0">
|
||||
<svg className="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
<svg
|
||||
className="w-7 h-7 text-primary"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M4 7h11m0 0l-4-4m4 4l-4 4M20 17H9m0 0l4-4m-4 4l4 4"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<span className="font-semibold text-foreground">Compare Properties ({compareList.length}/4)</span>
|
||||
</div>
|
||||
|
||||
@ -60,8 +71,8 @@ export default function CompareBar() {
|
||||
<Link
|
||||
href="/compare"
|
||||
className={`px-6 py-3 rounded-lg font-semibold transition-all ${compareList.length >= 2
|
||||
? "bg-primary text-white hover:bg-blue-700 shadow-lg hover:shadow-xl"
|
||||
: "bg-gray-300 text-gray-500 cursor-not-allowed"
|
||||
? "bg-primary text-white hover:bg-blue-700 shadow-lg hover:shadow-xl"
|
||||
: "bg-gray-300 text-gray-500 cursor-not-allowed"
|
||||
}`}
|
||||
onClick={(e) => {
|
||||
if (compareList.length < 2) {
|
||||
|
||||
@ -157,7 +157,7 @@ export default function ConnectivityMap() {
|
||||
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-900 rounded-xl overflow-hidden border border-gray-200 dark:border-gray-700">
|
||||
<div className="relative z-0 bg-white dark:bg-gray-900 rounded-xl overflow-hidden border border-gray-200 dark:border-gray-700">
|
||||
{/* Tabs */}
|
||||
<div className="flex overflow-x-auto border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 scrollbar-hide">
|
||||
{["Commute", "Education", "Hospitals", "Work", "Entertainment", "Search"].map((tab) => (
|
||||
|
||||
@ -1,15 +1,19 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { useTheme } from "next-themes";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import Sidebar from "@/components/Sidebar";
|
||||
|
||||
export default function Header() {
|
||||
const { resolvedTheme } = useTheme();
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
const [isSidebarOpen, setIsSidebarOpen] = useState(false);
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
const handleScroll = () => {
|
||||
setIsScrolled(window.scrollY > 50);
|
||||
};
|
||||
@ -18,6 +22,35 @@ export default function Header() {
|
||||
return () => window.removeEventListener("scroll", handleScroll);
|
||||
}, []);
|
||||
|
||||
// Prevent hydration mismatch
|
||||
if (!mounted) {
|
||||
return (
|
||||
<header className="fixed top-0 left-0 right-0 z-50 bg-transparent py-6">
|
||||
<div className="w-full px-[50px] max-[375px]:px-[25px] flex items-center justify-between">
|
||||
<Link href="/" className="flex items-center gap-3 group">
|
||||
<div className="relative w-60 h-20 -left-[83px]">
|
||||
<Image
|
||||
src="/assets/images/white-logo.png"
|
||||
alt="Sky and Soil Logo"
|
||||
fill
|
||||
className="object-contain"
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
<div className="flex items-center gap-4">
|
||||
<button className="p-2 -mr-2 text-white">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
const isLight = resolvedTheme === "light";
|
||||
|
||||
return (
|
||||
<>
|
||||
<header
|
||||
@ -30,7 +63,7 @@ export default function Header() {
|
||||
<Link href="/" className="flex items-center gap-3 group">
|
||||
<div className="relative w-60 h-20 transition-transform group-hover:scale-105 -left-[83px]">
|
||||
<Image
|
||||
src={isScrolled ? "/assets/images/white-logo.png" : "/assets/images/white-logo.png"}
|
||||
src={(isScrolled && isLight) ? "/assets/images/blue-logo.png" : "/assets/images/white-logo.png"}
|
||||
alt="Sky and Soil Logo"
|
||||
fill
|
||||
className="object-contain"
|
||||
@ -46,7 +79,7 @@ export default function Header() {
|
||||
|
||||
|
||||
<button
|
||||
className="p-2 -mr-2 text-white"
|
||||
className={`p-2 -mr-2 ${(isScrolled && isLight) ? "text-primary" : "text-white"}`}
|
||||
onClick={() => setIsSidebarOpen(true)}
|
||||
>
|
||||
<svg
|
||||
@ -54,7 +87,7 @@ export default function Header() {
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={1.5}
|
||||
stroke="#ffffff"
|
||||
stroke="currentColor"
|
||||
className="w-6 h-6"
|
||||
>
|
||||
<path
|
||||
|
||||
@ -37,7 +37,7 @@ export default function InnerBanner({
|
||||
<nav className="mb-4">
|
||||
<ol className="flex items-center gap-2 text-sm text-white/80">
|
||||
{breadcrumbs.map((crumb, index) => (
|
||||
<li key={index} className="flex items-center gap-2">
|
||||
<li key={index} className="flex items-center gap-1 md:gap-2">
|
||||
{crumb.href ? (
|
||||
<a
|
||||
href={crumb.href}
|
||||
|
||||
@ -159,7 +159,7 @@ export default function PropertyCard({ property }: PropertyCardProps) {
|
||||
|
||||
<div className="flex items-center justify-between pt-4 border-t border-gray-200 dark:border-gray-800">
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-primary">{property.price}</div>
|
||||
<div className="text-2xl font-bold text-primary whitespace-nowrap">{property.price}</div>
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400">{property.overview.size}</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
|
||||
@ -644,38 +644,26 @@ export default function PropertyDetailClient({ property }: { property: Property
|
||||
|
||||
{/* Quick Stats */}
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 pt-6 border-t border-gray-200 dark:border-gray-800">
|
||||
|
||||
<div className="text-center p-4 bg-gray-50 dark:bg-gray-800 rounded-xl">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-4 pt-6 border-t border-gray-200 dark:border-gray-800">
|
||||
|
||||
<div className="text-center p-2 md:p-4 bg-gray-50 dark:bg-gray-800 rounded-xl">
|
||||
<div className="text-2xl font-bold text-primary mb-1">{property.overview.bhk}</div>
|
||||
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">Configuration</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="text-center p-4 bg-gray-50 dark:bg-gray-800 rounded-xl">
|
||||
|
||||
<div className="text-center p-2 md:p-4 bg-gray-50 dark:bg-gray-800 rounded-xl">
|
||||
<div className="text-2xl font-bold text-primary mb-1">{property.overview.size}</div>
|
||||
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">Area</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="text-center p-4 bg-gray-50 dark:bg-gray-800 rounded-xl">
|
||||
|
||||
<div className="text-center p-2 md:p-4 bg-gray-50 dark:bg-gray-800 rounded-xl">
|
||||
<div className="text-2xl font-bold text-primary mb-1">{property.overview.possession}</div>
|
||||
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">Possession</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="text-center p-4 bg-gray-50 dark:bg-gray-800 rounded-xl">
|
||||
|
||||
<div className="text-center p-2 md:p-4 bg-gray-50 dark:bg-gray-800 rounded-xl">
|
||||
<div className="text-2xl font-bold text-primary mb-1">{property.overview.totalUnits}</div>
|
||||
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">Total Units</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -716,11 +704,17 @@ export default function PropertyDetailClient({ property }: { property: Property
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
|
||||
<span className="px-4 py-1.5 bg-green-100 text-green-700 rounded-full text-sm font-medium">Better</span>
|
||||
<span className="px-2 sm:px-4 py-1.5 bg-green-100 text-green-700 rounded-full text-sm font-medium">
|
||||
Better
|
||||
</span>
|
||||
|
||||
<span className="px-4 py-1.5 bg-orange-100 text-orange-700 rounded-full text-sm font-medium">Average</span>
|
||||
<span className="px-2 sm:px-4 py-1.5 bg-orange-100 text-orange-700 rounded-full text-sm font-medium">
|
||||
Average
|
||||
</span>
|
||||
|
||||
<span className="px-4 py-1.5 bg-purple-100 text-purple-700 rounded-full text-sm font-medium">Subpar</span>
|
||||
<span className="px-2 sm:px-4 py-1.5 bg-purple-100 text-purple-700 rounded-full text-sm font-medium">
|
||||
Subpar
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
@ -916,27 +910,21 @@ export default function PropertyDetailClient({ property }: { property: Property
|
||||
|
||||
<div className="space-y-4">
|
||||
|
||||
<div className={`relative ${!isExpanded ? 'max-h-[150px] overflow-hidden' : ''}`}>
|
||||
<div className={`relative ${!isConnectivityExpanded ? 'max-h-[60px] overflow-hidden' : ''}`}>
|
||||
|
||||
<p className="text-gray-700 dark:text-gray-300 leading-relaxed text-lg">
|
||||
<p className="text-gray-700 dark:text-gray-300 leading-relaxed">
|
||||
|
||||
{property.description}
|
||||
<span className="text-orange-500 mr-2">✦</span>
|
||||
|
||||
{/* Simulating more content if description is short, or just showing description.
|
||||
{property.title} is located in {property.location}. In its vicinity, the closest metro is Dommasandra Circle Metro Station. It takes approximately 84 mins to reach the Kempegowda Airport from this property.
|
||||
|
||||
For the purpose of "Read More", we usually need a longer text.
|
||||
|
||||
If property.description is short, this might not look like the screenshot.
|
||||
|
||||
Assuming property.description is the main content. */}
|
||||
The area is well-connected to major IT hubs, schools, and hospitals, making it an ideal choice for families and professionals alike.
|
||||
|
||||
</p>
|
||||
|
||||
{!isConnectivityExpanded && (
|
||||
|
||||
|
||||
{!isExpanded && (
|
||||
|
||||
<div className="absolute bottom-0 left-0 right-0 h-20 bg-gradient-to-t from-white dark:from-gray-900 to-transparent"></div>
|
||||
<div className="absolute bottom-0 left-0 right-0 h-10 bg-gradient-to-t from-white dark:from-gray-900 to-transparent"></div>
|
||||
|
||||
)}
|
||||
|
||||
@ -944,13 +932,13 @@ export default function PropertyDetailClient({ property }: { property: Property
|
||||
|
||||
<button
|
||||
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
onClick={() => setIsConnectivityExpanded(!isConnectivityExpanded)}
|
||||
|
||||
className="text-orange-500 font-medium hover:text-orange-600 transition-colors"
|
||||
className="text-orange-500 font-medium hover:text-orange-600 transition-colors mt-2 text-sm underline"
|
||||
|
||||
>
|
||||
|
||||
{isExpanded ? "Read less" : "Read more"}
|
||||
{isConnectivityExpanded ? "Read less" : "Read more"}
|
||||
|
||||
</button>
|
||||
|
||||
@ -1084,13 +1072,13 @@ export default function PropertyDetailClient({ property }: { property: Property
|
||||
|
||||
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-4 gap-4 md:gap-8">
|
||||
|
||||
<div>
|
||||
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400 mb-1">Total Range</div>
|
||||
|
||||
<div className="text-2xl font-bold text-foreground">{property.price}</div>
|
||||
<div className="text-2xl font-bold text-foreground whitespace-nowrap">{property.price}</div>
|
||||
|
||||
</div>
|
||||
|
||||
@ -1108,7 +1096,7 @@ export default function PropertyDetailClient({ property }: { property: Property
|
||||
|
||||
</div>
|
||||
|
||||
<div className="text-2xl font-bold text-foreground">₹ 73K - ₹ 1.82 L</div>
|
||||
<div className="text-2xl font-bold text-foreground whitespace-nowrap">₹ 73K - ₹ 1.82 L</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@ -56,7 +56,7 @@ export default function PropertyGallery({ images, title }: PropertyGalleryProps)
|
||||
|
||||
while (displayImages.length < 5) {
|
||||
|
||||
displayImages.push("/assets/images/image.png");
|
||||
displayImages.push("/assets/images/projects/details/barca-2.webp");
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
|
||||
interface PropertyNavProps {
|
||||
sections: { id: string; label: string }[];
|
||||
@ -8,6 +8,7 @@ interface PropertyNavProps {
|
||||
|
||||
export default function PropertyNav({ sections }: PropertyNavProps) {
|
||||
const [activeSection, setActiveSection] = useState(sections[0]?.id || "");
|
||||
const navRef = useRef<HTMLElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
@ -29,6 +30,19 @@ export default function PropertyNav({ sections }: PropertyNavProps) {
|
||||
return () => window.removeEventListener("scroll", handleScroll);
|
||||
}, [sections]);
|
||||
|
||||
useEffect(() => {
|
||||
if (activeSection && navRef.current) {
|
||||
const activeBtn = document.getElementById(`nav-btn-${activeSection}`);
|
||||
if (activeBtn) {
|
||||
activeBtn.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'nearest',
|
||||
inline: 'center'
|
||||
});
|
||||
}
|
||||
}
|
||||
}, [activeSection]);
|
||||
|
||||
const scrollToSection = (id: string) => {
|
||||
const element = document.getElementById(id);
|
||||
if (element) {
|
||||
@ -47,10 +61,11 @@ export default function PropertyNav({ sections }: PropertyNavProps) {
|
||||
<div className="sticky top-28 z-30 bg-white/95 dark:bg-gray-900/95 backdrop-blur-md border-b border-gray-200 dark:border-gray-800 shadow-sm">
|
||||
|
||||
<div className="max-w-7xl mx-auto px-6">
|
||||
<nav className="flex gap-1 overflow-x-auto hide-scrollbar py-3">
|
||||
<nav ref={navRef} className="flex gap-1 overflow-x-auto hide-scrollbar py-3">
|
||||
{sections.map((section) => (
|
||||
<button
|
||||
key={section.id}
|
||||
id={`nav-btn-${section.id}`}
|
||||
onClick={() => scrollToSection(section.id)}
|
||||
className={`px-6 py-2 rounded-lg font-medium whitespace-nowrap transition-all duration-200 ${activeSection === section.id
|
||||
? "bg-primary text-white shadow-md"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user