335 lines
20 KiB
HTML
335 lines
20 KiB
HTML
<!doctype html>
|
|
<html lang="en" class="scroll-smooth">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>The Organic Atelier | Master Biophilic Interior Design</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--color-sage: #5F6F52;
|
|
--color-sand: #F8F5F2;
|
|
--color-terracotta: #A98467;
|
|
--color-charcoal: #2D2D2D;
|
|
}
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background-color: var(--color-sand);
|
|
color: var(--color-charcoal);
|
|
}
|
|
h1, h2, h3, .serif {
|
|
font-family: 'Playfair Display', serif;
|
|
}
|
|
.reveal {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
|
|
}
|
|
.reveal.active {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
.nav-blur {
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
}
|
|
.btn-primary {
|
|
background-color: var(--color-sage);
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
.btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 20px -5px rgba(95, 111, 82, 0.3);
|
|
}
|
|
.card-hover {
|
|
transition: all 0.4s ease;
|
|
}
|
|
.card-hover:hover {
|
|
transform: translateY(-8px);
|
|
background-color: white;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="antialiased">
|
|
|
|
<!-- Navigation -->
|
|
<nav class="fixed w-full z-50 nav-blur border-b border-stone-200/50 bg-white/70">
|
|
<div class="max-w-7xl mx-auto px-6 sm:px-8 lg:px-12">
|
|
<div class="flex justify-between items-center h-20">
|
|
<div class="flex items-center space-x-2">
|
|
<div class="w-8 h-8 bg-[#5F6F52] rounded-full"></div>
|
|
<span class="serif text-xl font-bold tracking-tight">The Organic Atelier</span>
|
|
</div>
|
|
<div class="hidden md:flex space-x-10 text-sm font-medium tracking-wide uppercase">
|
|
<a href="#curriculum" class="hover:text-[#A98467] transition-colors">Curriculum</a>
|
|
<a href="#philosophy" class="hover:text-[#A98467] transition-colors">Philosophy</a>
|
|
<a href="#pricing" class="hover:text-[#A98467] transition-colors">Pricing</a>
|
|
</div>
|
|
<div>
|
|
<a href="#pricing" class="inline-block px-6 py-2.5 border border-[#2D2D2D] text-sm font-semibold hover:bg-[#2D2D2D] hover:text-white transition-all duration-300">
|
|
Enroll Now
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden">
|
|
<div class="max-w-7xl mx-auto px-6 sm:px-8 lg:px-12">
|
|
<div class="grid lg:grid-cols-2 gap-16 items-center">
|
|
<div class="reveal">
|
|
<span class="inline-block px-4 py-1.5 mb-6 text-xs font-semibold tracking-widest uppercase bg-[#5F6F52]/10 text-[#5F6F52] rounded-full">
|
|
New Masterclass: Spring Edition
|
|
</span>
|
|
<h1 class="text-5xl md:text-7xl leading-[1.1] mb-8">
|
|
Crafting <span class="italic">tranquility</span> through natural design.
|
|
</h1>
|
|
<p class="text-lg md:text-xl text-stone-600 mb-10 leading-relaxed max-w-lg">
|
|
A comprehensive guide to biophilic aesthetics. Learn to curate spaces that harmonize with the natural world using organic textures and light.
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row gap-4">
|
|
<a href="#pricing" class="btn-primary text-white px-10 py-5 text-center font-medium text-lg">
|
|
Start Learning Today
|
|
</a>
|
|
<div class="flex items-center gap-4 px-6 py-3">
|
|
<div class="flex -space-x-2">
|
|
<div class="w-8 h-8 rounded-full bg-stone-300 border-2 border-white"></div>
|
|
<div class="w-8 h-8 rounded-full bg-stone-400 border-2 border-white"></div>
|
|
<div class="w-8 h-8 rounded-full bg-stone-500 border-2 border-white"></div>
|
|
</div>
|
|
<span class="text-sm text-stone-500 font-medium">+2,400 students</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="relative reveal" style="transition-delay: 200ms;">
|
|
<div class="aspect-[4/5] rounded-2xl overflow-hidden shadow-2xl">
|
|
<img src="https://images.pexels.com/photos/17057041/pexels-photo-17057041.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200" alt="Spacious modern interior featuring brick walls with greenery and wooden table." class="w-full h-full object-cover" />
|
|
</div>
|
|
<div class="absolute -bottom-6 -left-6 bg-white p-6 shadow-xl rounded-xl max-w-[240px] hidden md:block">
|
|
<p class="serif text-lg leading-tight mb-2">"Life-changing perspective on my home."</p>
|
|
<p class="text-xs text-stone-400 uppercase tracking-widest">— Elena R.</p>
|
|
</div>
|
|
<a href="https://www.pexels.com/photo/wooden-decorations-and-plants-in-a-modern-interior-17057041/" class="absolute bottom-4 right-4 text-[10px] text-white/60 hover:text-white transition-colors">
|
|
Photo by Matheus Bertelli on Pexels
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Philosophy Section -->
|
|
<section id="philosophy" class="py-24 bg-[#F0EDE9]">
|
|
<div class="max-w-7xl mx-auto px-6 sm:px-8 lg:px-12 text-center">
|
|
<div class="max-w-3xl mx-auto reveal">
|
|
<h2 class="text-3xl md:text-5xl mb-8">Design shouldn't fight nature; it should invite it in.</h2>
|
|
<p class="text-lg text-stone-600 leading-relaxed">
|
|
We live in a world of synthetic surfaces and harsh artificial lighting. The Organic Atelier was born from the belief that our homes should be sanctuaries—spaces that lower our heart rate and reconnect us to the rhythms of the Earth.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-3 gap-12 mt-24 reveal">
|
|
<div class="space-y-4">
|
|
<div class="w-12 h-12 mx-auto bg-[#A98467]/10 rounded-full flex items-center justify-center text-[#A98467]">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl font-semibold">Material Integrity</h3>
|
|
<p class="text-stone-500 text-sm leading-relaxed">Understanding the tactile properties of linen, stone, reclaimed wood, and clay.</p>
|
|
</div>
|
|
<div class="space-y-4">
|
|
<div class="w-12 h-12 mx-auto bg-[#5F6F52]/10 rounded-full flex items-center justify-center text-[#5F6F52]">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364-6.364l-.707.707M6.343 17.657l-.707.707m12.728 0l-.707-.707M6.343 6.343l-.707-.707M12 8a4 4 0 110 8 4 4 0 010-8z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl font-semibold">Luminous Flow</h3>
|
|
<p class="text-stone-500 text-sm leading-relaxed">Mastering the art of natural light and shadow to define mood and depth.</p>
|
|
</div>
|
|
<div class="space-y-4">
|
|
<div class="w-12 h-12 mx-auto bg-[#A98467]/10 rounded-full flex items-center justify-center text-[#A98467]">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L17 16.34a4.5 4.5 0 002.828 0 4.5 4.5 0 000-6.364L7 2.343a4.5 4.5 0 00-6.364 0z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl font-semibold">Sustainable Sourcing</h3>
|
|
<p class="text-stone-500 text-sm leading-relaxed">Curating ethically produced pieces that age beautifully and respect the planet.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Curriculum Section -->
|
|
<section id="curriculum" class="py-24">
|
|
<div class="max-w-7xl mx-auto px-6 sm:px-8 lg:px-12">
|
|
<div class="flex flex-col md:flex-row md:items-end justify-between mb-16 gap-6">
|
|
<div class="max-w-2xl">
|
|
<h2 class="text-4xl md:text-5xl mb-6">The Curriculum</h2>
|
|
<p class="text-lg text-stone-500">Everything you need to move from amateur decorator to conscious interior curator.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-2 gap-8">
|
|
<!-- Module 1 -->
|
|
<div class="reveal bg-white p-8 border border-stone-100 card-hover group">
|
|
<div class="flex justify-between items-start mb-6">
|
|
<span class="text-xs font-bold tracking-widest text-[#A98467] uppercase">Module 01</span>
|
|
<span class="text-xs text-stone-400">4 Videos • 2 PDFs</span>
|
|
</div>
|
|
<h3 class="text-2xl mb-4 group-hover:text-[#5F6F52] transition-colors">Foundation of Texture</h3>
|
|
<p class="text-stone-500 mb-6">Learn why touch is the most overlooked element of design. We explore linen, stone, and wood layering.</p>
|
|
<ul class="space-y-2 text-sm text-stone-600">
|
|
<li class="flex items-center"><span class="w-1.5 h-1.5 bg-[#A98467] rounded-full mr-3"></span>Tactile layering techniques</li>
|
|
<li class="flex items-center"><span class="w-1.5 h-1.5 bg-[#A98467] rounded-full mr-3"></span>The psychology of soft vs. hard surfaces</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Module 2 -->
|
|
<div class="reveal bg-white p-8 border border-stone-100 card-hover group" style="transition-delay: 100ms;">
|
|
<div class="flex justify-between items-start mb-6">
|
|
<span class="text-xs font-bold tracking-widest text-[#A98467] uppercase">Module 02</span>
|
|
<span class="text-xs text-stone-400">5 Videos • 1 Guide</span>
|
|
</div>
|
|
<h3 class="text-2xl mb-4 group-hover:text-[#5F6F52] transition-colors">Atmospheric Light</h3>
|
|
<p class="text-stone-500 mb-6">Moving beyond overhead lights. Learn to use shadows and golden hour to create depth.</p>
|
|
<ul class="space-y-2 text-sm text-stone-600">
|
|
<li class="flex items-center"><span class="w-1.5 h-1.5 bg-[#A98467] rounded-full mr-3"></span>Directional lighting theory</li>
|
|
<li class="flex items-center"><span class="w-1.5 h-1.5 bg-[#A98467] rounded-full mr-3"></span>The role of candle and lamp placement</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Module 3 -->
|
|
<div class="reveal bg-white p-8 border border-stone-100 card-hover group" style="transition-delay: 200ms;">
|
|
<div class="flex justify-between items-start mb-6">
|
|
<span class="text-xs font-bold tracking-widest text-[#A98467] uppercase">Module 03</span>
|
|
<span class="text-xs text-stone-400">3 Videos • 3 Case Studies</span>
|
|
</div>
|
|
<h3 class="text-2xl mb-4 group-hover:text-[#5F6F52] transition-colors">The Sourcing List</h3>
|
|
<p class="text-stone-500 mb-6">A curated directory of sustainable makers, woodworkers, and textile artisans.</p>
|
|
<ul class="space-y-2 text-sm text-stone-600">
|
|
<li class="flex items-center"><span class="w-1.5 h-1.5 bg-[#A98467] rounded-full mr-3"></span>Identifying high-quality natural materials</li>
|
|
<li class="flex items-center"><span class="w-1.5 h-1.5 bg-[#A98467] rounded-full mr-3"></span>Ethical sourcing guide for beginners</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Module 4 -->
|
|
<div class="reveal bg-white p-8 border border-stone-100 card-hover group" style="transition-delay: 300ms;">
|
|
<div class="flex justify-between items-start mb-6">
|
|
<span class="text-xs font-bold tracking-widest text-[#A98467] uppercase">Module 04</span>
|
|
<span class="text-xs text-stone-400">6 Videos • Final Project</span>
|
|
</div>
|
|
<h3 class="text-2xl mb-4 group-hover:text-[#5F6F52] transition-colors">Biophilic Layouts</h3>
|
|
<p class="text-stone-500 mb-6">How to arrange furniture to encourage movement, air circulation, and organic flow.</p>
|
|
<ul class="space-y-2 text-sm text-stone-600">
|
|
<li class="flex items-center"><span class="w-1.5 h-1.5 bg-[#A98467] rounded-full mr-3"></span>Circulation and spatial psychology</li>
|
|
<li class="flex items-center"><span class="w-1.5 h-1.5 bg-[#A98467] rounded-full mr-3"></span>Integrating living plants into structure</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Pricing Section -->
|
|
<section id="pricing" class="py-24 bg-white">
|
|
<div class="max-w-4xl mx-auto px-6 sm:px-8 lg:px-12">
|
|
<div class="text-center mb-16 reveal">
|
|
<h2 class="text-4xl md:text-5xl mb-4">Start your journey</h2>
|
|
<p class="text-stone-500">Lifetime access. Self-paced learning. Community support.</p>
|
|
</div>
|
|
|
|
<div class="reveal bg-[#F8F5F2] border border-stone-200 p-8 md:p-16 rounded-3xl relative overflow-hidden">
|
|
<div class="absolute top-0 right-0 w-64 h-64 bg-[#5F6F52]/5 rounded-full -mr-32 -mt-32"></div>
|
|
|
|
<div class="grid md:grid-cols-2 gap-12 items-center relative z-10">
|
|
<div>
|
|
<h3 class="text-3xl mb-4">The Full Masterclass</h3>
|
|
<p class="text-stone-500 mb-8 text-lg">Everything you need to design professional-grade organic spaces.</p>
|
|
<ul class="space-y-4 mb-8">
|
|
<li class="flex items-center text-sm">
|
|
<svg class="w-5 h-5 text-[#5F6F52] mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
|
24 High-Definition Video Lessons
|
|
</li>
|
|
<li class="flex items-center text-sm">
|
|
<svg class="w-5 h-5 text-[#5F6F52] mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
|
Downloadable Resource Library
|
|
</li>
|
|
<li class="flex items-center text-sm">
|
|
<svg class="w-5 h-5 text-[#5F6F52] mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
|
Private Community Access
|
|
</li>
|
|
<li class="flex items-center text-sm">
|
|
<svg class="w-5 h-5 text-[#5F6F52] mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
|
Certificate of Completion
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="text-center bg-white p-10 rounded-2xl shadow-xl">
|
|
<p class="text-stone-400 text-sm uppercase tracking-widest mb-4">One-time payment</p>
|
|
<div class="text-6xl font-bold mb-6">$299</div>
|
|
<a href="#" class="block w-full btn-primary text-white py-4 rounded-lg font-semibold text-lg mb-4">
|
|
Enroll Now
|
|
</a>
|
|
<p class="text-xs text-stone-400">30-day money back guarantee</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="py-12 border-t border-stone-200">
|
|
<div class="max-w-7xl mx-auto px-6 sm:px-8 lg:px-12 flex flex-col md:flex-row justify-between items-center">
|
|
<div class="flex items-center space-x-2 mb-6 md:mb-0">
|
|
<div class="w-6 h-6 bg-[#5F6F52] rounded-full"></div>
|
|
<span class="serif text-lg font-bold">The Organic Atelier</span>
|
|
</div>
|
|
<div class="flex space-x-8 text-sm text-stone-500">
|
|
<a href="#" class="hover:text-[#A98467]">Instagram</a>
|
|
<a href="#" class="hover:text-[#A98467]">Pinterest</a>
|
|
<a href="#" class="hover:text-[#A98467]">Terms</a>
|
|
<a href="#" class="hover:text-[#A98467]">Privacy</a>
|
|
</div>
|
|
<p class="mt-6 md:mt-0 text-xs text-stone-400">
|
|
© 2024 The Organic Atelier. All rights reserved.
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// Intersection Observer for reveal animations
|
|
const observerOptions = {
|
|
threshold: 0.1,
|
|
rootMargin: '0px 0px -50px 0px'
|
|
};
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('active');
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
document.querySelectorAll('.reveal').forEach(el => {
|
|
observer.observe(el);
|
|
});
|
|
|
|
// Smooth scroll for all links
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
const target = document.querySelector(this.getAttribute('href'));
|
|
if (target) {
|
|
target.scrollIntoView({
|
|
behavior: 'smooth'
|
|
});
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
<div style="position:fixed;right:12px;bottom:12px;z-index:2147483647;background:rgba(17,24,39,.92);color:#fff;padding:8px 10px;border-radius:10px;font:12px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;box-shadow:0 8px 20px rgba(0,0,0,.28)">Generated in 57.13s<br>Model: unsloth/gemma-4-26B-A4B-it-qat-GGUF:Q4_K_XL</div></body>
|
|
</html> |