Skip to content

Commit 898d5ed

Browse files
Arvind644Arvind644
authored
feat: add MVP page and update header navigation
feat: add MVP page and update header navigation
2 parents e9d9be7 + b3f6f61 commit 898d5ed

File tree

2 files changed

+368
-0
lines changed

2 files changed

+368
-0
lines changed

‎src/components/Header.astro‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,16 @@ const pathname = removeTrailingSlash(Astro.url.pathname);
5252
}}>Speaking</a
5353
>
5454
</li>
55+
<li class="text-neutral-600 dark:text-neutral-400">/</li>
56+
<li>
57+
<a
58+
href="/mvp"
59+
class:list={{
60+
["text-neutral-600 hover:text-neutral-800 dark:hover:text-neutral-100 dark:text-neutral-400"]: true,
61+
["text-neutral-800 dark:text-neutral-100"]: pathname === "/mvp",
62+
}}>MVP</a
63+
>
64+
</li>
5565
</ul>
5666
<!-- <ThemeToggle /> -->
5767
</nav>

‎src/pages/mvp.astro‎

Lines changed: 358 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,358 @@
1+
---
2+
import Layout from "@/layouts/Layout.astro";
3+
import SocialLinks from "@/components/SocialLinks.astro";
4+
import Link from "@/components/shared/Link.astro";
5+
import ProjectCard from "@/components/ProjectCard.astro";
6+
import CompanyLogo from "@/components/CompanyLogo.astro";
7+
import projects from "@/data/projects";
8+
import companies from "@/data/companies";
9+
10+
import presentation from "@/data/presentation";
11+
---
12+
13+
<Layout>
14+
<main class="flex flex-col gap-12">
15+
<article class="flex flex-col gap-8 py-12">
16+
<header class="flex flex-col gap-6 text-center max-w-4xl mx-auto">
17+
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-neutral-800 dark:text-neutral-100 leading-tight">
18+
We Build Fast, Beautiful, and<br />
19+
High-Quality MVPs.
20+
</h1>
21+
<p class="text-lg md:text-xl text-neutral-700 dark:text-neutral-300 max-w-2xl mx-auto">
22+
Your vision deserves more than just a prototype. We craft MVPs that are fast, stunning, and built to last.
23+
</p>
24+
<div class="mt-4">
25+
<a
26+
href="https://cal.com/arvind-singharpuria"
27+
target="_blank"
28+
rel="noreferrer"
29+
class="inline-block bg-blue-500 dark:bg-blue-400 hover:bg-blue-600 dark:hover:bg-blue-500 text-white font-semibold py-3 px-8 rounded-md text-lg transition-colors"
30+
>
31+
Book a Call
32+
</a>
33+
</div>
34+
</header>
35+
</article>
36+
37+
<article class="flex flex-col gap-8 py-8">
38+
<header class="text-center">
39+
<h2 class="text-2xl font-bold text-neutral-800 dark:text-neutral-100">Firms I worked for</h2>
40+
</header>
41+
42+
<div class="w-full overflow-hidden">
43+
<div class="flex animate-scroll gap-8">
44+
{companies.map((company) => (
45+
<div class="flex-shrink-0 w-32 md:w-40 flex items-center justify-center">
46+
<div class="company-logo-carousel">
47+
<CompanyLogo {...company} />
48+
</div>
49+
</div>
50+
))}
51+
{companies.map((company) => (
52+
<div class="flex-shrink-0 w-32 md:w-40 flex items-center justify-center">
53+
<div class="company-logo-carousel">
54+
<CompanyLogo {...company} />
55+
</div>
56+
</div>
57+
))}
58+
</div>
59+
</div>
60+
</article>
61+
62+
<article class="flex flex-col gap-8">
63+
<header class="text-center">
64+
<h2 class="text-2xl font-bold text-neutral-800 dark:text-neutral-100">How We work</h2>
65+
</header>
66+
67+
<div class="w-screen relative left-1/2 right-1/2 -ml-[50vw] -mr-[50vw]">
68+
<div class="max-w-[1400px] mx-auto px-6 md:px-12 lg:px-16 xl:px-20">
69+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
70+
<!-- Step 1 -->
71+
<div class="flex flex-col gap-4 p-6 rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-800 shadow-sm h-full">
72+
<div class="flex items-center gap-3">
73+
<div class="flex-shrink-0 w-12 h-12 rounded-full bg-blue-500 dark:bg-blue-400 text-white flex items-center justify-center font-bold text-lg">
74+
1
75+
</div>
76+
<h3 class="text-lg font-semibold text-neutral-800 dark:text-neutral-100">Initial Consultation</h3>
77+
</div>
78+
<p class="text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed">
79+
We kick things off with a quick discovery call to understand your product idea, goals, and user needs.
80+
</p>
81+
</div>
82+
83+
<!-- Step 2 -->
84+
<div class="flex flex-col gap-4 p-6 rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-800 shadow-sm h-full">
85+
<div class="flex items-center gap-3">
86+
<div class="flex-shrink-0 w-12 h-12 rounded-full bg-blue-500 dark:bg-blue-400 text-white flex items-center justify-center font-bold text-lg">
87+
2
88+
</div>
89+
<div class="flex flex-col">
90+
<h3 class="text-lg font-semibold text-neutral-800 dark:text-neutral-100">Strategy</h3>
91+
</div>
92+
</div>
93+
<p class="text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed">
94+
We map out features, prioritize what to build first, and align the roadmap around fast validation and clear outcomes.
95+
</p>
96+
</div>
97+
98+
<!-- Step 3 -->
99+
<div class="flex flex-col gap-4 p-6 rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-800 shadow-sm h-full">
100+
<div class="flex items-center gap-3">
101+
<div class="flex-shrink-0 w-12 h-12 rounded-full bg-blue-500 dark:bg-blue-400 text-white flex items-center justify-center font-bold text-lg">
102+
3
103+
</div>
104+
<div class="flex flex-col">
105+
<h3 class="text-lg font-semibold text-neutral-800 dark:text-neutral-100">Code</h3>
106+
</div>
107+
</div>
108+
<p class="text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed">
109+
We use industry-standard AI tools like Lovable and Cursor to write clean, scalable code faster.
110+
</p>
111+
</div>
112+
113+
<!-- Step 4 -->
114+
<div class="flex flex-col gap-4 p-6 rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-800 shadow-sm h-full">
115+
<div class="flex items-center gap-3">
116+
<div class="flex-shrink-0 w-12 h-12 rounded-full bg-blue-500 dark:bg-blue-400 text-white flex items-center justify-center font-bold text-lg">
117+
4
118+
</div>
119+
<div class="flex flex-col">
120+
<h3 class="text-lg font-semibold text-neutral-800 dark:text-neutral-100">Launch</h3>
121+
</div>
122+
</div>
123+
<p class="text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed">
124+
Once launched, your product is ready to test with users, pitch to investors, or go to market with support from our team along the way.
125+
</p>
126+
</div>
127+
</div>
128+
</div>
129+
</div>
130+
</article>
131+
132+
<article class="flex flex-col gap-8">
133+
<header class="text-center">
134+
<h2 class="text-2xl font-bold text-neutral-800 dark:text-neutral-100">Previous Work</h2>
135+
<p class="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
136+
Check out some of the MVPs and projects I've built.
137+
<Link href="/projects" label="View all projects" isUnderline={true} class="font-semibold" />.
138+
</p>
139+
</header>
140+
141+
<section class="grid grid-cols-1 md:grid-cols-2 gap-6 items-stretch">
142+
{projects.filter((project) => !project.title.includes("Jewelry Stylist Kiosk") && !project.title.includes("Ortelius")).slice(0, 3).map((project, index) => (
143+
<div class:list={{
144+
"md:col-span-2 md:mx-auto md:max-w-md": index === 2
145+
}}>
146+
<ProjectCard {...project} />
147+
</div>
148+
))}
149+
</section>
150+
</article>
151+
152+
<article class="flex flex-col gap-8">
153+
<header class="text-center">
154+
<h2 class="text-2xl font-bold text-neutral-800 dark:text-neutral-100">Pricing</h2>
155+
<p class="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
156+
Transparent pricing with no hidden fees. All packages include deployment and 30 days of post-launch support.
157+
</p>
158+
</header>
159+
160+
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 items-stretch">
161+
<!-- Landing Page Package -->
162+
<div class="flex flex-col gap-4 p-6 rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-800 shadow-sm h-full">
163+
<div>
164+
<h3 class="text-xl font-semibold text-neutral-800 dark:text-neutral-100">Landing Page</h3>
165+
</div>
166+
<div class="flex items-baseline gap-2">
167+
<span class="text-3xl font-bold text-neutral-800 dark:text-neutral-100">$1,000</span>
168+
</div>
169+
<ul class="flex flex-col gap-2 text-sm text-neutral-700 dark:text-neutral-300">
170+
<li class="flex items-start gap-2">
171+
<span class="text-green-600 dark:text-green-400 mt-1">✓</span>
172+
<span>Responsive design</span>
173+
</li>
174+
<li class="flex items-start gap-2">
175+
<span class="text-green-600 dark:text-green-400 mt-1">✓</span>
176+
<span>Modern UI/UX</span>
177+
</li>
178+
<li class="flex items-start gap-2">
179+
<span class="text-green-600 dark:text-green-400 mt-1">✓</span>
180+
<span>Contact forms</span>
181+
</li>
182+
<li class="flex items-start gap-2">
183+
<span class="text-green-600 dark:text-green-400 mt-1">✓</span>
184+
<span>SEO optimized</span>
185+
</li>
186+
<li class="flex items-start gap-2">
187+
<span class="text-green-600 dark:text-green-400 mt-1">✓</span>
188+
<span>Deployment included</span>
189+
</li>
190+
</ul>
191+
<a
192+
href="https://cal.com/arvind-singharpuria"
193+
target="_blank"
194+
rel="noreferrer"
195+
class="mt-auto w-full bg-blue-500 dark:bg-blue-400 hover:bg-blue-600 dark:hover:bg-blue-500 text-white font-semibold py-2 px-4 rounded-md text-center transition-colors"
196+
>
197+
Book a Call
198+
</a>
199+
</div>
200+
201+
<!-- MVP Package -->
202+
<div class="flex flex-col gap-4 p-6 rounded-lg border-2 border-blue-500 dark:border-blue-400 bg-white dark:bg-neutral-800 shadow-sm relative h-full">
203+
<div class="absolute -top-3 left-6 bg-blue-500 dark:bg-blue-400 text-white text-xs font-semibold px-3 py-1 rounded-full">
204+
Most Popular
205+
</div>
206+
<div>
207+
<h3 class="text-xl font-semibold text-neutral-800 dark:text-neutral-100">MVP Development</h3>
208+
</div>
209+
<div class="flex items-baseline gap-2">
210+
<span class="text-3xl font-bold text-neutral-800 dark:text-neutral-100">$5,000</span>
211+
</div>
212+
<ul class="flex flex-col gap-2 text-sm text-neutral-700 dark:text-neutral-300">
213+
<li class="flex items-start gap-2">
214+
<span class="text-green-600 dark:text-green-400 mt-1">✓</span>
215+
<span>3-5 core features</span>
216+
</li>
217+
<li class="flex items-start gap-2">
218+
<span class="text-green-600 dark:text-green-400 mt-1">✓</span>
219+
<span>3 weeks delivery</span>
220+
</li>
221+
<li class="flex items-start gap-2">
222+
<span class="text-green-600 dark:text-green-400 mt-1">✓</span>
223+
<span>Custom UI/UX design</span>
224+
</li>
225+
<li class="flex items-start gap-2">
226+
<span class="text-green-600 dark:text-green-400 mt-1">✓</span>
227+
<span>Payment integration</span>
228+
</li>
229+
<li class="flex items-start gap-2">
230+
<span class="text-green-600 dark:text-green-400 mt-1">✓</span>
231+
<span>User authentication</span>
232+
</li>
233+
<li class="flex items-start gap-2">
234+
<span class="text-green-600 dark:text-green-400 mt-1">✓</span>
235+
<span>Deployment + CI/CD</span>
236+
</li>
237+
</ul>
238+
<a
239+
href="https://cal.com/arvind-singharpuria"
240+
target="_blank"
241+
rel="noreferrer"
242+
class="mt-auto w-full bg-blue-500 dark:bg-blue-400 hover:bg-blue-600 dark:hover:bg-blue-500 text-white font-semibold py-2 px-4 rounded-md text-center transition-colors"
243+
>
244+
Book a Call
245+
</a>
246+
</div>
247+
248+
<!-- Maintenance Package -->
249+
<div class="flex flex-col gap-4 p-6 rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-800 shadow-sm h-full">
250+
<div>
251+
<h3 class="text-xl font-semibold text-neutral-800 dark:text-neutral-100">Maintenance</h3>
252+
</div>
253+
<div class="flex items-baseline gap-2">
254+
<span class="text-3xl font-bold text-neutral-800 dark:text-neutral-100">Custom</span>
255+
</div>
256+
<ul class="flex flex-col gap-2 text-sm text-neutral-700 dark:text-neutral-300">
257+
<li class="flex items-start gap-2">
258+
<span class="text-green-600 dark:text-green-400 mt-1">✓</span>
259+
<span>Bug fixes & updates</span>
260+
</li>
261+
<li class="flex items-start gap-2">
262+
<span class="text-green-600 dark:text-green-400 mt-1">✓</span>
263+
<span>Security monitoring</span>
264+
</li>
265+
<li class="flex items-start gap-2">
266+
<span class="text-green-600 dark:text-green-400 mt-1">✓</span>
267+
<span>Performance optimization</span>
268+
</li>
269+
<li class="flex items-start gap-2">
270+
<span class="text-green-600 dark:text-green-400 mt-1">✓</span>
271+
<span>Feature additions</span>
272+
</li>
273+
<li class="flex items-start gap-2">
274+
<span class="text-green-600 dark:text-green-400 mt-1">✓</span>
275+
<span>24/7 monitoring</span>
276+
</li>
277+
<li class="flex items-start gap-2">
278+
<span class="text-green-600 dark:text-green-400 mt-1">✓</span>
279+
<span>Priority support</span>
280+
</li>
281+
</ul>
282+
<a
283+
href="https://cal.com/arvind-singharpuria"
284+
target="_blank"
285+
rel="noreferrer"
286+
class="mt-auto w-full bg-blue-500 dark:bg-blue-400 hover:bg-blue-600 dark:hover:bg-blue-500 text-white font-semibold py-2 px-4 rounded-md text-center transition-colors"
287+
>
288+
Get Started
289+
</a>
290+
</div>
291+
</div>
292+
293+
</article>
294+
295+
<article class="flex flex-col gap-8 py-12">
296+
<header class="text-center flex flex-col gap-4">
297+
<h2 class="text-3xl md:text-4xl font-bold text-neutral-800 dark:text-neutral-100">Ready to Build the Next Big Thing?</h2>
298+
<p class="text-lg md:text-xl text-neutral-700 dark:text-neutral-300 max-w-2xl mx-auto">
299+
The future is yours for the taking. And we're here to help you get there.
300+
</p>
301+
</header>
302+
303+
<div class="flex justify-center mt-4">
304+
<a
305+
href="https://cal.com/arvind-singharpuria"
306+
target="_blank"
307+
rel="noreferrer"
308+
class="inline-block bg-blue-500 dark:bg-blue-400 hover:bg-blue-600 dark:hover:bg-blue-500 text-white font-semibold py-3 px-8 rounded-md text-lg transition-colors"
309+
>
310+
Let's Talk
311+
</a>
312+
</div>
313+
</article>
314+
315+
<article class="flex flex-col gap-8 py-12">
316+
<div style="width:100%;height:100%;overflow:scroll" id="my-cal-inline-30min"></div>
317+
</article>
318+
</main>
319+
</Layout>
320+
321+
<script is:inline>
322+
(function (C, A, L) { let p = function (a, ar) { a.q.push(ar); }; let d = C.document; C.Cal = C.Cal || function () { let cal = C.Cal; let ar = arguments; if (!cal.loaded) { cal.ns = {}; cal.q = cal.q || []; d.head.appendChild(d.createElement("script")).src = A; cal.loaded = true; } if (ar[0] === L) { const api = function () { p(api, arguments); }; const namespace = ar[1]; api.q = api.q || []; if(typeof namespace === "string"){cal.ns[namespace] = cal.ns[namespace] || api;p(cal.ns[namespace], ar);p(cal, ["initNamespace", namespace]);} else p(cal, ar); return;} p(cal, ar); }; })(window, "https://app.cal.com/embed/embed.js", "init");
323+
Cal("init", "30min", {origin:"https://app.cal.com"});
324+
325+
Cal.ns["30min"]("inline", {
326+
elementOrSelector:"#my-cal-inline-30min",
327+
config: {"layout":"month_view"},
328+
calLink: "arvind-singharpuria/30min",
329+
});
330+
331+
Cal.ns["30min"]("ui", {"hideEventTypeDetails":false,"layout":"month_view"});
332+
</script>
333+
334+
<style>
335+
@keyframes scroll {
336+
0% {
337+
transform: translateX(0);
338+
}
339+
100% {
340+
transform: translateX(-50%);
341+
}
342+
}
343+
344+
.animate-scroll {
345+
animation: scroll 50s linear infinite;
346+
width: fit-content;
347+
}
348+
349+
.animate-scroll:hover {
350+
animation-play-state: paused;
351+
}
352+
353+
.company-logo-carousel img {
354+
height: 3rem !important;
355+
max-width: 8rem;
356+
}
357+
</style>
358+

0 commit comments

Comments
 (0)