commit a1347c36ffaaf3b27b475ff753df57372cd854b0
Author: root <root@hub.scroll.pub> Date: 2024-12-27 04:51:51 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..84868ab --- /dev/null +++ b/body.html @@ -0,0 +1,98 @@ +<header> + <nav> + <div class="logo">Kahuna</div> + <button class="mobile-menu" aria-label="Toggle menu"> + <span></span><span></span><span></span> + </button> + <ul class="nav-links"> + <li><a href="#features">Features</a></li> + <li><a href="#how-it-works">How It Works</a></li> + <li><a href="#pricing">Pricing</a></li> + <li><a class="cta-button" href="#demo">Get Demo</a></li> + </ul> + </nav> +</header> + +<main> + <section class="hero"> + <div class="hero-content"> + <h1>Transform Sales Meetings Into Revenue</h1> + <p>AI-powered meeting intelligence that helps your team close more deals</p> + <button class="primary-button">Start Free Trial</button> + </div> + <div class="hero-image"> + <div class="abstract-shape"></div> + </div> + </section> + + <section id="features" class="features"> + <h2>Key Features</h2> + <div class="features-grid"> + <div class="feature-card"> + <div class="icon">📊</div> + <h3>Meeting Analytics</h3> + <p>Track revenue opportunities, objections, and success metrics in real-time</p> + </div> + <div class="feature-card"> + <div class="icon">🤖</div> + <h3>AI Follow-ups</h3> + <p>Automated, personalized re-engagement with unclosed leads</p> + </div> + <div class="feature-card"> + <div class="icon">📈</div> + <h3>Performance Insights</h3> + <p>Real-time feedback and coaching for continuous improvement</p> + </div> + <div class="feature-card"> + <div class="icon">🎯</div> + <h3>Smart Tracking</h3> + <p>Identify patterns and optimize your sales strategy</p> + </div> + </div> + </section> + + <section id="how-it-works" class="how-it-works"> + <h2>How It Works</h2> + <div class="steps"> + <div class="step"> + <div class="step-number">1</div> + <h3>Record Meetings</h3> + <p>Automatically capture and analyze sales conversations</p> + </div> + <div class="step"> + <div class="step-number">2</div> + <h3>Generate Insights</h3> + <p>Get actionable data on performance and opportunities</p> + </div> + <div class="step"> + <div class="step-number">3</div> + <h3>Optimize & Close</h3> + <p>Improve strategies and close more deals</p> + </div> + </div> + </section> +</main> + +<footer> + <div class="footer-content"> + <div class="footer-section"> + <h4>Kahuna</h4> + <p>Smart sales intelligence for modern teams</p> + </div> + <div class="footer-section"> + <h4>Links</h4> + <ul> + <li><a href="#features">Features</a></li> + <li><a href="#pricing">Pricing</a></li> + <li><a href="#demo">Get Demo</a></li> + </ul> + </div> + <div class="footer-section"> + <h4>Contact</h4> + <ul> + <li>hello@kahuna-sales.scroll.pub</li> + <li>1-800-KAHUNA</li> + </ul> + </div> + </div> +</footer> diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..18b4298 --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://kahuna-sales.scroll.pub +metaTags +editButton /edit.html +title Kahuna - AI-Powered Sales Meeting Intelligence +style.css +body.html +script.js diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..f669392 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# kahuna-sales3.scroll.pub +Website generated by Claude from prompt: Website for my saas named Kahuna. Kahuna is a powerful tool designed to help sales teams turn meetings into clear insights and better follow-ups. It records and analyzes every meeting, tracking important metrics like missed revenue, follow-up success rates, and common objections. With this information, sales teams get real-time feedback to improve their strategies and close more deals. Kahuna also uses AI to re-engage unclosed leads, sending personalized messages to move deals forward. By combining smart data tracking, helpful feedback, and AI-driven follow-ups, Kahuna helps sales teams work smarter, close faster, and win more business. Make the colors black and blue \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..073082f --- /dev/null +++ b/script.js @@ -0,0 +1,57 @@ +document.addEventListener('DOMContentLoaded', () => { + // Mobile menu toggle + const mobileMenu = document.querySelector('.mobile-menu'); + const navLinks = document.querySelector('.nav-links'); + + mobileMenu.addEventListener('click', () => { + navLinks.classList.toggle('active'); + const spans = mobileMenu.querySelectorAll('span'); + spans[0].style.transform = navLinks.classList.contains('active') + ? 'rotate(45deg) translate(6px, 6px)' + : 'none'; + spans[1].style.opacity = navLinks.classList.contains('active') + ? '0' + : '1'; + spans[2].style.transform = navLinks.classList.contains('active') + ? 'rotate(-45deg) translate(6px, -6px)' + : 'none'; + }); + + // Smooth scroll for anchor 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', + block: 'start' + }); + // Close mobile menu if open + navLinks.classList.remove('active'); + } + }); + }); + + // Intersection Observer for fade-in animations + const observerOptions = { + threshold: 0.1, + rootMargin: '0px 0px -50px 0px' + }; + + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.style.opacity = '1'; + entry.target.style.transform = 'translateY(0)'; + } + }); + }, observerOptions); + + document.querySelectorAll('.feature-card, .step').forEach(el => { + el.style.opacity = '0'; + el.style.transform = 'translateY(20px)'; + el.style.transition = 'opacity 0.5s ease, transform 0.5s ease'; + observer.observe(el); + }); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..eb4ec4a --- /dev/null +++ b/style.css @@ -0,0 +1,261 @@ +:root { + --primary-color: #0066ff; + --secondary-color: #001933; + --text-color: #333; + --light-bg: #f5f8ff; + --transition: all 0.3s ease; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + line-height: 1.6; + color: var(--text-color); +} + +/* Header & Navigation */ +header { + position: fixed; + width: 100%; + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(10px); + z-index: 1000; + box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1); +} + +nav { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 5%; + max-width: 1200px; + margin: 0 auto; +} + +.logo { + font-size: 1.8rem; + font-weight: 700; + color: var(--secondary-color); +} + +.nav-links { + display: flex; + gap: 2rem; + list-style: none; +} + +.nav-links a { + text-decoration: none; + color: var(--secondary-color); + font-weight: 500; + transition: var(--transition); +} + +.nav-links a:hover { + color: var(--primary-color); +} + +.cta-button { + background: var(--primary-color); + color: white !important; + padding: 0.5rem 1.5rem; + border-radius: 25px; +} + +/* Hero Section */ +.hero { + min-height: 100vh; + display: flex; + align-items: center; + padding: 7rem 5% 5rem; + background: linear-gradient(135deg, #fff 0%, var(--light-bg) 100%); +} + +.hero-content { + flex: 1; + max-width: 600px; +} + +.hero h1 { + font-size: 3.5rem; + line-height: 1.2; + margin-bottom: 1.5rem; + color: var(--secondary-color); +} + +.hero p { + font-size: 1.2rem; + margin-bottom: 2rem; +} + +.primary-button { + background: var(--primary-color); + color: white; + border: none; + padding: 1rem 2rem; + font-size: 1.1rem; + border-radius: 30px; + cursor: pointer; + transition: var(--transition); +} + +.primary-button:hover { + transform: translateY(-2px); + box-shadow: 0 5px 15px rgba(0, 102, 255, 0.3); +} + +/* Features Section */ +.features { + padding: 5rem 5%; + background: white; +} + +.features h2 { + text-align: center; + margin-bottom: 3rem; + color: var(--secondary-color); +} + +.features-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; + max-width: 1200px; + margin: 0 auto; +} + +.feature-card { + padding: 2rem; + border-radius: 15px; + background: white; + box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1); + transition: var(--transition); +} + +.feature-card:hover { + transform: translateY(-5px); +} + +.icon { + font-size: 2rem; + margin-bottom: 1rem; +} + +/* How It Works Section */ +.how-it-works { + padding: 5rem 5%; + background: var(--light-bg); +} + +.steps { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + gap: 2rem; + max-width: 1200px; + margin: 3rem auto 0; +} + +.step { + flex: 1; + min-width: 250px; + text-align: center; +} + +.step-number { + width: 50px; + height: 50px; + line-height: 50px; + border-radius: 50%; + background: var(--primary-color); + color: white; + margin: 0 auto 1rem; + font-weight: bold; +} + +/* Footer */ +footer { + background: var(--secondary-color); + color: white; + padding: 3rem 5%; +} + +.footer-content { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 2rem; + max-width: 1200px; + margin: 0 auto; +} + +.footer-section h4 { + margin-bottom: 1rem; +} + +.footer-section ul { + list-style: none; +} + +.footer-section a { + color: white; + text-decoration: none; + transition: var(--transition); +} + +.footer-section a:hover { + color: var(--primary-color); +} + +/* Mobile Responsiveness */ +.mobile-menu { + display: none; +} + +@media (max-width: 768px) { + .mobile-menu { + display: block; + background: none; + border: none; + cursor: pointer; + } + + .mobile-menu span { + display: block; + width: 25px; + height: 3px; + background: var(--secondary-color); + margin: 5px 0; + transition: var(--transition); + } + + .nav-links { + display: none; + } + + .nav-links.active { + display: flex; + flex-direction: column; + position: absolute; + top: 100%; + left: 0; + right: 0; + background: white; + padding: 1rem; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + } + + .hero { + flex-direction: column; + text-align: center; + padding-top: 5rem; + } + + .hero h1 { + font-size: 2.5rem; + } +}