root
44406b72db
Moteva-style AI design workbench replica. Home prompt creates a project; the project page provides an infinite canvas with node drag, zoom/pan, a design chat panel, history replay, image asset upload, and project save/regenerate. - Backend: go-zero, DDD layering, sqlc/pgx, optional PostgreSQL; memory or Redis cache; asynq job queue; MinIO/S3/R2/OSS object storage; sky-valley/pi agent runtime adapter. - Frontend: Next.js App Router + Vite artifact build, TypeScript, i18n, shadcn/ui components, auth (OTP/Turnstile/Google/WeChat). - Deploy: Docker Compose and k3s manifests. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
289 lines
21 KiB
HTML
289 lines
21 KiB
HTML
<!DOCTYPE html><html class="light" lang="zh-CN" style=""><head><meta charset="utf-8"><meta content="width=device-width, initial-scale=1.0" name="viewport"><link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=block" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"><script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script><script id="tailwind-config">try{
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"on-error-container": "#93000a",
|
|
"surface-container-highest": "#e4e2e4",
|
|
"tertiary-fixed-dim": "#dec29a",
|
|
"on-background": "#000000",
|
|
"on-secondary-fixed-variant": "#004395",
|
|
"outline-variant": "#e5e7eb",
|
|
"on-tertiary-container": "#98805d",
|
|
"tertiary": "#000000",
|
|
"on-tertiary-fixed": "#271901",
|
|
"surface-container": "#f9fafb",
|
|
"tertiary-container": "#271901",
|
|
"on-secondary-fixed": "#001a42",
|
|
"on-tertiary": "#ffffff",
|
|
"inverse-surface": "#111827",
|
|
"on-surface-variant": "#6b7280",
|
|
"tertiary-fixed": "#fcdeb5",
|
|
"primary-fixed": "#dae2fd",
|
|
"on-primary-fixed": "#131b2e",
|
|
"primary": "#000000",
|
|
"surface-container-low": "#ffffff",
|
|
"surface-container-lowest": "#ffffff",
|
|
"background": "#fafafa",
|
|
"on-surface": "#111827",
|
|
"on-secondary-container": "#fefcff",
|
|
"secondary-fixed-dim": "#adc6ff",
|
|
"on-secondary": "#ffffff",
|
|
"primary-container": "#131b2e",
|
|
"on-primary-fixed-variant": "#3f465c",
|
|
"surface-variant": "#f3f4f6",
|
|
"error-container": "#ffdad6",
|
|
"inverse-on-surface": "#f3f0f2",
|
|
"on-tertiary-fixed-variant": "#574425",
|
|
"inverse-primary": "#bec6e0",
|
|
"on-error": "#ffffff",
|
|
"on-primary": "#ffffff",
|
|
"secondary-container": "#2563eb",
|
|
"surface-bright": "#ffffff",
|
|
"surface-dim": "#e5e7eb",
|
|
"secondary": "#2563eb",
|
|
"surface": "#ffffff",
|
|
"primary-fixed-dim": "#bec6e0",
|
|
"on-primary-container": "#7c839b",
|
|
"surface-container-high": "#f3f4f6",
|
|
"error": "#ef4444",
|
|
"surface-tint": "#000000",
|
|
"outline": "#d1d5db",
|
|
"secondary-fixed": "#dbeafe"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.5rem",
|
|
"lg": "0.75rem",
|
|
"xl": "1rem",
|
|
"2xl": "1.5rem",
|
|
"3xl": "2rem",
|
|
"full": "9999px"
|
|
},
|
|
"spacing": {
|
|
"toolbar_height": "64px",
|
|
"xs": "4px",
|
|
"unit": "4px",
|
|
"md": "16px",
|
|
"xl": "48px",
|
|
"sm": "8px",
|
|
"lg": "24px",
|
|
"sidebar_width": "80px"
|
|
},
|
|
"fontFamily": {
|
|
"title-sm": ["Inter", "sans-serif"],
|
|
"label-xs": ["Inter", "sans-serif"],
|
|
"display-lg-mobile": ["Inter", "sans-serif"],
|
|
"body-md": ["Inter", "sans-serif"],
|
|
"display-lg": ["Inter", "sans-serif"],
|
|
"headline-md": ["Inter", "sans-serif"],
|
|
"body-sm": ["Inter", "sans-serif"],
|
|
"label-caps": ["Inter", "sans-serif"]
|
|
},
|
|
"fontSize": {
|
|
"label-xs": ["12px", {"lineHeight": "16px", "fontWeight": "500"}],
|
|
"body-sm": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
|
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
|
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600"}],
|
|
"title-sm": ["18px", {"lineHeight": "24px", "fontWeight": "600"}],
|
|
"headline-md": ["28px", {"lineHeight": "36px", "letterSpacing": "-0.02em", "fontWeight": "600"}],
|
|
"display-lg": ["48px", {"lineHeight": "56px", "letterSpacing": "-0.03em", "fontWeight": "700"}]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
}catch(_e){}</script></head><body class="bg-background text-on-background selection:bg-secondary-fixed">
|
|
|
|
<!-- Floating Top Bar -->
|
|
<header class="fixed top-0 right-0 left-0 z-40 h-toolbar_height px-xl flex justify-between items-center bg-background/50 backdrop-blur-sm">
|
|
<div class="flex items-center gap-md pl-[100px]">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 bg-black rounded-lg flex items-center justify-center">
|
|
<span class="text-white font-bold text-xs">F</span>
|
|
</div>
|
|
<span class="font-display-lg text-title-sm tracking-tight font-bold">Moteva</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-lg">
|
|
<div class="flex items-center gap-md bg-white/80 border border-outline-variant rounded-full py-1.5 pl-4 pr-1.5 shadow-sm">
|
|
<span class="text-label-caps text-on-surface-variant">30 Credits</span>
|
|
<button class="bg-black text-white px-4 py-1.5 rounded-full text-label-caps font-semibold hover:opacity-80 transition-opacity">Upgrade</button>
|
|
</div>
|
|
<div class="flex items-center gap-md">
|
|
<button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-variant transition-colors">
|
|
|
|
</button>
|
|
<div class="w-10 h-10 rounded-full overflow-hidden border-2 border-white shadow-sm ring-1 ring-black/5">
|
|
<img class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBTmp5nTMXnY0WSYm7jiRppEgqwryIFqcauCfdxXrM-KwgBUbYtfYz52SPV3RQPCJkU9hD24kvcGoG0dwFt_FHutjmhcBXs3e-aglUZNgeUiPlsvclTlX913atn8mB_WiGrasG3_Y-fd3LHiB-w8GfQP22ncoDZd-VYxVUM70gMsxFmKdWSGtTMQ0xHCRP0WZ7vl93Je5TKoRAMRc1S7scg3u1XVmKA1RW4mXZImZb6s-MNaFOqV1iY" alt="Profile">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Floating Pill Sidebar Navigation (Based on reference https://lh3.googleusercontent.com/aida-public/AB6AXuCQB7VKJYDi-F7VZfGPRFQxFQ0lx0Gc95xq89IjTPxTjYW4-PVi8nrL_cgna6RmS78wAOLqhXmyw7P5FjjrKX5qy7TC1d4zDOARbyJoNMe0m-VTSMpxv4DGVAvxLn_7Kz01-TOvKlfZ-_kVRg13ojxQIasrmV5beoAJVEC_R5td24eRf3pIxNlopAtOBKXL1kjDEHE5QGGgw64K98mK3XyjS5TnAS_ZhahLS3RiZXI6lmRGFRMf9S8QofX7inFYhhUacA) -->
|
|
<aside class="fixed left-6 top-1/2 -translate-y-1/2 z-50 flex flex-col items-center gap-4">
|
|
<!-- Top Action Button -->
|
|
<button class="w-[56px] h-[56px] rounded-full bg-black text-white flex items-center justify-center shadow-xl hover:scale-105 active:scale-95 transition-all">
|
|
<span class="material-symbols-outlined !text-[32px]">add</span>
|
|
</button>
|
|
|
|
<!-- Navigation Pill -->
|
|
<nav class="glass w-[56px] py-6 px-1.5 rounded-full flex flex-col items-center gap-6 pill-nav-shadow border border-white/50">
|
|
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-surface-variant/80 text-black transition-colors" title="Home">
|
|
<span class="material-symbols-outlined !font-light">home</span>
|
|
</a>
|
|
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full text-on-surface-variant hover:bg-surface-variant transition-colors" title="Projects">
|
|
<span class="material-symbols-outlined !font-light">folder</span>
|
|
</a>
|
|
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full text-on-surface-variant hover:bg-surface-variant transition-colors" title="Assets">
|
|
<span class="material-symbols-outlined !font-light">person</span>
|
|
</a>
|
|
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full text-on-surface-variant hover:bg-surface-variant transition-colors" title="Settings">
|
|
<span class="material-symbols-outlined !font-light">info</span>
|
|
</a>
|
|
</nav>
|
|
|
|
<!-- Bottom Help/Settings -->
|
|
<div class="glass w-[56px] py-4 rounded-full flex flex-col items-center gap-4 pill-nav-shadow border border-white/50">
|
|
<a href="#" class="text-on-surface-variant hover:text-black transition-colors">
|
|
<span class="material-symbols-outlined">settings</span>
|
|
</a>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Canvas -->
|
|
<main class="pl-[112px] pt-toolbar_height min-h-screen p-xl max-w-[1440px] mx-auto">
|
|
<!-- Hero Section -->
|
|
<section class="flex flex-col items-center justify-center py-24 gap-12">
|
|
<div class="flex flex-col items-center text-center gap-4">
|
|
<h1 class="text-display-lg font-bold tracking-tight text-black max-w-2xl leading-tight">
|
|
Moteva 让设计变简单
|
|
</h1>
|
|
<p class="text-body-md text-on-surface-variant max-w-lg font-medium opacity-70">
|
|
懂你的设计 Agent，帮你搞定一切设计需求
|
|
</p>
|
|
</div>
|
|
|
|
<!-- AI Prompt Input - Premium Style -->
|
|
<div class="w-full max-w-3xl bg-white border border-outline-variant/60 rounded-3xl p-6 shadow-[0_8px_30px_rgb(0,0,0,0.04)] focus-within:shadow-[0_8px_30px_rgb(0,0,0,0.08)] transition-all duration-300">
|
|
<textarea class="w-full bg-transparent border-none focus:ring-0 text-body-md resize-none min-h-[100px] placeholder:text-outline font-medium" placeholder="让Moteva Moteva 帮你构思下一个电商爆款..."></textarea>
|
|
<div class="flex justify-between items-center mt-4">
|
|
<div class="flex gap-2"><button class="w-10 h-10 flex items-center justify-center text-on-surface-variant hover:bg-surface-variant rounded-full transition-colors"><span class="material-symbols-outlined !text-[20px]">attach_file</span></button></div>
|
|
<div class="flex gap-2 mr-2 ml-auto"><button class="w-10 h-10 flex items-center justify-center text-on-surface-variant border border-outline-variant/60 hover:bg-surface-variant rounded-full transition-colors"><span class="material-symbols-outlined !text-[20px]">language</span></button><button class="w-10 h-10 flex items-center justify-center text-on-surface-variant border border-outline-variant/60 hover:bg-surface-variant rounded-full transition-colors"><span class="material-symbols-outlined !text-[20px]">view_in_ar</span></button></div><button class="bg-black text-white w-12 h-12 flex items-center justify-center rounded-2xl hover:scale-105 active:scale-95 transition-all shadow-lg">
|
|
<span class="material-symbols-outlined">arrow_upward</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Actions Tags -->
|
|
<div class="flex flex-wrap justify-center gap-3">
|
|
<button class="px-5 py-2.5 bg-white border border-outline-variant/60 rounded-full text-label-caps text-on-surface hover:bg-black hover:text-white transition-all flex items-center gap-2 shadow-sm">
|
|
<span class="material-symbols-outlined !text-[18px]">shopping_bag</span> 电商海报
|
|
</button>
|
|
<button class="px-5 py-2.5 bg-white border border-outline-variant/60 rounded-full text-label-caps text-on-surface hover:bg-black hover:text-white transition-all flex items-center gap-2 shadow-sm">
|
|
<span class="material-symbols-outlined !text-[18px]">web</span> UI 界面
|
|
</button>
|
|
<button class="px-5 py-2.5 bg-white border border-outline-variant/60 rounded-full text-label-caps text-on-surface hover:bg-black hover:text-white transition-all flex items-center gap-2 shadow-sm">
|
|
<span class="material-symbols-outlined !text-[18px]">auto_fix_high</span> 产品精修
|
|
</button>
|
|
<button class="px-5 py-2.5 bg-white border border-outline-variant/60 rounded-full text-label-caps text-on-surface hover:bg-black hover:text-white transition-all flex items-center gap-2 shadow-sm">
|
|
<span class="material-symbols-outlined !text-[18px]">style</span> 风格迁移
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Recent Projects Section -->
|
|
<section class="flex flex-col gap-8 mb-24">
|
|
<div class="flex justify-between items-end border-b border-outline-variant/40 pb-4">
|
|
<h2 class="text-headline-md font-bold tracking-tight">最近项目</h2>
|
|
<a class="text-on-surface-variant hover:text-black font-semibold text-label-caps transition-colors" href="#">查看全部 →</a>
|
|
</div>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
<!-- Create New Card -->
|
|
<button class="group relative aspect-[4/3] rounded-3xl border-2 border-dashed border-outline hover:border-black transition-all flex flex-col items-center justify-center gap-4 bg-white/50 hover:bg-white">
|
|
<div class="w-12 h-12 rounded-full bg-surface-variant flex items-center justify-center group-hover:bg-black group-hover:text-white transition-all">
|
|
<span class="material-symbols-outlined !text-2xl">add</span>
|
|
</div>
|
|
<span class="text-label-caps font-bold">新建项目</span>
|
|
</button>
|
|
|
|
<!-- Project Card 1 -->
|
|
<div class="group flex flex-col gap-4">
|
|
<div class="relative aspect-[4/3] rounded-3xl overflow-hidden border border-outline-variant/60 bg-white card-shadow">
|
|
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBAQZyxZCxIKIioQCDAkqLOc8Sq-gcrSHf5VnaCZTWp19m-P0Psr54Ks3Fd6qklIvl9bxsbrZamLOsCUhSJ6F8SswqUgf_niHqEFZUtz03fkTsaHhga4UrKshzQ4pfwzJ425L2GjzhBQkkSaClYfPQr02uDVHzY0YC7RpP3-AakcF4d5OjK_7TrbnPeYQZH39-swQVz0a9BSkJDq7thTb380rTbs61183-vmTwyepkprJKGio_ebkD_" alt="Project 1">
|
|
<div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center backdrop-blur-[2px]">
|
|
<button class="bg-white text-black px-6 py-2.5 rounded-full font-bold text-label-caps transform translate-y-4 group-hover:translate-y-0 transition-transform">继续编辑</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col px-1">
|
|
<span class="text-body-md font-bold text-black">夏日护肤专题海报</span>
|
|
<span class="text-label-xs text-on-surface-variant mt-0.5">2024-05-20</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Project Card 2 -->
|
|
<div class="group flex flex-col gap-4">
|
|
<div class="relative aspect-[4/3] rounded-3xl overflow-hidden border border-outline-variant/60 bg-white card-shadow">
|
|
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCuj9jFt7Dqr05Md4O4BAnmb8u23kAnxqmktdJECGs_ia0yAvqqvehjRNhAwZVaO6QYKMl-b38N5WGI8oWgSg-EFmLrG2BTKwam7ELYlXjPK7qEqYAKsQtu2x-a8Aq_41ryeL8FAs43M3gr_xDICWKfaOyaqG_2mVsWNi5dWch9wWY6XohkmTRliWV6DYcWFuSUHCYMjUVrQLXTvRlpUG0BLm1H0X_4IPXjyPFIqGYYE71gmDoJgcou" alt="Project 2">
|
|
<div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center backdrop-blur-[2px]">
|
|
<button class="bg-white text-black px-6 py-2.5 rounded-full font-bold text-label-caps transform translate-y-4 group-hover:translate-y-0 transition-transform">继续编辑</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col px-1">
|
|
<span class="text-body-md font-bold text-black">智能家居仪表盘</span>
|
|
<span class="text-label-xs text-on-surface-variant mt-0.5">2024-05-18</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Project Card 3 -->
|
|
<div class="group flex flex-col gap-4">
|
|
<div class="relative aspect-[4/3] rounded-3xl overflow-hidden border border-outline-variant/60 bg-white card-shadow">
|
|
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAP1LSqxG8FZs48N9oogf9Hv5rpvUQ6_O-5cWX3NjBIbXKEgog_-cSN1-zbPQ86PY6cgFWWrmO2y7Izy7PCJKQ4ehAd8sSHrdRwGEFsEkV4ECFjBZ3jBz1pOFqjKf_8g7YleRwxMtrxNyH-IsmYJAafVScvYYz9JEWVxw4-mPhrehkZShuiARwE9Bp6SLKrsGrZtK4FmQ90qSVrzR960GjL4hqnGyKTZyCy_5aGqz1a3KF4w2MWJuGs" alt="Project 3">
|
|
<div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center backdrop-blur-[2px]">
|
|
<button class="bg-white text-black px-6 py-2.5 rounded-full font-bold text-label-caps transform translate-y-4 group-hover:translate-y-0 transition-transform">继续编辑</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col px-1">
|
|
<span class="text-body-md font-bold text-black">未命名品牌设计</span>
|
|
<span class="text-label-xs text-on-surface-variant mt-0.5">2024-05-15</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Inspiration Discovery Section (Bento Grid) -->
|
|
<section class="flex flex-col gap-8 pb-32">
|
|
<div class="flex justify-between items-center border-b border-outline-variant/40 pb-4">
|
|
<h2 class="text-headline-md font-bold tracking-tight">灵感发现</h2>
|
|
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 auto-rows-[220px]">
|
|
<!-- Bento Item 1: Large -->
|
|
<div class="col-span-1 md:col-span-2 row-span-2 rounded-3xl overflow-hidden relative group cursor-pointer border border-outline-variant/40 shadow-sm">
|
|
<img class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-1000" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBcMApNuln2ErI4FTqRz2PEwVG3fd7V4kJfUFoXJpsgFm_-5jrcW3rHz_LnPVeJUvCuWuLbobk3o7nRvCjHaKDInVy5EqQ1A1EMSPT3uqQ0VH_vv957qrEuECwqPdYAJdbLmsUtAwSPoLFvrfFlB9Lb9I8lQJE-QecRcaRIFVNs4couaHkhjcwtqUeyFN4tghBJV2qSuzHyyR7JIPTrtrjjKAAc78YtftSQCDYnX7tTmWe8cWJkVJ52" alt="Fashion Trends">
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-90"></div>
|
|
<div class="absolute inset-x-0 bottom-0 p-8 text-white">
|
|
<p class="text-label-caps font-semibold tracking-wider opacity-60 mb-2 uppercase">Luxury Showcase</p>
|
|
<h3 class="text-title-sm md:text-headline-md font-bold mb-2 leading-tight">2024 春季系列设计趋势</h3>
|
|
<p class="text-body-sm opacity-80 max-w-sm">探索本季最受关注的视觉语言与色彩搭配方案</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bento Item 2: Vertical -->
|
|
<div class="row-span-2 rounded-3xl overflow-hidden relative group cursor-pointer border border-outline-variant/40 shadow-sm bg-white">
|
|
<img class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-1000" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCVCdEqFYe9Uq8-hJzgx5bpmon0YGrHEO6aylI2LyPJJG9Qn2XQXzS9a43vFCkvDdN0AMWcQwhLOaxxIBo5blTXZy2P87CwU6UXH-bRyoxT3PrF6jIrE5hyuYlBcMHYGcZynVCH5ypT0O55ceC1Nq73LSwl-5-SOAw0V3KAITwuxUJER7tEHKFooGqDdm7IJgnr83wp9T0RO5lzIgZ73QqLuZd_WtjPzSjSJND-dyjOM1DDluEV8eMi" alt="App UI">
|
|
<div class="absolute inset-x-0 bottom-0 p-6 bg-gradient-to-t from-black/60 to-transparent text-white">
|
|
<h3 class="text-label-caps font-bold">极简自然主义 UI</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bento Item 3: Square -->
|
|
<div class="rounded-3xl overflow-hidden relative group cursor-pointer border border-outline-variant/40 shadow-sm bg-white">
|
|
<img class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-1000" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAwAgikDwW7I3qOFd4RobTHTM-in62BWoxaVpc0pZoZRlMC7lc19dlopTZ0q4sR6dg2BFDuXQ8Be06sJQCmuXQ26tWHL16cz5LlYejK8LmMMzSd9kcJ0jX6Za6AREg-O-V0TZuMVfVzgSyD8np4laknsPSz4j2YihRWwTmqj3NRCfg64RoWHilVyL7Ms77GO75nVJD0uePp3ot-3eZwvMTmxcQDZ9_MUb37I7moQ6sJgk2LJJhz5NIl" alt="3D Geometry">
|
|
<div class="absolute inset-0 bg-black/10 group-hover:bg-transparent transition-colors"></div>
|
|
</div>
|
|
|
|
<!-- Bento Item 4: Square -->
|
|
<div class="rounded-3xl overflow-hidden relative group cursor-pointer border border-outline-variant/40 shadow-sm bg-white">
|
|
</div></div></section></main></body></html> |