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>
|
||||
{children}
|
||||
<CompareBar />
|
||||
<MouseAnimation />
|
||||
{/* <MouseAnimation /> */}
|
||||
</CompareProvider>
|
||||
</ThemeProvider>
|
||||
</body>
|
||||
|
||||
@ -1,46 +1,9 @@
|
||||
"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">
|
||||
|
||||
@ -81,128 +44,22 @@ export default function About() {
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* 3D Cube Container */}
|
||||
{/* Parallax Image Container */}
|
||||
{/* Parallax Image Container - Visible on all screens */}
|
||||
<div
|
||||
className="h-[500px] w-full flex items-center justify-center perspective-container cursor-move"
|
||||
ref={containerRef}
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
className="h-[400px] md:h-[500px] w-full rounded-2xl shadow-2xl overflow-hidden"
|
||||
style={{
|
||||
backgroundImage: "url('/assets/images/home/front.webp')",
|
||||
backgroundAttachment: "fixed",
|
||||
backgroundPosition: "center",
|
||||
backgroundRepeat: "no-repeat",
|
||||
backgroundSize: "cover"
|
||||
}}
|
||||
>
|
||||
<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.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>
|
||||
{/* Empty container for the image background */}
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -22,7 +22,7 @@ export default function Header() {
|
||||
<>
|
||||
<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-white/5 dark:bg-black/5 backdrop-blur-md shadow-sm py-4"
|
||||
: "bg-transparent py-6"
|
||||
}`}
|
||||
>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user