209 lines
11 KiB
TypeScript
209 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useRef, MouseEvent } from "react";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
|
|
import { FloatingHouse, RotatingKey, GrowingBuilding } from "./PropertyAnimations";
|
|
|
|
export default function About() {
|
|
const [rotation, setRotation] = useState({ x: -10, y: 0 });
|
|
const [isHovering, setIsHovering] = useState(false);
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
|
|
const handleMouseMove = (e: MouseEvent<HTMLDivElement>) => {
|
|
if (!containerRef.current) return;
|
|
|
|
const rect = containerRef.current.getBoundingClientRect();
|
|
const x = e.clientX - rect.left;
|
|
const y = e.clientY - rect.top;
|
|
|
|
const width = rect.width;
|
|
const height = rect.height;
|
|
|
|
// Calculate rotation based on mouse position
|
|
// Y-axis rotation (horizontal mouse movement): -180 to 180 degrees
|
|
const rotateY = ((x / width) * 360) - 180;
|
|
|
|
// X-axis rotation (vertical mouse movement): -90 (top view) to 90 (bottom view)
|
|
// Inverting Y so top of screen corresponds to seeing the top face
|
|
const rotateX = -(((y / height) * 180) - 90);
|
|
|
|
setRotation({ x: rotateX, y: rotateY });
|
|
};
|
|
|
|
const handleMouseEnter = () => {
|
|
setIsHovering(true);
|
|
};
|
|
|
|
const handleMouseLeave = () => {
|
|
setIsHovering(false);
|
|
setRotation({ x: -10, y: 0 }); // Reset to default angle
|
|
};
|
|
|
|
return (
|
|
<section id="about" className="py-24 bg-white dark:bg-black relative overflow-hidden">
|
|
|
|
{/* Decorative Animation */}
|
|
<div className="absolute top-10 left-10 opacity-30 hidden lg:block">
|
|
<FloatingHouse />
|
|
</div>
|
|
<div className="absolute bottom-20 right-10 opacity-20 hidden lg:block">
|
|
<RotatingKey />
|
|
</div>
|
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-10 pointer-events-none hidden lg:block">
|
|
<GrowingBuilding className="scale-150" />
|
|
</div>
|
|
|
|
<div className="max-w-7xl mx-auto px-6 relative z-10">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-16 items-center">
|
|
{/* Text Content */}
|
|
<div className="space-y-8 z-10">
|
|
<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>
|
|
|
|
<Link href="/about" 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>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* 3D Cube Container */}
|
|
<div
|
|
className="h-[500px] w-full flex items-center justify-center perspective-container cursor-move"
|
|
ref={containerRef}
|
|
onMouseMove={handleMouseMove}
|
|
onMouseEnter={handleMouseEnter}
|
|
onMouseLeave={handleMouseLeave}
|
|
>
|
|
<div
|
|
className={`cube relative w-64 h-64 md:w-80 md:h-80 transform-style-3d ${!isHovering ? 'animate-spin-slow' : ''}`}
|
|
style={isHovering ? { transform: `rotateX(${rotation.x}deg) rotateY(${rotation.y}deg)` } : {}}
|
|
>
|
|
{/* Front Face */}
|
|
<div className="absolute inset-0 transform translate-z-32 md:translate-z-40 bg-white shadow-xl border border-white/20">
|
|
<Image
|
|
src="/assets/images/home/front.webp"
|
|
alt="Front View"
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
<div className="absolute bottom-4 left-4 bg-black/70 text-white text-xs px-2 py-1 rounded">Front View</div>
|
|
</div>
|
|
|
|
{/* Back Face */}
|
|
<div className="absolute inset-0 transform rotate-y-90 translate-z-32 md:translate-z-40 bg-white shadow-xl border border-white/20">
|
|
<Image
|
|
src="/assets/images/home/back.webp"
|
|
alt="Back View"
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
<div className="absolute bottom-4 left-4 bg-black/70 text-white text-xs px-2 py-1 rounded">Back View</div>
|
|
</div>
|
|
|
|
{/* Right Face */}
|
|
<div className="absolute inset-0 transform rotate-y-90 translate-z-32 md:translate-z-40 bg-white shadow-xl border border-white/20">
|
|
<Image
|
|
src="/assets/images/home/right.webp"
|
|
alt="Right View"
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
<div className="absolute bottom-4 left-4 bg-black/70 text-white text-xs px-2 py-1 rounded">Right View</div>
|
|
</div>
|
|
|
|
{/* Left Face */}
|
|
<div className="absolute inset-0 transform -rotate-y-90 translate-z-32 md:translate-z-40 bg-white shadow-xl border border-white/20">
|
|
<Image
|
|
src="/assets/images/home/left.webp"
|
|
alt="Left View"
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
<div className="absolute bottom-4 left-4 bg-black/70 text-white text-xs px-2 py-1 rounded">Left View</div>
|
|
</div>
|
|
|
|
{/* 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"
|
|
alt="Top View"
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
<div className="absolute bottom-4 left-4 bg-black/70 text-white text-xs px-2 py-1 rounded">Top View</div>
|
|
</div>
|
|
|
|
{/* Bottom 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 shadow-2xl">
|
|
<Image
|
|
src="/assets/images/home/bottom.webp"
|
|
alt="Bottom View"
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
<div className="absolute bottom-4 left-4 bg-black/70 text-white text-xs px-2 py-1 rounded">Bottom View</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style jsx global>{`
|
|
.perspective-container {
|
|
perspective: 1000px;
|
|
}
|
|
.transform-style-3d {
|
|
transform-style: preserve-3d;
|
|
transition: transform 0.1s ease-out; /* Smooth transition for mouse movement */
|
|
}
|
|
.translate-z-32 {
|
|
transform: rotateY(0deg) translateZ(8rem);
|
|
}
|
|
.translate-z-40 {
|
|
transform: rotateY(0deg) translateZ(10rem);
|
|
}
|
|
|
|
/* Custom transforms for faces */
|
|
.cube > div:nth-child(1) { transform: rotateY(0deg) translateZ(128px); }
|
|
.cube > div:nth-child(2) { transform: rotateY(180deg) translateZ(128px); }
|
|
.cube > div:nth-child(3) { transform: rotateY(90deg) translateZ(128px); }
|
|
.cube > div:nth-child(4) { transform: rotateY(-90deg) translateZ(128px); }
|
|
.cube > div:nth-child(5) { transform: rotateX(90deg) translateZ(128px); }
|
|
.cube > div:nth-child(6) { transform: rotateX(-90deg) translateZ(128px); }
|
|
|
|
@media (min-width: 768px) {
|
|
.cube > div:nth-child(1) { transform: rotateY(0deg) translateZ(160px); }
|
|
.cube > div:nth-child(2) { transform: rotateY(180deg) translateZ(160px); }
|
|
.cube > div:nth-child(3) { transform: rotateY(90deg) translateZ(160px); }
|
|
.cube > div:nth-child(4) { transform: rotateY(-90deg) translateZ(160px); }
|
|
.cube > div:nth-child(5) { transform: rotateX(90deg) translateZ(160px); }
|
|
.cube > div:nth-child(6) { transform: rotateX(-90deg) translateZ(160px); }
|
|
}
|
|
|
|
@keyframes spin-slow {
|
|
from { transform: rotateX(-10deg) rotateY(0deg); }
|
|
to { transform: rotateX(-10deg) rotateY(360deg); }
|
|
}
|
|
.animate-spin-slow {
|
|
animation: spin-slow 20s linear infinite;
|
|
}
|
|
`}</style>
|
|
</section>
|
|
);
|
|
}
|