first commit
This commit is contained in:
Alaguraj0361
commit
c5b07e0e67
41
.gitignore
vendored
Normal file
41
.gitignore
vendored
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
/.pnp
|
||||||
|
.pnp.*
|
||||||
|
.yarn/*
|
||||||
|
!.yarn/patches
|
||||||
|
!.yarn/plugins
|
||||||
|
!.yarn/releases
|
||||||
|
!.yarn/versions
|
||||||
|
|
||||||
|
# testing
|
||||||
|
/coverage
|
||||||
|
|
||||||
|
# next.js
|
||||||
|
/.next/
|
||||||
|
/out/
|
||||||
|
|
||||||
|
# production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
*.pem
|
||||||
|
|
||||||
|
# debug
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
.pnpm-debug.log*
|
||||||
|
|
||||||
|
# env files (can opt-in for committing if needed)
|
||||||
|
.env*
|
||||||
|
|
||||||
|
# vercel
|
||||||
|
.vercel
|
||||||
|
|
||||||
|
# typescript
|
||||||
|
*.tsbuildinfo
|
||||||
|
next-env.d.ts
|
||||||
36
README.md
Normal file
36
README.md
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
|
||||||
|
|
||||||
|
## Getting Started
|
||||||
|
|
||||||
|
First, run the development server:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run dev
|
||||||
|
# or
|
||||||
|
yarn dev
|
||||||
|
# or
|
||||||
|
pnpm dev
|
||||||
|
# or
|
||||||
|
bun dev
|
||||||
|
```
|
||||||
|
|
||||||
|
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||||
|
|
||||||
|
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
||||||
|
|
||||||
|
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
|
||||||
|
|
||||||
|
## Learn More
|
||||||
|
|
||||||
|
To learn more about Next.js, take a look at the following resources:
|
||||||
|
|
||||||
|
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||||
|
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||||
|
|
||||||
|
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
|
||||||
|
|
||||||
|
## Deploy on Vercel
|
||||||
|
|
||||||
|
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||||
|
|
||||||
|
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
|
||||||
18
eslint.config.mjs
Normal file
18
eslint.config.mjs
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import { defineConfig, globalIgnores } from "eslint/config";
|
||||||
|
import nextVitals from "eslint-config-next/core-web-vitals";
|
||||||
|
import nextTs from "eslint-config-next/typescript";
|
||||||
|
|
||||||
|
const eslintConfig = defineConfig([
|
||||||
|
...nextVitals,
|
||||||
|
...nextTs,
|
||||||
|
// Override default ignores of eslint-config-next.
|
||||||
|
globalIgnores([
|
||||||
|
// Default ignores of eslint-config-next:
|
||||||
|
".next/**",
|
||||||
|
"out/**",
|
||||||
|
"build/**",
|
||||||
|
"next-env.d.ts",
|
||||||
|
]),
|
||||||
|
]);
|
||||||
|
|
||||||
|
export default eslintConfig;
|
||||||
10
next.config.ts
Normal file
10
next.config.ts
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
import type { NextConfig } from "next";
|
||||||
|
|
||||||
|
const nextConfig: NextConfig = {
|
||||||
|
output: 'export',
|
||||||
|
images: {
|
||||||
|
unoptimized: true,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default nextConfig;
|
||||||
6597
package-lock.json
generated
Normal file
6597
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
28
package.json
Normal file
28
package.json
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
{
|
||||||
|
"name": "antigravity_dev",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "next dev",
|
||||||
|
"build": "next build",
|
||||||
|
"start": "next start",
|
||||||
|
"lint": "eslint"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"next": "16.0.3",
|
||||||
|
"next-themes": "^0.4.6",
|
||||||
|
"react": "19.2.0",
|
||||||
|
"react-dom": "19.2.0",
|
||||||
|
"tailwindcss-animate": "^1.0.7"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@tailwindcss/postcss": "^4",
|
||||||
|
"@types/node": "^20",
|
||||||
|
"@types/react": "^19",
|
||||||
|
"@types/react-dom": "^19",
|
||||||
|
"eslint": "^9",
|
||||||
|
"eslint-config-next": "16.0.3",
|
||||||
|
"tailwindcss": "^4",
|
||||||
|
"typescript": "^5"
|
||||||
|
}
|
||||||
|
}
|
||||||
7
postcss.config.mjs
Normal file
7
postcss.config.mjs
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
const config = {
|
||||||
|
plugins: {
|
||||||
|
"@tailwindcss/postcss": {},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default config;
|
||||||
BIN
public/1-f63fe3ad.png
Normal file
BIN
public/1-f63fe3ad.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
BIN
public/brand_colors.png
Normal file
BIN
public/brand_colors.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
1
public/file.svg
Normal file
1
public/file.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
|
||||||
|
After Width: | Height: | Size: 391 B |
1
public/globe.svg
Normal file
1
public/globe.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
|
||||||
|
After Width: | Height: | Size: 1.0 KiB |
BIN
public/hero-image.jpg
Normal file
BIN
public/hero-image.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 332 KiB |
BIN
public/logo.png
Normal file
BIN
public/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
1
public/next.svg
Normal file
1
public/next.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
1
public/vercel.svg
Normal file
1
public/vercel.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
|
||||||
|
After Width: | Height: | Size: 128 B |
1
public/window.svg
Normal file
1
public/window.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
|
||||||
|
After Width: | Height: | Size: 385 B |
BIN
src/app/favicon.ico
Normal file
BIN
src/app/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
73
src/app/globals.css
Normal file
73
src/app/globals.css
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
@import "tailwindcss";
|
||||||
|
|
||||||
|
@plugin "tailwindcss-animate";
|
||||||
|
|
||||||
|
@custom-variant dark (&:where(.dark, .dark *));
|
||||||
|
|
||||||
|
@theme {
|
||||||
|
--color-background: var(--background);
|
||||||
|
--color-foreground: var(--foreground);
|
||||||
|
--color-primary: #11147e;
|
||||||
|
/* Empire Blue */
|
||||||
|
--color-secondary: var(--secondary);
|
||||||
|
--color-accent: #D05402;
|
||||||
|
/* Terracotta Flame */
|
||||||
|
--color-terrene-olive: #8A8D63;
|
||||||
|
--color-harvest-gold: #CFAA68;
|
||||||
|
--color-noir-slate: #1C1C1C;
|
||||||
|
--color-porcelain-white: #FFFCF0;
|
||||||
|
--color-limestone: #F3F1E6;
|
||||||
|
|
||||||
|
--font-sans: var(--font-inter);
|
||||||
|
|
||||||
|
--animate-fade-in: fadeIn 1s ease-out forwards;
|
||||||
|
--animate-slide-up: slideUp 0.8s ease-out forwards;
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideUp {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(20px);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--background: #FFFCF0;
|
||||||
|
/* Porcelain White */
|
||||||
|
--foreground: #1C1C1C;
|
||||||
|
/* Noir Slate */
|
||||||
|
--secondary: #F3F1E6;
|
||||||
|
/* Limestone */
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark {
|
||||||
|
--background: #0a0a0a;
|
||||||
|
--foreground: #FFFCF0;
|
||||||
|
/* Porcelain White */
|
||||||
|
--secondary: #1C1C1C;
|
||||||
|
/* Noir Slate */
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: var(--background);
|
||||||
|
color: var(--foreground);
|
||||||
|
font-family: var(--font-inter), sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
38
src/app/layout.tsx
Normal file
38
src/app/layout.tsx
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
import type { Metadata } from "next";
|
||||||
|
import { Inter } from "next/font/google";
|
||||||
|
import "./globals.css";
|
||||||
|
|
||||||
|
const inter = Inter({
|
||||||
|
variable: "--font-inter",
|
||||||
|
subsets: ["latin"],
|
||||||
|
});
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: "Aurora Springs Realty | Redefining Modern Living",
|
||||||
|
description: "Premium villas, plots, and apartments in North Bengaluru. Experience luxury living with Aurora Springs Realty.",
|
||||||
|
};
|
||||||
|
|
||||||
|
import { ThemeProvider } from "@/components/ThemeProvider";
|
||||||
|
|
||||||
|
export default function RootLayout({
|
||||||
|
children,
|
||||||
|
}: Readonly<{
|
||||||
|
children: React.ReactNode;
|
||||||
|
}>) {
|
||||||
|
return (
|
||||||
|
<html lang="en" suppressHydrationWarning>
|
||||||
|
<body
|
||||||
|
className={`${inter.variable} antialiased`}
|
||||||
|
>
|
||||||
|
<ThemeProvider
|
||||||
|
attribute="class"
|
||||||
|
defaultTheme="system"
|
||||||
|
enableSystem
|
||||||
|
disableTransitionOnChange
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</ThemeProvider>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
);
|
||||||
|
}
|
||||||
25
src/app/page.tsx
Normal file
25
src/app/page.tsx
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
import Header from "@/components/Header";
|
||||||
|
import Hero from "@/components/Hero";
|
||||||
|
import About from "@/components/About";
|
||||||
|
import WhyChooseUs from "@/components/WhyChooseUs";
|
||||||
|
import Properties from "@/components/Properties";
|
||||||
|
import Lifestyle from "@/components/Lifestyle";
|
||||||
|
import Testimonials from "@/components/Testimonials";
|
||||||
|
import ContactCTA from "@/components/ContactCTA";
|
||||||
|
import Footer from "@/components/Footer";
|
||||||
|
|
||||||
|
export default function Home() {
|
||||||
|
return (
|
||||||
|
<main className="min-h-screen bg-white">
|
||||||
|
<Header />
|
||||||
|
<Hero />
|
||||||
|
<About />
|
||||||
|
<WhyChooseUs />
|
||||||
|
<Properties />
|
||||||
|
<Lifestyle />
|
||||||
|
<Testimonials />
|
||||||
|
<ContactCTA />
|
||||||
|
<Footer />
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
46
src/app/properties/[id]/page.tsx
Normal file
46
src/app/properties/[id]/page.tsx
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
import { notFound } from "next/navigation";
|
||||||
|
import { properties } from "@/data/properties";
|
||||||
|
import PropertyHero from "@/components/property/PropertyHero";
|
||||||
|
import PropertyOverview from "@/components/property/PropertyOverview";
|
||||||
|
import PropertyAmenities from "@/components/property/PropertyAmenities";
|
||||||
|
import PropertyContact from "@/components/property/PropertyContact";
|
||||||
|
|
||||||
|
// This is required for static site generation with dynamic routes
|
||||||
|
export function generateStaticParams() {
|
||||||
|
return properties.map((property) => ({
|
||||||
|
id: property.id.toString(),
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
export default async function PropertyPage({ params }: { params: Promise<{ id: string }> }) {
|
||||||
|
const { id } = await params;
|
||||||
|
const property = properties.find((p) => p.id.toString() === id);
|
||||||
|
|
||||||
|
if (!property) {
|
||||||
|
notFound();
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main className="min-h-screen bg-background pb-24">
|
||||||
|
<PropertyHero property={property} />
|
||||||
|
|
||||||
|
<div className="max-w-7xl mx-auto px-6 mt-12">
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
|
||||||
|
{/* Main Content */}
|
||||||
|
<div className="lg:col-span-2">
|
||||||
|
<PropertyOverview
|
||||||
|
overview={property.overview}
|
||||||
|
description={property.description}
|
||||||
|
/>
|
||||||
|
<PropertyAmenities amenities={property.amenities} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Sidebar */}
|
||||||
|
<div className="lg:col-span-1">
|
||||||
|
<PropertyContact />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
44
src/components/About.tsx
Normal file
44
src/components/About.tsx
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
import Image from "next/image";
|
||||||
|
|
||||||
|
export default function About() {
|
||||||
|
return (
|
||||||
|
<section id="about" className="py-24 bg-white dark:bg-black">
|
||||||
|
<div className="max-w-7xl mx-auto px-6">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-16 items-center">
|
||||||
|
{/* Text Content */}
|
||||||
|
<div className="space-y-8">
|
||||||
|
<h2 className="text-4xl font-bold tracking-tight text-foreground">
|
||||||
|
Where the Sky Meets <br />
|
||||||
|
<span className="text-accent dark:text-accent">The Soil.</span>
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className="space-y-6 text-lg text-gray-600 dark:text-gray-400 leading-relaxed">
|
||||||
|
<p>
|
||||||
|
At Sky and Soil, we curate exceptional living spaces that harmonize with nature. As authorized sales partners for Godrej Properties, we bring you the finest homes in Bangalore's most sought-after locations.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Our mission is to connect you with homes that offer not just a roof over your head, but a lifestyle grounded in luxury and elevated by nature. From North Bengaluru to Sarjapur, discover a life of abundance.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button className="text-primary font-medium hover:text-blue-700 transition-colors flex items-center gap-2 group">
|
||||||
|
Learn More About Us
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor" className="w-4 h-4 group-hover:translate-x-1 transition-transform">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Image Content */}
|
||||||
|
<div className="relative h-[500px] rounded-3xl overflow-hidden shadow-2xl bg-gray-100 dark:bg-gray-800">
|
||||||
|
{/* Placeholder for an actual image. Using a colored div for now if no image is available,
|
||||||
|
but ideally this would be a real image. I'll use a gradient placeholder. */}
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 flex items-center justify-center text-gray-400 dark:text-gray-600">
|
||||||
|
<span className="text-sm">Modern Architecture Image</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
61
src/components/ContactCTA.tsx
Normal file
61
src/components/ContactCTA.tsx
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
export default function ContactCTA() {
|
||||||
|
return (
|
||||||
|
<section id="contact" className="py-24 bg-secondary dark:bg-gray-900">
|
||||||
|
<div className="max-w-4xl mx-auto px-6">
|
||||||
|
<div className="bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden">
|
||||||
|
<div className="p-8 md:p-12 text-center">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold tracking-tight text-foreground mb-4">
|
||||||
|
Ready to Visit Aurora Springs?
|
||||||
|
</h2>
|
||||||
|
<p className="text-gray-600 dark:text-gray-400 mb-8">
|
||||||
|
Schedule a private tour or request a call back from our relationship manager.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<form className="space-y-4 max-w-md mx-auto">
|
||||||
|
<div>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Your Name"
|
||||||
|
className="w-full px-4 py-3 rounded-xl bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 text-foreground placeholder-gray-400 dark:placeholder-gray-500 focus:border-primary focus:ring-2 focus:ring-blue-100 dark:focus:ring-blue-900 outline-none transition-all"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input
|
||||||
|
type="tel"
|
||||||
|
placeholder="Phone Number"
|
||||||
|
className="w-full px-4 py-3 rounded-xl bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 text-foreground placeholder-gray-400 dark:placeholder-gray-500 focus:border-primary focus:ring-2 focus:ring-blue-100 dark:focus:ring-blue-900 outline-none transition-all"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
placeholder="Email Address"
|
||||||
|
className="w-full px-4 py-3 rounded-xl bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 text-foreground placeholder-gray-400 dark:placeholder-gray-500 focus:border-primary focus:ring-2 focus:ring-blue-100 dark:focus:ring-blue-900 outline-none transition-all"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<select className="w-full px-4 py-3 rounded-xl bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 text-gray-600 dark:text-gray-300 focus:border-primary focus:ring-2 focus:ring-blue-100 dark:focus:ring-blue-900 outline-none transition-all">
|
||||||
|
<option value="">Select Preferred Location</option>
|
||||||
|
<option value="north-bengaluru">North Bengaluru</option>
|
||||||
|
<option value="whitefield">Whitefield</option>
|
||||||
|
<option value="sarjapur">Sarjapur</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="w-full py-3.5 text-base font-medium text-white bg-primary rounded-xl hover:bg-blue-600 transition-all shadow-lg hover:shadow-xl active:scale-95"
|
||||||
|
>
|
||||||
|
Request a Call Back
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<p className="mt-6 text-xs text-gray-400 dark:text-gray-500">
|
||||||
|
We respect your privacy. No spam, ever.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
54
src/components/Footer.tsx
Normal file
54
src/components/Footer.tsx
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
|
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">
|
||||||
|
<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">
|
||||||
|
<Link href="/" className="text-xl font-bold tracking-tight text-foreground">
|
||||||
|
Sky and Soil
|
||||||
|
</Link>
|
||||||
|
<p className="mt-4 text-sm text-gray-500 dark:text-gray-400">
|
||||||
|
Premium real estate in Bangalore. We connect you with nature and luxury.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h4 className="font-semibold text-foreground mb-4">Quick Links</h4>
|
||||||
|
<ul className="space-y-2 text-sm text-gray-600 dark:text-gray-400">
|
||||||
|
<li><Link href="#about" className="hover:text-primary transition-colors">About Us</Link></li>
|
||||||
|
<li><Link href="#projects" className="hover:text-primary transition-colors">Projects</Link></li>
|
||||||
|
<li><Link href="#lifestyle" className="hover:text-primary transition-colors">Lifestyle</Link></li>
|
||||||
|
<li><Link href="#contact" className="hover:text-primary transition-colors">Contact</Link></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h4 className="font-semibold text-foreground mb-4">Legal</h4>
|
||||||
|
<ul className="space-y-2 text-sm text-gray-600 dark:text-gray-400">
|
||||||
|
<li><Link href="#" className="hover:text-primary transition-colors">Privacy Policy</Link></li>
|
||||||
|
<li><Link href="#" className="hover:text-primary transition-colors">Terms of Service</Link></li>
|
||||||
|
<li><Link href="#" className="hover:text-primary transition-colors">Disclaimer</Link></li>
|
||||||
|
<li><Link href="#" className="hover:text-primary transition-colors">RERA Compliance</Link></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h4 className="font-semibold text-foreground mb-4">Contact</h4>
|
||||||
|
<ul className="space-y-2 text-sm text-gray-600 dark:text-gray-400">
|
||||||
|
<li>Bangalore, Karnataka</li>
|
||||||
|
<li>+91 80 1234 5678</li>
|
||||||
|
<li>hello@skyandsoil.com</li>
|
||||||
|
</ul>
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
}
|
||||||
121
src/components/Header.tsx
Normal file
121
src/components/Header.tsx
Normal file
@ -0,0 +1,121 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState, useEffect } from "react";
|
||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
|
import Image from "next/image";
|
||||||
|
import { ThemeToggle } from "@/components/ThemeToggle";
|
||||||
|
import { properties } from "@/data/properties";
|
||||||
|
|
||||||
|
export default function Header() {
|
||||||
|
const [isScrolled, setIsScrolled] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleScroll = () => {
|
||||||
|
setIsScrolled(window.scrollY > 50);
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener("scroll", handleScroll);
|
||||||
|
return () => window.removeEventListener("scroll", handleScroll);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header
|
||||||
|
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${isScrolled
|
||||||
|
? "bg-white/80 dark:bg-black/80 backdrop-blur-md shadow-sm py-4"
|
||||||
|
: "bg-transparent py-6"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="max-w-7xl mx-auto px-6 flex items-center justify-between">
|
||||||
|
<Link href="/" className="flex items-center gap-3 group">
|
||||||
|
<div className="relative w-10 h-10 overflow-hidden rounded-full bg-white/10 backdrop-blur-sm border border-white/20 shadow-sm group-hover:scale-105 transition-transform">
|
||||||
|
<Image
|
||||||
|
src="/logo.png"
|
||||||
|
alt="Sky and Soil Logo"
|
||||||
|
fill
|
||||||
|
className="object-contain p-1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<span className="text-2xl font-semibold tracking-tight text-foreground group-hover:text-primary transition-colors">
|
||||||
|
Sky and Soil
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<nav className="hidden md:flex items-center space-x-8">
|
||||||
|
<Link href="#about" className="text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-foreground transition-colors">
|
||||||
|
About
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
{/* Projects Mega Menu */}
|
||||||
|
<div className="group relative h-full flex items-center">
|
||||||
|
<Link href="#projects" className="text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-foreground transition-colors py-6">
|
||||||
|
Projects
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
{/* Dropdown */}
|
||||||
|
<div className="absolute top-full left-1/2 -translate-x-1/2 w-[800px] bg-white/95 dark:bg-black/95 backdrop-blur-md border border-gray-100 dark:border-gray-800 rounded-2xl shadow-2xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform translate-y-2 group-hover:translate-y-0 p-6 grid grid-cols-3 gap-6 z-50">
|
||||||
|
{properties.slice(0, 3).map((property) => (
|
||||||
|
<Link
|
||||||
|
key={property.id}
|
||||||
|
href={`/properties/${property.id}`}
|
||||||
|
className="group/card block"
|
||||||
|
>
|
||||||
|
<div className="relative h-32 w-full rounded-lg overflow-hidden mb-3">
|
||||||
|
<div className={`absolute inset-0 ${property.image.startsWith('/') ? '' : property.image}`} />
|
||||||
|
{property.image.startsWith('/') && (
|
||||||
|
<img src={property.image} alt={property.title} className="w-full h-full object-cover transition-transform duration-500 group-hover/card:scale-110" />
|
||||||
|
)}
|
||||||
|
<div className="absolute top-2 left-2 bg-white/90 dark:bg-black/80 backdrop-blur-sm px-2 py-0.5 rounded-full text-[10px] font-semibold text-foreground uppercase tracking-wider">
|
||||||
|
{property.status}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h4 className="text-sm font-bold text-foreground mb-1 group-hover/card:text-primary transition-colors">
|
||||||
|
{property.title}
|
||||||
|
</h4>
|
||||||
|
<p className="text-xs text-gray-500 dark:text-gray-400 mb-1">
|
||||||
|
{property.location}
|
||||||
|
</p>
|
||||||
|
<p className="text-xs font-semibold text-accent">
|
||||||
|
{property.price}
|
||||||
|
</p>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
|
||||||
|
<div className="col-span-3 pt-4 border-t border-gray-100 dark:border-gray-800 text-center">
|
||||||
|
<Link href="#projects" className="text-sm font-medium text-primary hover:underline">
|
||||||
|
View All Projects →
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Link href="#lifestyle" className="text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-foreground transition-colors">
|
||||||
|
Lifestyle
|
||||||
|
</Link>
|
||||||
|
<Link href="#contact" className="text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-foreground transition-colors">
|
||||||
|
Contact
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<ThemeToggle />
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div className="hidden md:flex items-center gap-4">
|
||||||
|
{/* Mobile menu button logic would go here if we were implementing full mobile menu */}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button className="hidden md:block px-5 py-2 text-sm font-medium text-white bg-primary rounded-full hover:bg-blue-600 transition-colors shadow-sm hover:shadow-md active:scale-95 transform duration-200">
|
||||||
|
Book a Visit
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div className="md:hidden flex items-center gap-4">
|
||||||
|
<ThemeToggle />
|
||||||
|
<button className="text-foreground">
|
||||||
|
<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>
|
||||||
|
);
|
||||||
|
}
|
||||||
55
src/components/Hero.tsx
Normal file
55
src/components/Hero.tsx
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
import Link from "next/link";
|
||||||
|
import Image from "next/image";
|
||||||
|
|
||||||
|
export default function Hero() {
|
||||||
|
return (
|
||||||
|
<section className="relative h-screen flex flex-col items-center justify-center overflow-hidden">
|
||||||
|
{/* Background Image */}
|
||||||
|
<div className="absolute inset-0 z-0">
|
||||||
|
<Image
|
||||||
|
src="/hero-image.jpg"
|
||||||
|
alt="Sky and Soil Properties"
|
||||||
|
fill
|
||||||
|
className="object-cover"
|
||||||
|
priority
|
||||||
|
/>
|
||||||
|
{/* Overlay */}
|
||||||
|
<div className="absolute inset-0 bg-black/40 dark:bg-black/60 backdrop-blur-[2px]"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative z-10 max-w-5xl mx-auto px-6 text-center">
|
||||||
|
<h1 className="text-5xl md:text-7xl lg:text-8xl font-bold tracking-tight text-white mb-6 animate-fade-in drop-shadow-lg">
|
||||||
|
Sky and Soil <br className="hidden md:block" />
|
||||||
|
<span className="text-transparent bg-clip-text bg-gradient-to-r from-white to-gray-300">
|
||||||
|
Bangalore.
|
||||||
|
</span>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p className="text-xl md:text-2xl text-gray-100 max-w-2xl mx-auto mb-10 animate-slide-up opacity-0 drop-shadow-md" style={{ animationDelay: "0.2s" }}>
|
||||||
|
Premium properties in North Bengaluru. Experience the perfect blend of nature and luxury.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 animate-slide-up opacity-0" style={{ animationDelay: "0.4s" }}>
|
||||||
|
<Link
|
||||||
|
href="#projects"
|
||||||
|
className="px-8 py-4 text-base font-medium text-primary bg-white rounded-full hover:bg-gray-100 transition-all shadow-lg hover:shadow-xl hover:-translate-y-0.5 active:scale-95"
|
||||||
|
>
|
||||||
|
Explore Projects
|
||||||
|
</Link>
|
||||||
|
<button
|
||||||
|
className="px-8 py-4 text-base font-medium text-white border border-white/30 bg-white/10 backdrop-blur-sm rounded-full hover:bg-white/20 transition-all shadow-sm hover:shadow-md active:scale-95"
|
||||||
|
>
|
||||||
|
Book a Site Visit
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Scroll Indicator */}
|
||||||
|
<div className="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce z-10">
|
||||||
|
<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 text-white/80">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
59
src/components/Lifestyle.tsx
Normal file
59
src/components/Lifestyle.tsx
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
export default function Lifestyle() {
|
||||||
|
return (
|
||||||
|
<section id="lifestyle" className="py-24 bg-secondary dark:bg-gray-900">
|
||||||
|
<div className="max-w-7xl mx-auto px-6">
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||||||
|
{/* Image Side */}
|
||||||
|
<div className="order-2 lg:order-1 relative h-[600px] rounded-3xl overflow-hidden shadow-2xl group">
|
||||||
|
{/* Placeholder for lifestyle image */}
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-tr from-gray-800 to-gray-600 flex items-center justify-center text-white">
|
||||||
|
<span className="text-xl font-light tracking-widest uppercase">Clubhouse & Amenities</span>
|
||||||
|
</div>
|
||||||
|
<div className="absolute inset-0 bg-black/20 group-hover:bg-black/10 transition-colors duration-700" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content Side */}
|
||||||
|
<div className="order-1 lg:order-2 space-y-8">
|
||||||
|
<h2 className="text-4xl md:text-5xl font-bold tracking-tight text-foreground">
|
||||||
|
Experience the <br />
|
||||||
|
<span className="text-primary">Aurora Lifestyle.</span>
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<p className="text-lg text-gray-600 dark:text-gray-400 leading-relaxed">
|
||||||
|
Designed for those who seek more than just a home. Immerse yourself in a world of leisure, wellness, and community.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<ul className="space-y-6 mt-8">
|
||||||
|
{[
|
||||||
|
{
|
||||||
|
title: "World-Class Clubhouse",
|
||||||
|
desc: "A sprawling hub for recreation and social gatherings.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Green Spaces",
|
||||||
|
desc: "Acres of landscaped gardens and breathing spaces.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "24/7 Security",
|
||||||
|
desc: "Advanced surveillance and gated community safety.",
|
||||||
|
},
|
||||||
|
].map((item, idx) => (
|
||||||
|
<li key={idx} className="flex items-start gap-4">
|
||||||
|
<div className="mt-1 p-2 bg-white dark:bg-gray-800 rounded-full shadow-sm text-primary">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor" className="w-5 h-5">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-xl font-semibold text-foreground">{item.title}</h3>
|
||||||
|
<p className="text-gray-600 dark:text-gray-400">{item.desc}</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
91
src/components/Properties.tsx
Normal file
91
src/components/Properties.tsx
Normal file
@ -0,0 +1,91 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { properties, Property } from "@/data/properties";
|
||||||
|
|
||||||
|
type Category = "Apartments" | "Premium Homes" | "Luxury";
|
||||||
|
|
||||||
|
export default function Properties() {
|
||||||
|
const [activeTab, setActiveTab] = useState<Category | "All">("All");
|
||||||
|
|
||||||
|
const filteredProperties = activeTab === "All"
|
||||||
|
? properties
|
||||||
|
: properties.filter((property) => property.category === activeTab);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section id="projects" className="py-24 bg-white dark:bg-black">
|
||||||
|
<div className="max-w-7xl mx-auto px-6">
|
||||||
|
<div className="text-center mb-12">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold tracking-tight text-foreground mb-4">
|
||||||
|
Our Signature Projects
|
||||||
|
</h2>
|
||||||
|
<p className="text-lg text-gray-600 dark:text-gray-400">
|
||||||
|
Discover a home that complements your lifestyle.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tabs */}
|
||||||
|
<div className="flex justify-center mb-12">
|
||||||
|
<div className="inline-flex bg-secondary dark:bg-gray-800 p-1 rounded-full flex-wrap justify-center gap-1">
|
||||||
|
{(["All", "Apartments", "Premium Homes", "Luxury"] as const).map((category) => (
|
||||||
|
<button
|
||||||
|
key={category}
|
||||||
|
onClick={() => setActiveTab(category)}
|
||||||
|
className={`px-6 py-2.5 rounded-full text-sm font-medium transition-all duration-300 ${activeTab === category
|
||||||
|
? "bg-white dark:bg-gray-700 text-foreground shadow-sm"
|
||||||
|
: "text-gray-500 dark:text-gray-400 hover:text-foreground"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{category}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Grid */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||||
|
{filteredProperties.map((property) => (
|
||||||
|
<Link
|
||||||
|
href={`/properties/${property.id}`}
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
{/* Image Placeholder */}
|
||||||
|
<div className={`h-64 w-full relative overflow-hidden`}>
|
||||||
|
{/* Using a colored div as placeholder if image fails or while loading, but ideally using Next/Image */}
|
||||||
|
<div className={`absolute inset-0 ${property.image.startsWith('/') ? '' : property.image}`} />
|
||||||
|
{property.image.startsWith('/') && (
|
||||||
|
<img src={property.image} alt={property.title} className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="absolute top-4 left-4 bg-white/90 dark:bg-black/80 backdrop-blur-sm px-3 py-1 rounded-full text-xs font-semibold text-foreground uppercase tracking-wider">
|
||||||
|
{property.status}
|
||||||
|
</div>
|
||||||
|
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/5 transition-colors duration-300" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-6 flex flex-col flex-grow">
|
||||||
|
<div className="flex items-center justify-between mb-2">
|
||||||
|
<span className="text-xs font-medium text-primary bg-blue-50 dark:bg-blue-900/30 px-2 py-1 rounded-md">
|
||||||
|
{property.location}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-bold text-foreground mb-2">
|
||||||
|
{property.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-600 dark:text-gray-400 text-sm mb-6 flex-grow line-clamp-2">
|
||||||
|
{property.description}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="w-full py-3 text-center text-sm font-medium text-foreground border border-gray-200 dark:border-gray-700 rounded-xl group-hover:bg-foreground group-hover:text-white dark:group-hover:bg-white dark:group-hover:text-black transition-colors">
|
||||||
|
View Details
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
51
src/components/Testimonials.tsx
Normal file
51
src/components/Testimonials.tsx
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
export default function Testimonials() {
|
||||||
|
const testimonials = [
|
||||||
|
{
|
||||||
|
quote: "Aurora Springs transformed our idea of a dream home into reality. The attention to detail is unmatched.",
|
||||||
|
author: "Rajesh Kumar",
|
||||||
|
location: "Owner at Aurora Heights",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
quote: "The transparency and professionalism shown by the team made the entire buying process seamless.",
|
||||||
|
author: "Priya Sharma",
|
||||||
|
location: "Owner at Serene Meadows",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
quote: "Living here feels like a permanent vacation. The amenities and the community are world-class.",
|
||||||
|
author: "David Miller",
|
||||||
|
location: "Resident at The Grandeur",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="py-24 bg-white dark:bg-black">
|
||||||
|
<div className="max-w-7xl mx-auto px-6">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold tracking-tight text-foreground mb-4">
|
||||||
|
Stories of Satisfaction
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
|
{testimonials.map((item, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="bg-secondary dark:bg-gray-900 p-8 rounded-2xl relative hover:-translate-y-1 transition-transform duration-300"
|
||||||
|
>
|
||||||
|
<div className="absolute top-6 left-6 text-4xl text-primary opacity-20 font-serif">
|
||||||
|
“
|
||||||
|
</div>
|
||||||
|
<p className="text-lg text-gray-700 dark:text-gray-300 italic mb-6 relative z-10 pt-4">
|
||||||
|
{item.quote}
|
||||||
|
</p>
|
||||||
|
<div>
|
||||||
|
<h4 className="font-semibold text-foreground">{item.author}</h4>
|
||||||
|
<p className="text-sm text-gray-500 dark:text-gray-400">{item.location}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
8
src/components/ThemeProvider.tsx
Normal file
8
src/components/ThemeProvider.tsx
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { ThemeProvider as NextThemesProvider } from "next-themes";
|
||||||
|
import { type ThemeProviderProps } from "next-themes";
|
||||||
|
|
||||||
|
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
|
||||||
|
return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
|
||||||
|
}
|
||||||
35
src/components/ThemeToggle.tsx
Normal file
35
src/components/ThemeToggle.tsx
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import { useTheme } from "next-themes";
|
||||||
|
|
||||||
|
export function ThemeToggle() {
|
||||||
|
const { theme, setTheme } = useTheme();
|
||||||
|
const [mounted, setMounted] = React.useState(false);
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
setMounted(true);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
if (!mounted) {
|
||||||
|
return <div className="w-9 h-9" />; // Placeholder to prevent hydration mismatch
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
|
||||||
|
className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors text-foreground"
|
||||||
|
aria-label="Toggle Theme"
|
||||||
|
>
|
||||||
|
{theme === "dark" ? (
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
|
||||||
|
</svg>
|
||||||
|
) : (
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
|
||||||
|
</svg>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
75
src/components/WhyChooseUs.tsx
Normal file
75
src/components/WhyChooseUs.tsx
Normal file
@ -0,0 +1,75 @@
|
|||||||
|
export default function WhyChooseUs() {
|
||||||
|
const features = [
|
||||||
|
{
|
||||||
|
title: "Prime Locations",
|
||||||
|
description: "Strategically located in the heart of North Bengaluru's growth corridor.",
|
||||||
|
icon: (
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-8 h-8">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
|
||||||
|
</svg>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Smart Homes",
|
||||||
|
description: "Future-ready infrastructure with integrated smart home automation.",
|
||||||
|
icon: (
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-8 h-8">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" d="M8.25 3v1.5M4.5 8.25H3m18 0h-1.5M4.5 12H3m18 0h-1.5m-15 3.75H3m18 0h-1.5M8.25 19.5V21M12 3v1.5m0 15V21m3.75-18v1.5m0 15V21m-9-1.5h10.5a2.25 2.25 0 002.25-2.25V6.75a2.25 2.25 0 00-2.25-2.25H6.75A2.25 2.25 0 004.5 6.75v10.5a2.25 2.25 0 002.25 2.25z" />
|
||||||
|
</svg>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Transparent Deals",
|
||||||
|
description: "100% clear documentation and legal compliance for peace of mind.",
|
||||||
|
icon: (
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-8 h-8">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
|
||||||
|
</svg>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Customer First",
|
||||||
|
description: "Dedicated support team to guide you through every step of the journey.",
|
||||||
|
icon: (
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-8 h-8">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" d="M15.182 15.182a4.5 4.5 0 01-6.364 0M21 12a9 9 0 11-18 0 9 9 0 0118 0zM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75zm-.375 0h.008v.015h-.008V9.75zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75zm-.375 0h.008v.015h-.008V9.75z" />
|
||||||
|
</svg>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="py-24 bg-secondary dark:bg-gray-900/50">
|
||||||
|
<div className="max-w-7xl mx-auto px-6">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold tracking-tight text-foreground mb-4">
|
||||||
|
Why Sky and Soil?
|
||||||
|
</h2>
|
||||||
|
<p className="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
|
||||||
|
We bridge the gap between your dreams and reality with premium properties and unmatched service.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||||
|
{features.map((feature, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="bg-white dark:bg-gray-800 p-8 rounded-2xl shadow-sm hover:shadow-md transition-shadow duration-300 flex flex-col items-center text-center group"
|
||||||
|
>
|
||||||
|
<div className="mb-6 p-4 bg-blue-50 dark:bg-blue-900/30 text-primary rounded-full group-hover:scale-110 transition-transform duration-300">
|
||||||
|
{feature.icon}
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-semibold text-foreground mb-3">
|
||||||
|
{feature.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-600 dark:text-gray-400 leading-relaxed">
|
||||||
|
{feature.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
19
src/components/property/PropertyAmenities.tsx
Normal file
19
src/components/property/PropertyAmenities.tsx
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
interface PropertyAmenitiesProps {
|
||||||
|
amenities: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function PropertyAmenities({ amenities }: PropertyAmenitiesProps) {
|
||||||
|
return (
|
||||||
|
<div className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-100 dark:border-gray-800 mt-8">
|
||||||
|
<h2 className="text-2xl font-bold text-foreground mb-6">Amenities</h2>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||||
|
{amenities.map((amenity, index) => (
|
||||||
|
<div key={index} className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
|
||||||
|
<div className="w-2 h-2 bg-primary rounded-full" />
|
||||||
|
<span className="text-gray-700 dark:text-gray-300 font-medium">{amenity}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
53
src/components/property/PropertyContact.tsx
Normal file
53
src/components/property/PropertyContact.tsx
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
export default function PropertyContact() {
|
||||||
|
return (
|
||||||
|
<div className="bg-white dark:bg-gray-900 rounded-2xl p-6 shadow-lg border border-gray-100 dark:border-gray-800 sticky top-24">
|
||||||
|
<h3 className="text-xl font-bold text-foreground mb-2">Interested?</h3>
|
||||||
|
<p className="text-sm text-gray-500 dark:text-gray-400 mb-6">
|
||||||
|
Fill out the form below and our sales team will get back to you shortly.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<form className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label htmlFor="name" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Name</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="name"
|
||||||
|
className="w-full px-4 py-2 rounded-lg bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 focus:ring-2 focus:ring-primary outline-none transition-all"
|
||||||
|
placeholder="John Doe"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label htmlFor="phone" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Phone</label>
|
||||||
|
<input
|
||||||
|
type="tel"
|
||||||
|
id="phone"
|
||||||
|
className="w-full px-4 py-2 rounded-lg bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 focus:ring-2 focus:ring-primary outline-none transition-all"
|
||||||
|
placeholder="+91 98765 43210"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
id="email"
|
||||||
|
className="w-full px-4 py-2 rounded-lg bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 focus:ring-2 focus:ring-primary outline-none transition-all"
|
||||||
|
placeholder="john@example.com"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="w-full py-3 text-white bg-primary rounded-xl font-medium hover:bg-blue-800 transition-colors shadow-md hover:shadow-lg active:scale-95"
|
||||||
|
>
|
||||||
|
Request Call Back
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<p className="mt-4 text-xs text-center text-gray-400">
|
||||||
|
By submitting, you agree to our privacy policy.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
44
src/components/property/PropertyHero.tsx
Normal file
44
src/components/property/PropertyHero.tsx
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
import Image from "next/image";
|
||||||
|
import { Property } from "@/data/properties";
|
||||||
|
|
||||||
|
interface PropertyHeroProps {
|
||||||
|
property: Property;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function PropertyHero({ property }: PropertyHeroProps) {
|
||||||
|
return (
|
||||||
|
<section className="relative h-[60vh] md:h-[70vh] w-full">
|
||||||
|
<div className="absolute inset-0">
|
||||||
|
<Image
|
||||||
|
src={property.image}
|
||||||
|
alt={property.title}
|
||||||
|
fill
|
||||||
|
className="object-cover"
|
||||||
|
priority
|
||||||
|
/>
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="absolute bottom-0 left-0 right-0 p-6 md:p-12 max-w-7xl mx-auto">
|
||||||
|
<div className="animate-slide-up">
|
||||||
|
<span className="inline-block px-3 py-1 mb-4 text-xs font-semibold tracking-wider text-white uppercase bg-primary rounded-full">
|
||||||
|
{property.status}
|
||||||
|
</span>
|
||||||
|
<h1 className="text-4xl md:text-6xl font-bold text-white mb-2">
|
||||||
|
{property.title}
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl text-gray-200 mb-4 flex items-center gap-2">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
|
||||||
|
</svg>
|
||||||
|
{property.location}
|
||||||
|
</p>
|
||||||
|
<p className="text-3xl font-semibold text-accent">
|
||||||
|
{property.price}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
40
src/components/property/PropertyOverview.tsx
Normal file
40
src/components/property/PropertyOverview.tsx
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
import { Property } from "@/data/properties";
|
||||||
|
|
||||||
|
interface PropertyOverviewProps {
|
||||||
|
overview: Property["overview"];
|
||||||
|
description: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function PropertyOverview({ overview, description }: PropertyOverviewProps) {
|
||||||
|
return (
|
||||||
|
<div className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-100 dark:border-gray-800">
|
||||||
|
<h2 className="text-2xl font-bold text-foreground mb-6">Overview</h2>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-8">
|
||||||
|
<div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-xl text-center">
|
||||||
|
<p className="text-sm text-gray-500 dark:text-gray-400 mb-1">Configuration</p>
|
||||||
|
<p className="text-lg font-semibold text-foreground">{overview.bhk}</p>
|
||||||
|
</div>
|
||||||
|
<div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-xl text-center">
|
||||||
|
<p className="text-sm text-gray-500 dark:text-gray-400 mb-1">Project Size</p>
|
||||||
|
<p className="text-lg font-semibold text-foreground">{overview.size}</p>
|
||||||
|
</div>
|
||||||
|
<div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-xl text-center">
|
||||||
|
<p className="text-sm text-gray-500 dark:text-gray-400 mb-1">Possession</p>
|
||||||
|
<p className="text-lg font-semibold text-foreground">{overview.possession}</p>
|
||||||
|
</div>
|
||||||
|
<div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-xl text-center">
|
||||||
|
<p className="text-sm text-gray-500 dark:text-gray-400 mb-1">Total Units</p>
|
||||||
|
<p className="text-lg font-semibold text-foreground">{overview.totalUnits}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-semibold text-foreground mb-3">About Project</h3>
|
||||||
|
<p className="text-gray-600 dark:text-gray-400 leading-relaxed">
|
||||||
|
{description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
111
src/data/properties.ts
Normal file
111
src/data/properties.ts
Normal file
@ -0,0 +1,111 @@
|
|||||||
|
export type Property = {
|
||||||
|
id: number;
|
||||||
|
title: string;
|
||||||
|
category: "Apartments" | "Premium Homes" | "Luxury" | "Villas" | "Plots";
|
||||||
|
location: string;
|
||||||
|
price: string;
|
||||||
|
description: string;
|
||||||
|
status: string;
|
||||||
|
image: string;
|
||||||
|
images: string[]; // For gallery
|
||||||
|
overview: {
|
||||||
|
bhk: string;
|
||||||
|
size: string;
|
||||||
|
possession: string;
|
||||||
|
totalUnits: string;
|
||||||
|
};
|
||||||
|
amenities: string[];
|
||||||
|
};
|
||||||
|
|
||||||
|
export const properties: Property[] = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: "BARCA at Godrej MSR City",
|
||||||
|
category: "Apartments",
|
||||||
|
location: "Shettigere Road, Bangalore",
|
||||||
|
price: "₹ 1.9 CR*",
|
||||||
|
description: "Experience the pinnacle of luxury living at BARCA, Godrej MSR City. These 3 BHK apartments are designed for those who appreciate the finer things in life, offering a perfect blend of modern architecture and natural serenity.",
|
||||||
|
status: "New Launch",
|
||||||
|
image: "/hero-image.jpg", // Using hero image as placeholder
|
||||||
|
images: ["/hero-image.jpg", "/hero-image.jpg", "/hero-image.jpg"],
|
||||||
|
overview: {
|
||||||
|
bhk: "3 BHK",
|
||||||
|
size: "1500 - 2200 Sq.Ft",
|
||||||
|
possession: "Dec 2027",
|
||||||
|
totalUnits: "400",
|
||||||
|
},
|
||||||
|
amenities: ["Swimming Pool", "Clubhouse", "Gymnasium", "Landscaped Gardens", "Kids Play Area", "24/7 Security"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
title: "Godrej Woods",
|
||||||
|
category: "Premium Homes",
|
||||||
|
location: "Thanisandra, North Bangalore",
|
||||||
|
price: "₹ 1.62 CR*",
|
||||||
|
description: "Godrej Woods offers premium 2 & 3 BHK apartments nestled in the lush greenery of Thanisandra. Enjoy a forest-themed lifestyle with world-class amenities and excellent connectivity to the airport and tech parks.",
|
||||||
|
status: "Best Seller",
|
||||||
|
image: "/hero-image.jpg",
|
||||||
|
images: ["/hero-image.jpg", "/hero-image.jpg", "/hero-image.jpg"],
|
||||||
|
overview: {
|
||||||
|
bhk: "2 & 3 BHK",
|
||||||
|
size: "1100 - 1600 Sq.Ft",
|
||||||
|
possession: "June 2026",
|
||||||
|
totalUnits: "600",
|
||||||
|
},
|
||||||
|
amenities: ["Forest Trail", "Infinity Pool", "Yoga Deck", "Co-working Space", "Sports Courts", "Amphitheater"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
title: "Godrej Hoskote",
|
||||||
|
category: "Apartments",
|
||||||
|
location: "Hoskote, Soukya Road Ext",
|
||||||
|
price: "₹ 1.17 Cr*",
|
||||||
|
description: "Discover the joy of community living at Godrej Hoskote. These premium 2 & 3 BHK homes are designed to provide a comfortable and convenient lifestyle, with easy access to industrial hubs and educational institutions.",
|
||||||
|
status: "New Launch",
|
||||||
|
image: "/hero-image.jpg",
|
||||||
|
images: ["/hero-image.jpg", "/hero-image.jpg", "/hero-image.jpg"],
|
||||||
|
overview: {
|
||||||
|
bhk: "2 & 3 BHK",
|
||||||
|
size: "1050 - 1750 Sq.Ft",
|
||||||
|
possession: "On Request",
|
||||||
|
totalUnits: "800",
|
||||||
|
},
|
||||||
|
amenities: ["Community Hall", "Jogging Track", "Swimming Pool", "Retail Plaza", "Senior Citizen Corner", "Pet Park"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
title: "Godrej Lakeside Orchard",
|
||||||
|
category: "Luxury",
|
||||||
|
location: "Sarjapur Road, Bangalore",
|
||||||
|
price: "₹ 1.89 Cr*",
|
||||||
|
description: "Wake up to the serene views of a lake and orchard at Godrej Lakeside Orchard. These luxury 2, 3, 3.5 & 4.5 BHK apartments offer a resort-like living experience on Sarjapur Road.",
|
||||||
|
status: "Trending",
|
||||||
|
image: "/hero-image.jpg",
|
||||||
|
images: ["/hero-image.jpg", "/hero-image.jpg", "/hero-image.jpg"],
|
||||||
|
overview: {
|
||||||
|
bhk: "2, 3, 3.5 & 4.5 BHK",
|
||||||
|
size: "1200 - 2800 Sq.Ft",
|
||||||
|
possession: "2028",
|
||||||
|
totalUnits: "500",
|
||||||
|
},
|
||||||
|
amenities: ["Lakeside Promenade", "Fruit Orchard", "Clubhouse", "Tennis Court", "Spa & Sauna", "Library"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
title: "Godrej Tiara",
|
||||||
|
category: "Luxury",
|
||||||
|
location: "Yeshwanthpur, Bangalore",
|
||||||
|
price: "Price on Request",
|
||||||
|
description: "Godrej Tiara presents exclusive 3 & 4 BHK apartments in the heart of Yeshwanthpur. Experience unmatched luxury, sophisticated design, and panoramic views of the city skyline.",
|
||||||
|
status: "Premium",
|
||||||
|
image: "/hero-image.jpg",
|
||||||
|
images: ["/hero-image.jpg", "/hero-image.jpg", "/hero-image.jpg"],
|
||||||
|
overview: {
|
||||||
|
bhk: "3 & 4 BHK",
|
||||||
|
size: "2000 - 3500 Sq.Ft",
|
||||||
|
possession: "2027",
|
||||||
|
totalUnits: "250",
|
||||||
|
},
|
||||||
|
amenities: ["Sky Lounge", "Temperature Controlled Pool", "Private Cinema", "Concierge Service", "Business Center", "Valet Parking"],
|
||||||
|
},
|
||||||
|
];
|
||||||
34
tsconfig.json
Normal file
34
tsconfig.json
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2017",
|
||||||
|
"lib": ["dom", "dom.iterable", "esnext"],
|
||||||
|
"allowJs": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"strict": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"module": "esnext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"incremental": true,
|
||||||
|
"plugins": [
|
||||||
|
{
|
||||||
|
"name": "next"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"next-env.d.ts",
|
||||||
|
"**/*.ts",
|
||||||
|
"**/*.tsx",
|
||||||
|
".next/types/**/*.ts",
|
||||||
|
".next/dev/types/**/*.ts",
|
||||||
|
"**/*.mts"
|
||||||
|
],
|
||||||
|
"exclude": ["node_modules"]
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user