Changes
gpt-engineer-app[bot] committed
Nov 27, 2025 at 13:40 UTC
785cda89bf8b9d7265c9e8632d015369fac6dc2c
2 files changed
+10
-42
src/components/landing/Building3DViewer.tsx
deleted
-39
@@ -1,39 +0,0 @@
1
-import { Canvas } from '@react-three/fiber';
2
-import { OrbitControls, useGLTF, Stage } from '@react-three/drei';
3
-import { Suspense } from 'react';
4
-
5
-function BuildingModel() {
6
- const { scene } = useGLTF('/models/building-model.glb');
7
- return <primitive object={scene} scale={1} />;
8
-}
9
-
10
-const Building3DViewer = () => {
11
- return (
12
- <div className="w-full h-[400px] md:h-[500px] relative">
13
- <div className="absolute inset-0 bg-primary/10 rounded-2xl blur-3xl" />
14
- <div className="relative w-full h-full rounded-2xl overflow-hidden">
15
- <Canvas
16
- camera={{ position: [0, 0, 5], fov: 50 }}
17
- className="bg-transparent"
18
- >
19
- <Suspense fallback={null}>
20
- <Stage environment="city" intensity={0.6}>
21
- <BuildingModel />
22
- </Stage>
23
- <OrbitControls
24
- enableZoom={true}
25
- enablePan={true}
26
- minDistance={2}
27
- maxDistance={10}
28
- />
29
- </Suspense>
30
- </Canvas>
31
- </div>
32
- <div className="absolute bottom-4 left-1/2 -translate-x-1/2 text-sm text-muted-foreground bg-background/80 px-4 py-2 rounded-full backdrop-blur-sm">
33
- Drag to rotate • Scroll to zoom
34
- </div>
35
- </div>
36
- );
37
-};
38
-
39
-export default Building3DViewer;
src/components/landing/Hero.tsx
+10
-3
@@ -1,6 +1,6 @@
1
import { Button } from "@/components/ui/button";
2
import { ArrowRight } from "lucide-react";
3
-import Building3DViewer from "./Building3DViewer";
3
+import buildingModel from "@/assets/building-3d-model.png";
4
const Hero = () => {
5
return <section className="pt-32 pb-20 md:pt-40 md:pb-32 bg-background overflow-hidden">
6
<div className="container">
@@ -19,8 +19,15 @@ const Hero = () => {
19
</div>
20
21
{/* 3D Building Model */}
22
- <div className="mt-16 md:mt-24 max-w-4xl mx-auto animate-fade-up animation-delay-400">
23
- <Building3DViewer />
22
+ <div className="mt-16 md:mt-24 flex justify-center animate-fade-up animation-delay-400">
23
+ <div className="relative max-w-2xl">
24
+ <div className="absolute inset-0 bg-primary/10 rounded-2xl blur-3xl" />
25
+ <img
26
+ src={buildingModel}
27
+ alt="3D Building Model"
28
+ className="relative w-full h-auto drop-shadow-2xl hover:scale-105 transition-transform duration-300 cursor-pointer"
29
+ />
30
+ </div>
31
</div>
32
</div>
33
</section>;