Hugging Face's logo

Spaces:
ChimpDann
/
braindump
Running

App Files Community
braindump / index.html
ChimpDann's picture
ChimpDann
Add 2 files
b401332 verified
raw
history blame contribute delete
45.6 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>FOCVS | The Art of Sustained Attention</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=EB+Garamond:wght@400;500;600;700&display=swap');
body {
 font-family: 'Cormorant Garamond', serif;
 background-color: #f8f5f0;
 color: #333;
 scroll-behavior: smooth;
 overflow-x: hidden;
 }
.serif {
 font-family: 'EB Garamond', serif;
 }
.gold-text {
 color: #9c8c5a;
 }
.border-gold {
 border-color: #9c8c5a;
 }
/* Enhanced background patterns */
 .bg-ivory {
 background-color: #f8f5f0;
 background-image:
linear-gradient(rgba(156,140,90,0.03) 1px, transparent 1px),
 linear-gradient(90deg, rgba(156,140,90,0.03) 1px, transparent 1px);
 background-size: 30px 30px;
 }
.bg-parchment {
 background-color: #f0e8d5;
 background-image:
radial-gradient(circle, rgba(156,140,90,0.05) 1px, transparent 1px),
 radial-gradient(circle, rgba(156,140,90,0.05) 1px, transparent 1px);
 background-size: 40px 40px;
 background-position: 0 0, 20px 20px;
 }
.bg-velvet {
 background-color: #1a1712;
 }
.hover-gold:hover {
 color: #9c8c5a;
 }
.section-divider {
 height: 1px;
 background: linear-gradient(90deg, rgba(156,140,90,0) 0%, rgba(156,140,90,0.5) 50%, rgba(156,140,90,0) 100%);
 }
.book-container {
 perspective: 2000px;
 position: relative;
 height: 400px;
 }
.leather-book {
 position: absolute;
 width: 280px;
 height: 420px;
 background: linear-gradient(145deg, #3a2e1a 0%, #2a2418 100%);
 border-radius: 4px 16px 16px 4px;
 box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.2),
 inset 5px 0 15px rgba(156, 140, 90, 0.1);
 transform-style: preserve-3d;
 transform: rotateY(-20deg);
 transition: all 1.5s ease;
 border-left: 1px solid rgba(156, 140, 90, 0.3);
 overflow: hidden;
 }
.leather-book:hover {
 transform: rotateY(-5deg);
 }
.book-spine {
 position: absolute;
 left: 0;
 top: 0;
 width: 25px;
 height: 100%;
 background: linear-gradient(90deg, #2a2418 0%, #3a2e1a 100%);
 transform: rotateY(90deg) translateX(-12.5px);
 border-radius: 4px 0 0 4px;
 box-shadow: inset -5px 0 10px rgba(0, 0, 0, 0.3);
 }
.book-title {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%) rotate(90deg);
 font-family: 'EB Garamond', serif;
 font-size: 1.5rem;
 font-weight: 600;
 color: #9c8c5a;
 letter-spacing: 2px;
 text-transform: uppercase;
 writing-mode: vertical-rl;
 text-orientation: mixed;
 height: 250px;
 display: flex;
 align-items: center;
 }
.book-cover {
 position: absolute;
 width: 100%;
 height: 100%;
 background: linear-gradient(145deg, #3a2e1a 0%, #2a2418 100%);
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 padding: 1.5rem;
 box-sizing: border-box;
 }
.book-emboss {
 position: absolute;
 width: 100%;
 height: 100%;
 background-image:
linear-gradient(45deg, rgba(156,140,90,0.05) 25%, transparent 25%),
 linear-gradient(-45deg, rgba(156,140,90,0.05) 25%, transparent 25%),
 linear-gradient(45deg, transparent 75%, rgba(156,140,90,0.05) 75%),
 linear-gradient(-45deg, transparent 75%, rgba(156,140,90,0.05) 75%);
 background-size: 20px 20px;
 background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
 opacity: 0.8;
 }
.book-crest {
 width: 100px;
 height: 100px;
 background: radial-gradient(circle, rgba(156,140,90,0.1) 0%, transparent 70%);
 border: 1px solid rgba(156,140,90,0.2);
 border-radius: 50%;
 display: flex;
 justify-content: center;
 align-items: center;
 margin-bottom: 1.5rem;
 }
.book-crest-inner {
 width: 80px;
 height: 80px;
 border: 1px solid rgba(156,140,90,0.3);
 border-radius: 50%;
 display: flex;
 justify-content: center;
 align-items: center;
 font-family: 'EB Garamond', serif;
 font-size: 2.5rem;
 color: rgba(156,140,90,0.5);
 }
.testimonial-card {
 background: #f0e8d5;
 border-left: 2px solid #9c8c5a;
 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
 }
.feature-icon {
 width: 50px;
 height: 50px;
 border: 1px solid #9c8c5a;
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: 50%;
 background: #f8f5f0;
 }
.old-paper {
 background-color: #f5f0e6;
 background-image:
linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
 linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
 background-size: 20px 20px;
 color: #333;
 }
@keyframes float {
 0% { transform: translateY(0px); }
 50% { transform: translateY(-10px); }
 100% { transform: translateY(0px); }
 }
.floating {
 animation: float 6s ease-in-out infinite;
 }
.nav-border {
 border-bottom: 1px solid rgba(156, 140, 90, 0.2);
 }
.pricing-card {
 background: #f8f5f0;
 border: 1px solid rgba(156, 140, 90, 0.3);
 transition: all 0.3s ease;
 position: relative;
 overflow: hidden;
 }
.pricing-card:hover {
 border-color: #9c8c5a;
 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
 }
.pricing-card-featured {
 background: #f0e8d5;
 border: 1px solid #9c8c5a;
 position: relative;
 overflow: hidden;
 }
.pricing-card-featured::before {
 content: "";
 position: absolute;
 top: 0;
 right: 0;
 width: 0;
 height: 0;
 border-style: solid;
 border-width: 0 50px 50px 0;
 border-color: transparent #9c8c5a transparent transparent;
 }
.pricing-card-featured::after {
 content: "Premium";
 position: absolute;
 top: 6px;
 right: 6px;
 font-size: 9px;
 font-weight: bold;
 color: #f8f5f0;
 transform: rotate(45deg);
 transform-origin: 0 0;
 }
.btn-gold {
 background: transparent;
 border: 1px solid #9c8c5a;
 color: #9c8c5a;
 transition: all 0.3s ease;
 }
.btn-gold:hover {
 background: #9c8c5a;
 color: #f8f5f0;
 }
.btn-gold-solid {
 background: #9c8c5a;
 border: 1px solid #9c8c5a;
 color: #f8f5f0;
 transition: all 0.3s ease;
 }
.btn-gold-solid:hover {
 background: #8a7b4d;
 border-color: #8a7b4d;
 }
.footer-border {
 border-top: 1px solid rgba(156, 140, 90, 0.2);
 }
.text-muted {
 color: #7a7a7a;
 }
/* Enhanced decorative elements */
 .geometric-pattern {
 position: absolute;
 width: 100%;
 height: 100%;
 background-image:
radial-gradient(circle, rgba(156,140,90,0.05) 1px, transparent 1px),
 radial-gradient(circle, rgba(156,140,90,0.05) 1px, transparent 1px);
 background-size: 30px 30px;
 background-position: 0 0, 15px 15px;
 opacity: 0.5;
 pointer-events: none;
 }
.ancient-schematic {
 position: absolute;
 width: 150px;
 height: 150px;
 background-image: url('data:image/svg+xml;utf8,<svg width="150" height="150" viewBox="0 0 150 150" xmlns="http://www.w3.org/2000/svg"><rect x="30" y="30" width="90" height="90" fill="none" stroke="rgba(156,140,90,0.15)" stroke-width="1"/><line x1="30" y1="30" x2="120" y2="120" stroke="rgba(156,140,90,0.15)" stroke-width="1"/><line x1="120" y1="30" x2="30" y2="120" stroke="rgba(156,140,90,0.15)" stroke-width="1"/><circle cx="75" cy="75" r="30" fill="none" stroke="rgba(156,140,90,0.15)" stroke-width="1"/></svg>');
 pointer-events: none;
 }
.philosophy-diagram {
 position: absolute;
 width: 120px;
 height: 120px;
 background-image: url('data:image/svg+xml;utf8,<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"><path d="M60,20 L100,100 L20,100 Z" fill="none" stroke="rgba(156,140,90,0.15)" stroke-width="1"/><circle cx="60" cy="60" r="25" fill="none" stroke="rgba(156,140,90,0.15)" stroke-width="1"/></svg>');
 pointer-events: none;
 }
.parallax-element {
 position: absolute;
 will-change: transform;
 }
/* Section decorative backgrounds */
 .hero-decoration {
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 pointer-events: none;
 overflow: hidden;
 z-index: 0;
 }
.section-decoration {
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 pointer-events: none;
 overflow: hidden;
 z-index: 0;
 }
.content-wrapper {
 position: relative;
 z-index: 10;
 }
/* Fancy underline for headings */
 .fancy-underline {
 position: relative;
 display: inline-block;
 }
.fancy-underline::after {
 content: '';
 position: absolute;
 bottom: -6px;
 left: 0;
 width: 100%;
 height: 1px;
 background: linear-gradient(90deg, rgba(156,140,90,0) 0%, #9c8c5a 50%, rgba(156,140,90,0) 100%);
 }
/* Pricing card embellishments */
 .pricing-ornament {
 position: absolute;
 width: 30px;
 height: 30px;
 background-image: url('data:image/svg+xml;utf8,<svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"><path d="M15,0 Q22.5,7.5 15,15 Q7.5,22.5 15,30 Q22.5,22.5 15,15 Q7.5,7.5 15,0" fill="none" stroke="rgba(156,140,90,0.2)" stroke-width="0.8"/></svg>');
 opacity: 0.6;
 }
/* Mobile responsiveness improvements */
 @media (max-width: 768px) {
 .book-container {
 height: 300px;
 margin-top: 2rem;
 }
.leather-book {
 width: 200px;
 height: 300px;
 }
.book-title {
 font-size: 1.2rem;
 height: 180px;
 }
.book-crest {
 width: 70px;
 height: 70px;
 margin-bottom: 1rem;
 }
.book-crest-inner {
 width: 60px;
 height: 60px;
 font-size: 2rem;
 }
.hero-decoration, .section-decoration {
 display: none;
 }
.content-wrapper {
 padding-top: 2rem;
 padding-bottom: 2rem;
 }
.section-divider {
 margin: 1rem auto;
 }
.pricing-card, .pricing-card-featured {
 padding: 1.5rem;
 }
.pricing-card-featured::before {
 border-width: 0 40px 40px 0;
 }
.pricing-card-featured::after {
 top: 5px;
 right: 5px;
 font-size: 8px;
 }
 }
 </style>
</head>
<body class="antialiased">
 <!-- Navigation -->
 <nav class="bg-ivory fixed w-full z-50 py-4 px-6 nav-border">
 <div class="max-w-7xl mx-auto flex justify-between items-center">
 <div class="flex items-center">
 <span class="serif text-2xl font-medium gold-text tracking-wider">FOCVS</span>
 </div>
 <div class="hidden md:flex space-x-8">
 <a href="#about" class="text-gray-700 hover-gold transition duration-300 tracking-wider">THE MANUSCRIPT</a>
 <a href="#contents" class="text-gray-700 hover-gold transition duration-300 tracking-wider">CONTENTS</a>
 <a href="#testimonials" class="text-gray-700 hover-gold transition duration-300 tracking-wider">ENDORSEMENTS</a>
 <a href="#purchase" class="text-gray-700 hover-gold transition duration-300 tracking-wider">ACQUIRE</a>
 </div>
 <div class="md:hidden">
 <button id="menu-toggle" class="text-gray-700 hover:text-gold-500 focus:outline-none">
 <i class="fas fa-bars text-xl"></i>
 </button>
 </div>
 </div>
 <!-- Mobile menu -->
 <div id="mobile-menu" class="hidden md:hidden bg-ivory py-4 px-6 nav-border">
 <div class="flex flex-col space-y-4">
 <a href="#about" class="text-gray-700 hover-gold transition duration-300 tracking-wider">THE MANUSCRIPT</a>
 <a href="#contents" class="text-gray-700 hover-gold transition duration-300 tracking-wider">CONTENTS</a>
 <a href="#testimonials" class="text-gray-700 hover-gold transition duration-300 tracking-wider">ENDORSEMENTS</a>
 <a href="#purchase" class="text-gray-700 hover-gold transition duration-300 tracking-wider">ACQUIRE</a>
 </div>
 </div>
 </nav>
<!-- Hero Section -->
 <section class="min-h-screen flex items-center justify-center pt-20 pb-16 px-6 bg-parchment relative overflow-hidden">
 <div class="hero-decoration">
 <div class="parallax-element ancient-schematic" style="top: 10%; left: 5%;" data-speed="0.1"></div>
 <div class="parallax-element geometric-pattern" style="top: 60%; right: 8%;" data-speed="0.15"></div>
 <div class="parallax-element philosophy-diagram" style="bottom: 15%; left: 10%;" data-speed="0.2"></div>
 </div>
<div class="max-w-7xl mx-auto grid md:grid-cols-2 gap-8 md:gap-16 items-center content-wrapper">
 <div class="space-y-6 md:space-y-8 order-2 md:order-1">
 <span class="text-xs uppercase tracking-widest text-muted letter-spacing-2">A Limited Edition</span>
 <h1 class="serif text-4xl md:text-6xl font-medium leading-tight tracking-tight">
 <span class="gold-text fancy-underline">The Art of</span><br>
 <span class="text-gray-800 fancy-underline">Sustained Attention</span>
 </h1>
 <p class="text-base md:text-lg text-gray-700 max-w-lg leading-relaxed">
 An evidence-based handbook for discerning gentlemen who refuse to let distraction dilute their potential.
Limited to 500 numbered copies worldwide.
 </p>
 <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4 pt-2">
 <a href="#purchase" class="btn-gold px-6 py-2 md:px-8 md:py-3 text-center transition duration-300 font-medium tracking-wider text-sm md:text-base">
 RESERVE YOUR COPY
 </a>
 <a href="#about" class="bg-transparent border border-gray-300 text-gray-700 hover:border-gold-500 hover:text-gold-500 px-6 py-2 md:px-8 md:py-3 text-center transition duration-300 font-medium tracking-wider text-sm md:text-base">
 EXPLORE THE MANUSCRIPT
 </a>
 </div>
 </div>
 <div class="flex justify-center order-1 md:order-2">
 <div class="book-container floating">
 <div class="leather-book">
 <div class="book-spine">
 <div class="book-title">FOCVS</div>
 </div>
 <div class="book-cover">
 <div class="book-emboss"></div>
 <div class="book-crest">
 <div class="book-crest-inner">F</div>
 </div>
 <h2 class="serif text-xl md:text-2xl gold-text text-center mb-2 tracking-wider">FOCVS</h2>
 <div class="h-px w-12 md:w-16 bg-gradient-to-r from-transparent via-gold-500 to-transparent my-2"></div>
 <p class="text-center text-gray-300 text-xs md:text-sm tracking-wider">THE ART OF SUSTAINED ATTENTION</p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- About Section -->
 <section id="about" class="py-16 md:py-24 px-6 bg-ivory relative overflow-hidden">
 <div class="section-decoration">
 <div class="parallax-element ancient-schematic" style="top: 15%; right: 5%; transform: rotate(15deg);" data-speed="0.12"></div>
 <div class="parallax-element geometric-pattern" style="bottom: 20%; left: 8%;" data-speed="0.18"></div>
 </div>
<div class="max-w-5xl mx-auto content-wrapper">
 <div class="text-center mb-12 md:mb-16">
 <span class="text-xs uppercase tracking-widest text-muted">The Manuscript</span>
 <h2 class="serif text-3xl md:text-5xl font-medium mt-3 md:mt-4 mb-4 md:mb-6">Philosophy Meets <span class="gold-text fancy-underline">Practicality</span></h2>
 <div class="section-divider w-24 md:w-32 mx-auto my-4 md:my-6"></div>
 <p class="text-gray-700 max-w-3xl mx-auto leading-relaxed text-sm md:text-base">
 In an age of endless distraction, true focus has become the ultimate competitive advantage.
This handbook distills two millennia of wisdom with modern neuroscience into a practical system for mastering your attention.
 </p>
 </div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12 mt-12 md:mt-16">
 <div class="space-y-3 md:space-y-4 relative">
 <div class="pricing-ornament" style="top: -10px; right: -10px;"></div>
 <div class="feature-icon mx-auto">
 <i class="fas fa-brain gold-text text-lg md:text-xl"></i>
 </div>
 <h3 class="serif text-lg md:text-xl text-center mt-2 md:mt-4 tracking-wider">NEUROSCIENTIFIC FOUNDATIONS</h3>
 <p class="text-gray-600 text-center leading-relaxed text-sm md:text-base">
 Evidence-based techniques that work with your biology, not against it.
 </p>
 </div>
 <div class="space-y-3 md:space-y-4 relative">
 <div class="pricing-ornament" style="top: -10px; left: -10px;"></div>
 <div class="feature-icon mx-auto">
 <i class="fas fa-history gold-text text-lg md:text-xl"></i>
 </div>
 <h3 class="serif text-lg md:text-xl text-center mt-2 md:mt-4 tracking-wider">TIMELESS WISDOM</h3>
 <p class="text-gray-600 text-center leading-relaxed text-sm md:text-base">
 Lessons from Stoic philosophers, Renaissance scholars, and monastic traditions.
 </p>
 </div>
 <div class="space-y-3 md:space-y-4 relative">
 <div class="pricing-ornament" style="bottom: -10px; right: -10px;"></div>
 <div class="feature-icon mx-auto">
 <i class="fas fa-tools gold-text text-lg md:text-xl"></i>
 </div>
 <h3 class="serif text-lg md:text-xl text-center mt-2 md:mt-4 tracking-wider">PRACTICAL FRAMEWORKS</h3>
 <p class="text-gray-600 text-center leading-relaxed text-sm md:text-base">
 Immediately applicable systems for deep work and creative flow.
 </p>
 </div>
 </div>
 </div>
 </section>
<!-- Contents Section -->
 <section id="contents" class="py-16 md:py-24 px-6 bg-parchment relative overflow-hidden">
 <div class="section-decoration">
 <div class="parallax-element philosophy-diagram" style="top: 10%; left: 5%; transform: rotate(-10deg);" data-speed="0.15"></div>
 <div class="parallax-element geometric-pattern" style="bottom: 15%; right: 5%;" data-speed="0.1"></div>
 </div>
<div class="max-w-5xl mx-auto content-wrapper">
 <div class="text-center mb-12 md:mb-16">
 <span class="text-xs uppercase tracking-widest text-muted">Contents</span>
 <h2 class="serif text-3xl md:text-5xl font-medium mt-3 md:mt-4 mb-4 md:mb-6">A <span class="gold-text fancy-underline">Systematic</span> Approach</h2>
 <div class="section-divider w-24 md:w-32 mx-auto my-4 md:my-6"></div>
 </div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 mt-8 md:mt-12">
 <div class="space-y-6 md:space-y-8">
 <div class="flex items-start space-x-3 md:space-x-4">
 <span class="gold-text serif text-lg md:text-xl">I.</span>
 <div>
 <h3 class="serif text-lg md:text-xl mb-1 md:mb-2 tracking-wider">THE ANATOMY OF ATTENTION</h3>
 <p class="text-gray-600 leading-relaxed text-sm md:text-base">
 Understanding the cognitive mechanisms behind focus and distraction.
 </p>
 </div>
 </div>
 <div class="flex items-start space-x-3 md:space-x-4">
 <span class="gold-text serif text-lg md:text-xl">II.</span>
 <div>
 <h3 class="serif text-lg md:text-xl mb-1 md:mb-2 tracking-wider">THE MONASTIC METHOD</h3>
 <p class="text-gray-600 leading-relaxed text-sm md:text-base">
 How medieval scholars achieved unparalleled concentration without modern technology.
 </p>
 </div>
 </div>
 <div class="flex items-start space-x-3 md:space-x-4">
 <span class="gold-text serif text-lg md:text-xl">III.</span>
 <div>
 <h3 class="serif text-lg md:text-xl mb-1 md:mb-2 tracking-wider">THE WARRIOR'S FOCUS</h3>
 <p class="text-gray-600 leading-relaxed text-sm md:text-base">
 Combat-tested techniques for maintaining clarity under pressure.
 </p>
 </div>
 </div>
 </div>
 <div class="space-y-6 md:space-y-8">
 <div class="flex items-start space-x-3 md:space-x-4">
 <span class="gold-text serif text-lg md:text-xl">IV.</span>
 <div>
 <h3 class="serif text-lg md:text-xl mb-1 md:mb-2 tracking-wider">DIGITAL ASCETICISM</h3>
 <p class="text-gray-600 leading-relaxed text-sm md:text-base">
 Reclaiming your attention from the attention economy.
 </p>
 </div>
 </div>
 <div class="flex items-start space-x-3 md:space-x-4">
 <span class="gold-text serif text-lg md:text-xl">V.</span>
 <div>
 <h3 class="serif text-lg md:text-xl mb-1 md:mb-2 tracking-wider">THE FLOW STATE PROTOCOL</h3>
 <p class="text-gray-600 leading-relaxed text-sm md:text-base">
 Engineering optimal conditions for creative and intellectual work.
 </p>
 </div>
 </div>
 <div class="flex items-start space-x-3 md:space-x-4">
 <span class="gold-text serif text-lg md:text-xl">VI.</span>
 <div>
 <h3 class="serif text-lg md:text-xl mb-1 md:mb-2 tracking-wider">THE 30-DAY CRUCIBLE</h3>
 <p class="text-gray-600 leading-relaxed text-sm md:text-base">
 A transformative practice regimen to rebuild your attention span.
 </p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Testimonials -->
 <section id="testimonials" class="py-16 md:py-24 px-6 bg-ivory relative overflow-hidden">
 <div class="section-decoration">
 <div class="parallax-element ancient-schematic" style="top: 20%; right: 10%; transform: rotate(25deg);" data-speed="0.1"></div>
 <div class="parallax-element philosophy-diagram" style="bottom: 15%; left: 10%;" data-speed="0.15"></div>
 </div>
<div class="max-w-5xl mx-auto content-wrapper">
 <div class="text-center mb-12 md:mb-16">
 <span class="text-xs uppercase tracking-widest text-muted">Endorsements</span>
 <h2 class="serif text-3xl md:text-5xl font-medium mt-3 md:mt-4 mb-4 md:mb-6">Praised by <span class="gold-text fancy-underline">Peers</span></h2>
 <div class="section-divider w-24 md:w-32 mx-auto my-4 md:my-6"></div>
 </div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
 <div class="testimonial-card p-6 md:p-8 rounded-lg relative">
 <div class="pricing-ornament" style="top: 8px; right: 8px;"></div>
 <div class="flex items-center mb-4 md:mb-6">
 <div class="w-10 h-10 md:w-12 md:h-12 rounded-full bg-gray-200 mr-3 md:mr-4 flex items-center justify-center gold-text">
 <span class="serif text-lg md:text-xl">MV</span>
 </div>
 <div>
 <h4 class="font-medium tracking-wider text-sm md:text-base">DR. MARCUS VAIL</h4>
 <p class="text-xs md:text-sm text-gray-500 tracking-wider">Cognitive Neuroscientist, Stanford</p>
 </div>
 </div>
 <p class="text-gray-700 italic leading-relaxed text-sm md:text-base">
 "The most comprehensive synthesis of ancient wisdom and modern science on attention I've encountered. Indispensable for anyone serious about cognitive mastery."
 </p>
 </div>
 <div class="testimonial-card p-6 md:p-8 rounded-lg relative">
 <div class="pricing-ornament" style="bottom: 8px; left: 8px;"></div>
 <div class="flex items-center mb-4 md:mb-6">
 <div class="w-10 h-10 md:w-12 md:h-12 rounded-full bg-gray-200 mr-3 md:mr-4 flex items-center justify-center gold-text">
 <span class="serif text-lg md:text-xl">JH</span>
 </div>
 <div>
 <h4 class="font-medium tracking-wider text-sm md:text-base">JAMES HOLLOWAY</h4>
 <p class="text-xs md:text-sm text-gray-500 tracking-wider">CEO, Blackthorn Capital</p>
 </div>
 </div>
 <p class="text-gray-700 italic leading-relaxed text-sm md:text-base">
 "This handbook transformed how I work. My productivity has increased by at least 300% since implementing its protocols. Worth every penny."
 </p>
 </div>
 <div class="testimonial-card p-6 md:p-8 rounded-lg relative">
 <div class="pricing-ornament" style="top: 8px; left: 8px;"></div>
 <div class="flex items-center mb-4 md:mb-6">
 <div class="w-10 h-10 md:w-12 md:h-12 rounded-full bg-gray-200 mr-3 md:mr-4 flex items-center justify-center gold-text">
 <span class="serif text-lg md:text-xl">ES</span>
 </div>
 <div>
 <h4 class="font-medium tracking-wider text-sm md:text-base">PROF. ELENA SOKOLOV</h4>
 <p class="text-xs md:text-sm text-gray-500 tracking-wider">Philosophy Chair, Cambridge</p>
 </div>
 </div>
 <p class="text-gray-700 italic leading-relaxed text-sm md:text-base">
 "A rare work that bridges the gap between theoretical depth and practical application. The Stoics would have approved."
 </p>
 </div>
 <div class="testimonial-card p-6 md:p-8 rounded-lg relative">
 <div class="pricing-ornament" style="bottom: 8px; right: 8px;"></div>
 <div class="flex items-center mb-4 md:mb-6">
 <div class="w-10 h-10 md:w-12 md:h-12 rounded-full bg-gray-200 mr-3 md:mr-4 flex items-center justify-center gold-text">
 <span class="serif text-lg md:text-xl">DM</span>
 </div>
 <div>
 <h4 class="font-medium tracking-wider text-sm md:text-base">DAVID MERCER</h4>
 <p class="text-xs md:text-sm text-gray-500 tracking-wider">Author, "Deep Work Warrior"</p>
 </div>
 </div>
 <p class="text-gray-700 italic leading-relaxed text-sm md:text-base">
 "I thought I knew everything about focus until I read this. The 30-Day Crucible alone is worth the investment."
 </p>
 </div>
 </div>
 </div>
 </section>
<!-- Purchase Section -->
 <section id="purchase" class="py-16 md:py-24 px-6 bg-parchment relative overflow-hidden">
 <div class="section-decoration">
 <div class="parallax-element geometric-pattern" style="top: 10%; left: 5%;" data-speed="0.1"></div>
 <div class="parallax-element ancient-schematic" style="bottom: 15%; right: 5%; transform: rotate(-15deg);" data-speed="0.15"></div>
 </div>
<div class="max-w-5xl mx-auto content-wrapper">
 <div class="text-center mb-12 md:mb-16">
 <span class="text-xs uppercase tracking-widest text-muted">Acquire</span>
 <h2 class="serif text-3xl md:text-5xl font-medium mt-3 md:mt-4 mb-4 md:mb-6">Own This <span class="gold-text fancy-underline">Limited Edition</span></h2>
 <div class="section-divider w-24 md:w-32 mx-auto my-4 md:my-6"></div>
 <p class="text-gray-700 max-w-3xl mx-auto leading-relaxed text-sm md:text-base">
 Only 500 hand-numbered copies will ever be printed. Each volume is bound in premium materials and includes exclusive content not available in digital formats.
 </p>
 </div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8 mt-8 md:mt-12">
 <div class="pricing-card p-6 md:p-8 rounded-lg relative">
 <div class="pricing-ornament" style="top: 8px; right: 8px;"></div>
 <h3 class="serif text-xl md:text-2xl mb-3 md:mb-4 tracking-wider">STANDARD EDITION</h3>
 <p class="gold-text serif text-2xl md:text-3xl mb-4 md:mb-6">$195</p>
 <ul class="space-y-2 md:space-y-3 text-gray-600 mb-6 md:mb-8 text-sm md:text-base">
 <li class="flex items-start">
 <i class="fas fa-check gold-text mr-2 mt-0.5 md:mt-1 text-xs md:text-sm"></i>
 <span>Hand-numbered copy</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check gold-text mr-2 mt-0.5 md:mt-1 text-xs md:text-sm"></i>
 <span>Premium clothbound cover</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check gold-text mr-2 mt-0.5 md:mt-1 text-xs md:text-sm"></i>
 <span>Exclusive companion PDF</span>
 </li>
 </ul>
 <a href="#" class="block text-center btn-gold px-4 py-2 md:px-6 md:py-3 transition duration-300 tracking-wider text-sm md:text-base">
 PURCHASE
 </a>
 </div>
 <div class="pricing-card-featured p-6 md:p-8 rounded-lg relative">
 <div class="pricing-ornament" style="top: 8px; left: 8px;"></div>
 <div class="pricing-ornament" style="bottom: 8px; right: 8px;"></div>
 <h3 class="serif text-xl md:text-2xl mb-3 md:mb-4 tracking-wider">COLLECTOR'S EDITION</h3>
 <p class="gold-text serif text-2xl md:text-3xl mb-4 md:mb-6">$495</p>
 <ul class="space-y-2 md:space-y-3 text-gray-600 mb-6 md:mb-8 text-sm md:text-base">
 <li class="flex items-start">
 <i class="fas fa-check gold-text mr-2 mt-0.5 md:mt-1 text-xs md:text-sm"></i>
 <span>Hand-numbered copy (1-100)</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check gold-text mr-2 mt-0.5 md:mt-1 text-xs md:text-sm"></i>
 <span>Full leather binding</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check gold-text mr-2 mt-0.5 md:mt-1 text-xs md:text-sm"></i>
 <span>Signed by the author</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check gold-text mr-2 mt-0.5 md:mt-1 text-xs md:text-sm"></i>
 <span>Private 1-hour consultation</span>
 </li>
 </ul>
 <a href="#" class="block text-center btn-gold-solid px-4 py-2 md:px-6 md:py-3 transition duration-300 tracking-wider text-sm md:text-base">
 PURCHASE
 </a>
 </div>
 <div class="pricing-card p-6 md:p-8 rounded-lg relative">
 <div class="pricing-ornament" style="bottom: 8px; left: 8px;"></div>
 <h3 class="serif text-xl md:text-2xl mb-3 md:mb-4 tracking-wider">EXECUTIVE BUNDLE</h3>
 <p class="gold-text serif text-2xl md:text-3xl mb-4 md:mb-6">$995</p>
 <ul class="space-y-2 md:space-y-3 text-gray-600 mb-6 md:mb-8 text-sm md:text-base">
 <li class="flex items-start">
 <i class="fas fa-check gold-text mr-2 mt-0.5 md:mt-1 text-xs md:text-sm"></i>
 <span>Two Collector's Editions</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check gold-text mr-2 mt-0.5 md:mt-1 text-xs md:text-sm"></i>
 <span>Custom embossed case</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check gold-text mr-2 mt-0.5 md:mt-1 text-xs md:text-sm"></i>
 <span>Annual membership updates</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check gold-text mr-2 mt-0.5 md:mt-1 text-xs md:text-sm"></i>
 <span>Quarterly strategy sessions</span>
 </li>
 </ul>
 <a href="#" class="block text-center btn-gold px-4 py-2 md:px-6 md:py-3 transition duration-300 tracking-wider text-sm md:text-base">
 PURCHASE
 </a>
 </div>
 </div>
<div class="text-center mt-12 md:mt-16 text-muted text-xs md:text-sm tracking-wider">
 <p>All purchases include a 30-day satisfaction guarantee. Digital companion materials delivered immediately.</p>
 <p class="mt-1 md:mt-2">Remaining copies: 127/500</p>
 </div>
 </div>
 </section>
<!-- Footer -->
 <footer class="bg-ivory py-12 md:py-16 px-6 footer-border">
 <div class="max-w-5xl mx-auto">
 <div class="flex flex-col md:flex-row justify-between items-center">
 <div class="mb-6 md:mb-0">
 <span class="serif text-2xl gold-text tracking-wider">FOCVS</span>
 <p class="text-muted mt-1 md:mt-2 tracking-wider text-sm">THE ART OF SUSTAINED ATTENTION</p>
 </div>
 <div class="flex space-x-4 md:space-x-6">
 <a href="#" class="text-muted hover-gold transition duration-300">
 <i class="fab fa-twitter text-lg"></i>
 </a>
 <a href="#" class="text-muted hover-gold transition duration-300">
 <i class="fab fa-instagram text-lg"></i>
 </a>
 <a href="#" class="text-muted hover-gold transition duration-300">
 <i class="fas fa-envelope text-lg"></i>
 </a>
 </div>
 </div>
 <div class="footer-border mt-8 md:mt-12 pt-6 md:pt-8 flex flex-col md:flex-row justify-between">
 <p class="text-muted text-xs md:text-sm mb-3 md:mb-0 tracking-wider">© 2023 FOCVS PRESS. ALL RIGHTS RESERVED.</p>
 <div class="flex space-x-4 md:space-x-6">
 <a href="#" class="text-muted hover-gold text-xs md:text-sm transition duration-300 tracking-wider">PRIVACY</a>
 <a href="#" class="text-muted hover-gold text-xs md:text-sm transition duration-300 tracking-wider">TERMS</a>
 <a href="#" class="text-muted hover-gold text-xs md:text-sm transition duration-300 tracking-wider">CONTACT</a>
 </div>
 </div>
 </div>
 </footer>
<script>
 // Mobile menu toggle
 document.getElementById('menu-toggle').addEventListener('click', function() {
 const menu = document.getElementById('mobile-menu');
 menu.classList.toggle('hidden');
 });
 // Smooth scrolling for anchor links
 document.querySelectorAll('a[href^="#"]').forEach(anchor => {
 anchor.addEventListener('click', function (e) {
 e.preventDefault();
const targetId = this.getAttribute('href');
 if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
 if (targetElement) {
 // Close mobile menu if open
 const mobileMenu = document.getElementById('mobile-menu');
 mobileMenu.classList.add('hidden');
// Scroll to target
 window.scrollTo({
 top: targetElement.offsetTop - 80,
 behavior: 'smooth'
 });
 }
 });
 });
 // Update remaining copies count periodically to create urgency
 function updateRemainingCopies() {
 const remainingElement = document.querySelector('footer p:last-child');
 if (remainingElement) {
 const currentText = remainingElement.textContent;
 const currentCount = parseInt(currentText.match(/\d+/)[0]);
 if (currentCount > 0) {
 const newCount = currentCount - Math.floor(Math.random() * 3);
 remainingElement.textContent = `Remaining copies: ${Math.max(0, newCount)}/500`;
 }
 }
 }
// Update every 30 seconds
 setInterval(updateRemainingCopies, 30000);
// Parallax effect for decorative elements
 document.addEventListener('mousemove', function(e) {
 const parallaxElements = document.querySelectorAll('.parallax-element');
 const x = e.clientX / window.innerWidth;
 const y = e.clientY / window.innerHeight;
parallaxElements.forEach(element => {
 const speed = parseFloat(element.getAttribute('data-speed'));
 const xMove = x * speed * 100;
 const yMove = y * speed * 100;
element.style.transform = `translate(${xMove}px, ${yMove}px)`;
 });
 });
// Scroll-based animations
 window.addEventListener('scroll', function() {
 const scrollPosition = window.scrollY;
 const heroBook = document.querySelector('.book-container');
if (heroBook) {
 const rotation = scrollPosition * 0.05;
 heroBook.style.transform = `rotateY(${-20 + rotation}deg)`;
 }
// Animate decorative elements on scroll
 const ancientSchematics = document.querySelectorAll('.ancient-schematic');
 ancientSchematics.forEach(schematic => {
 const schematicPosition = schematic.getBoundingClientRect().top;
 const windowHeight = window.innerHeight;
if (schematicPosition < windowHeight) {
 const rotation = (windowHeight - schematicPosition) / windowHeight * 10;
 schematic.style.transform = `rotate(${rotation}deg)`;
 }
 });
 });
 </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ChimpDann/braindump" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>