|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>nestler.dev - Brilliant AI & Full-Stack Development</title> |
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
|
|
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
'primary-light': '#f0daa5', |
|
|
'primary-dark': '#004343', |
|
|
'accent-green': '#74a892', |
|
|
'secondary-green': '#008585', |
|
|
'innovation-orange': '#c7522a', |
|
|
'warm-neutral': '#e5c185', |
|
|
'light-neutral': '#fbf2c4', |
|
|
'soft-green': '#b8cdab', |
|
|
'chemnitz-blue': '#2a5c8a', |
|
|
'heritage-gray': '#6b7280' |
|
|
}, |
|
|
fontFamily: { |
|
|
'display': ['Inter', 'system-ui', 'sans-serif'], |
|
|
}, |
|
|
animation: { |
|
|
'float': 'float 6s ease-in-out infinite', |
|
|
'pulse-soft': 'pulse-soft 2s ease-in-out infinite', |
|
|
'gradient': 'gradient 15s ease infinite', |
|
|
}, |
|
|
keyframes: { |
|
|
float: { |
|
|
'0%, 100%': { transform: 'translateY(0px)' }, |
|
|
'50%': { transform: 'translateY(-20px)' }, |
|
|
}, |
|
|
'pulse-soft': { |
|
|
'0%, 100%': { opacity: '1' }, |
|
|
'50%': { opacity: '0.8' }, |
|
|
}, |
|
|
gradient: { |
|
|
'0%': { backgroundPosition: '0% 50%' }, |
|
|
'50%': { backgroundPosition: '100% 50%' }, |
|
|
'100%': { backgroundPosition: '0% 50%' }, |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
scroll-behavior: smooth; |
|
|
} |
|
|
|
|
|
.vanta-background { |
|
|
position: absolute; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
.forge-animation { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.forge-particle { |
|
|
position: absolute; |
|
|
background: linear-gradient(135deg, #74a892, #008585); |
|
|
border-radius: 50%; |
|
|
opacity: 0; |
|
|
} |
|
|
|
|
|
.timeline-item { |
|
|
position: relative; |
|
|
padding-left: 2rem; |
|
|
} |
|
|
|
|
|
.timeline-item:before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
left: 0; |
|
|
top: 0; |
|
|
width: 2px; |
|
|
height: 100%; |
|
|
background: linear-gradient(to bottom, #74a892, #008585); |
|
|
} |
|
|
|
|
|
.timeline-dot { |
|
|
position: absolute; |
|
|
left: -6px; |
|
|
top: 8px; |
|
|
width: 12px; |
|
|
height: 12px; |
|
|
border-radius: 50%; |
|
|
background: #74a892; |
|
|
} |
|
|
|
|
|
.service-card { |
|
|
transition: all 0.3s ease; |
|
|
border: 1px solid #e5c185; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.service-card::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: -100%; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: linear-gradient(90deg, transparent, rgba(116, 168, 146, 0.1), transparent); |
|
|
transition: left 0.5s; |
|
|
} |
|
|
|
|
|
.service-card:hover::before { |
|
|
left: 100%; |
|
|
} |
|
|
|
|
|
.service-card:hover { |
|
|
transform: translateY(-8px) scale(1.02); |
|
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); |
|
|
border-color: #74a892; |
|
|
} |
|
|
|
|
|
.custom-cursor { |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
border: 2px solid #74a892; |
|
|
border-radius: 50%; |
|
|
position: fixed; |
|
|
pointer-events: none; |
|
|
z-index: 9999; |
|
|
transform: translate(-50%, -50%); |
|
|
transition: all 0.1s ease; |
|
|
} |
|
|
|
|
|
.cursor-dot { |
|
|
width: 4px; |
|
|
height: 4px; |
|
|
background: #74a892; |
|
|
border-radius: 50%; |
|
|
position: fixed; |
|
|
pointer-events: none; |
|
|
z-index: 9999; |
|
|
transform: translate(-50%, -50%); |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
|
|
|
.cursor-active { |
|
|
transform: translate(-50%, -50%) scale(1.5); |
|
|
background: rgba(116, 168, 146, 0.2); |
|
|
} |
|
|
|
|
|
.ai-demo-container { |
|
|
background: linear-gradient(135deg, #f0daa5 0%, #e5c185 100%); |
|
|
border-radius: 20px; |
|
|
overflow: hidden; |
|
|
position: relative; |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
|
|
|
.ai-demo-container::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: -50%; |
|
|
left: -50%; |
|
|
width: 200%; |
|
|
height: 200%; |
|
|
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent); |
|
|
transform: rotate(45deg); |
|
|
animation: gradient-shine 3s linear infinite; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
@keyframes gradient-shine { |
|
|
0% { transform: rotate(45deg) translate(-50%, -50%); } |
|
|
100% { transform: rotate(45deg) translate(50%, 50%); } |
|
|
} |
|
|
|
|
|
.typewriter { |
|
|
overflow: hidden; |
|
|
border-right: .15em solid #74a892; |
|
|
white-space: nowrap; |
|
|
animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite; |
|
|
} |
|
|
|
|
|
@keyframes typing { |
|
|
from { width: 0 } |
|
|
to { width: 100% } |
|
|
} |
|
|
|
|
|
@keyframes blink-caret { |
|
|
from, to { border-color: transparent } |
|
|
50% { border-color: #74a892 } |
|
|
} |
|
|
|
|
|
.project-explorer { |
|
|
perspective: 1000px; |
|
|
} |
|
|
|
|
|
.project-card { |
|
|
transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); |
|
|
transform-style: preserve-3d; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.project-card::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
background: linear-gradient(to bottom, transparent 0%, rgba(0, 67, 67, 0.8) 100%); |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s ease; |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
.project-card:hover { |
|
|
transform: translateY(-10px) rotateY(5deg) rotateX(5deg); |
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
|
|
|
.project-card:hover::before { |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
.project-card:hover .project-overlay { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
|
|
|
.project-overlay { |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
padding: 2rem; |
|
|
opacity: 0; |
|
|
transform: translateY(20px); |
|
|
transition: all 0.3s ease; |
|
|
z-index: 2; |
|
|
} |
|
|
|
|
|
.dark-mode { |
|
|
background-color: #004343; |
|
|
color: #f0daa5; |
|
|
} |
|
|
|
|
|
.dark-mode .service-card { |
|
|
background-color: #008585; |
|
|
border-color: #74a892; |
|
|
} |
|
|
|
|
|
.dark-mode .ai-demo-container { |
|
|
background: linear-gradient(135deg, #008585 0%, #004343 100%); |
|
|
} |
|
|
|
|
|
.dark-mode .timeline-item:before { |
|
|
background: linear-gradient(to bottom, #c7522a, #74a892); |
|
|
} |
|
|
|
|
|
.dark-mode .timeline-dot { |
|
|
background: #c7522a; |
|
|
} |
|
|
|
|
|
.gradient-text { |
|
|
background: linear-gradient(135deg, #c7522a, #74a892, #008585); |
|
|
background-size: 200% 200%; |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
animation: gradient 3s ease infinite; |
|
|
} |
|
|
|
|
|
.floating-element { |
|
|
animation: float 6s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
.nav-link { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.nav-link::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: -5px; |
|
|
left: 0; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
background: linear-gradient(90deg, #c7522a, #74a892); |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-link:hover::after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.form-input { |
|
|
transition: all 0.3s ease; |
|
|
background: rgba(255, 255, 255, 0.05); |
|
|
backdrop-filter: blur(10px); |
|
|
} |
|
|
|
|
|
.form-input:focus { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 10px 25px -5px rgba(199, 82, 42, 0.3); |
|
|
} |
|
|
|
|
|
.hero-cta { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.hero-cta::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: -100%; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); |
|
|
transition: left 0.5s; |
|
|
} |
|
|
|
|
|
.hero-cta:hover::before { |
|
|
left: 100%; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-primary-light text-primary-dark font-display transition-colors duration-500"> |
|
|
|
|
|
<div class="custom-cursor"></div> |
|
|
<div class="cursor-dot"></div> |
|
|
|
|
|
|
|
|
<nav class="fixed w-full bg-primary-light/90 backdrop-blur-sm z-50 py-4 px-6 shadow-sm border-b border-primary-light/20" data-aos="fade-down"> |
|
|
<div class="container mx-auto flex justify-between items-center"> |
|
|
<a href="#" class="text-2xl font-bold text-primary-dark flex items-center"> |
|
|
<span class="gradient-text font-extrabold">nestler.dev</span> |
|
|
</a> |
|
|
<div class="hidden md:flex space-x-8"> |
|
|
<a href="#legacy" class="nav-link text-primary-dark hover:text-accent-green transition-colors font-medium">Heritage</a> |
|
|
<a href="#services" class="nav-link text-primary-dark hover:text-accent-green transition-colors font-medium">Services</a> |
|
|
<a href="#projects" class="nav-link text-primary-dark hover:text-accent-green transition-colors font-medium">Projects</a> |
|
|
<a href="#contact" class="nav-link text-primary-dark hover:text-accent-green transition-colors font-medium">Contact</a> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button id="dark-mode-toggle" class="p-2 rounded-full hover:bg-accent-green/20 transition-all transform hover:scale-110"> |
|
|
<i data-feather="moon" class="text-primary-dark w-5 h-5"></i> |
|
|
</button> |
|
|
<button class="md:hidden p-2 rounded-full hover:bg-accent-green/20 transition-colors"> |
|
|
<i data-feather="menu" class="text-primary-dark w-5 h-5"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section class="relative h-screen flex items-center justify-center overflow-hidden"> |
|
|
<div id="vanta-background" class="vanta-background"></div> |
|
|
<div class="absolute inset-0 bg-gradient-to-b from-primary-light/20 to-primary-light/80"></div> |
|
|
<div class="container mx-auto px-6 z-10 text-center" data-aos="fade-up" data-aos-delay="300"> |
|
|
<div class="floating-element mb-8"> |
|
|
<div class="w-24 h-24 mx-auto bg-accent-green/20 rounded-full flex items-center justify-center"> |
|
|
<i data-feather="cpu" class="w-12 h-12 text-accent-green"></i> |
|
|
</div> |
|
|
</div> |
|
|
<h1 class="text-5xl md:text-7xl font-bold mb-6 text-primary-dark"> |
|
|
<span class="typewriter block">Chemnitz's Industrial Past,</span> |
|
|
<span class="gradient-text mt-4 block">The Future of AI</span> |
|
|
</h1> |
|
|
<p class="text-xl md:text-2xl text-primary-dark max-w-3xl mx-auto mb-10 leading-relaxed"> |
|
|
We forge brilliant, AI-powered solutions that carry forward a legacy of innovation and craftsmanship. |
|
|
</p> |
|
|
<div class="forge-animation mb-12 h-2 w-64 mx-auto rounded-full bg-secondary-green/30 overflow-hidden"> |
|
|
<div class="h-full bg-gradient-to-r from-accent-green to-innovation-orange rounded-full w-0" id="forge-progress"></div> |
|
|
</div> |
|
|
<a href="#contact" class="hero-cta inline-block bg-gradient-to-r from-accent-green to-innovation-orange text-white font-semibold py-4 px-10 rounded-full hover:shadow-xl transition-all transform hover:scale-105 shadow-lg relative overflow-hidden"> |
|
|
Build Your Brilliant Idea |
|
|
<i data-feather="arrow-right" class="w-5 h-5 ml-2 inline"></i> |
|
|
</a> |
|
|
</div> |
|
|
<div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce z-10"> |
|
|
<div class="w-10 h-10 rounded-full bg-accent-green/20 flex items-center justify-center"> |
|
|
<i data-feather="chevron-down" class="text-accent-green w-6 h-6"></i> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="legacy" class="py-24 bg-gradient-to-br from-white to-warm-neutral/30"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-20" data-aos="fade-up"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold text-primary-dark mb-6">A Legacy of Innovation</h2> |
|
|
<p class="text-xl text-primary-dark max-w-3xl mx-auto leading-relaxed"> |
|
|
From textiles to machine tools to automotive excellence, Chemnitz has always been at the forefront of industrial revolution. We continue that tradition with cutting-edge AI solutions. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-2 gap-16 items-center"> |
|
|
<div class="space-y-10" data-aos="fade-right"> |
|
|
<div class="timeline-item"> |
|
|
<div class="timeline-dot"></div> |
|
|
<h3 class="text-2xl font-semibold text-primary-dark mb-3">Medieval Weaving</h3> |
|
|
<p class="text-primary-dark/90 mt-2 leading-relaxed">Chemnitz's tradition of textile innovation began centuries ago, establishing a culture of precision craftsmanship that continues today.</p> |
|
|
</div> |
|
|
|
|
|
<div class="timeline-item"> |
|
|
<div class="timeline-dot"></div> |
|
|
<h3 class="text-2xl font-semibold text-primary-dark mb-3">Industrial Revolution</h3> |
|
|
<p class="text-primary-dark/90 mt-2 leading-relaxed">The city became a powerhouse of mechanical engineering and machine tool production, driving technological advancement across Europe.</p> |
|
|
</div> |
|
|
|
|
|
<div class="timeline-item"> |
|
|
<div class="timeline-dot"></div> |
|
|
<h3 class="text-2xl font-semibold text-primary-dark mb-3">Automotive Excellence</h3> |
|
|
<p class="text-primary-dark/90 mt-2 leading-relaxed">Home to automotive giants and suppliers, Chemnitz drove innovation in transportation and manufacturing processes.</p> |
|
|
</div> |
|
|
|
|
|
<div class="timeline-item"> |
|
|
<div class="timeline-dot bg-innovation-orange"></div> |
|
|
<h3 class="text-2xl font-semibold text-innovation-orange mb-3">The AI Revolution</h3> |
|
|
<p class="text-primary-dark/90 mt-2 leading-relaxed">Today, we continue this legacy by building intelligent solutions that transform industries and create new possibilities.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div data-aos="fade-left" data-aos-delay="300"> |
|
|
<div class="bg-white p-10 rounded-3xl shadow-2xl border border-warm-neutral/20"> |
|
|
<div class="mb-8"> |
|
|
<div class="w-16 h-16 bg-chemnitz-blue rounded-xl flex items-center justify-center mb-4"> |
|
|
<i data-feather="award" class="text-white w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-3xl font-bold text-chemnitz-blue mb-3">European Capital of Culture 2025</h3> |
|
|
<p class="text-heritage-gray leading-relaxed">Chemnitz has been named European Capital of Culture 2025, celebrating its creative spirit, innovation heritage, and forward-thinking attitude that continues to shape our work.</p> |
|
|
</div> |
|
|
<div class="rounded-2xl overflow-hidden shadow-lg"> |
|
|
<img src="http://static.photos/cityscape/640x360/42" alt="Chemnitz cityscape" class="w-full h-80 object-cover transition-transform duration-700 hover:scale-110"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-24 bg-gradient-to-br from-primary-dark to-secondary-green text-white"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="max-w-5xl mx-auto text-center" data-aos="zoom-in"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-8">The nestler.dev Promise</h2> |
|
|
<p class="text-xl mb-12 opacity-95 leading-relaxed"> |
|
|
In a world of commoditized development services, we offer something rare: truly brilliant ideas executed with engineering excellence and creative vision. |
|
|
</p> |
|
|
|
|
|
<div class="grid md:grid-cols-3 gap-10 mt-16"> |
|
|
<div class="text-center" data-aos="fade-up" data-aos-delay="100"> |
|
|
<div class="w-24 h-24 mx-auto mb-8 bg-innovation-orange/20 rounded-2xl flex items-center justify-center shadow-lg"> |
|
|
<div class="w-16 h-16 bg-innovation-orange rounded-xl flex items-center justify-center"> |
|
|
<i data-feather="zap" class="w-8 h-8 text-white"></i> |
|
|
</div> |
|
|
</div> |
|
|
<h3 class="text-2xl font-semibold mb-4">Intellectual Capital</h3> |
|
|
<p class="opacity-90 leading-relaxed">We prioritize deep thinking and innovative approaches over standardized processes, bringing fresh perspectives to every challenge.</p> |
|
|
</div> |
|
|
|
|
|
<div class="text-center" data-aos="fade-up" data-aos-delay="200"> |
|
|
<div class="w-24 h-24 mx-auto mb-8 bg-innovation-orange/20 rounded-2xl flex items-center justify-center shadow-lg"> |
|
|
<div class="w-16 h-16 bg-innovation-orange rounded-xl flex items-center justify-center"> |
|
|
<i data-feather="tool" class="w-8 h-8 text-white"></i> |
|
|
</div> |
|
|
</div> |
|
|
<h3 class="text-2xl font-semibold mb-4">Bespoke Solutions</h3> |
|
|
<p class="opacity-90 leading-relaxed">We craft unique solutions tailored to your specific challenges, not one-size-fits-all products. Every project receives our full creative attention.</p> |
|
|
</div> |
|
|
|
|
|
<div class="text-center" data-aos="fade-up" data-aos-delay="300"> |
|
|
<div class="w-24 h-24 mx-auto mb-8 bg-innovation-orange/20 rounded-2xl flex items-center justify-center shadow-lg"> |
|
|
<div class="w-16 h-16 bg-innovation-orange rounded-xl flex items-center justify-center"> |
|
|
<i data-feather="users" class="w-8 h-8 text-white"></i> |
|
|
</div> |
|
|
</div> |
|
|
<h3 class="text-2xl font-semibold mb-4">Partnership Approach</h3> |
|
|
<p class="opacity-90 leading-relaxed">We work with you as strategic partners, not just service providers. Your success is our success, and we're invested in your vision.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-24 bg-white"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-20" data-aos="fade-up"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold text-primary-dark mb-6">Experience Our AI Capabilities</h2> |
|
|
<p class="text-xl text-primary-dark max-w-3xl mx-auto leading-relaxed"> |
|
|
We don't just use AI tools—we build them from the ground up. Try our interactive demonstration below to see how we can enhance your ideas. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="ai-demo-container p-10 rounded-3xl max-w-5xl mx-auto border border-warm-neutral/30" data-aos="fade-up" data-aos-delay="200"> |
|
|
<div class="grid md:grid-cols-2 gap-10"> |
|
|
<div> |
|
|
<div class="w-16 h-16 bg-innovation-orange/20 rounded-xl flex items-center justify-center mb-6"> |
|
|
<i data-feather="brain" class="w-8 h-8 text-innovation-orange"></i> |
|
|
</div> |
|
|
<h3 class="text-3xl font-semibold text-primary-dark mb-6">Text Transformation AI</h3> |
|
|
<p class="text-primary-dark/90 mb-8 leading-relaxed">Enter text below and watch our AI enhance it with creative suggestions and innovative approaches tailored to your needs.</p> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label for="ai-input" class="block text-sm font-medium text-primary-dark mb-3">Your Text</label> |
|
|
<textarea id="ai-input" rows="5" class="form-input w-full px-5 py-4 border border-gray-300 rounded-xl focus:ring-2 focus:ring-innovation-orange focus:border-transparent transition-all duration-300" placeholder="Type your idea or concept here..."></textarea> |
|
|
</div> |
|
|
|
|
|
<button id="ai-transform-btn" class="w-full bg-innovation-orange text-white font-semibold py-3 px-6 rounded-xl hover:bg-innovation-orange/90 transition-all transform hover:scale-105 flex items-center justify-center"> |
|
|
<i data-feather="sparkles" class="w-5 h-5 mr-2"></i> |
|
|
Transform with AI |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="w-16 h-16 bg-accent-green/20 rounded-xl flex items-center justify-center mb-6"> |
|
|
<i data-feather="edit-3" class="w-8 h-8 text-accent-green"></i> |
|
|
</div> |
|
|
<label class="block text-sm font-medium text-primary-dark mb-3">AI Enhanced Version</label> |
|
|
<div class="bg-white p-6 border border-gray-300 rounded-xl h-64 overflow-y-auto shadow-inner"> |
|
|
<p id="ai-output" class="text-primary-dark/90 leading-relaxed">Your enhanced text will appear here. Our AI analyzes your input and provides innovative suggestions to elevate your concept.</p> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 flex justify-between"> |
|
|
<button id="copy-output" class="text-primary-dark hover:text-innovation-orange transition-all transform hover:scale-105 flex items-center font-medium"> |
|
|
<i data-feather="copy" class="w-5 h-5 mr-2"></i> Copy |
|
|
</button> |
|
|
<button id="reset-demo" class="text-primary-dark hover:text-innovation-orange transition-all transform hover:scale-105 flex items-center font-medium"> |
|
|
<i data-feather="refresh-cw" class="w-5 h-5 mr-2"></i> Reset |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="services" class="py-24 bg-gradient-to-br from-gray-50 to-soft-green/20"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-20" data-aos="fade-up"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold text-primary-dark mb-6">Our Services</h2> |
|
|
<p class="text-xl text-primary-dark max-w-3xl mx-auto leading-relaxed"> |
|
|
We guide you from initial concept to fully realized product with our comprehensive service offerings, combining technical excellence with creative vision. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-3 gap-8"> |
|
|
<div class="service-card bg-white p-10 rounded-3xl" data-aos="fade-up" data-aos-delay="100"> |
|
|
<div class="w-20 h-20 mb-8 bg-primary-dark rounded-2xl flex items-center justify-center shadow-lg"> |
|
|
<i data-feather="compass" class="text-white w-10 h-10"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-semibold text-primary-dark mb-6">AI Strategy & Consulting</h3> |
|
|
<p class="text-primary-dark/90 mb-8 leading-relaxed">We help you identify opportunities where AI can transform your business and develop a strategic roadmap for implementation that aligns with your goals.</p> |
|
|
<ul class="space-y-4 text-primary-dark/90"> |
|
|
<li class="flex items-center"> |
|
|
<div class="w-6 h-6 bg-innovation-orange/20 rounded-full flex items-center justify-center mr-3"> |
|
|
<i data-feather="check" class="w-4 h-4 text-innovation-orange"></i> |
|
|
</div> |
|
|
Opportunity Assessment |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<div class="w-6 h-6 bg-innovation-orange/20 rounded-full flex items-center justify-center mr-3"> |
|
|
<i data-feather="check" class="w-4 h-4 text-innovation-orange"></i> |
|
|
</div> |
|
|
Technical Feasibility |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<div class="w-6 h-6 bg-innovation-orange/20 rounded-full flex items-center justify-center mr-3"> |
|
|
<i data-feather="check" class="w-4 h-4 text-innovation-orange"></i> |
|
|
</div> |
|
|
Implementation Roadmap |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="service-card bg-white p-10 rounded-3xl" data-aos="fade-up" data-aos-delay="200"> |
|
|
<div class="w-20 h-20 mb-8 bg-innovation-orange rounded-2xl flex items-center justify-center shadow-lg"> |
|
|
<i data-feather="cpu" class="text-white w-10 h-10"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-semibold text-primary-dark mb-6">Custom AI & ML Solutions</h3> |
|
|
<p class="text-primary-dark/90 mb-8 leading-relaxed">We design and build bespoke AI models and machine learning systems tailored to your specific needs, data, and business objectives.</p> |
|
|
<ul class="space-y-4 text-primary-dark/90"> |
|
|
<li class="flex items-center"> |
|
|
<div class="w-6 h-6 bg-innovation-orange/20 rounded-full flex items-center justify-center mr-3"> |
|
|
<i data-feather="check" class="w-4 h-4 text-innovation-orange"></i> |
|
|
</div> |
|
|
Predictive Analytics |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<div class="w-6 h-6 bg-innovation-orange/20 rounded-full flex items-center justify-center mr-3"> |
|
|
<i data-feather="check" class="w-4 h-4 text-innovation-orange"></i> |
|
|
</div> |
|
|
Computer Vision |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<div class="w-6 h-6 bg-innovation-orange/20 rounded-full flex items-center justify-center mr-3"> |
|
|
<i data-feather="check" class="w-4 h-4 text-innovation-orange"></i> |
|
|
</div> |
|
|
Natural Language Processing |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="service-card bg-white p-10 rounded-3xl" data-aos="fade-up" data-aos-delay="300"> |
|
|
<div class="w-20 h-20 mb-8 bg-primary-dark rounded-2xl flex items-center justify-center shadow-lg"> |
|
|
<i data-feather="code" class="text-white w-10 h-10"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-semibold text-primary-dark mb-6">Full-Stack Development</h3> |
|
|
<p class="text-primary-dark/90 mb-8 leading-relaxed">We build robust, scalable applications with modern technologies, ensuring your product is both functional today and future-proof for tomorrow.</p> |
|
|
<ul class="space-y-4 text-primary-dark/90"> |
|
|
<li class="flex items-center"> |
|
|
<div class="w-6 h-6 bg-innovation-orange/20 rounded-full flex items-center justify-center mr-3"> |
|
|
<i data-feather="check" class="w-4 h-4 text-innovation-orange"></i> |
|
|
</div> |
|
|
Web Applications |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<div class="w-6 h-6 bg-innovation-orange/20 rounded-full flex items-center justify-center mr-3"> |
|
|
<i data-feather="check" class="w-4 h-4 text-innovation-orange"></i> |
|
|
</div> |
|
|
Mobile Applications |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<div class="w-6 h-6 bg-innovation-orange/20 rounded-full flex items-center justify-center mr-3"> |
|
|
<i data-feather="check" class="w-4 h-4 text-innovation-orange"></i> |
|
|
</div> |
|
|
API Development |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="projects" class="py-24 bg-white"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-20" data-aos="fade-up"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold text-primary-dark mb-6">Explore Our Projects</h2> |
|
|
<p class="text-xl text-primary-dark max-w-3xl mx-auto leading-relaxed"> |
|
|
Discover how we've transformed complex challenges into brilliant solutions across various industries and technologies. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="project-explorer grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
<div class="project-card bg-white rounded-3xl overflow-hidden shadow-xl" data-aos="flip-left" data-aos-delay="100"> |
|
|
<div class="h-60 overflow-hidden"> |
|
|
<img src="http://static.photos/technology/640x360/1" alt="Predictive Maintenance AI" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110"> |
|
|
</div> |
|
|
<div class="project-overlay"> |
|
|
<h3 class="text-xl font-semibold text-white mb-3">Predictive Maintenance AI</h3> |
|
|
<p class="text-white/90 mb-4">Machine learning system that predicts equipment failures before they happen, reducing downtime by 45%.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-sm text-innovation-orange font-medium bg-white/90 px-3 py-1 rounded-full">Manufacturing</span> |
|
|
<a href="#" class="text-white hover:text-innovation-orange transition-colors flex items-center font-medium"> |
|
|
<span class="mr-2">View Case Study</span> |
|
|
<i data-feather="arrow-right" class="w-4 h-4"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-8"> |
|
|
<h3 class="text-xl font-semibold text-primary-dark mb-3">Predictive Maintenance AI</h3> |
|
|
<p class="text-primary-dark/90 mb-4">Machine learning system that predicts equipment failures before they happen.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-sm text-innovation-orange font-medium">Manufacturing</span> |
|
|
<a href="#" class="text-primary-dark hover:text-innovation-orange transition-colors flex items-center"> |
|
|
<span class="mr-1">View Case Study</span> |
|
|
<i data-feather="arrow-right" class="w-4 h-4"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="project-card bg-white rounded-3xl overflow-hidden shadow-xl" data-aos="flip-left" data-aos-delay="200"> |
|
|
<div class="h-60 overflow-hidden"> |
|
|
<img src="http://static.photos/finance/640x360/2" alt="Financial Analytics Platform" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110"> |
|
|
</div> |
|
|
<div class="project-overlay"> |
|
|
<h3 class="text-xl font-semibold text-white mb-3">Financial Analytics Platform</h3> |
|
|
<p class="text-white/90 mb-4">AI-powered platform for real-time financial market analysis and predictions with 92% accuracy.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-sm text-innovation-orange font-medium bg-white/90 px-3 py-1 rounded-full">Finance</span> |
|
|
<a href="#" class="text-white hover:text-innovation-orange transition-colors flex items-center font-medium"> |
|
|
<span class="mr-2">View Case Study</span> |
|
|
<i data-feather="arrow-right" class="w-4 h-4"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-8"> |
|
|
<h3 class="text-xl font-semibold text-primary-dark mb-3">Financial Analytics Platform</h3> |
|
|
<p class="text-primary-dark/90 mb-4">AI-powered platform for real-time financial market analysis and predictions.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-sm text-innovation-orange font-medium">Finance</span> |
|
|
<a href="#" class="text-primary-dark hover:text-innovation-orange transition-colors flex items-center"> |
|
|
<span class="mr-1">View Case Study</span> |
|
|
<i data-feather="arrow-right" class="w-4 h-4"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="project-card bg-white rounded-3xl overflow-hidden shadow-xl" data-aos="flip-left" data-aos-delay="300"> |
|
|
<div class="h-60 overflow-hidden"> |
|
|
<img src="http://static.photos/healthcare/640x360/3" alt="Healthcare Diagnostic Assistant" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110"> |
|
|
</div> |
|
|
<div class="project-overlay"> |
|
|
<h3 class="text-xl font-semibold text-white mb-3">Healthcare Diagnostic Assistant</h3> |
|
|
<p class="text-white/90 mb-4">AI system that assists medical professionals in diagnosing complex conditions with 98% confidence.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-sm text-innovation-orange font-medium bg-white/90 px-3 py-1 rounded-full">Healthcare</span> |
|
|
<a href="#" class="text-white hover:text-innovation-orange transition-colors flex items-center font-medium"> |
|
|
<span class="mr-2">View Case Study</span> |
|
|
<i data-feather="arrow-right" class="w-4 h-4"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-8"> |
|
|
<h3 class="text-xl font-semibold text-primary-dark mb-3">Healthcare Diagnostic Assistant</h3> |
|
|
<p class="text-primary-dark/90 mb-4">AI system that assists medical professionals in diagnosing complex conditions.</p> |
|
|
<极速赛车开奖结果历史记录> |
|
|
<span class="text-sm text-innovation-orange font-medium">Healthcare</span> |
|
|
<a href="#" class="text-primary-dark hover:text-innovation-orange transition-colors flex items-center"> |
|
|
<span class="mr-1">View Case Study</span> |
|
|
<i data-feather="arrow-right" class="w-4 h-4"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-16" data-aos="fade-up"> |
|
|
<a href="#" class="inline-flex items-center text-primary-dark hover:text-innovation-orange transition-all transform hover:scale-105 font-semibold text-lg"> |
|
|
<span>View All Projects</span> |
|
|
<i data-feather="arrow-right" class="w-5 h-5 ml-3"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-24 bg-gradient-to-br from-chemnitz-blue to-primary-dark text-white"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="max-w-4xl mx-auto"> |
|
|
<div class="text-center mb-20" data-aos="fade-up"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-6">Ready to Build Something Brilliant?</h2> |
|
|
<p class="text-xl opacity-95 leading-relaxed"> |
|
|
Let's discuss how we can transform your vision into an exceptional digital product that carries forward Chemnitz's legacy of innovation. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<form class="grid md:grid-cols-2 gap-8" data-aos="fade-up" data-aos-delay="200"> |
|
|
<div> |
|
|
<label for="name" class="block text-sm font-medium mb-3">Your Name</label> |
|
|
<input type="text" id="name" class="form-input w-full px-5 py-4 bg-white/5 border border-white/20 rounded-xl focus:ring-2 focus:ring-innovation-orange focus:border-transparent backdrop-blur-sm" placeholder="John Doe"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="email" class="block text-sm font-medium mb-3">Email Address</label> |
|
|
<input type="email" id="email" class="form-input w-full px-5 py-4 bg-white/5 border border-white/20 rounded-xl focus:ring-2 focus:ring-innovation-orange focus:border-transparent backdrop-blur-sm" placeholder="john@company.com"> |
|
|
</div> |
|
|
|
|
|
<div class="md:col-span-2"> |
|
|
<label for="company" class="block text-sm font-medium mb-3">Company</label> |
|
|
<input type="text" id="company" class="form-input w-full px-5 py-4 bg-white/5 border border-white/20 rounded-xl focus:ring-2 focus:ring-innovation-orange focus:border-transparent backdrop-blur-sm" placeholder="Your Company"> |
|
|
</div> |
|
|
|
|
|
<div class="md:col-span-2"> |
|
|
<label for="message" class="block text-sm font-medium mb-3">Your Project Details</label> |
|
|
<textarea id="message" rows="5" class="form-input w-full px-5 py-4 bg-white/5 border border-white/20 rounded-xl focus:ring-2 focus:ring-innovation-orange focus:border-transparent backdrop-blur-sm" placeholder="Tell us about your project vision, challenges, and goals..."></textarea> |
|
|
</div> |
|
|
|
|
|
<div class="md:col-span-2 text-center"> |
|
|
<button type="submit" class="bg-innovation-orange text-white font-semibold py-4 px-12 rounded-xl hover:bg-innovation-orange/90 transition-all transform hover:scale-105 shadow-lg flex items-center justify-center mx-auto"> |
|
|
<i data-feather="calendar" class="w-5 h-5 mr-3"></i> |
|
|
Schedule a Consultation |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="py-16 bg-gray-900 text-gray-400"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="grid md:grid-cols-4 gap-10"> |
|
|
<div> |
|
|
<h3 class="text-white text-xl font-semibold mb-6">nestler.dev</h3> |
|
|
<p class="mb-6 leading-relaxed">Transforming brilliant ideas into exceptional digital products with AI innovation and technical excellence.</p> |
|
|
<div class="flex space-x-5"> |
|
|
<a href="#" class="text-gray-400 hover:text-innovation-orange transition-all transform hover:scale-110"> |
|
|
<i data-feather="twitter" class="w-5 h-5"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-innovation-orange transition-all transform hover:scale-110"> |
|
|
<i data-feather="linkedin" class="w-5 h-5"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-innovation-orange transition-all transform hover:scale-110"> |
|
|
<i data-feather="github" class="w-5 h-5"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-white text-xl font-semibold mb-6">Services</h3> |
|
|
<ul class="space-y-4"> |
|
|
<li><a href="#" class="hover:text-innovation-orange transition-colors flex items-center"> |
|
|
<i data-feather="arrow-right" class="w-4 h-4 mr-2"></i> |
|
|
AI Strategy & Consulting |
|
|
</a></li> |
|
|
<li><a href="#" class="hover:text-innovation-orange transition-colors flex items-center"> |
|
|
<i data-feather="arrow-right" class="w-4 h-4 mr-2"></i> |
|
|
Custom AI & ML Solutions |
|
|
</极速赛车开奖结果历史记录></li> |
|
|
<li><a href="#" class="hover:text-innovation-orange transition-colors flex items-center"> |
|
|
<i data-feather="arrow-right" class="w-4 h-4 mr-2"></i> |
|
|
Full-Stack Development |
|
|
</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-white text-xl font-semibold mb-6">Company</h3> |
|
|
<ul class="space-y-4"> |
|
|
<li><a href="#" class="hover:text-innovation-orange transition-colors flex items-center"> |
|
|
<i data-feather="arrow-right" class="w-4 h-4 mr-2"></i> |
|
|
About Us |
|
|
</a></li> |
|
|
<li><a href="#" class="hover:text-innovation-orange transition-colors flex items-center"> |
|
|
<i data-feather="arrow-right" class="极速赛车开奖结果历史记录-4 h-4 mr-2"></i> |
|
|
Our Approach |
|
|
</a></li> |
|
|
<li><a href="#" class="hover:text-innovation-orange transition-colors flex items-center"> |
|
|
<i data-feather="arrow-right" class="w-4 h-4 mr-2"></i> |
|
|
Case Studies |
|
|
</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-white text-xl font-semibold mb-6">Contact</h3> |
|
|
<ul class="space-y-4"> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="map-pin" class="w-5 h-5 mr-3 mt-1 text-innovation-orange"></i> |
|
|
<span>Chemnitz, Germany</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="mail" class="w-5 h-5 mr-3 text-innovation-orange"></i> |
|
|
<a href="mailto:hello@nestler.dev" class="hover:text-innovation-orange transition-colors">hello@nestler.dev</a> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-800 mt-16 pt-8 text-center"> |
|
|
<p class="text-sm">© 2025 nestler.dev. Carrying forward Chemnitz's legacy of innovation and excellence.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
AOS.init({ |
|
|
duration: 1000, |
|
|
once: true, |
|
|
offset: 100, |
|
|
easing: 'ease-out-cubic' |
|
|
}); |
|
|
|
|
|
|
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
VANTA.GLOBE({ |
|
|
el: "#vanta-background", |
|
|
mouseControls: true, |
|
|
touchControls: true, |
|
|
gyroControls: false, |
|
|
minHeight: 200.00, |
|
|
minWidth: 200.00, |
|
|
scale: 1.00, |
|
|
scaleMobile: 1.00, |
|
|
color: 0xc7522a, |
|
|
backgroundColor: 0xf0daa5, |
|
|
size: 0.8, |
|
|
speed: 1.5 |
|
|
}); |
|
|
|
|
|
|
|
|
const cursor = document.querySelector('.custom-cursor'); |
|
|
const cursorDot = document.querySelector('.cursor-dot'); |
|
|
|
|
|
document.addEventListener('mousemove', (e) => { |
|
|
cursor.style.left = e.clientX + 'px'; |
|
|
cursor.style.top = e.clientY + 'px'; |
|
|
|
|
|
cursorDot.style.left = e.clientX + 'px'; |
|
|
cursorDot.style.top = e.clientY + 'px'; |
|
|
}); |
|
|
|
|
|
document.querySelectorAll('a, button, input, textarea, .service-card, .project-card').forEach(item => { |
|
|
item.addEventListener('mouseenter', () => { |
|
|
cursor.classList.add('cursor-active'); |
|
|
}); |
|
|
|
|
|
item.addEventListener('mouseleave', () => { |
|
|
cursor.classList.remove('cursor-active'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const forgeProgress = document.getElementById('forge-progress'); |
|
|
let progress = 0; |
|
|
|
|
|
const forgeInterval = setInterval(() => { |
|
|
progress += 5; |
|
|
forgeProgress.style.width = `${progress}%`; |
|
|
|
|
|
if (progress === 100) { |
|
|
clearInterval(forgeInterval); |
|
|
|
|
|
|
|
|
for (let i = 0; i < 25; i++) { |
|
|
createParticle(); |
|
|
} |
|
|
} |
|
|
}, 100); |
|
|
|
|
|
function createParticle() { |
|
|
const particle = document.createElement('div'); |
|
|
particle.classList.add('forge-particle'); |
|
|
|
|
|
const size = Math.random() * 12 + 6; |
|
|
particle.style.width = `${size}px`; |
|
|
particle.style.height = `${size}px`; |
|
|
|
|
|
const forgeElement = document.querySelector('.forge-animation'); |
|
|
const forgeRect = forgeElement.getBoundingClientRect(); |
|
|
|
|
|
particle.style.left = `${forgeRect.left + forgeRect.width}px`; |
|
|
particle.style.top = `${forgeRect.top + forgeRect.height / 2}px`; |
|
|
|
|
|
document.body.appendChild(particle); |
|
|
|
|
|
anime({ |
|
|
targets: particle, |
|
|
translateX: Math.random() * 600 - 300, |
|
|
translateY: Math.random() * 400 - 200, |
|
|
opacity: [0, 0.8, 0], |
|
|
scale: [0, 1, 0], |
|
|
duration: Math.random() * 1500 + 1000, |
|
|
easing: 'easeOutExpo', |
|
|
complete: () => { |
|
|
particle.remove(); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
const aiInput = document.getElementById('ai-input'); |
|
|
const aiOutput = document.getElementById('ai-output'); |
|
|
const aiTransformBtn = document.getElementById('ai-transform-btn'); |
|
|
const copyOutputBtn = document.getElementById('copy-output'); |
|
|
const resetDemoBtn = document.getElementById('reset-demo'); |
|
|
|
|
|
const enhancements = [ |
|
|
"This could be optimized with predictive analytics to anticipate user needs and create more personalized experiences.", |
|
|
"Consider implementing natural language processing for more intuitive interactions and better user engagement.", |
|
|
"A machine learning model could personalize this experience based on user behavior patterns and preferences.", |
|
|
"Computer vision capabilities could enhance the visual aspects of this concept and provide additional context.", |
|
|
"This idea would benefit from our AI-powered data analysis for deeper insights and more informed decision-making.", |
|
|
"Integrating reinforcement learning could help optimize processes and outcomes based on continuous feedback.", |
|
|
"Adding generative AI capabilities could create unique content and variations that enhance the overall experience." |
|
|
]; |
|
|
|
|
|
aiTransformBtn.addEventListener('click', () => { |
|
|
const text = aiInput.value.trim(); |
|
|
|
|
|
if (!text) { |
|
|
aiOutput.textContent = "Please enter some text to transform. We're excited to see what ideas you have!"; |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
aiOutput.innerHTML = '<div class="flex items-center justify-center"><div class="animate-spin rounded-full h-6 w-6 border-b-2 border-innovation-orange"></div><span class="ml-3">Processing with AI...</span></div>'; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
const randomEnhancement = enhancements[Math.floor(Math.random() * enhancements.length)]; |
|
|
aiOutput.innerHTML = `<p class="text-primary-dark/90 mb-4 leading-relaxed">${text}</p><div class="bg-innovation-orange/10 p-4 rounded-lg border-l-4 border-innovation-orange"><p class="text-innovation-orange font-medium">AI Enhancement:</p><p class="text-primary-dark/90 mt-2">${randomEnhancement}</p></div>`; |
|
|
}, 2000); |
|
|
}); |
|
|
|
|
|
copyOutputBtn.addEventListener('click', () => { |
|
|
const textToCopy = aiOutput.textContent; |
|
|
navigator.clipboard.writeText(textToCopy).then(() => { |
|
|
|
|
|
const originalText = copyOutputBtn.innerHTML; |
|
|
copyOutputBtn.innerHTML = '<i data-feather="check" class="w-5 h-5 mr-2"></i> Copied!'; |
|
|
copyOutputBtn.classList.add('text-green-600'); |
|
|
|
|
|
setTimeout(() => { |
|
|
copyOutputBtn.innerHTML = originalText; |
|
|
copyOutputBtn.classList.remove('text-green-600'); |
|
|
feather.replace(); |
|
|
}, 2000); |
|
|
}); |
|
|
}); |
|
|
|
|
|
resetDemoBtn.addEventListener('click', () => { |
|
|
aiInput.value = ''; |
|
|
aiOutput.innerHTML = '<p class="text-primary-dark/90 leading-relaxed">Your enhanced text will appear here. Our AI analyzes your input and provides innovative suggestions to elevate your concept.</p>'; |
|
|
}); |
|
|
|
|
|
|
|
|
const darkModeToggle = document.getElementById('dark-mode-toggle'); |
|
|
const darkModeIcon = darkModeToggle.querySelector('i'); |
|
|
|
|
|
darkModeToggle.addEventListener('click', () => { |
|
|
document.body.classList.toggle('dark-mode'); |
|
|
|
|
|
if (document.body.classList.contains('dark-mode')) { |
|
|
darkModeIcon.setAttribute('data-feather', 'sun'); |
|
|
VANTA.GLOBE({ |
|
|
el: "#vanta-background", |
|
|
mouseControls: true, |
|
|
touchControls: true, |
|
|
gyroControls: false, |
|
|
minHeight: 200.00, |
|
|
minWidth: 200.00, |
|
|
scale: 1.00, |
|
|
scaleMobile: 1.00, |
|
|
color: 0x74a892, |
|
|
backgroundColor: 0x004343, |
|
|
size: 0.8, |
|
|
speed: 1.5 |
|
|
}); |
|
|
} else { |
|
|
darkModeIcon.setAttribute('data-feather', 'moon'); |
|
|
VANTA.GLOBE({ |
|
|
el: "#vanta-background", |
|
|
mouseControls: true, |
|
|
touchControls: true, |
|
|
gyroControls: false, |
|
|
minHeight: 200.00, |
|
|
minWidth: 200.00, |
|
|
scale: 1.00, |
|
|
scaleMobile: 1.00, |
|
|
color: 0xc7522a, |
|
|
backgroundColor: 0xf0daa5, |
|
|
size: 0.8, |
|
|
speed: 1.5 |
|
|
}); |
|
|
} |
|
|
|
|
|
feather.replace(); |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('scroll', () => { |
|
|
const scrolled = window.pageYOffset; |
|
|
const rate = scrolled * -0.5; |
|
|
document.querySelector('.floating-element').style.transform = `translateY(${rate}px)`; |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
