From 3f53ee1ebda3d90150b233a8ff3b3ae2f1ac40c5 Mon Sep 17 00:00:00 2001 From: akash Date: Tue, 9 Dec 2025 17:30:51 +0530 Subject: [PATCH] Animation & Responsive are updated --- src/app/projects/page.tsx | 72 +---------------------- src/components/About.tsx | 14 ++++- src/components/ContactCTA.tsx | 11 +++- src/components/FAQ.tsx | 11 +++- src/components/Hero.tsx | 59 ++++++++++++++----- src/components/Lifestyle.tsx | 20 +++++-- src/components/ProjectsContent.tsx | 88 +++++++++++++++++++++++++++++ src/components/Properties.tsx | 19 +++++-- src/components/PropertiesClient.tsx | 26 +++++++-- src/components/Testimonials.tsx | 11 +++- src/components/WhyChooseUs.tsx | 72 +++++++---------------- 11 files changed, 245 insertions(+), 158 deletions(-) create mode 100644 src/components/ProjectsContent.tsx diff --git a/src/app/projects/page.tsx b/src/app/projects/page.tsx index 4f7d33e..6cfe4e9 100644 --- a/src/app/projects/page.tsx +++ b/src/app/projects/page.tsx @@ -1,8 +1,7 @@ -import Link from "next/link"; -import Image from "next/image"; import Header from "@/components/Header"; import Footer from "@/components/Footer"; import InnerBanner from "@/components/InnerBanner"; +import ProjectsContent from "@/components/ProjectsContent"; import { Metadata } from "next"; export const metadata: Metadata = { @@ -11,17 +10,6 @@ export const metadata: Metadata = { }; export default function ProjectsPage() { - const categories = [ - { - id: 1, - title: "Residential Real Estate", - description: "Discover our premium residential properties featuring modern architecture, luxury amenities, and prime locations. From spacious apartments to exclusive villas, find your dream home with world-class facilities and exceptional living experiences.", - image: "/assets/images/projects/residential-real-estate.jpg", - href: "/residential-real-estate", - properties: "Residential Real Estate" - } - ]; - return (
@@ -35,63 +23,7 @@ export default function ProjectsPage() { ]} /> -
-
-

- Project Categories -

-

- Browse through our carefully curated collection of properties -

-
- -
- {categories.map((category) => ( -
-
- {/* Image Section - Left */} -
- {category.title} -
- - {/* Badge */} -
- {category.properties} -
-
- - {/* Content Section - Right */} -
-

- {category.title} -

-

- {category.description} -

- - - View More - - - - -
-
-
- ))} -
-
+
diff --git a/src/components/About.tsx b/src/components/About.tsx index 0100516..1a42fcc 100644 --- a/src/components/About.tsx +++ b/src/components/About.tsx @@ -34,7 +34,13 @@ export default function About() {
{/* Text Content */} -
+

Where the Sky Meets
The Soil. @@ -42,7 +48,9 @@ export default function About() {

- 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. + At Sky and Soil, we curate exceptional living spaces that harmonize with nat + + ure. As authorized sales partners for Godrej Properties, we bring you the finest homes in Bangalore's most sought-after locations.

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. @@ -55,7 +63,7 @@ export default function About() { -

+ {/* Parallax Image Container */}
-
+ {/* Left Side - Form */}
@@ -242,7 +249,7 @@ export default function ContactCTA() { />
-
+
); diff --git a/src/components/FAQ.tsx b/src/components/FAQ.tsx index 35aef20..7ccd91a 100644 --- a/src/components/FAQ.tsx +++ b/src/components/FAQ.tsx @@ -1,6 +1,7 @@ "use client"; import { useState, useEffect } from "react"; +import { motion } from "framer-motion"; import Image from "next/image"; const faqs = [ @@ -215,7 +216,13 @@ export default function FAQ() { {/* Right Column: FAQ Content */}
-
+

Frequently Asked Questions

@@ -241,7 +248,7 @@ export default function FAQ() { ))}
-
+
{filteredFaqs.map((faq, index) => ( diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx index 0c4144c..bf5e149 100644 --- a/src/components/Hero.tsx +++ b/src/components/Hero.tsx @@ -1,4 +1,7 @@ +"use client"; + import Link from "next/link"; +import { motion } from "framer-motion"; export default function Hero() { return ( @@ -24,8 +27,13 @@ export default function Hero() { {/* Location Pins (Decorative) */}
{/* Pin 1: Hebbal */} -
-
+ +
Hebbal
@@ -34,11 +42,16 @@ export default function Hero() {
-
+ {/* Pin 2: Airport */} -
-
+ +
Airport
@@ -47,11 +60,16 @@ export default function Hero() {
-
+ {/* Pin 3: Whitefield */} -
-
+ +
Whitefield
@@ -60,11 +78,16 @@ export default function Hero() {
-
+
-
-

+ +

Sky and Soil
Bangalore. @@ -76,14 +99,22 @@ export default function Hero() {

*/} -

+ {/* Scroll Indicator */} -
+ -
+ ); } diff --git a/src/components/Lifestyle.tsx b/src/components/Lifestyle.tsx index 8caa032..368055c 100644 --- a/src/components/Lifestyle.tsx +++ b/src/components/Lifestyle.tsx @@ -2,7 +2,7 @@ import { useState, useRef, MouseEvent } from "react"; import Image from "next/image"; - +import { motion } from "framer-motion"; import { FloatingHouse, RotatingKey } from "./PropertyAnimations"; export default function Lifestyle() { @@ -37,11 +37,15 @@ export default function Lifestyle() {
{/* Image Side with Zoom Effect */} -
-
+ {/* Content Side */} -
+

Experience the
Aurora Lifestyle. @@ -100,7 +110,7 @@ export default function Lifestyle() { ))} -

+
diff --git a/src/components/ProjectsContent.tsx b/src/components/ProjectsContent.tsx new file mode 100644 index 0000000..9851a95 --- /dev/null +++ b/src/components/ProjectsContent.tsx @@ -0,0 +1,88 @@ +"use client"; + +import Link from "next/link"; +import Image from "next/image"; +import { motion } from "framer-motion"; + +const categories = [ + { + id: 1, + title: "Residential Real Estate", + description: "Discover our premium residential properties featuring modern architecture, luxury amenities, and prime locations. From spacious apartments to exclusive villas, find your dream home with world-class facilities and exceptional living experiences.", + image: "/assets/images/projects/residential-real-estate.jpg", + href: "/residential-real-estate", + properties: "Residential Real Estate" + } +]; + +export default function ProjectsContent() { + return ( +
+ +

+ Project Categories +

+

+ Browse through our carefully curated collection of properties +

+ + +
+ {categories.map((category, index) => ( + +
+ {/* Image Section - Left */} +
+ {category.title} +
+ + {/* Badge */} +
+ {category.properties} +
+
+ + {/* Content Section - Right */} +
+

+ {category.title} +

+

+ {category.description} +

+ + + View More + + + + +
+
+ + ))} +
+
+ ); +} diff --git a/src/components/Properties.tsx b/src/components/Properties.tsx index a1dd482..b3e46ab 100644 --- a/src/components/Properties.tsx +++ b/src/components/Properties.tsx @@ -3,6 +3,7 @@ import { useState, useRef } from "react"; import Link from "next/link"; import { properties } from "@/data/properties"; +import { motion } from "framer-motion"; type Category = "Apartments" | "Premium Homes" | "Luxury"; @@ -29,14 +30,20 @@ export default function Properties({ layout = "slider" }: PropertiesProps) { return (
-
+

Our Signature Projects

Discover a home that complements your lifestyle.

-
+ {/* Tabs */}
@@ -92,12 +99,16 @@ export default function Properties({ layout = "slider" }: PropertiesProps) { if (activeTab !== "All" && index > 0) return null; return ( -
-
+ ); })}
diff --git a/src/components/PropertiesClient.tsx b/src/components/PropertiesClient.tsx index 9c31644..5b35322 100644 --- a/src/components/PropertiesClient.tsx +++ b/src/components/PropertiesClient.tsx @@ -7,6 +7,7 @@ import InnerBanner from "@/components/InnerBanner"; import PropertyFilters, { FilterState } from "@/components/PropertyFilters"; import PropertyCard from "@/components/PropertyCard"; import { properties } from "@/data/properties"; +import { motion } from "framer-motion"; export default function PropertiesClient() { const [filteredProperties, setFilteredProperties] = useState(properties); @@ -79,15 +80,30 @@ export default function PropertiesClient() {
-

Browse Our Properties

+ + Browse Our Properties + {/* Property Grid */} {filteredProperties.length > 0 ? (
- {filteredProperties.map((property) => ( - - ))} -
+ {filteredProperties.map((property, index) => ( + + + + ))}
) : (
diff --git a/src/components/Testimonials.tsx b/src/components/Testimonials.tsx index e4f4553..81802a3 100644 --- a/src/components/Testimonials.tsx +++ b/src/components/Testimonials.tsx @@ -2,6 +2,7 @@ import { useRef } from "react"; import { GrowingBuilding } from "./PropertyAnimations"; +import { motion } from "framer-motion"; export default function Testimonials() { const scrollContainerRef = useRef(null); @@ -81,7 +82,13 @@ export default function Testimonials() {
-
+

Stories of Satisfaction

@@ -92,7 +99,7 @@ export default function Testimonials() { 5.0 • Based on {testimonials.length} reviews
-
+ {/* Slider Container */}
diff --git a/src/components/WhyChooseUs.tsx b/src/components/WhyChooseUs.tsx index 9705046..28a70d1 100644 --- a/src/components/WhyChooseUs.tsx +++ b/src/components/WhyChooseUs.tsx @@ -1,13 +1,10 @@ "use client"; -import { useState, useEffect, useRef } from "react"; import Image from "next/image"; import { FloatingHouse, RotatingKey, GrowingBuilding } from "./PropertyAnimations"; +import { motion } from "framer-motion"; export default function WhyChooseUs() { - const [visibleCards, setVisibleCards] = useState([false, false, false, false]); - const sectionRef = useRef(null); - const features = [ { title: "Prime Locations", @@ -31,40 +28,8 @@ export default function WhyChooseUs() { }, ]; - useEffect(() => { - const observer = new IntersectionObserver( - (entries) => { - entries.forEach((entry) => { - if (entry.isIntersecting) { - // Trigger cards to appear one by one with delay - features.forEach((_, index) => { - setTimeout(() => { - setVisibleCards((prev) => { - const newVisible = [...prev]; - newVisible[index] = true; - return newVisible; - }); - }, index * 150); // 150ms delay between each card - }); - } - }); - }, - { threshold: 0.2 } - ); - - if (sectionRef.current) { - observer.observe(sectionRef.current); - } - - return () => { - if (sectionRef.current) { - observer.unobserve(sectionRef.current); - } - }; - }, []); - return ( -
+
{/* Decorative Animations */}
@@ -78,26 +43,31 @@ export default function WhyChooseUs() {
-
-

+ +

Why Sky and Soil?

-

+

We bridge the gap between your dreams and reality with premium properties and unmatched service.

-

+ -
+
{features.map((feature, index) => ( -
@@ -115,7 +85,7 @@ export default function WhyChooseUs() {

{feature.description}

-
+ ))}