list done ig, details also made compatible.

src/app/page.tsx

@@ -15,7 +15,7 @@ export default function Home() {
    <>
    <div>
     <Navigation />
-    <List />
+    <Features />
     <Footer />
    </div>
    </>

src/components/authentication/login.tsx

@@ -0,0 +1,20 @@
+import localFont from "next/font/local";
+
+
+const figtree = localFont({
+    src: [
+        {
+            path: '../../../public/Fonts/figtree/figtree.ttf',
+        },
+    ],
+})
+
+const Login = () => {
+    return (
+        <div>
+            <h1 className={figtree.className}>Login</h1>
+        </div>
+    )
+}
+
+export default Login

src/components/authentication/signup.tsx

@@ -0,0 +1,20 @@
+import localFont from "next/font/local";
+
+
+const figtree = localFont({
+    src: [
+        {
+            path: '../../../public/Fonts/figtree/figtree.ttf',
+        },
+    ],
+})
+
+const Signup = () => {
+    return (
+        <div>
+            <h1 className={`${figtree.className} text-4xl font-bold`}>Signup</h1>
+        </div>
+    )
+}
+
+export default Signup

src/components/details/features.tsx

@@ -26,7 +26,7 @@ const property: Property = {
     guests: 4,
     bedrooms: 2,
     beds: 2,
-    baths: 2,
+    bathrooms: 2,
     rating: 4.81,
     reviewCount: 5,
     price: 25000,
@@ -50,7 +50,7 @@ const property: Property = {
         joined: "2020",
         isSuperhost: true
     },
-    images: [
+    photos: [
         "/hotel-banner.png",
         "/hotel-banner.png",
         "/hotel-banner.png",
@@ -98,14 +98,18 @@ const property: Property = {
             rating: 5,
             comment: "Host was super helpful and gave great local recommendations. The house is even better than the photos."
         }
-    ]
+    ],
+    propertyType: "house",
+    placeType: "entire",
+    instantBook: true,
+    safety: ["camera", "alarm"]
 }
 
 function Features() {
     return (
         <div className={`w-full bg-white ${figtree.className}`}>
             <Header property={property} />
-            <ImageGrid images={property.images} />
+            <ImageGrid photos={property.photos} />
 
             {/* Main Content */}
             <div className="max-w-[95%] mx-auto grid grid-cols-1 lg:grid-cols-3 gap-12 mb-20">
@@ -116,7 +120,7 @@ function Features() {
                         guests={property.guests}
                         bedrooms={property.bedrooms}
                         beds={property.beds}
-                        baths={property.baths}
+                        bathrooms={property.bathrooms}
                     />
                     <Highlights />
                     <Description description={property.description} />

src/components/details/host-info.tsx

@@ -6,16 +6,16 @@ interface HostInfoProps {
     guests: number;
     bedrooms: number;
     beds: number;
-    baths: number;
+    bathrooms: number;
 }
 
-export function HostInfo({ host, guests, bedrooms, beds, baths }: HostInfoProps) {
+export function HostInfo({ host, guests, bedrooms, beds, bathrooms }: HostInfoProps) {
     return (
         <div className="flex items-center justify-between pb-8 border-b-2 border-gray-100">
             <div>
                 <h2 className="text-2xl font-medium mb-1">Hosted by {host.name}</h2>
                 <p className="text-gray-600">
-                    {guests} guests · {bedrooms} bedrooms · {beds} beds · {baths} baths
+                    {guests} guests · {bedrooms} bedrooms · {beds} beds · {bathrooms} baths
                 </p>
             </div>
             <div className="relative w-14 h-14 md:w-16 md:h-16">

src/components/details/image-grid.tsx

@@ -1,16 +1,16 @@
 import Image from "next/image";
 
 interface ImageGridProps {
-    images: string[];
+    photos: string[];
 }
 
-export function ImageGrid({ images }: ImageGridProps) {
+export function ImageGrid({ photos }: ImageGridProps) {
     return (
         <div className="max-w-[95%] mx-auto mb-12">
             <div className="grid grid-cols-1 md:grid-cols-4 gap-2 h-[400px] md:h-[500px] rounded-xl overflow-hidden md:rounded-none">
                 <div className="md:col-span-2 h-full relative border-2 border-black group overflow-hidden">
                     <Image
-                        src={images[0]}
+                        src={photos[0]}
                         alt="Main view"
                         fill
                         className="object-cover group-hover:scale-105 transition-transform duration-500"
@@ -19,7 +19,7 @@ export function ImageGrid({ images }: ImageGridProps) {
                 <div className="hidden md:grid grid-cols-1 gap-2 h-full">
                     <div className="relative h-full border-2 border-black group overflow-hidden">
                         <Image
-                            src={images[1]}
+                            src={photos[1]}
                             alt="View 2"
                             fill
                             className="object-cover group-hover:scale-105 transition-transform duration-500"
@@ -27,7 +27,7 @@ export function ImageGrid({ images }: ImageGridProps) {
                     </div>
                     <div className="relative h-full border-2 border-black group overflow-hidden">
                         <Image
-                            src={images[2]}
+                            src={photos[2]}
                             alt="View 3"
                             fill
                             className="object-cover group-hover:scale-105 transition-transform duration-500"
@@ -37,7 +37,7 @@ export function ImageGrid({ images }: ImageGridProps) {
                 <div className="hidden md:grid grid-cols-1 gap-2 h-full">
                     <div className="relative h-full border-2 border-black group overflow-hidden">
                         <Image
-                            src={images[3]}
+                            src={photos[3]}
                             alt="View 4"
                             fill
                             className="object-cover group-hover:scale-105 transition-transform duration-500"
@@ -45,7 +45,7 @@ export function ImageGrid({ images }: ImageGridProps) {
                     </div>
                     <div className="relative h-full border-2 border-black group overflow-hidden">
                         <Image
-                            src={images[4]}
+                            src={photos[4]}
                             alt="View 5"
                             fill
                             className="object-cover group-hover:scale-105 transition-transform duration-500"

src/components/details/types.ts

@@ -28,13 +28,17 @@ export interface Property {
     guests: number;
     bedrooms: number;
     beds: number;
-    baths: number;
+    bathrooms: number;
     rating: number;
     reviewCount: number;
     price: number;
     description: string;
     amenities: Amenity[];
     host: Host;
-    images: string[];
+    photos: string[];
     reviews: Review[];
+    propertyType: string;
+    placeType: string;
+    instantBook: boolean;
+    safety: string[];
 }

src/components/list-property/list.tsx

@@ -1,9 +1,10 @@
 "use client";
 
-import { useState, useRef } from "react";
+import { useState, useRef, useEffect } from "react";
 import localFont from "next/font/local";
 import gsap from "gsap";
 import { useGSAP } from "@gsap/react";
+import Image from "next/image";
 import {
     House,
     Buildings,
@@ -18,8 +19,16 @@ import {
     CalendarBlank,
     ShieldCheck,
     CaretLeft,
-    CaretRight
-} from "@phosphor-icons/react";
+    CaretRight,
+    Star,
+    SwimmingPool,
+    Car,
+    CookingPot,
+    TelevisionSimple,
+    Wind,
+    X,
+    WarningCircle,
+} from "@phosphor-icons/react/dist/ssr";
 
 const figtree = localFont({
     src: [
@@ -29,14 +38,15 @@ const figtree = localFont({
     ],
 })
 
-// Shared styles
-const containerStyle = `flex flex-col gap-6 w-full max-w-xl mx-auto`;
-const titleStyle = `${figtree.className} text-3xl font-bold mb-4`;
-const inputStyle = `${figtree.className} w-full p-4 border-2 border-black text-lg outline-none focus:bg-gray-50 transition-colors`;
-const buttonStyle = `${figtree.className} flex items-center justify-center gap-2 px-8 py-3 border-2 border-black bg-[#E7FE78] text-lg font-medium hover:bg-[#dcfc4e] transition-colors disabled:opacity-50 disabled:cursor-not-allowed`;
-const secondaryButtonStyle = `${figtree.className} flex items-center justify-center gap-2 px-8 py-3 border-2 border-black bg-white text-lg font-medium hover:bg-gray-50 transition-colors`;
+// Shared styles matching search.tsx and results.tsx
+const containerStyle = `flex flex-col gap-8 w-full max-w-xl mx-auto pb-24`; // Added padding bottom for fixed footer
+const titleStyle = `${figtree.className} text-4xl font-bold mb-2`;
+const subtitleStyle = `${figtree.className} text-lg text-gray-500 mb-8`;
+const inputStyle = `${figtree.className} w-full p-4 border-2 border-black text-lg outline-none focus:bg-[#F7F7F7] transition-colors placeholder:text-gray-400`;
+const buttonStyle = `${figtree.className} flex items-center justify-center gap-2 px-8 py-3 border-2 border-black bg-[#E7FE78] text-lg font-medium hover:bg-[#dcfc4e] transition-colors disabled:opacity-50 disabled:cursor-not-allowed shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:translate-y-[2px] hover:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] active:translate-y-[4px] active:shadow-none transition-all`;
+const secondaryButtonStyle = `${figtree.className} flex items-center justify-center gap-2 px-8 py-3 border-2 border-black bg-white text-lg font-medium hover:bg-gray-50 transition-colors shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:translate-y-[2px] hover:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] active:translate-y-[4px] active:shadow-none transition-all`;
 const optionCardStyle = (selected: boolean) =>
-    `flex flex-col items-center justify-center gap-3 p-6 border-2 border-black cursor-pointer transition-all hover:bg-gray-50 ${selected ? 'bg-[#E7FE78]' : 'bg-white'}`;
+    `flex flex-col items-center justify-center gap-4 p-6 border-2 border-black cursor-pointer transition-all ${selected ? 'bg-[#E7FE78]' : 'bg-white hover:bg-gray-50'}`;
 
 interface FormData {
     propertyType?: string;
@@ -51,19 +61,103 @@ interface FormData {
     price?: string;
     instantBook?: boolean;
     safety?: string[];
+    title?: string; // Added title for preview
+    photos?: string[];
 }
 
 type FormValue = string | number | boolean | string[] | undefined;
 
 interface StepProps {
-    onNext: () => void;
-    onBack: () => void;
     data: FormData;
     updateData: (key: keyof FormData, value: FormValue) => void;
 }
 
-/* Property Type */
-const PropertyType = ({ onNext, data, updateData }: StepProps) => {
+/* --- Live Preview Component --- */
+const LivePreview = ({ data }: { data: FormData }) => {
+    // Helpers to derive display values
+    const getCity = () => {
+        if (!data.location) return "YOUR CITY";
+        const parts = data.location.split(',');
+        return parts[0].trim().toUpperCase();
+    };
+
+    const getTitle = () => {
+        if (data.title) return data.title;
+        const type = data.propertyType ? data.propertyType.charAt(0).toUpperCase() + data.propertyType.slice(1) : "Property";
+        const place = data.placeType === 'entire' ? 'Entire place' : data.placeType === 'room' ? 'Private room' : 'Shared room';
+        return `${type} · ${place}`;
+    };
+
+    const getPrice = () => {
+        return data.price ? `₨${parseInt(data.price).toLocaleString()}` : "₨0";
+    };
+
+    return (
+        <div className="w-full max-w-md mx-auto sticky top-24">
+            <div className="bg-white border-2 border-black p-6 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]">
+                <div className="flex items-center justify-between mb-4">
+                    <h3 className={`${figtree.className} text-xl font-bold`}>Preview</h3>
+                    <div className="px-3 py-1 bg-black text-white text-xs font-bold uppercase tracking-wider rounded-full">
+                        New
+                    </div>
+                </div>
+
+                {/* Card Replica */}
+                <div className="border-2 border-black overflow-hidden bg-white">
+                    {/* Image Placeholder */}
+                    <div className="relative aspect-[16/14] bg-gray-100 flex items-center justify-center border-b-2 border-black overflow-hidden">
+                        {data.photos && data.photos.length > 0 ? (
+                            <Image src={data.photos[0]} alt="Preview" fill className="object-cover" />
+                        ) : (
+                            <div className="flex flex-col items-center gap-2 text-gray-400">
+                                <Camera size={48} />
+                                <span className={`${figtree.className} font-medium`}>Cover Photo</span>
+                            </div>
+                        )}
+                    </div>
+
+                    {/* Details */}
+                    <div className="p-4 space-y-2">
+                        <div className="flex items-center justify-between">
+                            <p className={`${figtree.className} text-xs font-bold text-gray-700 tracking-wider uppercase`}>
+                                {getCity()}
+                            </p>
+                            <div className="flex items-center gap-1">
+                                <Star size={16} weight="fill" />
+                                <span className={`${figtree.className} text-sm font-medium`}>New</span>
+                            </div>
+                        </div>
+
+                        <h3 className={`${figtree.className} text-base font-normal text-gray-900 line-clamp-1`}>
+                            {getTitle()}
+                        </h3>
+
+                        <p className={`${figtree.className} text-base`}>
+                            <span className="font-bold">{getPrice()}</span>
+                            <span className="text-gray-600"> night</span>
+                        </p>
+                    </div>
+                </div>
+
+                {/* Live Updates Summary */}
+                <div className="mt-6 space-y-3 border-t-2 border-gray-100 pt-4">
+                    <div className="flex justify-between text-sm">
+                        <span className="text-gray-500">Guests</span>
+                        <span className="font-medium">{data.guests || 0}</span>
+                    </div>
+                    <div className="flex justify-between text-sm">
+                        <span className="text-gray-500">Amenities</span>
+                        <span className="font-medium">{data.amenities?.length || 0} selected</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+/* --- Step Components --- */
+
+const PropertyType = ({ data, updateData }: StepProps) => {
     const types = [
         { id: 'house', label: 'House', icon: House },
         { id: 'flat', label: 'Flat', icon: Buildings },
@@ -71,23 +165,19 @@ const PropertyType = ({ onNext, data, updateData }: StepProps) => {
         { id: 'guesthouse', label: 'Guesthouse', icon: Bed },
     ];
 
-    const handleSelect = (id: string) => {
-        updateData('propertyType', id);
-        onNext();
-    };
-
     return (
-        <div className="flex flex-col gap-6">
+        <div className="flex flex-col">
             <h2 className={titleStyle}>What kind of place will you host?</h2>
+            <p className={subtitleStyle}>Select the category that best describes your property.</p>
             <div className="grid grid-cols-2 gap-4">
                 {types.map((type) => (
                     <button
                         key={type.id}
                         type="button"
-                        onClick={() => handleSelect(type.id)}
+                        onClick={() => updateData('propertyType', type.id)}
                         className={optionCardStyle(data.propertyType === type.id)}
                     >
-                        <type.icon size={48} weight="light" />
+                        <type.icon size={48} weight={data.propertyType === type.id ? "fill" : "light"} />
                         <span className={`${figtree.className} text-xl font-medium`}>{type.label}</span>
                     </button>
                 ))}
@@ -96,54 +186,45 @@ const PropertyType = ({ onNext, data, updateData }: StepProps) => {
     )
 }
 
-/* Property Place Type */
-const PropertyPlaceType = ({ onNext, onBack, data, updateData }: StepProps) => {
+const PropertyPlaceType = ({ data, updateData }: StepProps) => {
     const places = [
-        { id: 'entire', label: 'An entire place', description: 'Guests have the whole place to themselves.' },
-        { id: 'room', label: 'A room', description: 'Guests have their own room in a home, plus access to shared spaces.' },
+        { id: 'entire', label: 'An entire place', description: 'Guests have the entire property to themselves, with full privacy and unrestricted access.' },
+        { id: 'room', label: 'A room', description: 'Guests have their own private room within the home, along with comfortable access to shared spaces.' },
         { id: 'shared', label: 'A shared room', description: 'Guests sleep in a room or common area that may be shared with others.' },
     ];
 
-    const handleSelect = (id: string) => {
-        updateData('placeType', id);
-        onNext();
-    };
-
     return (
-        <div className="flex flex-col gap-6">
+        <div className="flex flex-col">
             <h2 className={titleStyle}>What type of place will guests have?</h2>
+            <p className={subtitleStyle}>Choose the level of privacy your guests will enjoy.</p>
             <div className="flex flex-col gap-4">
                 {places.map((place) => (
                     <button
                         key={place.id}
                         type="button"
-                        onClick={() => handleSelect(place.id)}
-                        className={`${optionCardStyle(data.placeType === place.id)} flex-row justify-between text-left items-center w-full`}
+                        onClick={() => updateData('placeType', place.id)}
+                        className={`${optionCardStyle(data.placeType === place.id)} flex-row justify-between text-left items-center w-full p-6`}
                     >
                         <div className="flex flex-col gap-1">
                             <span className={`${figtree.className} text-xl font-bold`}>{place.label}</span>
                             <span className={`${figtree.className} text-gray-600`}>{place.description}</span>
                         </div>
+                        {data.placeType === place.id && <CheckCircle size={32} weight="fill" />}
                     </button>
                 ))}
             </div>
-            <div className="flex justify-start mt-4">
-                <button type="button" onClick={onBack} className={secondaryButtonStyle}>
-                    <CaretLeft size={20} /> Back
-                </button>
-            </div>
         </div>
     )
 }
 
-/* Property Location */
-const PropertyLocation = ({ onNext, onBack, data, updateData }: StepProps) => {
+const PropertyLocation = ({ data, updateData }: StepProps) => {
     return (
-        <div className="flex flex-col gap-6">
+        <div className="flex flex-col">
             <h2 className={titleStyle}>Where's your place located?</h2>
-            <div className="flex flex-col gap-4">
+            <p className={subtitleStyle}>Your address is only shared with guests after they've made a reservation.</p>
+            <div className="flex flex-col gap-6">
                 <div className="relative">
-                    <MapPin size={24} className="absolute left-4 top-1/2 -translate-y-1/2" />
+                    <MapPin size={24} className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-500" />
                     <input
                         type="text"
                         placeholder="Enter your address"
@@ -152,25 +233,17 @@ const PropertyLocation = ({ onNext, onBack, data, updateData }: StepProps) => {
                         onChange={(e) => updateData('location', e.target.value)}
                     />
                 </div>
-                {/* Placeholder for map */}
-                <div className="w-full h-64 bg-gray-100 border-2 border-black flex items-center justify-center">
-                    <span className={`${figtree.className} text-gray-500`}>Map Preview</span>
+                <div className="w-full h-80 bg-gray-100 border-2 border-black flex flex-col items-center justify-center gap-4 relative overflow-hidden group">
+                    <div className="absolute inset-0 opacity-10 bg-[radial-gradient(#000_1px,transparent_1px)] [background-size:16px_16px]" />
+                    <MapPin size={48} className="text-gray-400 group-hover:text-black transition-colors duration-300" weight="fill" />
+                    <span className={`${figtree.className} text-gray-500 font-medium`}>Map Preview</span>
                 </div>
             </div>
-            <div className="flex justify-between mt-4">
-                <button type="button" onClick={onBack} className={secondaryButtonStyle}>
-                    <CaretLeft size={20} /> Back
-                </button>
-                <button type="button" onClick={() => onNext()} className={buttonStyle}>
-                    Next <CaretRight size={20} />
-                </button>
-            </div>
         </div>
     )
 }
 
-/* Property Capacity */
-const PropertyCapacity = ({ onNext, onBack, data, updateData }: StepProps) => {
+const PropertyCapacity = ({ data, updateData }: StepProps) => {
     const counters: { key: keyof FormData; label: string }[] = [
         { key: 'guests', label: 'Guests' },
         { key: 'bedrooms', label: 'Bedrooms' },
@@ -184,76 +257,46 @@ const PropertyCapacity = ({ onNext, onBack, data, updateData }: StepProps) => {
     };
 
     return (
-        <div className="flex flex-col gap-6">
+        <div className="flex flex-col">
             <h2 className={titleStyle}>Share some basics about your place</h2>
+            <p className={subtitleStyle}>You'll add more details later, like bed types.</p>
             <div className="flex flex-col gap-6">
                 {counters.map((item) => (
-                    <div key={item.key} className="flex items-center justify-between border-b-2 border-gray-100 pb-4">
-                        <span className={`${figtree.className} text-xl`}>{item.label}</span>
-                        <div className="flex items-center gap-4">
+                    <div key={item.key} className="flex items-center justify-between border-b-2 border-gray-100 pb-6">
+                        <span className={`${figtree.className} text-xl font-medium`}>{item.label}</span>
+                        <div className="flex items-center gap-6">
                             <button
                                 type="button"
                                 onClick={() => updateCount(item.key, -1)}
-                                className="w-10 h-10 rounded-full border-2 border-black flex items-center justify-center hover:bg-gray-100"
+                                disabled={!data[item.key]}
+                                className="w-12 h-12 rounded-full border-2 border-black flex items-center justify-center hover:bg-gray-100 disabled:opacity-30 disabled:hover:bg-transparent transition-colors"
                             >
-                                -
+                                <span className="text-2xl mb-1">-</span>
                             </button>
-                            <span className={`${figtree.className} text-xl w-8 text-center`}>{data[item.key] || 0}</span>
+                            <span className={`${figtree.className} text-xl w-8 text-center font-bold`}>{data[item.key] || 0}</span>
                             <button
                                 type="button"
                                 onClick={() => updateCount(item.key, 1)}
-                                className="w-10 h-10 rounded-full border-2 border-black flex items-center justify-center hover:bg-gray-100"
+                                className="w-12 h-12 rounded-full border-2 border-black flex items-center justify-center hover:bg-gray-100 transition-colors"
                             >
-                                +
+                                <span className="text-2xl mb-1">+</span>
                             </button>
                         </div>
                     </div>
                 ))}
             </div>
-            <div className="flex justify-between mt-4">
-                <button type="button" onClick={onBack} className={secondaryButtonStyle}>
-                    <CaretLeft size={20} /> Back
-                </button>
-                <button type="button" onClick={() => onNext()} className={buttonStyle}>
-                    Next <CaretRight size={20} />
-                </button>
-            </div>
         </div>
     )
 }
 
-/* Property Photos */
-const PropertyPhotos = ({ onNext, onBack }: StepProps) => {
-    return (
-        <div className="flex flex-col gap-6">
-            <h2 className={titleStyle}>Add some photos of your house</h2>
-            <div className="border-2 border-dashed border-black p-12 flex flex-col items-center justify-center gap-4 bg-gray-50 cursor-pointer hover:bg-gray-100 transition-colors">
-                <Camera size={48} />
-                <div className="text-center">
-                    <p className={`${figtree.className} text-xl font-bold`}>Drag your photos here</p>
-                    <p className={`${figtree.className} text-gray-500`}>Choose at least 5 photos</p>
-                </div>
-                <button type="button" className="underline font-medium">Upload from your device</button>
-            </div>
-            <div className="flex justify-between mt-4">
-                <button type="button" onClick={onBack} className={secondaryButtonStyle}>
-                    <CaretLeft size={20} /> Back
-                </button>
-                <button type="button" onClick={() => onNext()} className={buttonStyle}>
-                    Next <CaretRight size={20} />
-                </button>
-            </div>
-        </div>
-    )
-}
-
-/* Property Amenities */
-const PropertyAmenities = ({ onNext, onBack, data, updateData }: StepProps) => {
+const PropertyAmenities = ({ data, updateData }: StepProps) => {
     const amenities = [
         { id: 'wifi', label: 'Wi-Fi', icon: WifiHigh },
-        { id: 'kitchen', label: 'Kitchen', icon: House },
-        { id: 'parking', label: 'Free parking', icon: Farm },
-        { id: 'pool', label: 'Pool', icon: Buildings },
+        { id: 'kitchen', label: 'Kitchen', icon: CookingPot },
+        { id: 'parking', label: 'Free parking', icon: Car },
+        { id: 'pool', label: 'Pool', icon: SwimmingPool },
+        { id: 'ac', label: 'Air conditioning', icon: Wind }, // Using House as placeholder for AC if needed
+        { id: 'tv', label: 'TV', icon: TelevisionSimple },
     ];
 
     const toggleAmenity = (id: string) => {
@@ -265,159 +308,184 @@ const PropertyAmenities = ({ onNext, onBack, data, updateData }: StepProps) => {
     };
 
     return (
-        <div className="flex flex-col gap-6">
+        <div className="flex flex-col">
             <h2 className={titleStyle}>What does your place offer?</h2>
+            <p className={subtitleStyle}>You can add more amenities after you publish.</p>
             <div className="grid grid-cols-2 gap-4">
                 {amenities.map((amenity) => (
                     <button
                         key={amenity.id}
                         type="button"
                         onClick={() => toggleAmenity(amenity.id)}
-                        className={`${optionCardStyle((data.amenities || []).includes(amenity.id))} items-start w-full`}
+                        className={`${optionCardStyle((data.amenities || []).includes(amenity.id))} items-start w-full text-left`}
                     >
-                        <amenity.icon size={32} />
+                        <amenity.icon size={32} weight={(data.amenities || []).includes(amenity.id) ? "fill" : "regular"} />
                         <span className={`${figtree.className} text-lg font-medium`}>{amenity.label}</span>
                     </button>
                 ))}
             </div>
-            <div className="flex justify-between mt-4">
-                <button type="button" onClick={onBack} className={secondaryButtonStyle}>
-                    <CaretLeft size={20} /> Back
-                </button>
-                <button type="button" onClick={() => onNext()} className={buttonStyle}>
-                    Next <CaretRight size={20} />
-                </button>
-            </div>
         </div>
     )
 }
 
-/* Property Description */
-const PropertyDescription = ({ onNext, onBack, data, updateData }: StepProps) => {
+const PropertyDescription = ({ data, updateData }: StepProps) => {
     return (
-        <div className="flex flex-col gap-6">
+        <div className="flex flex-col">
             <h2 className={titleStyle}>How would you describe your place?</h2>
-            <div className="flex flex-col gap-4">
-                <textarea
-                    placeholder="This unique place has a style all its own..."
-                    className={`${inputStyle} h-48 resize-none`}
-                    value={data.description || ''}
-                    onChange={(e) => updateData('description', e.target.value)}
-                />
-            </div>
-            <div className="flex justify-between mt-4">
-                <button type="button" onClick={onBack} className={secondaryButtonStyle}>
-                    <CaretLeft size={20} /> Back
-                </button>
-                <button type="button" onClick={() => onNext()} className={buttonStyle}>
-                    Next <CaretRight size={20} />
-                </button>
+            <p className={subtitleStyle}>Short and sweet works best.</p>
+            <div className="flex flex-col gap-6">
+                <div>
+                    <label className="block text-sm font-bold mb-2">Title</label>
+                    <input
+                        type="text"
+                        placeholder="e.g. Cozy Cottage in the Hills"
+                        className={inputStyle}
+                        value={data.title || ''}
+                        onChange={(e) => updateData('title', e.target.value)}
+                    />
+                </div>
+                <div>
+                    <label className="block text-sm font-bold mb-2">Description</label>
+                    <textarea
+                        placeholder="This unique place has a style all its own..."
+                        className={`${inputStyle} h-48 resize-none`}
+                        value={data.description || ''}
+                        onChange={(e) => updateData('description', e.target.value)}
+                    />
+                </div>
             </div>
         </div>
     )
 }
 
-/* Property Price */
-const PropertyPrice = ({ onNext, onBack, data, updateData }: StepProps) => {
+const PropertyPhotos = ({ data, updateData }: StepProps) => {
+    const fileInputRef = useRef<HTMLInputElement>(null);
+
+    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (e.target.files) {
+            const newPhotos = Array.from(e.target.files).map(file => URL.createObjectURL(file));
+            const currentPhotos = data.photos || [];
+            updateData('photos', [...currentPhotos, ...newPhotos]);
+        }
+    };
+
+    const removePhoto = (index: number) => {
+        const currentPhotos = data.photos || [];
+        const updated = currentPhotos.filter((_, i) => i !== index);
+        updateData('photos', updated);
+    };
+
     return (
-        <div className="flex flex-col gap-6">
+        <div className="flex flex-col">
+            <h2 className={titleStyle}>Add some photos of your house</h2>
+            <p className={subtitleStyle}>You'll need 5 photos to get started. You can add more or make changes later.</p>
+
+            <div className="flex flex-col gap-6">
+                <div
+                    onClick={() => fileInputRef.current?.click()}
+                    className="border-2 border-dashed border-gray-300 rounded-lg p-12 flex flex-col items-center justify-center gap-4 cursor-pointer hover:bg-gray-50 transition-colors"
+                >
+                    <Camera size={48} className="text-gray-400" />
+                    <span className={`${figtree.className} text-lg font-medium underline`}>Upload photos</span>
+                    <span className="text-sm text-gray-500">JPG, PNG up to 10MB</span>
+                    <input
+                        type="file"
+                        multiple
+                        accept="image/*"
+                        className="hidden"
+                        ref={fileInputRef}
+                        onChange={handleFileChange}
+                    />
+                </div>
+
+                {data.photos && data.photos.length > 0 && (
+                    <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+                        {data.photos.map((photo, index) => (
+                            <div key={index} className="relative aspect-square border-2 border-black rounded-lg overflow-hidden group">
+                                <Image src={photo} alt={`Property ${index + 1}`} fill className="object-cover" />
+                                <button
+                                    onClick={() => removePhoto(index)}
+                                    className="absolute top-2 right-2 bg-white rounded-full p-1 border-2 border-black hover:bg-red-50 transition-colors z-10"
+                                >
+                                    <X size={16} />
+                                </button>
+                                {index === 0 && (
+                                    <div className="absolute bottom-2 left-2 bg-black text-white text-xs px-2 py-1 rounded z-10">Cover Photo</div>
+                                )}
+                            </div>
+                        ))}
+                    </div>
+                )}
+
+                {(!data.photos || data.photos.length < 5) && (
+                    <div className="flex items-center gap-2 text-orange-600 bg-orange-50 p-4 rounded-lg border border-orange-200">
+                        <WarningCircle size={24} />
+                        <span className="font-medium">Please upload at least {5 - (data.photos?.length || 0)} more photos</span>
+                    </div>
+                )}
+            </div>
+        </div>
+    )
+}
+
+const PropertyPrice = ({ data, updateData }: StepProps) => {
+    return (
+        <div className="flex flex-col">
             <h2 className={titleStyle}>Now, set your price</h2>
-            <div className="flex flex-col gap-4 items-center">
+            <p className={subtitleStyle}>You can change it anytime.</p>
+            <div className="flex flex-col gap-8 items-center py-12 bg-[#F7F7F7] border-2 border-black">
                 <div className="relative w-full max-w-xs">
-                    <CurrencyDollar size={32} className="absolute left-4 top-1/2 -translate-y-1/2" />
+                    <span className="absolute left-4 top-1/2 -translate-y-1/2 text-4xl font-bold text-gray-400">₨</span>
                     <input
                         type="number"
                         placeholder="0"
-                        className={`${inputStyle} pl-14 text-4xl font-bold text-center`}
+                        className="w-full bg-transparent text-6xl font-bold text-center outline-none p-4"
                         value={data.price || ''}
                         onChange={(e) => updateData('price', e.target.value)}
                     />
                 </div>
-                <p className={`${figtree.className} text-gray-500`}>per night</p>
-            </div>
-            <div className="flex justify-between mt-4">
-                <button type="button" onClick={onBack} className={secondaryButtonStyle}>
-                    <CaretLeft size={20} /> Back
-                </button>
-                <button type="button" onClick={() => onNext()} className={buttonStyle}>
-                    Next <CaretRight size={20} />
-                </button>
+                <p className={`${figtree.className} text-xl text-gray-500`}>per night</p>
             </div>
         </div>
     )
 }
 
-/* Property Instant Approval */
-const PropertyInstantApproval = ({ onNext, onBack, data, updateData }: StepProps) => {
+const PropertyInstantApproval = ({ data, updateData }: StepProps) => {
     return (
-        <div className="flex flex-col gap-6">
+        <div className="flex flex-col">
             <h2 className={titleStyle}>Decide how you'll confirm reservations</h2>
             <div className="flex flex-col gap-4">
                 <button
                     type="button"
                     onClick={() => updateData('instantBook', true)}
-                    className={`${optionCardStyle(data.instantBook === true)} w-full`}
+                    className={`${optionCardStyle(data.instantBook === true)} w-full flex-row items-start text-left`}
                 >
-                    <div className="flex items-center gap-4 w-full">
-                        <CheckCircle size={32} />
-                        <div className="flex flex-col text-left">
-                            <span className="font-bold text-lg">Use Instant Book</span>
-                            <span className="text-gray-600">Guests can book automatically.</span>
-                        </div>
+                    <CheckCircle size={32} weight={data.instantBook === true ? "fill" : "regular"} className="shrink-0" />
+                    <div className="flex flex-col">
+                        <span className="font-bold text-lg">Use Instant Book</span>
+                        <span className="text-gray-600">Guests can book automatically. No need to approve reservations.</span>
                     </div>
                 </button>
                 <button
                     type="button"
                     onClick={() => updateData('instantBook', false)}
-                    className={`${optionCardStyle(data.instantBook === false)} w-full`}
+                    className={`${optionCardStyle(data.instantBook === false)} w-full flex-row items-start text-left`}
                 >
-                    <div className="flex items-center gap-4 w-full">
-                        <Article size={32} />
-                        <div className="flex flex-col text-left">
-                            <span className="font-bold text-lg">Approve manually</span>
-                            <span className="text-gray-600">You approve or decline booking requests.</span>
-                        </div>
+                    <Article size={32} weight={data.instantBook === false ? "fill" : "regular"} className="shrink-0" />
+                    <div className="flex flex-col">
+                        <span className="font-bold text-lg">Approve manually</span>
+                        <span className="text-gray-600">You approve or decline booking requests. You will be notified of each booking request.</span>
                     </div>
                 </button>
             </div>
-            <div className="flex justify-between mt-4">
-                <button type="button" onClick={onBack} className={secondaryButtonStyle}>
-                    <CaretLeft size={20} /> Back
-                </button>
-                <button type="button" onClick={() => onNext()} className={buttonStyle}>
-                    Next <CaretRight size={20} />
-                </button>
-            </div>
         </div>
     )
 }
 
-/* Availability Calendar */
-const AvailabilityCalendar = ({ onNext, onBack }: StepProps) => {
-    return (
-        <div className="flex flex-col gap-6">
-            <h2 className={titleStyle}>When is your place available?</h2>
-            <div className="flex flex-col items-center justify-center h-64 border-2 border-black bg-gray-50">
-                <CalendarBlank size={48} className="text-gray-400 mb-2" />
-                <p className={`${figtree.className} text-gray-500`}>Calendar Component Placeholder</p>
-            </div>
-            <div className="flex justify-between mt-4">
-                <button type="button" onClick={onBack} className={secondaryButtonStyle}>
-                    <CaretLeft size={20} /> Back
-                </button>
-                <button type="button" onClick={() => onNext()} className={buttonStyle}>
-                    Next <CaretRight size={20} />
-                </button>
-            </div>
-        </div>
-    )
-}
-
-/* Safety Details */
-const SafetyDetails = ({ onNext, onBack, data, updateData }: StepProps) => {
+const SafetyDetails = ({ data, updateData }: StepProps) => {
     const safetyItems = [
         { id: 'camera', label: 'Security camera(s)', icon: Camera },
-        { id: 'weapons', label: 'Weapons', icon: ShieldCheck },
+        { id: 'weapons', label: 'Dangerous weapons', icon: ShieldCheck },
         { id: 'animals', label: 'Dangerous animals', icon: Farm },
     ];
 
@@ -430,7 +498,7 @@ const SafetyDetails = ({ onNext, onBack, data, updateData }: StepProps) => {
     };
 
     return (
-        <div className="flex flex-col gap-6">
+        <div className="flex flex-col">
             <h2 className={titleStyle}>Does your place have any of these?</h2>
             <div className="flex flex-col gap-4">
                 {safetyItems.map((item) => (
@@ -444,27 +512,27 @@ const SafetyDetails = ({ onNext, onBack, data, updateData }: StepProps) => {
                             <item.icon size={32} />
                             <span className={`${figtree.className} text-lg font-medium`}>{item.label}</span>
                         </div>
-                        <div className={`w-6 h-6 rounded-full border-2 border-black ${(data.safety || []).includes(item.id) ? 'bg-black' : 'bg-transparent'}`} />
+                        <div className={`w-6 h-6 rounded-full border-2 border-black flex items-center justify-center transition-colors ${(data.safety || []).includes(item.id) ? 'bg-black' : 'bg-transparent'}`}>
+                            {(data.safety || []).includes(item.id) && <div className="w-2 h-2 bg-white rounded-full" />}
+                        </div>
                     </button>
                 ))}
             </div>
-            <div className="flex justify-between mt-4">
-                <button type="button" onClick={onBack} className={secondaryButtonStyle}>
-                    <CaretLeft size={20} /> Back
-                </button>
-                <button type="button" onClick={() => { }} className={buttonStyle}>
-                    Finish <CheckCircle size={20} />
-                </button>
-            </div>
         </div>
     )
 }
 
+/* --- Main List Component --- */
+
 function List() {
     const [step, setStep] = useState(0);
-    const [direction, setDirection] = useState(1); // 1 for next, -1 for back
-    const [formData, setFormData] = useState<FormData>({});
-    const containerRef = useRef<HTMLDivElement>(null);
+    const [direction, setDirection] = useState(1);
+    const [formData, setFormData] = useState<FormData>({
+        guests: 1,
+        bedrooms: 1,
+        beds: 1,
+        bathrooms: 1,
+    });
     const contentRef = useRef<HTMLDivElement>(null);
 
     const steps = [
@@ -472,22 +540,29 @@ function List() {
         PropertyPlaceType,
         PropertyLocation,
         PropertyCapacity,
-        PropertyPhotos,
         PropertyAmenities,
         PropertyDescription,
+        PropertyPhotos,
         PropertyPrice,
         PropertyInstantApproval,
-        AvailabilityCalendar,
         SafetyDetails
     ];
 
     const CurrentStepComponent = steps[step];
+    const totalSteps = steps.length;
+    const progress = ((step + 1) / totalSteps) * 100;
 
     const updateData = (key: keyof FormData, value: FormValue) => {
         setFormData(prev => ({ ...prev, [key]: value }));
     };
 
     const handleNext = () => {
+        // Validation for photos
+        if (step === 6 && (!formData.photos || formData.photos.length < 5)) {
+            alert("Please upload at least 5 photos to continue.");
+            return;
+        }
+
         if (step < steps.length - 1) {
             setDirection(1);
             setStep(prev => prev + 1);
@@ -503,81 +578,88 @@ function List() {
 
     useGSAP(() => {
         if (!contentRef.current) return;
-
-        // Animate the content sliding in
         gsap.fromTo(contentRef.current,
-            {
-                x: direction * 50,
-                opacity: 0
-            },
-            {
-                x: 0,
-                opacity: 1,
-                duration: 0.4,
-                ease: "power2.out"
-            }
+            { x: direction * 20, opacity: 0 },
+            { x: 0, opacity: 1, duration: 0.4, ease: "power2.out" }
         );
     }, [step]);
 
     return (
-        <div className="flex min-h-screen w-full bg-white overflow-hidden">
+        <div className="flex min-h-screen w-full bg-white">
             {/* Left Panel - Form */}
-            <div className="w-full lg:w-1/2 flex flex-col justify-between p-8 md:p-12 overflow-y-auto relative h-screen">
-                {/* Progress Bar - Top */}
-                <div className="w-full max-w-xl mx-auto mb-8">
-                    <div className="flex items-center justify-between mb-4">
-                        <div className="flex items-center gap-2">
-                            <div className="w-8 h-8 bg-black text-white rounded-full flex items-center justify-center font-bold text-sm">
-                                {step + 1}
-                            </div>
-                            <span className={`${figtree.className} font-bold text-sm uppercase tracking-wider`}>Step {step + 1} of {steps.length}</span>
+            <div className="w-full lg:w-1/2 flex flex-col h-screen relative">
+                {/* Header */}
+                <div className="px-8 py-6 border-b-2 border-gray-100 flex justify-between items-center bg-white z-10">
+                    <div className="flex items-center gap-4">
+                        <div className="w-10 h-10 bg-black text-white rounded-full flex items-center justify-center font-bold text-lg">
+                            {step + 1}
+                        </div>
+                        <div className="flex flex-col">
+                            <span className={`${figtree.className} font-bold text-sm uppercase tracking-wider`}>Step {step + 1} of {totalSteps}</span>
+                            <span className={`${figtree.className} text-xs text-gray-500`}>{
+                                step === 0 ? "Basics" :
+                                    step < 4 ? "Details" :
+                                        step < 7 ? "Description" : "Finish"
+                            }</span>
                         </div>
-                        <button className="text-sm font-bold underline decoration-2 underline-offset-4 hover:text-gray-600">Exit</button>
                     </div>
-                    <div className="h-1 w-full bg-gray-100 rounded-full overflow-hidden">
-                        <div
-                            className="h-full bg-black transition-all duration-500 ease-out"
-                            style={{ width: `${((step + 1) / steps.length) * 100}%` }}
+                    <button className="text-sm font-bold underline decoration-2 underline-offset-4 hover:text-gray-600">Save & Exit</button>
+                </div>
+
+                {/* Progress Bar */}
+                <div className="w-full h-1 bg-gray-100">
+                    <div
+                        className="h-full bg-[#E7FE78] transition-all duration-500 ease-out"
+                        style={{ width: `${progress}%` }}
+                    />
+                </div>
+
+                {/* Scrollable Content */}
+                <div className="flex-1 overflow-y-auto p-8 md:p-12">
+                    <div ref={contentRef} className={containerStyle}>
+                        <CurrentStepComponent
+                            data={formData}
+                            updateData={updateData}
                         />
                     </div>
                 </div>
 
-                {/* Content */}
-                <div className="flex-1 flex flex-col justify-center py-8">
-                    <div ref={containerRef} className={containerStyle}>
-                        <div ref={contentRef}>
-                            <CurrentStepComponent
-                                onNext={handleNext}
-                                onBack={handleBack}
-                                data={formData}
-                                updateData={updateData}
-                            />
-                        </div>
-                    </div>
+                {/* Fixed Footer Navigation */}
+                <div className="border-t-2 border-gray-100 p-6 bg-white flex justify-between items-center z-10">
+                    <button
+                        type="button"
+                        onClick={handleBack}
+                        disabled={step === 0}
+                        className={`${secondaryButtonStyle} ${step === 0 ? 'opacity-0 pointer-events-none' : ''}`}
+                    >
+                        <CaretLeft size={20} /> Back
+                    </button>
+                    <button
+                        type="button"
+                        onClick={handleNext}
+                        className={buttonStyle}
+                    >
+                        {step === totalSteps - 1 ? 'Finish' : 'Next'} <CaretRight size={20} />
+                    </button>
                 </div>
             </div>
 
-            {/* Right Panel - Visual */}
-            <div className="hidden lg:flex w-1/2 bg-[#F7F7F7] items-center justify-center relative overflow-hidden h-screen border-l-2 border-black">
-                {/* Gradient Background */}
-                <div className="absolute inset-0 bg-[#E7FE78]" />
-                <div className="absolute inset-0 opacity-20"
+            {/* Right Panel - Live Preview */}
+            <div className="hidden lg:flex w-1/2 bg-[#F7F7F7] border-l-2 border-black relative flex-col items-center justify-center p-12 overflow-hidden">
+                {/* Background Pattern */}
+                <div className="absolute inset-0 opacity-5"
                     style={{
                         backgroundImage: `radial-gradient(circle at 2px 2px, black 1px, transparent 0)`,
-                        backgroundSize: '32px 32px'
+                        backgroundSize: '24px 24px'
                     }}
                 />
 
-                {/* Decorative Content */}
-                <div className="relative z-10 p-16 max-w-2xl">
-                    <div className="bg-white border-2 border-black p-8 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] mb-8 rotate-1 hover:rotate-0 transition-transform duration-500">
-                        <h1 className={`${figtree.className} text-5xl font-bold mb-6 leading-tight`}>
-                            Open your door<br />to hosting
-                        </h1>
-                        <p className={`${figtree.className} text-xl text-gray-800 leading-relaxed`}>
-                            Earn money, reach millions of travelers, and find your freedom. It's easy to get started.
-                        </p>
+                <div className="relative z-10 w-full max-w-lg">
+                    <div className="mb-8 text-center">
+                        <h2 className={`${figtree.className} text-3xl font-bold mb-2`}>What guests will see</h2>
+                        <p className={`${figtree.className} text-gray-500`}>As you update your listing, see how it looks in search results.</p>
                     </div>
+                    <LivePreview data={formData} />
                 </div>
             </div>
         </div>