home page about setion new image format update
This commit is contained in:
akash
parent
70f2797703
commit
04c6ff164e
@ -61,7 +61,7 @@ export default function RootLayout({
|
|||||||
<CompareProvider>
|
<CompareProvider>
|
||||||
{children}
|
{children}
|
||||||
<CompareBar />
|
<CompareBar />
|
||||||
<MouseAnimation />
|
{/* <MouseAnimation /> */}
|
||||||
</CompareProvider>
|
</CompareProvider>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@ -1,46 +1,9 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useState, useRef, MouseEvent } from "react";
|
|
||||||
import Image from "next/image";
|
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
|
||||||
import { FloatingHouse, RotatingKey, GrowingBuilding } from "./PropertyAnimations";
|
import { FloatingHouse, RotatingKey, GrowingBuilding } from "./PropertyAnimations";
|
||||||
|
|
||||||
export default function About() {
|
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 (
|
return (
|
||||||
<section id="about" className="py-24 bg-white dark:bg-black relative overflow-hidden">
|
<section id="about" className="py-24 bg-white dark:bg-black relative overflow-hidden">
|
||||||
|
|
||||||
@ -81,128 +44,22 @@ export default function About() {
|
|||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 3D Cube Container */}
|
{/* Parallax Image Container */}
|
||||||
|
{/* Parallax Image Container - Visible on all screens */}
|
||||||
<div
|
<div
|
||||||
className="h-[500px] w-full flex items-center justify-center perspective-container cursor-move"
|
className="h-[400px] md:h-[500px] w-full rounded-2xl shadow-2xl overflow-hidden"
|
||||||
ref={containerRef}
|
style={{
|
||||||
onMouseMove={handleMouseMove}
|
backgroundImage: "url('/assets/images/home/front.webp')",
|
||||||
onMouseEnter={handleMouseEnter}
|
backgroundAttachment: "fixed",
|
||||||
onMouseLeave={handleMouseLeave}
|
backgroundPosition: "center",
|
||||||
|
backgroundRepeat: "no-repeat",
|
||||||
|
backgroundSize: "cover"
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<div
|
{/* Empty container for the image background */}
|
||||||
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.png"
|
|
||||||
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>
|
</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>
|
</section>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -22,7 +22,7 @@ export default function Header() {
|
|||||||
<>
|
<>
|
||||||
<header
|
<header
|
||||||
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${isScrolled
|
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-white/5 dark:bg-black/5 backdrop-blur-md shadow-sm py-4"
|
||||||
: "bg-transparent py-6"
|
: "bg-transparent py-6"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user