Skip to content

Commit f17910c

Browse files
committed
Add tropical lagoon animated background to Welcome page in Workspace
- Enhanced Welcome to GraphDone page with consistent animated background - Added lagoon-caustics with radial gradients and lagoon-drift animation - Added lagoon-shimmer elements (5 layers) for subtle light effects - Improved visual hierarchy with proper z-index layering (z-20 for content) - Enhanced buttons with backdrop-blur-sm and subtle borders for zen mode aesthetics - Maintains design consistency with login page and modal empty states - Added border effects to icon and buttons for depth and glassmorphism effect Now all welcome/empty states across the app have the same beautiful animated background: - Login page (existing) - Workspace Welcome page (this update) - GraphSelectionModal No Graphs Available (previous update)
1 parent d454a43 commit f17910c

1 file changed

Lines changed: 22 additions & 5 deletions

File tree

packages/web/src/pages/Workspace.tsx

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -248,10 +248,27 @@ export function Workspace() {
248248
{/* Main Content */}
249249
<div className="flex-1 relative">
250250
{!currentGraph ? (
251-
<div className="h-full flex items-center justify-center bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900">
252-
<div className="text-center max-w-xl mx-auto px-6">
251+
<div className="h-full flex items-center justify-center bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 relative">
252+
{/* Tropical lagoon light scattering background animation - zen mode for welcome page */}
253+
<div className="lagoon-caustics absolute inset-0 opacity-30">
254+
<div
255+
className="absolute inset-0 opacity-40"
256+
style={{
257+
background: 'radial-gradient(circle at 20% 50%, rgba(120, 130, 140, 0.13), transparent 50%), radial-gradient(circle at 80% 20%, rgba(120, 140, 160, 0.13), transparent 50%), radial-gradient(circle at 40% 80%, rgba(100, 150, 130, 0.13), transparent 50%)',
258+
animation: 'lagoon-drift 20s infinite linear',
259+
}}
260+
/>
261+
262+
<div className="lagoon-shimmer lagoon-shimmer-1"></div>
263+
<div className="lagoon-shimmer lagoon-shimmer-2"></div>
264+
<div className="lagoon-shimmer lagoon-shimmer-3"></div>
265+
<div className="lagoon-shimmer lagoon-shimmer-4"></div>
266+
<div className="lagoon-shimmer lagoon-shimmer-5"></div>
267+
</div>
268+
269+
<div className="text-center max-w-xl mx-auto px-6 relative z-20">
253270
{/* Compact Icon */}
254-
<div className="mx-auto mb-6 w-16 h-16 bg-gradient-to-br from-green-600 to-blue-600 rounded-xl flex items-center justify-center shadow-lg">
271+
<div className="mx-auto mb-6 w-16 h-16 bg-gradient-to-br from-green-600 to-blue-600 rounded-xl flex items-center justify-center shadow-lg backdrop-blur-sm border border-green-400/20">
255272
<Plus className="h-8 w-8 text-white" />
256273
</div>
257274

@@ -277,7 +294,7 @@ export function Workspace() {
277294
<>
278295
<button
279296
onClick={() => setShowGraphSelectionModal(true)}
280-
className="w-full px-6 py-3 bg-gray-700 hover:bg-gray-600 text-white rounded-lg transition-all duration-200 font-medium flex items-center justify-center shadow-lg hover:shadow-xl transform hover:-translate-y-0.5"
297+
className="w-full px-6 py-3 bg-gray-700/80 hover:bg-gray-600/80 backdrop-blur-sm text-white rounded-lg transition-all duration-200 font-medium flex items-center justify-center shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 border border-gray-600/30"
281298
>
282299
<svg className="h-4 w-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
283300
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"/>
@@ -296,7 +313,7 @@ export function Workspace() {
296313

297314
<button
298315
onClick={() => setShowCreateGraphModal(true)}
299-
className="w-full px-6 py-3 bg-gradient-to-r from-green-600 to-blue-600 hover:from-green-500 hover:to-blue-500 text-white rounded-lg transition-all duration-200 font-medium flex items-center justify-center shadow-lg hover:shadow-xl transform hover:-translate-y-0.5"
316+
className="w-full px-6 py-3 bg-gradient-to-r from-green-600 to-blue-600 hover:from-green-500 hover:to-blue-500 text-white rounded-lg transition-all duration-200 font-medium flex items-center justify-center shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 backdrop-blur-sm border border-green-400/30"
300317
>
301318
<Plus className="h-4 w-4 mr-2" />
302319
Create New Graph

0 commit comments

Comments
 (0)