Initial code for the hackerz for founders
This commit is contained in:
commit
e965434242
BIN
images/Line.png
Normal file
BIN
images/Line.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 138 B |
BIN
images/arrow.png
Normal file
BIN
images/arrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 873 B |
BIN
images/e-commerce.png
Normal file
BIN
images/e-commerce.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
images/game.png
Normal file
BIN
images/game.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
images/icon.png
Normal file
BIN
images/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 567 B |
BIN
images/leader1.png
Normal file
BIN
images/leader1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 263 KiB |
BIN
images/leader2.png
Normal file
BIN
images/leader2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 192 KiB |
BIN
images/linked-in.png
Normal file
BIN
images/linked-in.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 330 B |
BIN
images/logo.png
Normal file
BIN
images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
images/mobile.png
Normal file
BIN
images/mobile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
images/phone-icon.png
Normal file
BIN
images/phone-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 546 B |
BIN
images/process.png
Normal file
BIN
images/process.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
BIN
images/process1.png
Normal file
BIN
images/process1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 263 KiB |
BIN
images/process2.png
Normal file
BIN
images/process2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 567 KiB |
BIN
images/process3.png
Normal file
BIN
images/process3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 549 KiB |
BIN
images/process4.png
Normal file
BIN
images/process4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 680 KiB |
BIN
images/process5.png
Normal file
BIN
images/process5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 332 KiB |
BIN
images/process6.png
Normal file
BIN
images/process6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 653 KiB |
BIN
images/saas.png
Normal file
BIN
images/saas.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
images/tick-icon.png
Normal file
BIN
images/tick-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 335 B |
481
index.html
Normal file
481
index.html
Normal file
|
|
@ -0,0 +1,481 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Optimized Responsive Hackerz Website</title>
|
||||||
|
<link rel="stylesheet" href="styles.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- Header -->
|
||||||
|
<header id="header" class="header">
|
||||||
|
<div class="container">
|
||||||
|
<div class="header-content">
|
||||||
|
<div class="logo">
|
||||||
|
<img src="images/logo.png" alt="HACKERZ Logo" class="logo-img" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav class="nav-desktop">
|
||||||
|
<a href="#home">Home</a>
|
||||||
|
<a href="#services">Services</a>
|
||||||
|
<a href="#about">About Us</a>
|
||||||
|
<a href="#contact">Contact Us</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<button class="mobile-menu-btn" id="mobile-menu-btn">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Mobile Navigation -->
|
||||||
|
<nav class="nav-mobile" id="nav-mobile">
|
||||||
|
<a href="#home">Home</a>
|
||||||
|
<a href="#services">Services</a>
|
||||||
|
<a href="#about">About Us</a>
|
||||||
|
<a href="#contact">Contact Us</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Toggle Buttons -->
|
||||||
|
<div class="toggle-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="toggle-container">
|
||||||
|
<button id="toggle-founders" class="toggle-button active">
|
||||||
|
For Founders
|
||||||
|
</button>
|
||||||
|
<button id="toggle-marketers" class="toggle-button">
|
||||||
|
For Marketers
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Hero Section -->
|
||||||
|
<section class="hero" id="home">
|
||||||
|
<div class="container">
|
||||||
|
<h1 id="hero-title">A Founder's Secret Weapon</h1>
|
||||||
|
<p id="hero-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.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Scratch Card Section -->
|
||||||
|
<section class="scratch-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="scratch-card" id="scratch-card">
|
||||||
|
<div class="scratch-overlay">
|
||||||
|
<div class="scratch-content">
|
||||||
|
<div class="play-button">
|
||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||||
|
<path d="M8 5v14l11-7z" fill="currentColor" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>Tap to Scratch</h3>
|
||||||
|
<p>Discover what we can build for you</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="scratch-video" id="scratch-video">
|
||||||
|
<p>Video placeholder - Interactive content revealed!</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Services Section -->
|
||||||
|
<section class="services" id="services">
|
||||||
|
<div class="container">
|
||||||
|
<div class="services-header">
|
||||||
|
<h2>We Build Anything.</h2>
|
||||||
|
<p>
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="services-grid">
|
||||||
|
<div class="service-card">
|
||||||
|
<div class="service-icon">
|
||||||
|
<img src="images/e-commerce.png" alt="E-commerce" />
|
||||||
|
</div>
|
||||||
|
<h3>E-commerce store</h3>
|
||||||
|
<p class="service-description">
|
||||||
|
Full-featured online stores with payment integration, inventory
|
||||||
|
management, and customer analytics.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="service-card">
|
||||||
|
<div class="service-icon">
|
||||||
|
<img src="images/mobile.png" alt="Mobile App" />
|
||||||
|
</div>
|
||||||
|
<h3>Mobile App</h3>
|
||||||
|
<p class="service-description">
|
||||||
|
Native and cross-platform mobile applications with seamless user
|
||||||
|
experience and robust functionality.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="service-card">
|
||||||
|
<div class="service-icon">
|
||||||
|
<img src="images/game.png" alt="Mobile Game" />
|
||||||
|
</div>
|
||||||
|
<h3>Mobile Game</h3>
|
||||||
|
<p class="service-description">
|
||||||
|
Engaging mobile games with stunning graphics, multiplayer
|
||||||
|
capabilities, and monetization strategies.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="service-card">
|
||||||
|
<div class="service-icon">
|
||||||
|
<img src="images/saas.png" alt="SaaS Platform" />
|
||||||
|
</div>
|
||||||
|
<h3>SaaS Platform</h3>
|
||||||
|
<p class="service-description">
|
||||||
|
Scalable software-as-a-service solutions with subscription
|
||||||
|
management and enterprise features.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="service-card">
|
||||||
|
<div class="service-icon">
|
||||||
|
<img src="images/process.png" alt="AI Solutions" />
|
||||||
|
</div>
|
||||||
|
<h3>A.I. Solutions</h3>
|
||||||
|
<p class="service-description">
|
||||||
|
Intelligent automation and AI-powered features to enhance your
|
||||||
|
business processes and user experience.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Process Section -->
|
||||||
|
<section class="process">
|
||||||
|
<div class="container">
|
||||||
|
<div class="process-header">
|
||||||
|
<h2>The Process</h2>
|
||||||
|
<p>
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="process-carousel-container">
|
||||||
|
<div class="process-carousel" id="process-carousel">
|
||||||
|
<div class="process-card card-1">
|
||||||
|
<div class="card-overlay">
|
||||||
|
<h3>A Proven 8-Step Process</h3>
|
||||||
|
<p class="card-description">
|
||||||
|
We've refined our approach through 100+ projects to ensure
|
||||||
|
success from day one.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="process-card card-2">
|
||||||
|
<div class="card-overlay">
|
||||||
|
<h3>Dedicated Software Team</h3>
|
||||||
|
<p class="card-description">
|
||||||
|
Work with a consistent team that understands your vision and
|
||||||
|
delivers quality.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="process-card card-3">
|
||||||
|
<div class="card-overlay">
|
||||||
|
<h3>Robust Design Process</h3>
|
||||||
|
<p class="card-description">
|
||||||
|
From wireframes to final UI — our designs are built to impress
|
||||||
|
and perform.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="process-card card-4">
|
||||||
|
<div class="card-overlay">
|
||||||
|
<h3>Agile Development</h3>
|
||||||
|
<p class="card-description">
|
||||||
|
We adapt quickly to changes, ensuring your project stays on
|
||||||
|
track and meets your needs.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="process-card card-5">
|
||||||
|
<div class="card-overlay">
|
||||||
|
<h3>Quality Assurance</h3>
|
||||||
|
<p class="card-description">
|
||||||
|
Thorough testing at every stage to ensure a flawless final
|
||||||
|
product.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="process-card card-6">
|
||||||
|
<div class="card-overlay">
|
||||||
|
<h3>Deployment & Support</h3>
|
||||||
|
<p class="card-description">
|
||||||
|
Seamless launch with ongoing support to ensure your success.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="carousel-controls">
|
||||||
|
<button class="carousel-btn" id="carousel-prev">
|
||||||
|
<svg
|
||||||
|
width="20"
|
||||||
|
height="20"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
>
|
||||||
|
<polyline points="15,18 9,12 15,6" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button class="carousel-btn" id="carousel-next">
|
||||||
|
<svg
|
||||||
|
width="20"
|
||||||
|
height="20"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
>
|
||||||
|
<polyline points="9,18 15,12 9,6" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Pricing Section -->
|
||||||
|
<section class="pricing">
|
||||||
|
<div class="container">
|
||||||
|
<div class="pricing-header">
|
||||||
|
<h2>
|
||||||
|
Simple, transparent pricing. No hidden fees. You need it, we
|
||||||
|
deliver.
|
||||||
|
</h2>
|
||||||
|
<button class="pricing-btn">Pricing ↓</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pricing-card" id="pricing-card">
|
||||||
|
<div class="pricing-content">
|
||||||
|
<div class="price-section">
|
||||||
|
<div class="price">
|
||||||
|
<span class="amount">$50K</span>
|
||||||
|
<span class="term">/Per Project. All in.</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="price-note">
|
||||||
|
We Keep it simple.<br />One Project, One<br />Price.
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="features-section">
|
||||||
|
<ul class="features-list">
|
||||||
|
<li>
|
||||||
|
<img
|
||||||
|
src="images/tick-icon.png"
|
||||||
|
alt="Check"
|
||||||
|
width="20"
|
||||||
|
height="20"
|
||||||
|
/>
|
||||||
|
Full-Stack Development Team
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img
|
||||||
|
src="images/tick-icon.png"
|
||||||
|
alt="Check"
|
||||||
|
width="20"
|
||||||
|
height="20"
|
||||||
|
/>
|
||||||
|
Unlimited Iterations
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img
|
||||||
|
src="images/tick-icon.png"
|
||||||
|
alt="Check"
|
||||||
|
width="20"
|
||||||
|
height="20"
|
||||||
|
/>
|
||||||
|
Fully Realized MVP in 10 weeks
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<button class="get-started-btn">Get Started!</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Leadership Section -->
|
||||||
|
<section class="leadership">
|
||||||
|
<div class="container">
|
||||||
|
<h2>Meet The Leadership Team</h2>
|
||||||
|
|
||||||
|
<div class="leadership-grid">
|
||||||
|
<div class="leader">
|
||||||
|
<div class="leader-image">
|
||||||
|
<img
|
||||||
|
src="images/leader1.png"
|
||||||
|
alt="David Scott"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="leader-info">
|
||||||
|
<div class="leader-header">
|
||||||
|
<h3>David Scott</h3>
|
||||||
|
</div>
|
||||||
|
<span class="role">Partner</span>
|
||||||
|
<p>
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="leader">
|
||||||
|
<div class="leader-image">
|
||||||
|
<img
|
||||||
|
src="images/leader2.png"
|
||||||
|
alt="Sachin Khosla"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="leader-info">
|
||||||
|
<div class="leader-header">
|
||||||
|
<h3>Sachin Khosla</h3>
|
||||||
|
<img src="images/linked-in.png" alt="LinkedIn Icon" />
|
||||||
|
</div>
|
||||||
|
<span class="role">Partner</span>
|
||||||
|
<p>
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Book Meeting Section -->
|
||||||
|
<section class="book-meeting">
|
||||||
|
<div class="container">
|
||||||
|
<div class="meeting-header">
|
||||||
|
<h2>Book a meeting</h2>
|
||||||
|
<svg
|
||||||
|
width="48"
|
||||||
|
height="48"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
>
|
||||||
|
<line x1="7" y1="17" x2="17" y2="7" />
|
||||||
|
<polyline points="7,7 17,7 17,17" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="meeting-content">
|
||||||
|
<div class="meeting-info">
|
||||||
|
<p class="intro-text">
|
||||||
|
Are you curious about our offering, lets schedule a time to chat.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="benefits">
|
||||||
|
<h3>Here are the benefits</h3>
|
||||||
|
<ul>
|
||||||
|
<li>• We build your M.V.P.</li>
|
||||||
|
<li>• From idea to launch</li>
|
||||||
|
<li>• One fixed price</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="message-form">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="message-input"
|
||||||
|
placeholder="Send us A Message..."
|
||||||
|
/>
|
||||||
|
<button class="send-btn">Send</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="meeting-schedule">
|
||||||
|
<div class="schedule-info">
|
||||||
|
<h3>Project Discussion</h3>
|
||||||
|
|
||||||
|
<div class="schedule-details">
|
||||||
|
<div class="detail-item">
|
||||||
|
<svg
|
||||||
|
width="20"
|
||||||
|
height="20"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
>
|
||||||
|
<circle cx="12" cy="12" r="10" />
|
||||||
|
<polyline points="12,6 12,12 16,14" />
|
||||||
|
</svg>
|
||||||
|
<span>30 min</span>
|
||||||
|
</div>
|
||||||
|
<div class="detail-item">
|
||||||
|
<svg
|
||||||
|
width="20"
|
||||||
|
height="20"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span>Phone call</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="schedule-description">
|
||||||
|
This is an example of a meeting you would have with a potential
|
||||||
|
customer to demonstrate your product.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="schedule-footer">
|
||||||
|
<span>Cookie settings</span>
|
||||||
|
<span>Report abuse</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="calendar-section">
|
||||||
|
<h3>Select a Date & Time</h3>
|
||||||
|
<div class="calendar" id="calendar"></div>
|
||||||
|
<p class="timezone">Time zone: Central European Time (8:11 PM)</p>
|
||||||
|
<button class="troubleshoot-btn">Troubleshooting</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
306
script.js
Normal file
306
script.js
Normal file
|
|
@ -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);
|
||||||
1089
styles.css
Normal file
1089
styles.css
Normal file
File diff suppressed because it is too large
Load diff
Loading…
Reference in a new issue