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