faq tab updated

src/app/properties/[slug]/page.tsx

@@ -0,0 +1,20 @@
+import { properties } from "@/data/properties";
+import { notFound } from "next/navigation";
+import PropertyDetailClient from "@/components/PropertyDetailClient";
+
+export async function generateStaticParams() {
+    return properties.map((property) => ({
+        slug: property.slug,
+    }));
+}
+
+export default async function PropertyDetailPage({ params }: { params: Promise<{ slug: string }> }) {
+    const { slug } = await params;
+    const property = properties.find(p => p.slug === slug);
+
+    if (!property) {
+        notFound();
+    }
+
+    return <PropertyDetailClient property={property} />;
+}

src/components/About.tsx

@@ -140,7 +140,7 @@ export default function About() {
                             {/* Top Face */}
                             <div className="absolute inset-0 transform rotate-x-90 translate-z-32 md:translate-z-40 bg-gray-100 border border-white/20 flex items-center justify-center">
                                 <Image
-                                    src="/assets/images/home/top.webp"
+                                    src="/assets/images/home/top.png"
                                     alt="Top View"
                                     fill
                                     className="object-cover"

src/components/FAQ.tsx

@@ -37,6 +37,122 @@ export default function FAQ() {
     const [activeCard, setActiveCard] = useState(0);
     const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
     const [isHovering, setIsHovering] = useState(false);
+    const [activeTab, setActiveTab] = useState("General");
+
+    const faqs = [
+        // General
+        {
+            category: "General",
+            question: "What types of properties do you offer?",
+            answer: "We offer a wide range of properties including luxury apartments, premium villas, and sustainable eco-homes designed to blend with nature."
+        },
+        {
+            category: "General",
+            question: "Where are your projects located?",
+            answer: "Our projects are strategically located in prime areas of Bangalore, including North Bangalore, Sarjapur Road, and Whitefield, ensuring excellent connectivity and appreciation potential."
+        },
+        {
+            category: "General",
+            question: "Do you offer customization options?",
+            answer: "Yes, for select premium villas and apartments, we offer customization options for interiors and layout modifications, subject to structural feasibility."
+        },
+        {
+            category: "General",
+            question: "What is the starting price of your properties?",
+            answer: "Our properties start from ₹1.17 Cr for premium apartments and go up to ₹5 Cr+ for luxury villas, catering to a wide range of budgets."
+        },
+
+        // Booking
+        {
+            category: "Booking",
+            question: "How can I book a site visit?",
+            answer: "You can book a site visit by clicking the 'Book a Visit' button on our website or by contacting our sales team directly through the contact form."
+        },
+        {
+            category: "Booking",
+            question: "What is the booking amount?",
+            answer: "The booking amount varies by project but typically ranges from 5% to 10% of the total property value. Our sales team can provide specific details for your chosen unit."
+        },
+        {
+            category: "Booking",
+            question: "What documents are required for booking?",
+            answer: "You will need KYC documents (Aadhar Card, PAN Card), passport-sized photographs, and a cheque/draft for the booking amount."
+        },
+        {
+            category: "Booking",
+            question: "Can I cancel my booking?",
+            answer: "Yes, cancellation policies are outlined in the booking agreement. Generally, a cancellation fee may apply depending on the stage of the booking."
+        },
+
+        // Finance
+        {
+            category: "Finance",
+            question: "Do you provide assistance with home loans?",
+            answer: "Yes, we have tie-ups with leading banks and financial institutions to help you secure the best home loan rates and assist with the documentation process."
+        },
+        {
+            category: "Finance",
+            question: "Which banks have approved your projects?",
+            answer: "Our projects are approved by major banks including SBI, HDFC, ICICI, Axis Bank, and others, ensuring a smooth loan approval process."
+        },
+        {
+            category: "Finance",
+            question: "What are the payment plans available?",
+            answer: "We offer flexible payment plans such as construction-linked plans (CLP) and down-payment plans to suit your financial planning."
+        },
+        {
+            category: "Finance",
+            question: "Are there any hidden charges?",
+            answer: "We believe in complete transparency. All charges including GST, registration, and maintenance deposits are clearly communicated at the time of booking."
+        },
+
+        // Legal
+        {
+            category: "Legal",
+            question: "Are your projects RERA registered?",
+            answer: "Absolutely. All our projects are fully compliant with RERA regulations and we ensure complete transparency in all our dealings."
+        },
+        {
+            category: "Legal",
+            question: "Is the land title clear?",
+            answer: "Yes, all our projects are built on land with clear and marketable titles. We provide legal opinion reports from reputed law firms upon request."
+        },
+        {
+            category: "Legal",
+            question: "What legal documents will I receive?",
+            answer: "You will receive the Sale Agreement, Sale Deed, Occupancy Certificate (OC), and other relevant documents upon completion and registration."
+        },
+        {
+            category: "Legal",
+            question: "Do you assist with property registration?",
+            answer: "Yes, our team will guide you through the entire registration process and assist with the necessary paperwork at the sub-registrar's office."
+        },
+
+        // Amenities
+        {
+            category: "Amenities",
+            question: "What amenities are included in your projects?",
+            answer: "Our projects feature world-class amenities such as swimming pools, clubhouses, landscaped gardens, 24/7 security, and dedicated fitness centers."
+        },
+        {
+            category: "Amenities",
+            question: "Is there a dedicated play area for kids?",
+            answer: "Yes, all our projects include safe and well-equipped children's play areas, ensuring a fun environment for your little ones."
+        },
+        {
+            category: "Amenities",
+            question: "Do you have power backup?",
+            answer: "We provide 100% power backup for common areas and elevators, and partial/full backup for individual apartments depending on the project."
+        },
+        {
+            category: "Amenities",
+            question: "Is there a gym and swimming pool?",
+            answer: "Yes, a state-of-the-art gymnasium and a temperature-controlled swimming pool are standard amenities in most of our luxury projects."
+        },
+    ];
+
+    const categories = ["General", "Booking", "Finance", "Legal", "Amenities"];
+    const filteredFaqs = faqs.filter(faq => faq.category === activeTab);
 
     const toggleFAQ = (index: number) => {
         setOpenIndex(openIndex === index ? null : index);
@@ -125,8 +241,8 @@ export default function FAQ() {
                                     key={index}
                                     onClick={() => setActiveCard(index)}
                                     className={`w-2 h-2 rounded-full transition-all duration-300 ${index === activeCard
-                                            ? 'bg-primary w-8'
+                                        ? 'bg-primary w-8'
-                                            : 'bg-gray-400 hover:bg-gray-600'
+                                        : 'bg-gray-400 hover:bg-gray-600'
                                         }`}
                                     aria-label={`Go to slide ${index + 1}`}
                                 />
@@ -136,17 +252,36 @@ export default function FAQ() {
 
                     {/* Right Column: FAQ Content */}
                     <div>
-                        <div className="mb-12">
+                        <div className="mb-8">
                             <h2 className="text-3xl md:text-4xl font-bold tracking-tight text-foreground mb-4">
                                 Frequently Asked Questions
                             </h2>
-                            <p className="text-lg text-gray-600 dark:text-gray-400">
+                            <p className="text-lg text-gray-600 dark:text-gray-400 mb-8">
                                 Everything you need to know about our properties and services.
                             </p>
+
+                            {/* Tabs */}
+                            <div className="flex flex-wrap gap-2 mb-8">
+                                {categories.map((category) => (
+                                    <button
+                                        key={category}
+                                        onClick={() => {
+                                            setActiveTab(category);
+                                            setOpenIndex(null);
+                                        }}
+                                        className={`px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 ${activeTab === category
+                                            ? "bg-primary text-white shadow-lg scale-105"
+                                            : "bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700"
+                                            }`}
+                                    >
+                                        {category}
+                                    </button>
+                                ))}
+                            </div>
                         </div>
 
                         <div className="space-y-4">
-                            {faqs.map((faq, index) => (
+                            {filteredFaqs.map((faq, index) => (
                                 <div
                                     key={index}
                                     className="bg-white dark:bg-black border border-gray-200 dark:border-gray-800 rounded-2xl overflow-hidden transition-all duration-300 hover:shadow-md"

src/components/Footer.tsx

@@ -4,7 +4,7 @@ import Image from "next/image";
 
 export default function Footer() {
     return (
-        <footer className="bg-gray-50 dark:bg-black pt-16 pb-8 border-t border-gray-200 dark:border-gray-800">
+        <footer className="bg-gray-50 dark:bg-black pt-20 pb-10 border-t border-gray-200 dark:border-gray-800">
             <div className="max-w-7xl mx-auto px-6">
                 <div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-12">
                     <div className="col-span-1 md:col-span-1">
@@ -51,9 +51,20 @@ export default function Footer() {
                     </div>
                 </div>
 
-                <div className="border-t border-gray-200 dark:border-gray-800 pt-8 flex flex-col md:flex-row items-center justify-between text-xs text-gray-400 dark:text-gray-500">
+                <div className="border-t border-gray-200 dark:border-gray-800 pt-8 flex flex-col items-center justify-center text-xs text-gray-400 dark:text-gray-500 text-center gap-2">
-                    <p>&copy; {new Date().getFullYear()} Sky and Soil. All rights reserved.</p>
+                    <p>
-                    <p>Designed with precision.</p>
+                        © {new Date().getFullYear()} Sky and Soil | Powered by
+                        <a
+                            href="https://metatroncubesolutions.com/"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="ml-1"
+                            style={{ color: "#11147e", textDecoration: "none" }}
+                        >
+                            MetatronCube
+                        </a>
+                        — All Rights Reserved
+                    </p>
                 </div>
             </div>
         </footer>

src/components/Properties.tsx

@@ -100,7 +100,7 @@ export default function Properties({ layout = "slider" }: PropertiesProps) {
                                         }
                                     >
                                         <Link
-                                            href={`/properties/${property.id}`}
+                                            href={`/properties/${property.slug}`}
                                             className="group/card block bg-white dark:bg-gray-900 rounded-2xl overflow-hidden border border-gray-100 dark:border-gray-800 hover:border-gray-200 dark:hover:border-gray-700 shadow-lg hover:shadow-2xl transition-all duration-300 h-full flex flex-col"
                                         >
                                             {/* Image */}
@@ -154,7 +154,7 @@ export default function Properties({ layout = "slider" }: PropertiesProps) {
                     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                         {filteredProperties.map((property) => (
                             <Link
-                                href={`/properties/${property.id}`}
+                                href={`/properties/${property.slug}`}
                                 key={property.id}
                                 className="group bg-white dark:bg-gray-900 rounded-2xl overflow-hidden border border-gray-100 dark:border-gray-800 hover:border-gray-200 dark:hover:border-gray-700 shadow-sm hover:shadow-xl transition-all duration-300 flex flex-col"
                             >

src/components/PropertyCard.tsx

@@ -69,7 +69,7 @@ export default function PropertyCard({ property }: PropertyCardProps) {
     };
 
     return (
-        <Link href={`/properties/${property.id}`}>
+        <Link href={`/properties/${property.slug}`}>
             <div className="group bg-white dark:bg-gray-900 rounded-2xl overflow-hidden shadow-md hover:shadow-2xl transition-all duration-300 border border-gray-200 dark:border-gray-800">
                 {/* Image Section */}
                 <div className="relative h-64 overflow-hidden">
@@ -83,10 +83,10 @@ export default function PropertyCard({ property }: PropertyCardProps) {
                     {/* Status Badge */}
                     {property.status && (
                         <div className={`absolute top-4 left-4 px-3 py-1 rounded-full text-xs font-semibold ${property.status === "Sold Out"
-                                ? "bg-red-500 text-white"
+                            ? "bg-red-500 text-white"
-                                : property.status === "New Launch"
+                            : property.status === "New Launch"
-                                    ? "bg-green-500 text-white"
+                                ? "bg-green-500 text-white"
-                                    : "bg-white/90 text-gray-900"
+                                : "bg-white/90 text-gray-900"
                             }`}>
                             {property.status}
                         </div>
@@ -97,8 +97,8 @@ export default function PropertyCard({ property }: PropertyCardProps) {
                         <button
                             onClick={handleCompareClick}
                             className={`p-2 rounded-full shadow-lg transition-all ${inCompare
-                                    ? "bg-primary text-white scale-110"
+                                ? "bg-primary text-white scale-110"
-                                    : "bg-white hover:bg-gray-100 text-gray-700"
+                                : "bg-white hover:bg-gray-100 text-gray-700"
                                 }`}
                             aria-label={inCompare ? "Remove from compare" : "Add to compare"}
                         >
@@ -118,8 +118,8 @@ export default function PropertyCard({ property }: PropertyCardProps) {
                         <button
                             onClick={handleWishlistClick}
                             className={`p-2 rounded-full shadow-lg transition-all ${isWishlisted
-                                    ? "bg-red-500 text-white scale-110"
+                                ? "bg-red-500 text-white scale-110"
-                                    : "bg-white hover:bg-gray-100 text-gray-700"
+                                : "bg-white hover:bg-gray-100 text-gray-700"
                                 }`}
                             aria-label={isWishlisted ? "Remove from wishlist" : "Add to wishlist"}
                         >

src/components/PropertyDetailClient.tsx

@@ -1,14 +1,12 @@
 "use client";
 
-import { use, useState, ChangeEvent, FormEvent, useEffect } from "react";
+import { useState, ChangeEvent, FormEvent, useEffect } from "react";
 import Header from "@/components/Header";
 import Footer from "@/components/Footer";
-import Image from "next/image";
 import PropertyGallery from "@/components/PropertyGallery";
 import PropertyNav from "@/components/PropertyNav";
 import InnerBanner from "@/components/InnerBanner";
-import { properties } from "@/data/properties";
+import { Property } from "@/data/properties";
-import { notFound } from "next/navigation";
 import axios from "axios";
 
 interface FormData {
@@ -33,10 +31,7 @@ const sections = [
     { id: "pricing", label: "Pricing" },
 ];
 
-export default function PropertyDetailPage({ params }: { params: Promise<{ id: string }> }) {
+export default function PropertyDetailClient({ property }: { property: Property }) {
-    const resolvedParams = use(params);
-    const property = properties.find(p => p.id === parseInt(resolvedParams.id));
-
     const [formData, setFormData] = useState<FormData>({
         name: "",
         email: "",
@@ -125,10 +120,6 @@ export default function PropertyDetailPage({ params }: { params: Promise<{ id: s
         }
     }, [alert.show]);
 
-    if (!property) {
-        notFound();
-    }
-
     return (
         <div className="min-h-screen bg-gray-50 dark:bg-black">
             <Header />

src/components/PropertyFilters.tsx

@@ -49,7 +49,7 @@ export default function PropertyFilters({ onFilterChange }: PropertyFiltersProps
     const hasActiveFilters = filters.search || filters.type !== "all" || filters.budgetMin || filters.budgetMax || filters.bhk !== "all" || filters.sortBy !== "popularity";
 
     return (
-        <div className="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 sticky top-0 z-40">
+        <div className="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 sticky top-28 z-40">
             <div className="max-w-7xl mx-auto px-6 py-4">
                 {/* Main Filter Bar */}
                 <div className="flex flex-col md:flex-row gap-4 items-center">

src/components/PropertyNav.tsx

@@ -44,7 +44,7 @@ export default function PropertyNav({ sections }: PropertyNavProps) {
     };
 
     return (
-        <div className="sticky top-20 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="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">
                     {sections.map((section) => (
@@ -52,8 +52,8 @@ export default function PropertyNav({ sections }: PropertyNavProps) {
                             key={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"
+                                ? "bg-primary text-white shadow-md"
-                                    : "text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
+                                : "text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
                                 }`}
                         >
                             {section.label}

src/data/properties.ts

@@ -1,5 +1,6 @@
 export type Property = {
     id: number;
+    slug: string;
     title: string;
     category: "Apartments" | "Premium Homes" | "Luxury" | "Villas" | "Plots";
     location: string;
@@ -20,6 +21,7 @@ export type Property = {
 export const properties: Property[] = [
     {
         id: 1,
+        slug: "barca-at-godrej-msr-city",
         title: "BARCA at Godrej MSR City",
         category: "Apartments",
         location: "Shettigere Road, Bangalore",
@@ -38,6 +40,7 @@ export const properties: Property[] = [
     },
     {
         id: 2,
+        slug: "godrej-woods",
         title: "Godrej Woods",
         category: "Premium Homes",
         location: "Thanisandra, North Bangalore",
@@ -56,6 +59,7 @@ export const properties: Property[] = [
     },
     {
         id: 3,
+        slug: "godrej-hoskote",
         title: "Godrej Hoskote",
         category: "Apartments",
         location: "Hoskote, Soukya Road Ext",
@@ -74,6 +78,7 @@ export const properties: Property[] = [
     },
     {
         id: 4,
+        slug: "godrej-lakeside-orchard",
         title: "Godrej Lakeside Orchard",
         category: "Luxury",
         location: "Sarjapur Road, Bangalore",
@@ -92,6 +97,7 @@ export const properties: Property[] = [
     },
     {
         id: 5,
+        slug: "godrej-tiara",
         title: "Godrej Tiara",
         category: "Luxury",
         location: "Yeshwanthpur, Bangalore",