Skip to content

Commit 6e34e47

Browse files
jagguvarma15jagguvarma15
committed
exterior spaces
1 parent cbe4f05 commit 6e34e47

2 files changed

Lines changed: 201 additions & 1 deletion

File tree

‎frontend/app/exterior-spaces/page.tsx‎

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
'use client'
2+
3+
import Link from 'next/link'
4+
import { useState, useEffect } from 'react'
5+
import { ArrowLeft, Maximize2, Minimize2, Presentation } from 'lucide-react'
6+
7+
export default function ExteriorSpacesPage() {
8+
// Your Figma prototype embed URL (presentation mode)
9+
const figmaEmbedUrl = "https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FmAq1KGpFlEMPBiPRCEEbNy%2FExterior-Spaces%3Fnode-id%3D228-981%26p%3Df%26t%3DPkpHrsBjZLwUuO6f-0%26scaling%3Dmin-zoom%26content-scaling%3Dfixed%26page-id%3D0%253A1%26starting-point-node-id%3D228%253A981%26show-proto-sidebar%3D1"
10+
11+
// State for fullscreen mode
12+
const [isFullscreen, setIsFullscreen] = useState(false)
13+
14+
// Toggle fullscreen mode
15+
const toggleFullscreen = () => {
16+
setIsFullscreen(!isFullscreen)
17+
}
18+
19+
// Set page title
20+
useEffect(() => {
21+
document.title = 'Exterior Spaces | ThinkxLife'
22+
}, [])
23+
24+
// Exit fullscreen with Escape key
25+
useEffect(() => {
26+
const handleEscape = (e: KeyboardEvent) => {
27+
if (e.key === 'Escape' && isFullscreen) {
28+
setIsFullscreen(false)
29+
}
30+
}
31+
32+
document.addEventListener('keydown', handleEscape)
33+
return () => document.removeEventListener('keydown', handleEscape)
34+
}, [isFullscreen])
35+
36+
// Fullscreen presentation mode
37+
if (isFullscreen) {
38+
return (
39+
<div className="fixed inset-0 z-[9999] bg-black">
40+
{/* Fullscreen Controls */}
41+
<div className="absolute top-4 right-4 z-10 flex items-center gap-2">
42+
<button
43+
onClick={toggleFullscreen}
44+
className="inline-flex items-center gap-2 bg-white/10 backdrop-blur-sm hover:bg-white/20 text-white px-3 py-2 rounded-lg transition-colors"
45+
>
46+
<Minimize2 className="h-4 w-4" />
47+
Exit Fullscreen
48+
</button>
49+
</div>
50+
51+
{/* Fullscreen Figma */}
52+
<iframe
53+
src={figmaEmbedUrl}
54+
className="w-full h-full"
55+
allowFullScreen
56+
title="Exterior Spaces Prototype - Presentation Mode"
57+
style={{ border: 'none' }}
58+
/>
59+
60+
{/* Escape hint */}
61+
<div className="absolute bottom-4 left-4 text-white/60 text-sm">
62+
Press <kbd className="bg-white/10 px-2 py-1 rounded">Esc</kbd> to exit fullscreen
63+
</div>
64+
</div>
65+
)
66+
}
67+
68+
return (
69+
<div className="min-h-screen bg-gray-50">
70+
{/* Header */}
71+
<div className="bg-white shadow-sm border-b">
72+
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
73+
{/* Back Link */}
74+
<Link
75+
href="/"
76+
className="inline-flex items-center gap-2 text-blue-600 hover:text-blue-800 mb-4 transition-colors"
77+
>
78+
<ArrowLeft className="h-4 w-4" />
79+
Back to Home
80+
</Link>
81+
82+
{/* Page Title */}
83+
<div className="flex items-center justify-between">
84+
<div>
85+
<h1 className="text-3xl font-bold text-gray-900">Exterior Spaces</h1>
86+
<p className="text-gray-600 mt-2">
87+
Explore our innovative exterior space designs and architectural concepts
88+
</p>
89+
</div>
90+
91+
{/* Action Buttons */}
92+
<div className="flex items-center gap-3">
93+
<button
94+
onClick={toggleFullscreen}
95+
className="inline-flex items-center gap-2 bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition-colors"
96+
>
97+
<Presentation className="h-4 w-4" />
98+
Presentation Mode
99+
</button>
100+
</div>
101+
</div>
102+
</div>
103+
</div>
104+
105+
{/* Figma Embed */}
106+
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
107+
<div className="bg-white rounded-lg shadow-lg overflow-hidden">
108+
{/* Embed Header */}
109+
<div className="bg-gray-50 px-6 py-4 border-b flex items-center justify-between">
110+
<div className="flex items-center gap-2">
111+
<div className="w-3 h-3 bg-red-500 rounded-full"></div>
112+
<div className="w-3 h-3 bg-yellow-500 rounded-full"></div>
113+
<div className="w-3 h-3 bg-green-500 rounded-full"></div>
114+
<span className="ml-4 text-sm text-gray-600 font-medium">Figma Prototype</span>
115+
</div>
116+
<button
117+
onClick={toggleFullscreen}
118+
className="text-gray-500 hover:text-gray-700 hover:bg-gray-100 p-1 rounded transition-colors"
119+
title="Enter Presentation Mode"
120+
>
121+
<Maximize2 className="h-4 w-4" />
122+
</button>
123+
</div>
124+
125+
{/* Figma iFrame */}
126+
<div className="relative" style={{ paddingBottom: '56.25%', height: 0 }}>
127+
<iframe
128+
src={figmaEmbedUrl}
129+
className="absolute top-0 left-0 w-full h-full"
130+
allowFullScreen
131+
title="Exterior Spaces Prototype"
132+
style={{ border: 'none', minHeight: '600px' }}
133+
/>
134+
</div>
135+
</div>
136+
137+
{/* Figma Info */}
138+
<div className="mt-8 bg-green-50 border border-green-200 rounded-lg p-6">
139+
<h3 className="text-lg font-semibold text-green-800 mb-2">
140+
✅ Figma Integration Active
141+
</h3>
142+
<div className="text-green-700 text-sm space-y-2">
143+
<p>Your Exterior Spaces prototype is now embedded and ready to interact with. Experience the full interactive prototype above.</p>
144+
<div className="flex items-center gap-2 mt-3">
145+
<Presentation className="h-4 w-4" />
146+
<span className="font-medium">Presentation Mode:</span>
147+
<span>Click the "Presentation Mode" button for fullscreen viewing without navbar/footer (Press Esc to exit)</span>
148+
</div>
149+
<div className="flex items-center gap-2 mt-2">
150+
<span className="text-xs bg-green-100 px-2 py-1 rounded">🔒 Private:</span>
151+
<span className="text-xs">Your Figma file remains private - users only see the interactive prototype</span>
152+
</div>
153+
</div>
154+
</div>
155+
156+
{/* Additional Info */}
157+
<div className="mt-6 grid md:grid-cols-2 gap-6">
158+
<div className="bg-white p-6 rounded-lg shadow-sm">
159+
<h3 className="font-semibold text-gray-900 mb-3">About Exterior Spaces</h3>
160+
<p className="text-gray-600 text-sm">
161+
Our exterior space designs focus on creating harmonious environments that blend
162+
natural elements with innovative architectural concepts. These designs promote
163+
wellbeing and sustainable living practices.
164+
</p>
165+
</div>
166+
167+
<div className="bg-white p-6 rounded-lg shadow-sm">
168+
<h3 className="font-semibold text-gray-900 mb-3">Design Features</h3>
169+
<ul className="text-gray-600 text-sm space-y-1">
170+
<li>• Sustainable materials and practices</li>
171+
<li>• Biophilic design principles</li>
172+
<li>• Community-focused spaces</li>
173+
<li>• Accessibility considerations</li>
174+
</ul>
175+
</div>
176+
</div>
177+
</div>
178+
</div>
179+
)
180+
}

‎frontend/components/navbar.tsx‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { useState, useEffect } from "react";
44
import { useSession, signOut } from "next-auth/react";
55
import { usePathname } from "next/navigation";
66
import Link from "next/link";
7-
import { Menu, X, Brain, Heart, User, LogOut, Lock, Activity } from "lucide-react";
7+
import { Menu, X, Brain, Heart, User, LogOut, Lock, Activity, Building2 } from "lucide-react";
88
import { Button } from "@/components/ui/button";
99
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
1010
import {
@@ -193,6 +193,13 @@ export default function Navbar() {
193193
Healing Rooms
194194
</AuthRequiredButton>
195195

196+
<Link href="/exterior-spaces">
197+
<Button className="bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white rounded-xl px-6 py-2 font-medium shadow-lg hover:shadow-blue-500/25 transition-all duration-300 transform hover:scale-105">
198+
<Building2 className="w-4 h-4 mr-2" />
199+
Exterior Spaces
200+
</Button>
201+
</Link>
202+
196203
{/* Authentication Section */}
197204
{status === "loading" ? (
198205
<div className="w-10 h-10 rounded-full bg-slate-200 animate-pulse"></div>
@@ -332,6 +339,12 @@ export default function Navbar() {
332339
)}
333340
</Button>
334341
</Link>
342+
<Link href="/exterior-spaces" onClick={() => setIsMenuOpen(false)}>
343+
<Button className="w-full bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white rounded-xl py-3 font-medium shadow-lg mb-3">
344+
<Building2 className="w-4 h-4 mr-2" />
345+
Exterior Spaces
346+
</Button>
347+
</Link>
335348
</>
336349
) : (
337350
<>
@@ -402,6 +415,13 @@ export default function Navbar() {
402415
</AlertDialogFooter>
403416
</AlertDialogContent>
404417
</AlertDialog>
418+
419+
<Link href="/exterior-spaces" onClick={() => setIsMenuOpen(false)}>
420+
<Button className="w-full bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white rounded-xl py-3 font-medium shadow-lg mb-3">
421+
<Building2 className="w-4 h-4 mr-2" />
422+
Exterior Spaces
423+
</Button>
424+
</Link>
405425
</>
406426
)}
407427

0 commit comments

Comments
 (0)