faq tab updated
This commit is contained in:
parent
b75f15bc22
commit
9249b1fa29
BIN
public/assets/images/home/top.png
Normal file
BIN
public/assets/images/home/top.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 181 KiB |
20
src/app/properties/[slug]/page.tsx
Normal file
20
src/app/properties/[slug]/page.tsx
Normal file
@ -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} />;
|
||||
}
|
||||
@ -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"
|
||||
|
||||
@ -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);
|
||||
@ -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"
|
||||
|
||||
@ -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">
|
||||
<p>© {new Date().getFullYear()} Sky and Soil. All rights reserved.</p>
|
||||
<p>Designed with precision.</p>
|
||||
<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>
|
||||
© {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>
|
||||
|
||||
@ -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"
|
||||
>
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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 { notFound } from "next/navigation";
|
||||
import { Property } from "@/data/properties";
|
||||
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 }> }) {
|
||||
const resolvedParams = use(params);
|
||||
const property = properties.find(p => p.id === parseInt(resolvedParams.id));
|
||||
|
||||
export default function PropertyDetailClient({ property }: { property: Property }) {
|
||||
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 />
|
||||
@ -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">
|
||||
|
||||
@ -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) => (
|
||||
|
||||
@ -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",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user