481 lines
16 KiB
HTML
481 lines
16 KiB
HTML
<!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> |