306 lines
9.7 KiB
JavaScript
306 lines
9.7 KiB
JavaScript
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); |