commit e96543424259dd7582add444fb1f901c6d559c2e Author: bansh-dml Date: Wed Jun 18 10:48:05 2025 +0530 Initial code for the hackerz for founders diff --git a/images/Line.png b/images/Line.png new file mode 100644 index 0000000..fea16be Binary files /dev/null and b/images/Line.png differ diff --git a/images/arrow.png b/images/arrow.png new file mode 100644 index 0000000..79b4559 Binary files /dev/null and b/images/arrow.png differ diff --git a/images/e-commerce.png b/images/e-commerce.png new file mode 100644 index 0000000..8d462cd Binary files /dev/null and b/images/e-commerce.png differ diff --git a/images/game.png b/images/game.png new file mode 100644 index 0000000..81e8e89 Binary files /dev/null and b/images/game.png differ diff --git a/images/icon.png b/images/icon.png new file mode 100644 index 0000000..cf15ba2 Binary files /dev/null and b/images/icon.png differ diff --git a/images/leader1.png b/images/leader1.png new file mode 100644 index 0000000..195417b Binary files /dev/null and b/images/leader1.png differ diff --git a/images/leader2.png b/images/leader2.png new file mode 100644 index 0000000..15f01e8 Binary files /dev/null and b/images/leader2.png differ diff --git a/images/linked-in.png b/images/linked-in.png new file mode 100644 index 0000000..85d8b9d Binary files /dev/null and b/images/linked-in.png differ diff --git a/images/logo.png b/images/logo.png new file mode 100644 index 0000000..c7544d3 Binary files /dev/null and b/images/logo.png differ diff --git a/images/mobile.png b/images/mobile.png new file mode 100644 index 0000000..305102f Binary files /dev/null and b/images/mobile.png differ diff --git a/images/phone-icon.png b/images/phone-icon.png new file mode 100644 index 0000000..692e9a3 Binary files /dev/null and b/images/phone-icon.png differ diff --git a/images/process.png b/images/process.png new file mode 100644 index 0000000..eef7c45 Binary files /dev/null and b/images/process.png differ diff --git a/images/process1.png b/images/process1.png new file mode 100644 index 0000000..e8e6b22 Binary files /dev/null and b/images/process1.png differ diff --git a/images/process2.png b/images/process2.png new file mode 100644 index 0000000..cc272d0 Binary files /dev/null and b/images/process2.png differ diff --git a/images/process3.png b/images/process3.png new file mode 100644 index 0000000..36a1712 Binary files /dev/null and b/images/process3.png differ diff --git a/images/process4.png b/images/process4.png new file mode 100644 index 0000000..9f07947 Binary files /dev/null and b/images/process4.png differ diff --git a/images/process5.png b/images/process5.png new file mode 100644 index 0000000..30cc0f2 Binary files /dev/null and b/images/process5.png differ diff --git a/images/process6.png b/images/process6.png new file mode 100644 index 0000000..eb79856 Binary files /dev/null and b/images/process6.png differ diff --git a/images/saas.png b/images/saas.png new file mode 100644 index 0000000..e8381d0 Binary files /dev/null and b/images/saas.png differ diff --git a/images/tick-icon.png b/images/tick-icon.png new file mode 100644 index 0000000..cae43cb Binary files /dev/null and b/images/tick-icon.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..598b596 --- /dev/null +++ b/index.html @@ -0,0 +1,481 @@ + + + + + + Optimized Responsive Hackerz Website + + + + + + + +
+
+
+ + +
+
+
+ + +
+
+

A Founder's Secret Weapon

+

+ We're your dedicated full-stack engineering partner, ready to build + your ultimate MVP. Whether it is an app, a SaaS Platform or a store, + we deliver what you need for a fixed price. +

+
+
+ + +
+
+
+
+
+
+ + + +
+

Tap to Scratch

+

Discover what we can build for you

+
+
+
+
+

Video placeholder - Interactive content revealed!

+
+
+
+ + +
+
+
+

We Build Anything.

+

+ Brilliant idea, but no tech skills? We empower non-technical + founders by building MVPs that attract investors and launch + startups.Brilliant idea, but no tech skills? We empower + non-technical founders by building MVPs that attract investors and + launch startups. +

+
+ +
+
+
+ E-commerce +
+

E-commerce store

+

+ Full-featured online stores with payment integration, inventory + management, and customer analytics. +

+
+ +
+
+ Mobile App +
+

Mobile App

+

+ Native and cross-platform mobile applications with seamless user + experience and robust functionality. +

+
+ +
+
+ Mobile Game +
+

Mobile Game

+

+ Engaging mobile games with stunning graphics, multiplayer + capabilities, and monetization strategies. +

+
+ +
+
+ SaaS Platform +
+

SaaS Platform

+

+ Scalable software-as-a-service solutions with subscription + management and enterprise features. +

+
+ +
+
+ AI Solutions +
+

A.I. Solutions

+

+ Intelligent automation and AI-powered features to enhance your + business processes and user experience. +

+
+
+
+
+ + +
+
+
+

The Process

+

+ We use cutting edge strategies to ensure we can deliver exactly what + you want on your timeline and terms. Here is more about our process. +

+
+ +
+ + +
+ + +
+
+
+
+ + +
+
+
+

+ Simple, transparent pricing. No hidden fees. You need it, we + deliver. +

+ +
+ +
+
+
+
+ $50K + /Per Project. All in. +
+

+ We Keep it simple.
One Project, One
Price. +

+
+ +
+
    +
  • + Check + Full-Stack Development Team +
    • +
  • + Check + Unlimited Iterations +
    • +
  • + Check + Fully Realized MVP in 10 weeks +
    • +
+ +
+
+
+
+
+ + +
+
+

Meet The Leadership Team

+ +
+
+
+ David Scott +
+
+
+

David Scott

+
+ Partner +

+ David has been a serial entrepreneur, having launched and sold 3 + venture-backed companies. He holds a computer science degree + from the College of William & Mary and an MBA from The Wharton + School of Business. +

+
+
+ +
+
+ Sachin Khosla +
+
+
+

Sachin Khosla

+ LinkedIn Icon +
+ Partner +

+ Sachin has spent 20 years leading software development teams. + With experience overseeing over 200 software engineers, he has + built and launched thousands of products and apps for large + enterprises. +

+
+
+
+
+
+ + +
+
+
+

Book a meeting

+ + + + +
+ +
+
+

+ Are you curious about our offering, lets schedule a time to chat. +

+ +
+

Here are the benefits

+
    +
  • • We build your M.V.P.
    • +
  • • From idea to launch
    • +
  • • One fixed price
    • +
+
+ +
+ + +
+
+ +
+
+

Project Discussion

+ +
+
+ + + + + 30 min +
+
+ + + + Phone call +
+
+ +

+ This is an example of a meeting you would have with a potential + customer to demonstrate your product. +

+ +
+ Cookie settings + Report abuse +
+
+ +
+

Select a Date & Time

+
+

Time zone: Central European Time (8:11 PM)

+ +
+
+
+
+
+ + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..72c2e7b --- /dev/null +++ b/script.js @@ -0,0 +1,306 @@ +const header = document.getElementById('header'); +const toggleFounders = document.getElementById('toggle-founders'); +const toggleMarketers = document.getElementById('toggle-marketers'); +const heroTitle = document.getElementById('hero-title'); +const heroDescription = document.getElementById('hero-description'); +const servicesSection = document.getElementById('services-section'); +const pricingCard = document.getElementById('pricing-card'); +const scratchCard = document.getElementById('scratch-card'); +const scratchVideo = document.getElementById('scratch-video'); +const processCarousel = document.getElementById('process-carousel'); +const carouselPrev = document.getElementById('carousel-prev'); +const carouselNext = document.getElementById('carousel-next'); +const mobileMenuBtn = document.getElementById('mobile-menu-btn'); +const navMobile = document.getElementById('nav-mobile'); +const messageInput = document.getElementById('message-input'); +const calendar = document.getElementById('calendar'); + +// Content for different modes +const content = { + founders: { + title: "A Founder's Secret Weapon", + description: "We're your dedicated full-stack engineering partner, ready to build your ultimate MVP. Whether it is an app, a SaaS Platform or a store, we deliver what you need for a fixed price." + }, + marketers: { + title: "A Marketer's Growth Engine", + description: "We craft high-performance digital solutions to amplify your marketing campaigns, from landing pages to full-scale platforms." + } +}; + +// Current mode state +let currentMode = 'founders'; + +// Initialize the page +function init() { + setupToggleButtons(); + setupMobileMenu(); + setupScratchCard(); + setupProcessCarousel(); + setupCalendar(); + setupMessageForm(); +} + +// Toggle functionality +function setupToggleButtons() { + toggleFounders.addEventListener('click', () => switchMode('founders')); + toggleMarketers.addEventListener('click', () => switchMode('marketers')); +} + +function switchMode(mode) { + currentMode = mode; + + // Update toggle buttons + toggleFounders.classList.toggle('active', mode === 'founders'); + toggleMarketers.classList.toggle('active', mode === 'marketers'); + + // Update button classes for styling + toggleFounders.classList.toggle('founders', mode === 'founders'); + toggleMarketers.classList.toggle('marketers', mode === 'marketers'); + + // Update header background + header.classList.remove('founders', 'marketers'); + header.classList.add(mode); + + // Update services section background + servicesSection.classList.remove('founders', 'marketers'); + servicesSection.classList.add(mode); + + // Update pricing card background + pricingCard.classList.remove('founders', 'marketers'); + pricingCard.classList.add(mode); + + // Update content + heroTitle.textContent = content[mode].title; + heroDescription.textContent = content[mode].description; +} + +// Mobile menu functionality +function setupMobileMenu() { + mobileMenuBtn.addEventListener('click', () => { + navMobile.classList.toggle('active'); + mobileMenuBtn.classList.toggle('active'); + }); + + // Close mobile menu when clicking on links + navMobile.addEventListener('click', (e) => { + if (e.target.tagName === 'A') { + navMobile.classList.remove('active'); + mobileMenuBtn.classList.remove('active'); + } + }); +} + +// Scratch card functionality +function setupScratchCard() { + scratchCard.addEventListener('click', () => { + scratchCard.style.display = 'none'; + scratchVideo.style.display = 'flex'; + scratchVideo.style.alignItems = 'center'; + scratchVideo.style.justifyContent = 'center'; + }); +} + +// Process carousel functionality +function setupProcessCarousel() { + let scrollPosition = 0; + const cardWidth = 320 + 24; // card width + gap + + carouselNext.addEventListener('click', () => { + const maxScroll = processCarousel.scrollWidth - processCarousel.clientWidth; + scrollPosition = Math.min(scrollPosition + cardWidth, maxScroll); + processCarousel.scrollTo({ + left: scrollPosition, + behavior: 'smooth' + }); + }); + + carouselPrev.addEventListener('click', () => { + scrollPosition = Math.max(scrollPosition - cardWidth, 0); + processCarousel.scrollTo({ + left: scrollPosition, + behavior: 'smooth' + }); + }); + + // Update scroll position when user scrolls manually + processCarousel.addEventListener('scroll', () => { + scrollPosition = processCarousel.scrollLeft; + }); +} + +// Calendar functionality +function setupCalendar() { + const today = new Date(); + const year = today.getFullYear(); + const month = today.getMonth(); + const daysInMonth = new Date(year, month + 1, 0).getDate(); + + // Clear existing calendar + calendar.innerHTML = ''; + + // Generate calendar days + for (let i = 1; i <= daysInMonth; i++) { + const dayElement = document.createElement('div'); + dayElement.className = 'calendar-day'; + dayElement.textContent = i; + + dayElement.addEventListener('click', () => { + // Remove selected class from all days + document.querySelectorAll('.calendar-day').forEach(day => { + day.classList.remove('selected'); + }); + + // Add selected class to clicked day + dayElement.classList.add('selected'); + }); + + calendar.appendChild(dayElement); + } +} + +// Message form functionality +function setupMessageForm() { + const sendBtn = document.querySelector('.send-btn'); + + sendBtn.addEventListener('click', () => { + const message = messageInput.value.trim(); + if (message) { + alert(`Message sent: ${message}`); + messageInput.value = ''; + } else { + alert('Please enter a message'); + } + }); + + // Send message on Enter key + messageInput.addEventListener('keypress', (e) => { + if (e.key === 'Enter') { + sendBtn.click(); + } + }); +} + +// Smooth scrolling for navigation links +function setupSmoothScrolling() { + 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' + }); + } + }); + }); +} + +// Intersection Observer for animations +function setupScrollAnimations() { + 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); + + // Observe elements for animation + document.querySelectorAll('.service-card, .process-card, .leader').forEach(el => { + el.style.opacity = '0'; + el.style.transform = 'translateY(20px)'; + el.style.transition = 'opacity 0.6s ease, transform 0.6s ease'; + observer.observe(el); + }); +} + +// Handle window resize +function handleResize() { + // Reset carousel position on resize + processCarousel.scrollTo({ left: 0, behavior: 'smooth' }); +} + +// Event listeners +window.addEventListener('resize', handleResize); +window.addEventListener('load', setupScrollAnimations); + +// Initialize everything when DOM is loaded +document.addEventListener('DOMContentLoaded', () => { + init(); + setupSmoothScrolling(); + + // Set initial mode + switchMode('founders'); +}); + +// Add some interactive enhancements +document.addEventListener('DOMContentLoaded', () => { + // Add hover effect to service cards + const serviceCards = document.querySelectorAll('.service-card'); + serviceCards.forEach(card => { + card.addEventListener('mouseenter', () => { + card.style.transform = 'scale(1.05) translateY(-5px)'; + }); + + card.addEventListener('mouseleave', () => { + card.style.transform = 'scale(1) translateY(0)'; + }); + }); + + // Add click effect to buttons + const buttons = document.querySelectorAll('button'); + buttons.forEach(button => { + button.addEventListener('click', function(e) { + // Create ripple effect + const ripple = document.createElement('span'); + const rect = this.getBoundingClientRect(); + const size = Math.max(rect.width, rect.height); + const x = e.clientX - rect.left - size / 2; + const y = e.clientY - rect.top - size / 2; + + ripple.style.width = ripple.style.height = size + 'px'; + ripple.style.left = x + 'px'; + ripple.style.top = y + 'px'; + ripple.classList.add('ripple'); + + this.appendChild(ripple); + + setTimeout(() => { + ripple.remove(); + }, 600); + }); + }); +}); + +// Add CSS for ripple effect +const style = document.createElement('style'); +style.textContent = ` + button { + position: relative; + overflow: hidden; + } + + .ripple { + position: absolute; + border-radius: 50%; + background: rgba(255, 255, 255, 0.3); + transform: scale(0); + animation: ripple-animation 0.6s linear; + pointer-events: none; + } + + @keyframes ripple-animation { + to { + transform: scale(4); + opacity: 0; + } + } +`; +document.head.appendChild(style); \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..15787de --- /dev/null +++ b/styles.css @@ -0,0 +1,1089 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, + Ubuntu, Cantarell, sans-serif; + line-height: 1.6; + color: #333; + overflow-x: hidden; +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +/* Header Styles */ +.header { + position: relative; + top: 0; + left: 0; + right: 0; + z-index: 1000; + transition: all 0.3s ease; + backdrop-filter: blur(20px); +} + +.header.founders { + background-color: rgba(0, 119, 237, 0.2); +} + +.header.marketers { + background-color: rgba(231, 198, 255, 0.3); +} + +.header-content { + display: flex; + align-items: center; + justify-content: space-between; + height: 80px; +} + +.logo { + display: flex; + align-items: center; + gap: 8px; +} + +.logo-icon { + width: 32px; + height: 32px; + background: #000; + color: white; + display: flex; + align-items: center; + justify-content: center; + font-weight: bold; + font-size: 18px; +} + +.logo-text { + font-size: 20px; + font-weight: bold; + color: #000; +} + +.nav-desktop { + display: flex; + gap: 32px; + font-family: Plus Jakarta sans-serif; + font-weight: 600; + font-size: 18px; + line-height: 100%; +} + +.nav-desktop a { + text-decoration: none; + color: #000; + font-weight: 500; + transition: color 0.3s ease; +} + +.nav-desktop a:hover { + color: #000000; + text-decoration: underline; +} + +.mobile-menu-btn { + display: none; + flex-direction: column; + gap: 4px; + background: none; + border: none; + cursor: pointer; + padding: 8px; +} + +.mobile-menu-btn span { + width: 24px; + height: 2px; + background: #000; + transition: all 0.3s ease; +} + +.nav-mobile { + display: none; + flex-direction: column; + gap: 16px; + padding: 20px 0; + border-top: 1px solid rgba(0, 0, 0, 0.1); +} + +.nav-mobile a { + text-decoration: none; + color: #000; + font-weight: 500; + padding: 8px 0; +} + +/* Toggle Section */ +.toggle-section { + padding-top: 30px; + padding-bottom: 20px; +} + +.toggle-container { + display: flex; + justify-content: end; +} + +.toggle-button { + line-height: 100%; + font-family: Poppins; + padding: 12px 24px; + border: none; + border-radius: 25px; + cursor: pointer; + font-size: 10.5px; + font-weight: 500; + transition: all 0.3s ease; + background: #f5f5f5; + color: #666; +} + +.toggle-button.active.founders { + background: #6ba9ff; + color: #ffffff; +} + +.toggle-button.active.marketers { + background: #9333ea; + color: #5d5d5d; +} + +/* Hero Section */ +.hero { + padding: 40px 0 80px; + text-align: center; +} + +.hero h1 { + font-family: Urbanist; + font-size: clamp(2.5rem, 8vw, 6rem); + font-weight: 400; + line-height: 100%; + margin-bottom: 24px; + color: #000; +} + +.hero p { + line-height: 35px; + font-weight: 400; + font-family: Urbanist; + font-size: 28px; + color: #595959; + width: 100%; + margin: 0px auto; +} + +/* Scratch Card Section */ +.scratch-section { + padding: 94px 24px 35px; +} + +.scratch-card { + position: relative; + width: 100%; + max-width: 1000px; + margin: 0 auto; + aspect-ratio: 16/9; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + border-radius: 20px; + overflow: hidden; + cursor: pointer; + transition: transform 0.3s ease; +} + +.scratch-card:hover { + transform: scale(1.02); +} + +.scratch-overlay { + position: absolute; + inset: 0; + background: rgba(0, 0, 0, 0.3); + display: flex; + align-items: center; + justify-content: center; +} + +.scratch-content { + text-align: center; + color: white; + z-index: 2; +} + +.play-button { + width: 80px; + height: 80px; + background: rgba(255, 255, 255, 0.2); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto 20px; + transition: all 0.3s ease; +} + +.scratch-card:hover .play-button { + transform: scale(1.1); + background: rgba(255, 255, 255, 0.3); +} + +.scratch-content h3 { + font-size: 2rem; + margin-bottom: 8px; + font-weight: 300; +} + +.scratch-content p { + opacity: 0.9; +} + +.decoration { + position: absolute; + background: rgba(255, 255, 255, 0.2); + border-radius: 50%; +} + +.decoration-1 { + width: 16px; + height: 16px; + top: 10%; + left: 10%; +} +.decoration-2 { + width: 8px; + height: 8px; + top: 20%; + right: 20%; +} +.decoration-3 { + width: 12px; + height: 12px; + bottom: 20%; + left: 20%; +} +.decoration-4 { + width: 20px; + height: 20px; + bottom: 10%; + right: 10%; +} + +.scratch-video { + display: none; + width: 100%; + max-width: 1000px; + margin: 0 auto; + aspect-ratio: 16/9; + background: #000; + border-radius: 20px; + color: white; + text-align: center; + padding: 40px; + font-size: 1.2rem; +} + +/* Services Section */ +.services { + padding: 40px 0; + transition: background-color 0.3s ease; + background-color: #97c1ff; +} + +.services.founders { + background: #97c1ff; +} + +.services.marketers { + background: #e7c6ff; +} + +.services-header { + margin-bottom: 30px; +} + +.services-header h2 { + font-family: "Urbanist"; + font-size: clamp(2rem, 5vw, 4rem); + font-weight: 400; + margin-bottom: 5px; + line-height: 100%; + color: #000; +} + +.services-header p { + font-family: "Plus Jakarta Sans"; + font-weight: 400; + font-size: clamp(1rem, 2vw, 1.25rem); + color: #000000; + line-height: 100%; + opacity: 0.8; +} + +.services-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 20px; + max-width: 100%; + margin: 0 auto; + padding: 0 16px; + box-sizing: border-box; +} + +.service-card { + background: white; + border-radius: 10px; + text-align: center; + padding: 30px; + transition: all 0.4s ease; + overflow: hidden; + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + cursor: pointer; + min-height: 428px; +} + +.service-card:hover { + background: #0077ed; + color: white; + transform: scale(1.02); +} + +@media (min-width: 1024px) { + .service-card:hover { + grid-column: span 2; + } +} + +.service-icon img { + width: 64px; + height: 64px; + margin-bottom: 24px; + transition: transform 0.3s ease; +} + +.service-card h3 { + font-size: 1.5rem; + margin-bottom: 16px; + font-weight: 600; + color: #000; + transition: color 0.3s ease; +} + +.service-description { + opacity: 0; + transform: translateY(20px); + transition: all 0.3s ease; + color: #fff; + line-height: 1.6; + max-width: 100%; +} + +.service-card:hover { + background: #0077ed; + color: white; + transform: scale(1.02); + grid-column: span 2; +} + +.service-card:hover h3 { + color: white; +} + +.service-card:hover img { + transform: scale(1.1); +} + +.service-card:hover .service-description { + opacity: 1; + transform: translateY(0); +} + +/* Process Section */ +.process { + padding: 40px 0; + background: white; +} + +.process-header { + margin-bottom: 60px; +} + +.process-header h2 { + font-size: clamp(3rem, 8vw, 6rem); + font-family: "Urbanist"; + font-weight: 500; + margin-bottom: 10px; + color: #000000; + line-height: 100%; +} + +.process-header p { + font-family: "Urbanist"; + font-size: clamp(1.2rem, 2.5vw, 1.5rem); + color: #595959; + line-height: 1.6; +} + +.process-carousel-container { + position: relative; +} + +.process-carousel { + display: flex; + gap: 24px; + overflow-x: auto; + scroll-behavior: smooth; + padding-bottom: 0px; + scrollbar-width: none; + -ms-overflow-style: none; +} + +.process-carousel::-webkit-scrollbar { + display: none; +} + +.process-card { + flex-shrink: 0; + width: 320px; + height: 400px; + border-radius: 16px; + position: relative; + overflow: hidden; + cursor: pointer; + transition: transform 0.3s ease; +} + +.process-card:hover { + transform: scale(1.02); +} + +.card-1 { + background-image: url("images/process1.png"); + background-size: cover; + background-position: center; +} + +.card-2 { + background-image: url("images/process3.png"); + background-size: cover; + background-position: center; +} + +.card-3 { + background-image: url("images/process2.png"); + background-size: cover; + background-position: center; +} + +.card-4 { + background-image: url("images/process4.png"); + background-size: cover; + background-position: center; +} + +.card-5 { + background-image: url("images/process5.png"); + background-size: cover; + background-position: center; +} + +.card-6 { + background-image: url("images/process6.png"); + background-size: cover; + background-position: center; +} + +.card-overlay { + position: absolute; + inset: 0; + background: rgba(0, 0, 0, 0.4); + color: white; + padding: 24px; + display: flex; + flex-direction: column; + justify-content: flex-end; + transition: background 0.3s ease; +} + +.process-card:hover .card-overlay { + background: rgba(0, 0, 0, 0.6); +} + +.card-overlay h3 { + font-size: 1.5rem; + margin-bottom: 12px; + font-weight: 600; +} + +.card-description { + opacity: 0; + transform: translateY(20px); + transition: all 0.3s ease; + line-height: 1.5; +} + +.process-card:hover .card-description { + opacity: 1; + transform: translateY(0); +} + +.carousel-controls { + display: flex; + justify-content: flex-end; + gap: 12px; + margin-top: 24px; +} + +.carousel-btn { + width: 48px; + height: 48px; + border: 1px solid rgba(0, 0, 0, 0.2); + border-radius: 50%; + background: white; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.3s ease; +} + +.carousel-btn:hover { + background: #000; + color: white; +} + +/* Pricing Section */ +.pricing { + padding: 40px 0; + background: white; +} + +.pricing-header { + display: flex; + justify-content: space-between; + align-items: flex-start; + margin-bottom: 60px; + gap: 40px; +} + +.pricing-header h2 { + font-size: clamp(1.8rem, 4vw, 3rem); + font-weight: 300; + line-height: 1.2; + flex: 1; + max-width: 600px; +} + +.pricing-btn { + padding: 12px 24px; + border: 1px solid #000; + border-radius: 25px; + background: white; + cursor: pointer; + font-size: 16px; + transition: all 0.3s ease; + white-space: nowrap; +} + +.pricing-btn:hover { + background: #000; + color: white; +} + +.pricing-card { + max-width: 800px; + margin-left: auto; + border-radius: 24px; + padding: 48px; + background-color: #97c1ff; + transition: background-color 0.3s ease; +} + +.pricing-card.founders { + background: #97c1ff; +} + +.pricing-card.marketers { + background: #e7c6ff; +} + +.pricing-content { + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: 60px; +} + +.price-section { + flex: 1; +} + +.price { + display: flex; + align-items: baseline; + gap: 16px; + margin-bottom: 24px; +} + +.amount { + font-size: clamp(3rem, 8vw, 5rem); + font-weight: 300; + line-height: 1; +} + +.term { + font-size: clamp(1rem, 2vw, 1.5rem); + color: rgba(0, 0, 0, 0.8); + white-space: nowrap; +} + +.price-note { + font-size: clamp(1.5rem, 3vw, 2.5rem); + font-weight: 300; + line-height: 1.3; +} + +.features-section { + flex: 1; + padding-top: 100px; +} + +.features-list { + list-style: none; + margin-bottom: 32px; +} + +.features-list li { + display: flex; + align-items: center; + gap: 12px; + margin-bottom: 16px; + font-size: 1.1rem; + white-space: nowrap; +} + +.features-list svg { + color: #10b981; + flex-shrink: 0; +} + +.get-started-btn { + width: 100%; + padding: 16px 32px; + background: #000; + color: white; + border: none; + border-radius: 25px; + font-size: 1.1rem; + font-weight: 500; + cursor: pointer; + transition: all 0.3s ease; +} + +.get-started-btn:hover { + background: #333; + transform: translateY(-2px); +} + +/* Leadership Section */ +.leadership { + padding: 80px 0; + background: #0077ed; + color: white; +} + +.leadership h2 { + font-size: clamp(2rem, 5vw, 3rem); + font-weight: 300; + text-align: center; + margin-bottom: 60px; +} + +.leadership-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); + gap: 60px; + max-width: 1000px; + margin: 0 auto; +} + +.leader { + text-align: center; +} + +.leader-image { + width: 100%; + max-width: 400px; + aspect-ratio: 1; + margin: 0 auto 24px; + border-radius: 8px; + overflow: hidden; +} + +.leader-image img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.leader-header { + display: flex; + justify-content: start; + align-items: center; + gap: 16px; + margin-bottom: 8px; + margin-left: 30px; +} + +.leader-header h3 { + font-size: 1.8rem; + font-weight: 300; +} + +.leader-header svg { + cursor: pointer; + transition: opacity 0.3s ease; +} + +.leader-header svg:hover { + opacity: 0.7; +} + +.role { + font-size: 1rem; + opacity: 0.8; + margin-bottom: 16px; + display: block; +} + +.leader p { + line-height: 1.6; + opacity: 0.9; + max-width: 400px; + margin: 0 auto; +} + +/* Book Meeting Section */ +.book-meeting { + padding: 80px 0; + background: white; +} + +.meeting-header { + display: flex; + align-items: center; + gap: 24px; + margin-bottom: 60px; +} + +.meeting-header h2 { + font-size: clamp(2.5rem, 6vw, 4rem); + font-weight: 500; +} + +.meeting-content { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 60px; +} + +.intro-text { + font-size: 1.25rem; + color: #666; + margin-bottom: 40px; + line-height: 1.6; +} + +.benefits h3 { + font-size: 1.25rem; + margin-bottom: 16px; + font-weight: 300; +} + +.benefits ul { + list-style: none; + margin-bottom: 40px; +} + +.benefits li { + font-size: 1.25rem; + margin-bottom: 8px; + color: #666; +} + +.message-form { + display: flex; + flex-direction: column; + gap: 16px; +} + +.message-form input { + font-size: 1.1rem; + padding: 16px 0; + border: none; + border-bottom: 1px solid #000; + background: transparent; + outline: none; + transition: border-color 0.3s ease; +} + +.message-form input:focus { + border-color: #0077ed; +} + +.send-btn { + align-self: flex-start; + padding: 12px 32px; + border: 1px solid #000; + border-radius: 25px; + background: white; + cursor: pointer; + font-size: 1rem; + transition: all 0.3s ease; +} + +.send-btn:hover { + background: #000; + color: white; +} + +.meeting-schedule { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 40px; + border: 1px solid #e5e5e5; + border-radius: 16px; + padding: 32px; +} + +.schedule-info h3 { + font-size: 1.5rem; + font-weight: 700; + margin-bottom: 24px; + white-space: nowrap; +} + +.schedule-details { + margin-bottom: 24px; +} + +.detail-item { + display: flex; + align-items: center; + gap: 12px; + margin-bottom: 12px; + font-weight: 600; +} + +.schedule-description { + color: #666; + line-height: 1.6; + margin-bottom: 40px; +} + +.schedule-footer { + display: flex; + justify-content: space-between; + font-size: 0.875rem; + color: #666; + margin-top: auto; +} + +.calendar-section h3 { + font-size: 1.25rem; + font-weight: 600; + margin-bottom: 16px; +} + +.calendar { + display: grid; + grid-template-columns: repeat(7, 1fr); + gap: 8px; + margin-bottom: 16px; +} + +.calendar-day { + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 6px; + cursor: pointer; + background: #f5f5f5; + transition: all 0.3s ease; + font-size: 0.875rem; +} + +.calendar-day:hover { + background: #e5e5e5; +} + +.calendar-day.selected { + background: #0077ed; + color: white; +} + +.timezone { + font-size: 0.875rem; + color: #666; + margin-bottom: 16px; +} + +.troubleshoot-btn { + padding: 8px 16px; + border: 1px solid #000; + border-radius: 6px; + background: white; + cursor: pointer; + font-size: 0.875rem; + transition: all 0.3s ease; +} + +.troubleshoot-btn:hover { + background: #000; + color: white; +} + +/* Responsive Design */ +@media (max-width: 768px) { + .container { + padding: 0 16px; + } + + .nav-desktop { + display: none; + } + + .mobile-menu-btn { + display: flex; + } + + .nav-mobile.active { + display: flex; + } + + .toggle-container { + justify-content: center; + } + + .toggle-button { + padding: 10px 20px; + font-size: 14px; + } + + .services-grid { + grid-template-columns: 1fr; + gap: 16px; + } + + .service-card { + padding: 30px 20px; + } + + .process-carousel { + gap: 16px; + } + + .process-card { + width: 280px; + height: 350px; + } + + .pricing-header { + flex-direction: column; + gap: 24px; + } + + .pricing-content { + flex-direction: column; + gap: 40px; + } + + .leadership-grid { + grid-template-columns: 1fr; + gap: 40px; + } + + .meeting-content { + grid-template-columns: 1fr; + gap: 40px; + } + + .meeting-schedule { + grid-template-columns: 1fr; + gap: 32px; + } + + .meeting-header { + flex-direction: column; + align-items: flex-start; + gap: 16px; + } + + .meeting-header svg { + width: 32px; + height: 32px; + } +} + +@media (max-width: 480px) { + .header-content { + height: 60px; + } + + .toggle-section { + padding-top: 80px; + } + + .scratch-card { + border-radius: 12px; + } + + .play-button { + width: 60px; + height: 60px; + } + + .scratch-content h3 { + font-size: 1.5rem; + } + + .process-card { + width: 250px; + height: 320px; + } + + .pricing-card { + padding: 32px 24px; + } + + .leadership-grid { + grid-template-columns: 1fr; + } + + .leader-header { + flex-direction: column; + gap: 8px; + } + + .calendar { + gap: 4px; + } + + .calendar-day { + width: 36px; + height: 36px; + font-size: 0.75rem; + } +}