761 lines
40 KiB
Vue
761 lines
40 KiB
Vue
<template>
|
||
<Bg>
|
||
<div :style="getResponsiveWidthStyle()">
|
||
<div style="position: sticky;top: 0;">
|
||
<spline :scene="'https://prod.spline.design/kZDDjO5HuC9GJUM2/scene.splinecode'"/>
|
||
</div>
|
||
</div>
|
||
<div style="position: relative;pointer-events:none;" class="min-h-screen flex flex-col w-full selection:bg-purple-500 selection:text-white">
|
||
<!-- Navbar -->
|
||
<header
|
||
:class="[
|
||
'fixed top-0 left-0 right-0 z-900 transition-all duration-300 pointer-events-auto',
|
||
isScrolled ? 'bg-black/90 backdrop-blur-md py-4' : 'bg-transparent py-6'
|
||
]"
|
||
>
|
||
<div class="container mx-auto px-6 flex items-center justify-between">
|
||
<!-- Logo -->
|
||
<a href="#" class="text-2xl font-bold tracking-tighter text-white">
|
||
Deotaland
|
||
</a>
|
||
|
||
<!-- Desktop Nav -->
|
||
<nav class="hidden md:flex items-center gap-8">
|
||
<a
|
||
href="#"
|
||
class="text-sm font-medium text-gray-300 hover:text-white transition-colors"
|
||
>
|
||
{{ t('nav.creator') }}
|
||
</a>
|
||
<a
|
||
href="#"
|
||
class="text-sm font-medium text-gray-300 hover:text-white transition-colors"
|
||
>
|
||
{{ t('nav.land') }}
|
||
</a>
|
||
<a
|
||
href="#"
|
||
class="text-sm font-medium text-gray-300 hover:text-white transition-colors"
|
||
>
|
||
{{ t('nav.pricing') }}
|
||
</a>
|
||
</nav>
|
||
|
||
<!-- Right Action & Mobile Toggle -->
|
||
<div class="flex items-center gap-4">
|
||
<button
|
||
@click="$router.push('/czhome')"
|
||
class="hidden md:inline-flex items-center justify-center px-5 py-2 text-sm font-semibold text-black bg-white rounded-full hover:bg-gray-200 transition-colors cursor-pointer"
|
||
>
|
||
{{ t('hero.start') }}
|
||
</button>
|
||
|
||
<button
|
||
class="md:hidden text-white"
|
||
@click="isMobileMenuOpen = !isMobileMenuOpen"
|
||
>
|
||
<svg v-if="isMobileMenuOpen" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
|
||
<svg v-else xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Mobile Menu -->
|
||
<div v-if="isMobileMenuOpen" class="absolute top-full left-0 right-0 border-t border-gray-800 p-6 flex flex-col gap-4 md:hidden">
|
||
<a
|
||
href="#"
|
||
class="text-lg font-medium text-gray-300 hover:text-white"
|
||
>
|
||
{{ t('nav.creator') }}
|
||
</a>
|
||
<a
|
||
href="#"
|
||
class="text-lg font-medium text-gray-300 hover:text-white"
|
||
>
|
||
{{ t('nav.land') }}
|
||
</a>
|
||
<a
|
||
href="#"
|
||
class="text-lg font-medium text-gray-300 hover:text-white"
|
||
>
|
||
{{ t('nav.pricing') }}
|
||
</a>
|
||
<button
|
||
@click="$router.push('/czhome')"
|
||
class="w-full text-center py-3 text-black bg-white rounded-full font-bold cursor-pointer"
|
||
>
|
||
{{ t('hero.start') }}
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Main Content -->
|
||
<main>
|
||
<!-- Hero Section -->
|
||
<div ref="containerRef" class="relative h-[300vh] w-full ">
|
||
<!-- Sticky Container -->
|
||
<div class="sticky top-0 h-[100dvh] w-full overflow-hidden">
|
||
|
||
<!-- Layer 1: Background Animation (Grid) -->
|
||
<div class="absolute inset-0 flex items-center justify-center overflow-hidden">
|
||
|
||
<div
|
||
|
||
class="origin-center flex items-center justify-center"
|
||
>
|
||
<!-- Grid Layout -->
|
||
<div v-if="!isMobile" class="grid grid-cols-3 md:grid-cols-5 gap-2 md:gap-3 w-full h-auto p-4" >
|
||
<!-- --- ROW 1 --- -->
|
||
<div class="aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center1" class="w-full h-full object-cover" alt="Robot Companion" /></div>
|
||
<div class="aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center3" class="w-full h-full object-cover" alt="Electronics" /></div>
|
||
<div :style="{ scale: scale*1.5<=1?1:scale*1.5, zIndex:20 }" class="aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50">
|
||
<img :src="center" class="w-full h-full object-cover" alt="Main Hero Robot" />
|
||
<!-- <div style="position: absolute;bottom: 0%;width: 100vw;left: 50%;transform: translateX(-50%);">
|
||
</div> -->
|
||
</div>
|
||
<div class="aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center4" class="w-full h-full object-cover" alt="Retro Bot" /></div>
|
||
<div class=" md:block aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center2" class="w-full h-full object-cover" alt="Toy Bot" /></div>
|
||
<div class=" md:block aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center7" class="w-full h-full object-cover" alt="Cyberpunk" /></div>
|
||
|
||
<!-- --- ROW 2 (Middle) --- -->
|
||
<div class="aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center5" class="w-full h-full object-cover" alt="Interactive" /></div>
|
||
<div class=" md:block aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center6" class="w-full h-full object-cover" alt="Small Bot" /></div>
|
||
|
||
<!-- --- CENTER HERO IMAGE (Always Visible) --- -->
|
||
<!-- :style="{ scale: scale*1.2 }" -->
|
||
<div class="aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center9" class="w-full h-full object-cover" alt="Glowing Eye" /></div>
|
||
<div class="hidden md:block aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center8" class="w-full h-full object-cover" alt="3D Print" /></div>
|
||
<!-- --- ROW 3 --- -->
|
||
<!-- <div class="hidden md:block aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center1" class="w-full h-full object-cover" alt="Tech Texture" /></div>
|
||
<div class="aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center2" class="w-full h-full object-cover" alt="Robot Hand" /></div>
|
||
<div class="aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center6" class="w-full h-full object-cover" alt="Circuit" /></div>
|
||
<div class="hidden md:block aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center4" class="w-full h-full object-cover" alt="Display" /></div>
|
||
<div class=" aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center5" class="w-full h-full object-cover" alt="Robotics" /></div> -->
|
||
</div>
|
||
<div v-else class="grid grid-cols-3 md:grid-cols-5 gap-2 md:gap-3 w-full h-auto p-4" >
|
||
<!-- --- ROW 1 --- -->
|
||
<div class="aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center1" class="w-full h-full object-cover" alt="Robot Companion" /></div>
|
||
<div class="aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center3" class="w-full h-full object-cover" alt="Electronics" /></div>
|
||
|
||
<div class="aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center2" class="w-full h-full object-cover" alt="Retro Bot" /></div>
|
||
<div class=" md:block aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center4" class="w-full h-full object-cover" alt="Toy Bot" /></div>
|
||
<div :style="{ scale: scale*1.5<=1?1:scale*1.5, zIndex:20 }" class="aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50">
|
||
<img :src="center" class="w-full h-full object-cover" alt="Main Hero Robot" />
|
||
<!-- <div style="position: absolute;bottom: 0%;width: 100vw;left: 50%;transform: translateX(-50%);">
|
||
</div> -->
|
||
</div>
|
||
<div class=" md:block aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center5" class="w-full h-full object-cover" alt="Cyberpunk" /></div>
|
||
<!-- --- ROW 2 (Middle) --- -->
|
||
<div class="aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center7" class="w-full h-full object-cover" alt="Interactive" /></div>
|
||
<div class=" md:block aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center9" class="w-full h-full object-cover" alt="Small Bot" /></div>
|
||
|
||
<!-- --- CENTER HERO IMAGE (Always Visible) --- -->
|
||
<!-- :style="{ scale: scale*1.2 }" -->
|
||
<div class="aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center8" class="w-full h-full object-cover" alt="Glowing Eye" /></div>
|
||
<!-- --- ROW 3 --- -->
|
||
<!-- <div class="hidden md:block aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center1" class="w-full h-full object-cover" alt="Tech Texture" /></div>
|
||
<div class="aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center2" class="w-full h-full object-cover" alt="Robot Hand" /></div>
|
||
<div class="aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center6" class="w-full h-full object-cover" alt="Circuit" /></div>
|
||
<div class="hidden md:block aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center4" class="w-full h-full object-cover" alt="Display" /></div>
|
||
<div class=" aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center5" class="w-full h-full object-cover" alt="Robotics" /></div> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- Layer 2: Static Dark Overlay -->
|
||
|
||
<div class="absolute inset-0 z-10 pointer-events-none" />
|
||
|
||
<!-- Layer 3: Static Content Layer -->
|
||
<div class="absolute inset-0 z-20 flex flex-col items-center justify-center pointer-events-none">
|
||
|
||
<MotionCom>
|
||
<div class="pointer-events-auto flex flex-col items-center justify-center text-center px-4 w-full max-w-5xl mx-auto">
|
||
<h1 class="text-5xl md:text-7xl lg:text-8xl font-bold text-white mb-6 tracking-tighter drop-shadow-2xl">
|
||
{{ t('hero.title') }}
|
||
</h1>
|
||
<p class="text-xl md:text-2xl text-gray-200 mb-10 drop-shadow-lg max-w-2xl font-light">
|
||
{{ t('hero.subtitle') }}
|
||
</p>
|
||
<div class="flex flex-col sm:flex-row gap-5">
|
||
<a
|
||
href="https://deotaland.com"
|
||
class="px-9 py-4 rounded-full border border-white/50 bg-black/20 backdrop-blur-sm text-white font-semibold hover:bg-white hover:text-black transition-all text-lg"
|
||
>
|
||
{{ t('hero.explore') }}
|
||
</a>
|
||
<button
|
||
@click="$router.push('/czhome')"
|
||
class="px-9 py-4 rounded-full bg-white text-black font-semibold hover:bg-gray-200 transition-all text-lg shadow-[0_0_20px_rgba(255,255,255,0.3)] cursor-pointer"
|
||
>
|
||
{{ t('hero.start') }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</MotionCom>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Creation Canvas Section -->
|
||
<section class="py-0 md:py-24 relative overflow-hidden">
|
||
<!-- Background gradient hint -->
|
||
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[500px] bg-gray-900/50 blur-[120px] rounded-full pointer-events-none" />
|
||
|
||
<div class="container mx-auto px-6 relative z-10">
|
||
<MotionCom>
|
||
<div class="text-center mb-16">
|
||
<h2 class="text-4xl md:text-5xl font-bold mb-4 text-white">
|
||
{{ t('canvas.title') }}
|
||
</h2>
|
||
<p class="text-gray-400 text-lg md:text-xl">
|
||
{{ t('canvas.subtitle') }}
|
||
</p>
|
||
</div>
|
||
</MotionCom>
|
||
<MotionCom>
|
||
<!-- Workflow Visualization Container -->
|
||
<div class="relative w-full max-w-6xl mx-auto bg-gray-900/40 border border-gray-800 rounded-3xl p-8 md:p-12 backdrop-blur-sm">
|
||
|
||
<!-- Responsive Flex Layout: Stack on mobile, Row on desktop -->
|
||
<div class="flex flex-col md:flex-row items-center justify-between gap-8 md:gap-4">
|
||
|
||
<!-- LEVEL 1: INPUTS (Stacked Vertically) -->
|
||
<div class="flex flex-col gap-6 w-full md:w-auto">
|
||
<!-- Input A: Prompt -->
|
||
<div class="flex items-center gap-4 bg-black/80 p-4 rounded-xl border border-gray-800 hover:border-gray-600 transition-colors w-full md:w-64 shadow-lg">
|
||
<div class="w-12 h-12 rounded-full bg-gray-800 flex items-center justify-center text-purple-400 shrink-0">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 7 4 4 20 4 20 7"></polyline><line x1="9" y1="20" x2="15" y2="20"></line><line x1="12" y1="4" x2="12" y2="20"></line></svg>
|
||
</div>
|
||
<div>
|
||
<span class="block text-sm font-bold text-gray-200">{{ t('canvas.prompt') }}</span>
|
||
<span class="text-xs text-gray-500">"A cute pumpkin dog"</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Input B: Reference -->
|
||
<div class="flex items-center gap-4 bg-black/80 p-4 rounded-xl border border-gray-800 hover:border-gray-600 transition-colors w-full md:w-64 shadow-lg">
|
||
<div class="w-12 h-12 rounded-full bg-gray-800 flex items-center justify-center text-blue-400 shrink-0">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
|
||
</div>
|
||
<div class="flex-1">
|
||
<span class="block text-sm font-bold text-gray-200 mb-1">{{ t('canvas.reference') }}</span>
|
||
<div class="w-full h-24 rounded-lg overflow-hidden border border-gray-700 relative group">
|
||
<img :src="refImage" alt="Dog Reference" class="w-full h-full object-cover opacity-80 group-hover:scale-110 transition-transform duration-500" />
|
||
<div class="absolute bottom-1 right-1 bg-black/60 px-1 rounded text-[10px] text-white">{{ t('canvas.referenceText') }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Connector Arrow 1 -->
|
||
<div class="flex flex-col items-center justify-center text-gray-600">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="rotate-90 md:rotate-0"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
|
||
</div>
|
||
|
||
<!-- LEVEL 2: 3D MODEL -->
|
||
<div class="flex flex-col gap-4 bg-black/80 p-5 rounded-2xl border border-gray-800 w-full md:w-64 shadow-lg hover:border-gray-600 transition-colors">
|
||
<div class="flex items-center gap-3 mb-2">
|
||
<div class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-green-400">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
|
||
</div>
|
||
<span class="text-sm font-bold text-gray-200">{{ t('canvas.model3d') }}</span>
|
||
</div>
|
||
<div class="w-full aspect-square rounded-xl overflow-hidden border border-gray-700 relative bg-gray-900 group">
|
||
<img :src="model3dImage" alt="3D Pumpkin Dog" class="w-full h-full object-cover opacity-90 group-hover:scale-110 transition-transform duration-500" />
|
||
<div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/grid-me.png')] opacity-30 pointer-events-none"></div>
|
||
<div class="absolute bottom-2 left-2 bg-green-900/80 px-2 py-0.5 rounded text-[10px] text-green-100 font-mono">.OBJ Generated</div>
|
||
</div>
|
||
<p class="text-xs text-gray-500 text-center">{{ t('canvas.autoRigged') }}</p>
|
||
</div>
|
||
|
||
<!-- Connector Arrow 2 -->
|
||
<div class="flex flex-col items-center justify-center text-gray-600">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="rotate-90 md:rotate-0"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
|
||
</div>
|
||
|
||
<!-- LEVEL 3: REAL ROBOT -->
|
||
<div class="flex flex-col gap-4 bg-gradient-to-b from-purple-900/20 to-blue-900/20 p-5 rounded-2xl border border-purple-500/40 w-full md:w-72 shadow-[0_0_30px_rgba(147,51,234,0.1)]">
|
||
<div class="flex items-center gap-3 mb-2">
|
||
<div class="w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center text-white shadow-lg shadow-purple-600/50">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect><circle cx="12" cy="12" r="2"></circle><path d="M7 7h10v10"></path></svg>
|
||
</div>
|
||
<span class="text-sm font-bold text-white">{{ t('canvas.realRobot') }}</span>
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-yellow-400 fill-yellow-400 ml-auto animate-pulse"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
|
||
</div>
|
||
<div class="w-full aspect-square rounded-xl overflow-hidden border border-purple-500/30 relative group bg-gray-900">
|
||
<img :src="realRobotImage" alt="Real Robot Toy" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" />
|
||
<div class="absolute inset-0 bg-gradient-to-t from-purple-900/40 to-transparent"></div>
|
||
</div>
|
||
<p class="text-xs text-purple-200 text-center font-medium">{{ t('canvas.alive') }}</p>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</MotionCom>
|
||
</div>
|
||
</section>
|
||
<MotionCom>
|
||
<!-- Companionship Section -->
|
||
<section class="py-24 border-t border-gray-900 ">
|
||
<div class="container mx-auto px-6 flex flex-col items-center text-center">
|
||
|
||
<h2 class="text-4xl md:text-6xl font-bold mb-6 tracking-tight">
|
||
{{ t('companionship.title') }}
|
||
</h2>
|
||
|
||
<h3 class="text-2xl md:text-3xl text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400 font-semibold mb-8">
|
||
{{ t('companionship.powered') }}
|
||
</h3>
|
||
|
||
<p class="text-xl text-gray-400 max-w-2xl mb-12 leading-relaxed">
|
||
{{ t('companionship.subtitle') }}
|
||
</p>
|
||
|
||
<a
|
||
href="https://deotaland.com"
|
||
class="pointer-events-auto inline-flex items-center justify-center px-8 py-4 text-base font-bold text-white bg-purple-600 rounded-full hover:scale-105 transition-transform duration-200"
|
||
>
|
||
{{ t('companionship.examples') }}
|
||
</a>
|
||
|
||
<!-- Optional Visual Element below -->
|
||
<div class="mt-16 w-full max-w-4xl h-64 md:h-96 rounded-3xl overflow-hidden relative">
|
||
<img
|
||
src="https://draft-user.s3.us-east-2.amazonaws.com/images/ca6a57e3-85b1-4aa7-b032-78d54d4850ea.jpg"
|
||
alt="Robot Companion Context"
|
||
class="w-full h-full object-cover opacity-90 hover:opacity-100 transition-opacity duration-500"
|
||
/>
|
||
<div class="absolute inset-0 bg-gradient-to-t from-black/10 via-transparent to-transparent"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</MotionCom>
|
||
<MotionCom>
|
||
<!-- Middle Text Section -->
|
||
<section class="py-12 text-center">
|
||
<div class="container mx-auto px-6 max-w-3xl">
|
||
<p class="text-lg md:text-xl text-gray-400 leading-relaxed">
|
||
Explore our community creations and get inspired to build your own unique AI robot companion.
|
||
Each robot has its own personality and story, waiting to be discovered and loved.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
</MotionCom>
|
||
<MotionCom>
|
||
<!-- Robot Cards Section -->
|
||
<section class="py-20 overflow-hidden">
|
||
<div class="container mx-auto px-6">
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
|
||
<div
|
||
v-for="card in cards"
|
||
:key="card.id"
|
||
class="group relative rounded-3xl overflow-hidden aspect-[3/4] cursor-pointer"
|
||
>
|
||
<img
|
||
:src="card.img"
|
||
:alt="card.title"
|
||
class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
|
||
/>
|
||
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-90" />
|
||
<div class="absolute bottom-0 left-0 p-6">
|
||
<h3 class="text-xl font-bold text-white mb-1">{{ card.title }}</h3>
|
||
<p class="text-sm font-medium text-gray-300">{{ card.user }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</MotionCom>
|
||
<!-- Features Section -->
|
||
<section class="py-24 bg-gray-900/30">
|
||
<div class="container mx-auto px-6">
|
||
|
||
<div class="mb-16 text-center md:text-left">
|
||
<h2 class="text-4xl md:text-5xl font-bold text-white mb-4">
|
||
{{ t('features.title') }}
|
||
</h2>
|
||
<p class="text-xl text-gray-400">
|
||
{{ t('features.subtitle') }}
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-16">
|
||
<div
|
||
v-for="(item, idx) in t('features.list')"
|
||
:key="idx"
|
||
class="flex flex-col items-start gap-4"
|
||
>
|
||
<div class="p-3 bg-gray-800 rounded-xl mb-2">
|
||
<svg v-if="idx === 0" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-purple-400"><circle cx="12" cy="12" r="10"></circle><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path><path d="M2 12h20"></path></svg>
|
||
<svg v-else-if="idx === 1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-blue-400"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
|
||
<svg v-else-if="idx === 2" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-yellow-400"><circle cx="12" cy="12" r="10"></circle><path d="M8 14s1.5 2 4 2 4-2 4-2"></path><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg>
|
||
<svg v-else xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-red-400"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
|
||
</div>
|
||
<h3 class="text-2xl font-bold text-white">{{ item.title }}</h3>
|
||
<p class="text-gray-400 leading-relaxed text-lg">
|
||
{{ item.desc }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Strong Engine Section -->
|
||
<section class="py-24 ">
|
||
<div class="container mx-auto px-6 text-center">
|
||
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">
|
||
{{ t('engine.title') }}
|
||
</h2>
|
||
<p class="text-lg text-gray-500 mb-16 max-w-2xl mx-auto">
|
||
{{ t('engine.subtitle') }}
|
||
</p>
|
||
|
||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-4xl mx-auto">
|
||
<div
|
||
v-for="(name, i) in logos"
|
||
:key="i"
|
||
class="h-24 bg-gray-900 rounded-lg flex items-center justify-center border border-gray-800 hover:border-gray-600 transition-colors"
|
||
>
|
||
<span class="text-gray-500 font-semibold text-sm">{{ name }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Community Call Section -->
|
||
<section class="py-32 bg-gradient-to-b from-black to-gray-900 border-b border-gray-800">
|
||
<div class="container mx-auto px-6 text-center">
|
||
<h2 class="text-5xl md:text-7xl font-bold text-white mb-12 tracking-tighter">
|
||
{{ t('community.title') }}
|
||
</h2>
|
||
|
||
<a
|
||
href="#"
|
||
class="inline-block px-10 py-4 text-lg font-bold text-black bg-white rounded-full hover:bg-gray-200 transition-colors"
|
||
>
|
||
{{ t('community.join') }}
|
||
</a>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
<!-- Footer -->
|
||
<footer class="pointer-events-auto text-white py-16 border-t border-gray-900">
|
||
<div class="container mx-auto px-6">
|
||
<div class="flex flex-col md:flex-row justify-between items-start gap-12">
|
||
|
||
<!-- Logo -->
|
||
<div class="mb-4 md:mb-0">
|
||
<span class="text-2xl font-bold tracking-tighter">Deotaland</span>
|
||
</div>
|
||
|
||
<!-- Links Columns -->
|
||
<div class="flex flex-wrap gap-12 md:gap-24">
|
||
|
||
<!-- Socials -->
|
||
<div class="flex flex-col gap-4">
|
||
<h4 class="font-semibold text-gray-500 text-sm uppercase tracking-wider">{{ t('footer.socials') }}</h4>
|
||
<div class="flex gap-4">
|
||
<a href="#" class="text-gray-400 hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path></svg></a>
|
||
<a href="#" class="text-gray-400 hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17"></path><path d="M9.75 15.02v-4.04l5.5 2.02-5.5 2.02Z"></path></svg></a>
|
||
<a href="#" class="text-gray-400 hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" x2="17.51" y1="6.5" y2="6.5"></line></svg></a>
|
||
<a href="#" class="text-gray-400 hover:text-white font-bold text-sm flex items-center h-[20px]">TikTok</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Language -->
|
||
<div class="flex flex-col gap-4">
|
||
<h4 class="font-semibold text-gray-500 text-sm uppercase tracking-wider">{{ t('footer.language') }}</h4>
|
||
<div class="flex flex-col gap-2">
|
||
<a href="#" @click.prevent="switchLanguage('en')" class="text-gray-300 hover:text-white text-sm">English</a>
|
||
<a href="#" @click.prevent="switchLanguage('zh')" class="text-gray-300 hover:text-white text-sm">中文</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Company -->
|
||
<div class="flex flex-col gap-4">
|
||
<h4 class="font-semibold text-gray-500 text-sm uppercase tracking-wider">{{ t('footer.company') }}</h4>
|
||
<div class="flex flex-col gap-2">
|
||
<a href="#" class="text-gray-300 hover:text-white text-sm">{{ t('footer.about') }}</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Action -->
|
||
<div class="flex flex-col gap-4">
|
||
<button
|
||
@click="scrollToTop"
|
||
class="text-gray-300 hover:text-white text-sm text-left"
|
||
>
|
||
{{ t('footer.backTop') }}
|
||
</button>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div >
|
||
|
||
</div>
|
||
<div class="mt-16 pt-8 border-t border-gray-900 text-center md:text-left text-sm text-gray-600">
|
||
{{ t('footer.copyright') }}
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
</Bg>
|
||
</template>
|
||
|
||
<script setup>
|
||
import MotionCom from './motion.vue'
|
||
import spline from './spline.vue';
|
||
import { ref, onMounted, onUnmounted, computed } from 'vue';
|
||
import Bg from './bg.vue'
|
||
import dog from '@/assets/home/dog.jpg'
|
||
import qdog from '@/assets/home/qdog.jpg'
|
||
import center from '@/assets/home/center.png'
|
||
import center1 from '@/assets/home/center1.png'
|
||
import center2 from '@/assets/home/center2.png'
|
||
import center3 from '@/assets/home/center3.png'
|
||
import center4 from '@/assets/home/center4.png'
|
||
import center5 from '@/assets/home/center5.png'
|
||
import center6 from '@/assets/home/center6.png'
|
||
import center7 from '@/assets/home/center7.png'
|
||
import center8 from '@/assets/home/center8.png'
|
||
import center9 from '@/assets/home/center9.png'
|
||
// Window size reactive state
|
||
const getResponsiveWidthStyle = () => {
|
||
const isMobile = window.innerWidth < 768;
|
||
return {
|
||
position: 'fixed',
|
||
width: isMobile ? '300vw' : '100vw',
|
||
left: '50%',
|
||
top: '50%',
|
||
transform: 'translate(-50%, -50%)'
|
||
};
|
||
};
|
||
const isMobile = ref(window.innerWidth < 768);
|
||
// 中英文库
|
||
const i18n = {
|
||
en: {
|
||
nav: {
|
||
creator: 'Creator',
|
||
land: 'Land',
|
||
pricing: 'Pricing'
|
||
},
|
||
hero: {
|
||
title: 'Create with Deotaland',
|
||
subtitle: 'Bring your own AI robot companion to life',
|
||
explore: 'Explore More',
|
||
start: 'Start Now'
|
||
},
|
||
canvas: {
|
||
title: 'Your Creation canvas – DeotaBoard',
|
||
subtitle: 'Build your robot in an infinite canvas, together with AI.',
|
||
prompt: 'Prompt / Idea',
|
||
reference: 'Reference',
|
||
model3d: '3D Model',
|
||
realRobot: 'Real Robot',
|
||
autoRigged: 'Auto-rigged mesh ready for core',
|
||
alive: 'Alive on your desktop',
|
||
referenceText: 'Reference'
|
||
},
|
||
companionship: {
|
||
title: 'Born for Personal Companionship',
|
||
powered: 'Powered by AI',
|
||
subtitle: 'Cute companions, emotional partners, desktop friends... All in one Deotaland DIY robot.',
|
||
examples: 'See Robot Examples'
|
||
},
|
||
features: {
|
||
title: 'From Zero to Your Own Robot Friend',
|
||
subtitle: 'Simple enough for beginners, powerful enough for makers.',
|
||
list: [
|
||
{ title: 'Stunning Custom Looks', desc: 'Generate unique robot designs from your ideas or images.' },
|
||
{ title: 'From Idea to 3D Model', desc: 'Turn concepts into printable 3D shells ready for your robot core.' },
|
||
{ title: 'One-Click Expression Packs', desc: 'Create and apply DIY eye styles and animated expressions.' },
|
||
{ title: 'Always-On AI Companion', desc: 'Long-term memory, emotional responses, and daily interactions.' }
|
||
]
|
||
},
|
||
engine: {
|
||
title: 'Strong Engine Behind',
|
||
subtitle: 'We combine leading AI and 3D technologies to power your DIY robots.'
|
||
},
|
||
community: {
|
||
title: 'Deotaland is for All Creators',
|
||
join: 'Join the Creator Community'
|
||
},
|
||
footer: {
|
||
socials: 'Socials',
|
||
language: 'Language',
|
||
company: 'Company',
|
||
about: 'About Us',
|
||
backTop: 'Back to top',
|
||
copyright: '©2025 Deotaland limited. All rights reserved.'
|
||
}
|
||
},
|
||
zh: {
|
||
nav: {
|
||
creator: '创作者',
|
||
land: '社区',
|
||
pricing: '价格'
|
||
},
|
||
hero: {
|
||
title: '使用 Deotaland 创作',
|
||
subtitle: '让你的 AI 机器人伴侣成为现实',
|
||
explore: '探索更多',
|
||
start: '立即开始'
|
||
},
|
||
canvas: {
|
||
title: '你的创作画布 – DeotaBoard',
|
||
subtitle: '在无限画布中，与 AI 一起打造你的机器人。',
|
||
prompt: '提示 / 创意',
|
||
reference: '参考',
|
||
model3d: '3D 模型',
|
||
realRobot: '真实机器人',
|
||
autoRigged: '自动绑定网格，随时准备安装核心',
|
||
alive: '活跃在你的桌面上',
|
||
referenceText: '参考'
|
||
},
|
||
companionship: {
|
||
title: '为个人陪伴而生',
|
||
powered: '由 AI 驱动',
|
||
subtitle: '可爱的伴侣、情感伙伴、桌面朋友... 尽在 Deotaland DIY 机器人中。',
|
||
examples: '查看机器人示例'
|
||
},
|
||
features: {
|
||
title: '从零到属于你的机器人朋友',
|
||
subtitle: '对初学者足够简单，对创客足够强大。',
|
||
list: [
|
||
{ title: '惊艳的自定义外观', desc: '从你的想法或图像生成独特的机器人设计。' },
|
||
{ title: '从想法到 3D 模型', desc: '将概念转化为可打印的 3D 外壳，随时准备安装你的机器人核心。' },
|
||
{ title: '一键表情包', desc: '创建并应用 DIY 眼睛样式和动画表情。' },
|
||
{ title: '全天候 AI 伴侣', desc: '长期记忆、情感反应和日常互动。' }
|
||
]
|
||
},
|
||
engine: {
|
||
title: '强大的引擎支持',
|
||
subtitle: '我们结合领先的 AI 和 3D 技术，为你的 DIY 机器人提供动力。'
|
||
},
|
||
community: {
|
||
title: 'Deotaland 面向所有创作者',
|
||
join: '加入创作者社区'
|
||
},
|
||
footer: {
|
||
socials: '社交',
|
||
language: '语言',
|
||
company: '公司',
|
||
about: '关于我们',
|
||
backTop: '返回顶部',
|
||
copyright: '©2025 Deotaland 有限公司。保留所有权利。'
|
||
}
|
||
}
|
||
};
|
||
// Navbar state
|
||
const isScrolled = ref(false);
|
||
const isMobileMenuOpen = ref(false);
|
||
|
||
// 语言切换逻辑
|
||
const currentLang = ref(localStorage.getItem('lang') || 'en');
|
||
|
||
// 切换语言
|
||
const switchLanguage = (lang) => {
|
||
currentLang.value = lang;
|
||
localStorage.setItem('lang', lang);
|
||
};
|
||
|
||
// 获取当前语言的文本
|
||
const t = (key) => {
|
||
const keys = key.split('.');
|
||
let result = i18n[currentLang.value];
|
||
for (const k of keys) {
|
||
if (result && result[k] !== undefined) {
|
||
result = result[k];
|
||
} else {
|
||
return key; // 如果找不到对应的键，返回原始键
|
||
}
|
||
}
|
||
return result;
|
||
};
|
||
|
||
// Hero section state
|
||
const containerRef = ref(null);
|
||
const scrollYProgress = ref(0);
|
||
|
||
// Scroll event handler
|
||
const handleScroll = () => {
|
||
// isScrolled.value = window.scrollY > 50;
|
||
isScrolled.value = false;
|
||
|
||
// Calculate scroll progress for hero section
|
||
if (containerRef.value) {
|
||
const viewportHeight = window.innerHeight;
|
||
const scrollPosition = window.scrollY;
|
||
const containerTop = containerRef.value.offsetTop;
|
||
const containerHeight = containerRef.value.offsetHeight;
|
||
|
||
// Calculate progress from 0 to 1 as we scroll through the container
|
||
const progress = Math.max(0, Math.min(1,
|
||
(scrollPosition - containerTop + viewportHeight) /
|
||
(containerHeight + viewportHeight)
|
||
));
|
||
|
||
scrollYProgress.value = progress;
|
||
}
|
||
};
|
||
|
||
// Scroll to top function
|
||
const scrollToTop = () => {
|
||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||
};
|
||
|
||
// Scale transformation based on scroll progress
|
||
const scale = computed(() => {
|
||
// Zoom out more aggressively to ensure all 15 images are visible
|
||
// Final scale is 0.2 for mobile and 0.3 for desktop
|
||
const mappedProgress = Math.min(scrollYProgress.value / 0.8, 1);
|
||
let initNum = window.innerWidth < 768 ? 3.5 : 5.5;
|
||
let outNum = window.innerWidth < 768 ? 3.2 : 5.0;
|
||
return initNum - (mappedProgress * outNum);
|
||
});
|
||
|
||
// Nav links
|
||
const navLinks = [
|
||
{ name: 'Creator', href: '#' },
|
||
{ name: 'Land', href: '#' },
|
||
{ name: 'Pricing', href: '#' },
|
||
];
|
||
// Creation Canvas Images
|
||
const refImage = dog;
|
||
const model3dImage = qdog;
|
||
const realRobotImage = 'https://draft-user.s3.us-east-2.amazonaws.com/images/367b3ceb-5a3d-46c4-880b-d7028d3c93d4.jpg';
|
||
|
||
// Robot Cards
|
||
const cards = [
|
||
{ id: 1, title: 'Custom Robot', user: '@Wownny wolf', img:'https://draft-user.s3.us-east-2.amazonaws.com/images/ba284669-6e9c-4a10-ae8d-21954629788d.png' },
|
||
{ id: 2, title: 'Custom Robot', user: '@Lil Moods', img: 'https://draft-user.s3.us-east-2.amazonaws.com/images/72109af5-7ff7-47a1-ba7d-5e18ab855479.png' },
|
||
{ id: 3, title: 'Custom Robot', user: '@Deo Monkey', img:'https://draft-user.s3.us-east-2.amazonaws.com/images/fd21fc66-8cae-417f-9e9a-617f18af9406.png' },
|
||
];
|
||
// Strong Engine Logos
|
||
const logos = [
|
||
"AI Engine 1", "3D Engine 2", "Voice Engine 3", "Memory Engine 4",
|
||
"Physics Core", "Render Tech", "Motion API", "Vision OS"
|
||
];
|
||
|
||
// Mount and unmount scroll event
|
||
onMounted(() => {
|
||
window.addEventListener('scroll', handleScroll);
|
||
// Initial call to set initial state
|
||
handleScroll();
|
||
});
|
||
|
||
onUnmounted(() => {
|
||
window.removeEventListener('scroll', handleScroll);
|
||
});
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* Additional custom styles can be added here */
|
||
</style>
|