'use client'

import { useState } from 'react'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Trophy, Zap, DollarSign, Shield, TrendingUp, Award } from 'lucide-react'

interface EquipmentRanking {
rank: number
brand: string
model: string
value: number
unit: string
series: string
price?: number
efficiency?: number
warranty?: number
}

interface EquipmentRankingTableProps {
panels: {
topPower: EquipmentRanking[]
bestPricePerWatt: EquipmentRanking[]
topEfficiency: EquipmentRanking[]
}
inverters: {
longestWarranty: EquipmentRanking[]
bestPricePerKw: EquipmentRanking[]
topEfficiency: EquipmentRanking[]
}
isLoading?: boolean
onInteraction?: (action: string, data?: any) => void
}

const formatCurrency = (value: number) => {
return new Intl.NumberFormat('pt-BR', {
style: 'currency',
currency: 'BRL'
}).format(value)
}

const formatNumber = (value: number, decimals = 2) => {
return value.toFixed(decimals)
}

const getRankColor = (rank: number) => {
if (rank === 1) return 'bg-yellow-100 text-yellow-800 border-yellow-300'
if (rank === 2) return 'bg-gray-100 text-gray-800 border-gray-300'
if (rank === 3) return 'bg-orange-100 text-orange-800 border-orange-300'
return 'bg-blue-50 text-blue-800 border-blue-200'
}

const getRankIcon = (rank: number) => {
if (rank === 1) return <Trophy className="h-4 w-4 text-yellow-600" />
if (rank === 2) return <Award className="h-4 w-4 text-gray-600" />
if (rank === 3) return <Award className="h-4 w-4 text-orange-600" />
return <span className="text-sm font-bold text-blue-600">#{rank}</span>
}

function RankingTable({
title,
data,
icon,
valueLabel,
onInteraction
}: {
title: string
data: EquipmentRanking[]
icon: React.ReactNode
valueLabel: string
onInteraction?: (action: string, data?: any) => void
}) {
return (
<Card className="border-gradient">
<CardHeader>
<CardTitle className="flex items-center gap-2">
{icon}
{title}
</CardTitle>
<CardDescription>
Top 10 equipamentos ordenados por {valueLabel.toLowerCase()}
</CardDescription>
</CardHeader>
<CardContent>
<div className="overflow-x-auto">
<Table>
<TableHeader>
<TableRow>
<TableHead>Posição</TableHead>
<TableHead>Marca</TableHead>
<TableHead>Modelo</TableHead>
<TableHead>Série</TableHead>
<TableHead>{valueLabel}</TableHead>
<TableHead>Preço Médio</TableHead>
<TableHead>Eficiência</TableHead>
<TableHead>Garantia</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{data.map((item) => (
<TableRow
key={`${item.brand}-${item.model}`}
className="hover:bg-[var(--glass-light)] hover:backdrop-blur-sm transition-all duration-200 cursor-pointer"
onClick={() => onInteraction?.("equipment_click", { item })}
>
<TableCell>
<div className="flex items-center gap-2">
<Badge className={getRankColor(item.rank)}>
{getRankIcon(item.rank)}
</Badge>
</div>
</TableCell>
<TableCell className="font-medium">{item.brand}</TableCell>
<TableCell className="font-mono text-sm">{item.model}</TableCell>
<TableCell className="text-sm text-gray-600">{item.series}</TableCell>
<TableCell className="font-semibold text-blue-600">
{item.unit.includes('R$') ? formatCurrency(item.value) : `${formatNumber(item.value)} ${item.unit}`}
</TableCell>
<TableCell>
{item.price ? formatCurrency(item.price) : '-'}
</TableCell>
<TableCell>
{item.efficiency ? `${formatNumber(item.efficiency)}%` : '-'}
</TableCell>
<TableCell>
{item.warranty ? `${item.warranty} anos` : '-'}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
</CardContent>
</Card>
)
}

export function EquipmentRankingTable({
panels,
inverters,
isLoading,
onInteraction,
}: Readonly<EquipmentRankingTableProps>) {
const [activeTab, setActiveTab] = useState("panels")

if (isLoading) {
return (
<Card className="border-gradient">
<CardHeader>
<CardTitle>Carregando Rankings de Equipamentos...</CardTitle>
</CardHeader>
<CardContent>
<div className="animate-pulse space-y-4">
{[1, 2, 3, 4, 5].map((num) => (
<div
key={`loading-${num}`}
className="h-16 bg-gray-200 rounded"
></div>
))}
</div>
</CardContent>
</Card>
)
}

return (
<div className="space-y-6">
<Tabs value={activeTab} onValueChange={setActiveTab}>
<TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="panels" className="flex items-center gap-2">
<Zap className="h-4 w-4" />
Painéis Solares
</TabsTrigger>
<TabsTrigger value="inverters" className="flex items-center gap-2">
<TrendingUp className="h-4 w-4" />
Inversores
</TabsTrigger>
</TabsList>

<TabsContent value="panels" className="space-y-6">
<RankingTable
title="Maior Potência - Painéis Solares"
data={panels.topPower}
icon={<Zap className="h-5 w-5 text-yellow-500" />}
valueLabel="Potência (Wp)"
onInteraction={onInteraction}
/>

<RankingTable
title="Melhor Preço por Watt - Painéis Solares"
data={panels.bestPricePerWatt}
icon={<DollarSign className="h-5 w-5 text-green-500" />}
valueLabel="Preço/W (R$/W)"
onInteraction={onInteraction}
/>

<RankingTable
title="Top Eficiência - Painéis Solares"
data={panels.topEfficiency}
icon={<TrendingUp className="h-5 w-5 text-blue-500" />}
valueLabel="Eficiência (%)"
onInteraction={onInteraction}
/>
</TabsContent>

<TabsContent value="inverters" className="space-y-6">
<RankingTable
title="Maior Garantia - Inversores"
data={inverters.longestWarranty}
icon={<Shield className="h-5 w-5 text-purple-500" />}
valueLabel="Garantia (anos)"
onInteraction={onInteraction}
/>

<RankingTable
title="Melhor Preço por kW - Inversores"
data={inverters.bestPricePerKw}
icon={<DollarSign className="h-5 w-5 text-green-500" />}
valueLabel="Preço/kW (R$/kW)"
onInteraction={onInteraction}
/>

<RankingTable
title="Top Eficiência - Inversores"
data={inverters.topEfficiency}
icon={<TrendingUp className="h-5 w-5 text-blue-500" />}
valueLabel="Eficiência (%)"
onInteraction={onInteraction}
/>
</TabsContent>
</Tabs>
</div>
)
}

README.md

@@ -1,10 +1,13 @@
 ---
-title: Solar Equipment Showdown
-emoji: 📉
+title: Solar Equipment Showdown ⚡
 colorFrom: pink
-colorTo: yellow
+colorTo: red
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,97 @@
+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        footer {
+          background-color: #1e293b;
+          color: white;
+          padding: 2rem 0;
+          margin-top: 3rem;
+        }
+        
+        .container {
+          max-width: 1200px;
+          margin: 0 auto;
+          padding: 0 1rem;
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+          gap: 2rem;
+        }
+        
+        .footer-section h3 {
+          font-size: 1.125rem;
+          font-weight: 600;
+          margin-bottom: 1rem;
+          color: #e2e8f0;
+        }
+        
+        .footer-section ul {
+          display: flex;
+          flex-direction: column;
+          gap: 0.5rem;
+        }
+        
+        .footer-section a {
+          color: #94a3b8;
+          transition: color 0.2s;
+        }
+        
+        .footer-section a:hover {
+          color: #e2e8f0;
+        }
+        
+        .copyright {
+          text-align: center;
+          margin-top: 2rem;
+          padding-top: 2rem;
+          border-top: 1px solid #334155;
+          color: #94a3b8;
+          font-size: 0.875rem;
+        }
+        
+        @media (max-width: 640px) {
+          .container {
+            grid-template-columns: 1fr;
+          }
+        }
+      </style>
+      <footer>
+        <div class="container">
+          <div class="footer-section">
+            <h3>Solar Showdown</h3>
+            <p class="text-slate-400">Comparando os melhores equipamentos solares para você tomar a melhor decisão.</p>
+          </div>
+          <div class="footer-section">
+            <h3>Links</h3>
+            <ul>
+              <li><a href="#panels">Painéis Solares</a></li>
+              <li><a href="#inverters">Inversores</a></li>
+              <li><a href="#comparison">Comparador</a></li>
+            </ul>
+          </div>
+          <div class="footer-section">
+            <h3>Recursos</h3>
+            <ul>
+              <li><a href="#blog">Blog</a></li>
+              <li><a href="#faq">FAQ</a></li>
+              <li><a href="#contact">Contato</a></li>
+            </ul>
+          </div>
+          <div class="footer-section">
+            <h3>Legal</h3>
+            <ul>
+              <li><a href="#privacy">Privacidade</a></li>
+              <li><a href="#terms">Termos</a></li>
+              <li><a href="#cookies">Cookies</a></li>
+            </ul>
+          </div>
+        </div>
+        <div class="copyright">
+          &copy; ${new Date().getFullYear()} Solar Showdown. Todos os direitos reservados.
+        </div>
+      </footer>
+    `;
+  }
+}
+customElements.define('custom-footer', CustomFooter);

components/header.js

@@ -0,0 +1,76 @@
+class CustomHeader extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        header {
+          background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);
+          color: white;
+          padding: 1.5rem 0;
+          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        }
+        
+        .container {
+          max-width: 1200px;
+          margin: 0 auto;
+          padding: 0 1rem;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        
+        .logo {
+          font-size: 1.5rem;
+          font-weight: bold;
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+        }
+        
+        nav ul {
+          display: flex;
+          gap: 1.5rem;
+        }
+        
+        nav a {
+          color: white;
+          font-weight: 500;
+          transition: opacity 0.2s;
+        }
+        
+        nav a:hover {
+          opacity: 0.8;
+        }
+        
+        @media (max-width: 768px) {
+          .container {
+            flex-direction: column;
+            gap: 1rem;
+          }
+          
+          nav ul {
+            flex-wrap: wrap;
+            justify-content: center;
+          }
+        }
+      </style>
+      <header>
+        <div class="container">
+          <a href="/" class="logo">
+            <i data-feather="zap"></i>
+            Solar Showdown
+          </a>
+          <nav>
+            <ul>
+              <li><a href="#panels">Painéis</a></li>
+              <li><a href="#inverters">Inversores</a></li>
+              <li><a href="#comparison">Comparar</a></li>
+              <li><a href="#about">Sobre</a></li>
+            </ul>
+          </nav>
+        </div>
+      </header>
+    `;
+  }
+}
+customElements.define('custom-header', CustomHeader);

index.html

@@ -1,19 +1,59 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Solar Equipment Showdown</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+      tailwind.config = {
+        theme: {
+          extend: {
+            colors: {
+              primary: {
+                50: '#f0f9ff',
+                100: '#e0f2fe',
+                200: '#bae6fd',
+                300: '#7dd3fc',
+                400: '#38bdf8',
+                500: '#0ea5e9',
+                600: '#0284c7',
+                700: '#0369a1',
+                800: '#075985',
+                900: '#0c4a6e',
+              },
+              secondary: {
+                50: '#f5f3ff',
+                100: '#ede9fe',
+                200: '#ddd6fe',
+                300: '#c4b5fd',
+                400: '#a78bfa',
+                500: '#8b5cf6',
+                600: '#7c3aed',
+                700: '#6d28d9',
+                800: '#5b21b6',
+                900: '#4c1d95',
+              }
+            }
+          }
+        }
+      }
+    </script>
+</head>
+<body class="bg-gray-50">
+    <custom-header></custom-header>
+    <main class="container mx-auto px-4 py-8">
+        <div id="app" class="space-y-8"></div>
+    </main>
+    <custom-footer></custom-footer>
+    
+    <script src="components/header.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,172 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // Mock data for demonstration
+    const mockData = {
+        panels: {
+            topPower: [
+                { rank: 1, brand: "SunPower", model: "X22-370", value: 370, unit: "Wp", series: "X-Series", price: 899, efficiency: 22.8, warranty: 25 },
+                { rank: 2, brand: "LG", model: "LG370Q1C-A5", value: 370, unit: "Wp", series: "NeON R", price: 799, efficiency: 21.7, warranty: 25 },
+                { rank: 3, brand: "Panasonic", model: "VBHN330SA16", value: 330, unit: "Wp", series: "HIT", price: 699, efficiency: 19.7, warranty: 25 },
+            ],
+            bestPricePerWatt: [
+                { rank: 1, brand: "Canadian Solar", model: "CS3K-395MS", value: 2.15, unit: "R$/W", series: "HiKu", price: 850, efficiency: 19.9, warranty: 12 },
+                { rank: 2, brand: "Trina Solar", model: "TSM-395DE15", value: 2.20, unit: "R$/W", series: "Vertex S", price: 869, efficiency: 20.3, warranty: 15 },
+                { rank: 3, brand: "Jinko Solar", model: "JKM395M-72HL4", value: 2.25, unit: "R$/W", series: "Tiger Pro", price: 889, efficiency: 20.4, warranty: 15 },
+            ],
+            topEfficiency: [
+                { rank: 1, brand: "SunPower", model: "Maxeon 3", value: 22.6, unit: "%", series: "Maxeon", price: 999, efficiency: 22.6, warranty: 25 },
+                { rank: 2, brand: "LG", model: "LG380Q1C-A5", value: 21.7, unit: "%", series: "NeON R", price: 849, efficiency: 21.7, warranty: 25 },
+                { rank: 3, brand: "REC", model: "REC370AA", value: 21.3, unit: "%", series: "Alpha Pure", price: 799, efficiency: 21.3, warranty: 25 },
+            ]
+        },
+        inverters: {
+            longestWarranty: [
+                { rank: 1, brand: "Fronius", model: "Symo 10.0-3-M", value: 10, unit: "anos", series: "Symo", price: 12500, efficiency: 98.1 },
+                { rank: 2, brand: "SMA", model: "Sunny Tripower 10.0", value: 10, unit: "anos", series: "Tripower", price: 11900, efficiency: 98.3 },
+                { rank: 3, brand: "Huawei", model: "SUN2000-10KTL-M1", value: 10, unit: "anos", series: "SUN2000", price: 10900, efficiency: 98.4 },
+            ],
+            bestPricePerKw: [
+                { rank: 1, brand: "Growatt", model: "MIN 10000TL-X", value: 850, unit: "R$/kW", series: "MIN", price: 8500, efficiency: 97.8 },
+                { rank: 2, brand: "Solis", model: "S6-GR1P10K", value: 900, unit: "R$/kW", series: "S6", price: 9000, efficiency: 98.0 },
+                { rank: 3, brand: "GoodWe", model: "GW10KN-DT", value: 950, unit: "R$/kW", series: "DNS", price: 9500, efficiency: 98.2 },
+            ],
+            topEfficiency: [
+                { rank: 1, brand: "Huawei", model: "SUN2000-10KTL-M1", value: 98.4, unit: "%", series: "SUN2000", price: 10900, warranty: 10 },
+                { rank: 2, brand: "SMA", model: "Sunny Tripower 10.0", value: 98.3, unit: "%", series: "Tripower", price: 11900, warranty: 10 },
+                { rank: 3, brand: "Fronius", model: "Symo 10.0-3-M", value: 98.1, unit: "%", series: "Symo", price: 12500, warranty: 10 },
+            ]
+        }
+    };
+
+    // Render the equipment ranking table
+    const app = document.getElementById('app');
+    app.innerHTML = `
+        <div class="space-y-6">
+            <div class="tabs">
+                <div class="tabs-list grid w-full grid-cols-2 gap-2 mb-6">
+                    <button class="tab-trigger active flex items-center gap-2 py-3 px-4 rounded-lg bg-primary-500 text-white" data-tab="panels">
+                        <i data-feather="zap"></i>
+                        Painéis Solares
+                    </button>
+                    <button class="tab-trigger flex items-center gap-2 py-3 px-4 rounded-lg bg-gray-200 text-gray-700" data-tab="inverters">
+                        <i data-feather="trending-up"></i>
+                        Inversores
+                    </button>
+                </div>
+
+                <div class="tab-content active" data-tab="panels">
+                    ${renderRankingTable("Maior Potência - Painéis Solares", mockData.panels.topPower, "zap", "Potência (Wp)")}
+                    ${renderRankingTable("Melhor Preço por Watt - Painéis Solares", mockData.panels.bestPricePerWatt, "dollar-sign", "Preço/W (R$/W)")}
+                    ${renderRankingTable("Top Eficiência - Painéis Solares", mockData.panels.topEfficiency, "trending-up", "Eficiência (%)")}
+                </div>
+
+                <div class="tab-content hidden" data-tab="inverters">
+                    ${renderRankingTable("Maior Garantia - Inversores", mockData.inverters.longestWarranty, "shield", "Garantia (anos)")}
+                    ${renderRankingTable("Melhor Preço por kW - Inversores", mockData.inverters.bestPricePerKw, "dollar-sign", "Preço/kW (R$/kW)")}
+                    ${renderRankingTable("Top Eficiência - Inversores", mockData.inverters.topEfficiency, "trending-up", "Eficiência (%)")}
+                </div>
+            </div>
+        </div>
+    `;
+
+    // Tab functionality
+    document.querySelectorAll('.tab-trigger').forEach(trigger => {
+        trigger.addEventListener('click', () => {
+            const tabId = trigger.dataset.tab;
+            
+            // Update active tab button
+            document.querySelectorAll('.tab-trigger').forEach(t => {
+                t.classList.remove('active', 'bg-primary-500', 'text-white');
+                t.classList.add('bg-gray-200', 'text-gray-700');
+            });
+            trigger.classList.add('active', 'bg-primary-500', 'text-white');
+            trigger.classList.remove('bg-gray-200', 'text-gray-700');
+            
+            // Show active tab content
+            document.querySelectorAll('.tab-content').forEach(content => {
+                content.classList.add('hidden');
+                content.classList.remove('active');
+            });
+            document.querySelector(`.tab-content[data-tab="${tabId}"]`).classList.remove('hidden');
+            document.querySelector(`.tab-content[data-tab="${tabId}"]`).classList.add('active');
+            
+            feather.replace();
+        });
+    });
+
+    feather.replace();
+});
+
+function renderRankingTable(title, data, icon, valueLabel) {
+    return `
+        <div class="border-gradient hover-scale mb-6">
+            <div class="card-header p-6">
+                <h3 class="text-xl font-bold flex items-center gap-2">
+                    <i data-feather="${icon}" class="text-primary-500"></i>
+                    ${title}
+                </h3>
+                <p class="text-gray-600 mt-1">Top 10 equipamentos ordenados por ${valueLabel.toLowerCase()}</p>
+            </div>
+            <div class="card-content px-6 pb-6 overflow-x-auto">
+                <table class="w-full">
+                    <thead>
+                        <tr class="text-left border-b">
+                            <th class="pb-3">Posição</th>
+                            <th class="pb-3">Marca</th>
+                            <th class="pb-3">Modelo</th>
+                            <th class="pb-3">Série</th>
+                            <th class="pb-3">${valueLabel}</th>
+                            <th class="pb-3">Preço Médio</th>
+                            <th class="pb-3">Eficiência</th>
+                            <th class="pb-3">Garantia</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        ${data.map(item => `
+                            <tr class="border-b hover:bg-primary-50 transition-colors cursor-pointer" data-id="${item.brand}-${item.model}">
+                                <td class="py-4">
+                                    <span class="rank-badge ${getRankColor(item.rank)}">
+                                        ${getRankIcon(item.rank)}
+                                    </span>
+                                </td>
+                                <td class="font-medium">${item.brand}</td>
+                                <td class="font-mono text-sm">${item.model}</td>
+                                <td class="text-sm text-gray-600">${item.series}</td>
+                                <td class="font-semibold text-primary-600">
+                                    ${item.unit.includes('R$') ? formatCurrency(item.value) : `${formatNumber(item.value)} ${item.unit}`}
+                                </td>
+                                <td>${item.price ? formatCurrency(item.price) : '-'}</td>
+                                <td>${item.efficiency ? `${formatNumber(item.efficiency)}%` : '-'}</td>
+                                <td>${item.warranty ? `${item.warranty} anos` : '-'}</td>
+                            </tr>
+                        `).join('')}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    `;
+}
+
+function formatCurrency(value) {
+    return new Intl.NumberFormat('pt-BR', {
+        style: 'currency',
+        currency: 'BRL'
+    }).format(value);
+}
+
+function formatNumber(value, decimals = 2) {
+    return value.toFixed(decimals);
+}
+
+function getRankColor(rank) {
+    if (rank === 1) return 'bg-yellow-100 text-yellow-800 border-yellow-300';
+    if (rank === 2) return 'bg-gray-100 text-gray-800 border-gray-300';
+    if (rank === 3) return 'bg-orange-100 text-orange-800 border-orange-300';
+    return 'bg-blue-50 text-blue-800 border-blue-200';
+}
+
+function getRankIcon(rank) {
+    if (rank === 1) return '<i data-feather="award" class="text-yellow-600"></i>';
+    if (rank === 2) return '<i data-feather="award" class="text-gray-600"></i>';
+    if (rank === 3) return '<i data-feather="award" class="text-orange-600"></i>';
+    return `<span class="text-sm font-bold text-blue-600">#${rank}</span>`;
+}

style.css

@@ -1,28 +1,33 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+.border-gradient {
+    border: 1px solid transparent;
+    background: linear-gradient(white, white) padding-box,
+                linear-gradient(to right, #0ea5e9, #8b5cf6) border-box;
+    border-radius: 0.5rem;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.glass-effect {
+    background: rgba(255, 255, 255, 0.7);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.hover-scale {
+    transition: transform 0.2s ease-in-out;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.hover-scale:hover {
+    transform: scale(1.02);
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.animate-pulse {
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
+
+@keyframes pulse {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
+}