Skip to content

Commit c6b41af

Browse files
offline-pixeloffline-pixel
committed
product hint pitch v1.0
0 parents  commit c6b41af

File tree

2 files changed

+226
-0
lines changed

2 files changed

+226
-0
lines changed

‎favicon.gif

7.21 KB
Loading

‎index.html

Lines changed: 226 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,226 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<!-- Animated Favicon -->
7+
<link rel="icon" href="favicon.gif" type="image/gif">
8+
<title>AI Product Builder - Real Humans on Hire</title>
9+
<style>
10+
/* General reset */
11+
* {
12+
margin: 0;
13+
padding: 0;
14+
box-sizing: border-box;
15+
}
16+
body {
17+
font-family: Arial, sans-serif;
18+
background-color: #f3f3f3;
19+
/* overflow: hidden; */
20+
/* height: 100vh; */
21+
display: flex;
22+
flex-direction: column;
23+
justify-content: center;
24+
align-items: center;
25+
color: #333;
26+
padding: 50px 10px 0;
27+
margin-top: 40px;
28+
}
29+
p {
30+
margin-bottom: 0px;
31+
line-height: 1.6;
32+
text-align: center;
33+
}
34+
p.title {
35+
margin-top: 20px;
36+
font-size: 24px;
37+
/* font-weight: 500; */
38+
color: #323232;
39+
}
40+
p.description {
41+
font-size: 16px;
42+
color: #666;
43+
margin-bottom: 20px;
44+
45+
}
46+
.cta-button {
47+
margin-top: 20px;
48+
display: inline-block;
49+
background-color: #ff6f61;
50+
text-decoration: none;
51+
color: white;
52+
padding: 15px 30px;
53+
font-size: 18px;
54+
font-weight: bold;
55+
border: none;
56+
border-radius: 50px;
57+
cursor: pointer;
58+
text-transform: uppercase;
59+
transition: background-color 0.3s ease;
60+
}
61+
.cta-button:hover {
62+
background-color: #e45548;
63+
}
64+
65+
/* Floating particles animation */
66+
.particle {
67+
position: absolute;
68+
background-color: rgba(210, 210, 210, 0.8);
69+
width: 5px;
70+
height: 5px;
71+
border-radius: 50%;
72+
animation: float 3s infinite;
73+
}
74+
75+
@keyframes float {
76+
0% {
77+
transform: translateY(0) rotate(0deg);
78+
}
79+
50% {
80+
transform: translateY(-50px) rotate(180deg);
81+
}
82+
100% {
83+
transform: translateY(0) rotate(360deg);
84+
}
85+
}
86+
87+
/* USP Section */
88+
.usp {
89+
text-align: center;
90+
/* background-color: #282c34; */
91+
color: #333;
92+
padding: 20px 20px;
93+
/* margin-top: 40px; */
94+
}
95+
96+
/* Client Reviews Section */
97+
.reviews {
98+
margin-top: 40px;
99+
text-align: center;
100+
}
101+
102+
.review-slider {
103+
display: flex;
104+
overflow: hidden;
105+
justify-content: center;
106+
align-items: center;
107+
}
108+
109+
.review {
110+
display: none;
111+
font-size: 14px;
112+
color: #777;
113+
margin: 0 15px;
114+
max-width: 400px;
115+
line-height: 1.6;
116+
}
117+
118+
.review.active {
119+
display: block;
120+
}
121+
122+
/* Footer */
123+
footer {
124+
position: fixed;
125+
bottom: 0;
126+
left: 0;
127+
right: 0;
128+
background: white;
129+
padding: 10px;
130+
text-align: center;
131+
color: #777;
132+
z-index: 100;
133+
}
134+
135+
footer p {
136+
font-size: 11px;
137+
margin: 0;
138+
}
139+
</style>
140+
</head>
141+
<body>
142+
143+
<!-- Main Content Section -->
144+
<div class="content">
145+
<p class="title">Real Humans on Hire</p>
146+
<p class="description">We build your MVPs in weeks — not months.<br>
147+
Hire elite developers using smart AI tooling & a decade of experience.<br>
148+
<strong>$200 / 6hrs • MVP-ready in 4–7 weeks • Team setup in India</strong>
149+
</p>
150+
</div>
151+
152+
<!-- USP Section -->
153+
<div class="usp">
154+
<p class="title">Tech Stack:</p>
155+
<p class="description"> HTML, SCSS, Angular, React, Next.js,<br />Ruby on Rails, Node.js,<br />Python, C++, Hybrid Apps (Ionic, SwiftUI), Automation.., etc.</p>
156+
<!-- <button class="cta-button">Get in Touch →</button> -->
157+
<a href="mailto:[email protected]?subject=Inquiry%20About%20MVP%20Development" class="cta-button">Get in Touch →</a>
158+
</div>
159+
160+
<!-- Floating Particle Animation -->
161+
<div id="particles"></div>
162+
163+
<!-- Client Reviews Section -->
164+
<div class="reviews">
165+
<p class="title">Client Reviews</p>
166+
<div class="review-slider">
167+
<div class="review active">
168+
"Working with this team has been a game-changer for us. Their speed and quality are unmatched. MVP delivered in just 4 weeks!"
169+
<br>- Startup Founder
170+
</div>
171+
<div class="review">
172+
"I was able to save on costs while still getting high-quality results. Highly recommend them for rapid MVP development."
173+
<br>- Tech Entrepreneur
174+
</div>
175+
<div class="review">
176+
"The team was responsive, professional, and incredibly skilled. They truly brought our vision to life in record time."
177+
<br>- Product Manager
178+
</div>
179+
</div>
180+
</div>
181+
182+
<!-- Footer with copyright -->
183+
<footer>
184+
<p>&copy; 2025 Offline-Pixel</p>
185+
</footer>
186+
187+
<script>
188+
// Particle animation for background
189+
function createParticles() {
190+
const particleCount = 50; // Number of particles to generate
191+
const particlesContainer = document.getElementById('particles');
192+
193+
for (let i = 0; i < particleCount; i++) {
194+
const particle = document.createElement('div');
195+
particle.classList.add('particle');
196+
197+
// Randomize initial positions and animation durations
198+
const size = Math.random() * 5 + 5; // Random size between 5px and 10px
199+
particle.style.width = `${size}px`;
200+
particle.style.height = `${size}px`;
201+
particle.style.left = `${Math.random() * 100}vw`; // Random horizontal position
202+
particle.style.top = `${Math.random() * 100}vh`; // Random vertical position
203+
particle.style.animationDuration = `${Math.random() * 3 + 2}s`; // Random duration
204+
205+
particlesContainer.appendChild(particle);
206+
}
207+
}
208+
209+
createParticles();
210+
211+
// Review Slider functionality
212+
let currentReviewIndex = 0;
213+
const reviews = document.querySelectorAll('.review');
214+
const totalReviews = reviews.length;
215+
216+
function showNextReview() {
217+
reviews[currentReviewIndex].classList.remove('active');
218+
currentReviewIndex = (currentReviewIndex + 1) % totalReviews;
219+
reviews[currentReviewIndex].classList.add('active');
220+
}
221+
222+
setInterval(showNextReview, 4000); // Change review every 4 seconds
223+
</script>
224+
225+
</body>
226+
</html>

0 commit comments

Comments
 (0)