Skip to content

Commit 0fb9be3

Browse files
richiemcilroyrichiemcilroy
committed
feat: Student Discount page
1 parent c35886f commit 0fb9be3

File tree

4 files changed

+343
-1
lines changed

4 files changed

+343
-1
lines changed

‎apps/web/app/(site)/Footer.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,7 @@ const footerLinks = {
9595
{ label: "Screen Recorder for Windows", href: "/screen-recorder-windows" },
9696
{ label: "Screen Recording Software", href: "/screen-recording-software" },
9797
{ label: "Cap vs Loom", href: "/loom-alternative" },
98+
{ label: "Student Discount", href: "/student-discount" },
9899
] as FooterLink[],
99100
};
100101

‎apps/web/app/(site)/student-discount/page.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import type { Metadata } from "next";
2+
import { StudentDiscountPage } from "@/components/pages/StudentDiscountPage";
3+
4+
export const metadata: Metadata = {
5+
title: "Student Discount — Cap",
6+
description:
7+
"Students get 30% off Cap's premium plans with code STUDENT50. Perfect for school projects, presentations, and building your portfolio.",
8+
};
9+
10+
export default function App() {
11+
return <StudentDiscountPage />;
12+
}

‎apps/web/components/pages/HomePage/Header.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import {
1818
} from "@/utils/platform";
1919
import { homepageCopy } from "../../../data/homepage-copy";
2020
import UpgradeToPro from "../_components/UpgradeToPro";
21-
import { ProArtRef } from "./Pricing/ProArt";
21+
import type { ProArtRef } from "./Pricing/ProArt";
2222
import VideoModal from "./VideoModal";
2323

2424
interface HeaderProps {

‎apps/web/components/pages/StudentDiscountPage.tsx‎

Lines changed: 329 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,329 @@
1+
"use client";
2+
3+
import { Button } from "@cap/ui";
4+
import {
5+
faBookOpen,
6+
faCopy,
7+
faGraduationCap,
8+
faRocket,
9+
faUsers,
10+
} from "@fortawesome/free-solid-svg-icons";
11+
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
12+
import { motion } from "framer-motion";
13+
import { useState } from "react";
14+
import { toast } from "sonner";
15+
import { CommercialCard, ProCard } from "./HomePage/Pricing";
16+
17+
const fadeIn = {
18+
hidden: { opacity: 0, y: 20 },
19+
visible: (custom: number = 0) => ({
20+
opacity: 1,
21+
y: 0,
22+
transition: {
23+
delay: custom * 0.1,
24+
duration: 0.5,
25+
ease: "easeOut",
26+
},
27+
}),
28+
};
29+
30+
const fadeInFromBottom = {
31+
hidden: { opacity: 0, y: 50 },
32+
visible: (custom: number = 0) => ({
33+
opacity: 1,
34+
y: 0,
35+
transition: {
36+
delay: 0.3 + custom * 0.1,
37+
duration: 0.6,
38+
ease: "easeOut",
39+
},
40+
}),
41+
};
42+
43+
const staggerContainer = {
44+
hidden: { opacity: 0 },
45+
visible: {
46+
opacity: 1,
47+
transition: {
48+
staggerChildren: 0.1,
49+
delayChildren: 0.2,
50+
},
51+
},
52+
};
53+
54+
export const StudentDiscountPage = () => {
55+
const [copied, setCopied] = useState(false);
56+
const discountCode = "STUDENT50";
57+
58+
const copyToClipboard = async () => {
59+
try {
60+
await navigator.clipboard.writeText(discountCode);
61+
setCopied(true);
62+
toast.success("Discount code copied!");
63+
setTimeout(() => setCopied(false), 2000);
64+
} catch (err) {
65+
toast.error("Failed to copy code");
66+
}
67+
};
68+
69+
return (
70+
<div className="mt-[120px]">
71+
<div className="relative z-10 px-5 pt-24 pb-36 w-full">
72+
<motion.div
73+
className="mx-auto text-center wrapper wrapper-sm"
74+
initial="hidden"
75+
animate="visible"
76+
variants={staggerContainer}
77+
>
78+
<motion.h1
79+
className="fade-in-down text-[2rem] leading-[2.5rem] md:text-[3.75rem] md:leading-[4rem] relative z-10 text-black mb-4"
80+
variants={fadeIn}
81+
custom={1}
82+
>
83+
🎓 Student Discount
84+
</motion.h1>
85+
<motion.p
86+
className="mx-auto mb-8 max-w-3xl text-md sm:text-xl text-zinc-500 fade-in-down animate-delay-1"
87+
variants={fadeIn}
88+
custom={2}
89+
>
90+
Level up your presentations and portfolio with 30% off Cap's premium
91+
features. Perfect for students, researchers, and future creators.
92+
</motion.p>
93+
94+
{/* Clean Discount Badge */}
95+
<motion.div
96+
className="mx-auto mt-12 max-w-2xl"
97+
variants={fadeIn}
98+
custom={3}
99+
>
100+
<div className="p-8 rounded-2xl border shadow-sm border-gray-4 bg-gray-1">
101+
<h2 className="mb-4 text-2xl font-semibold text-gray-12 text-center">
102+
30% Student Discount
103+
</h2>
104+
<div className="flex justify-center items-center gap-3 mb-4">
105+
<code className="px-4 py-2 text-lg font-mono font-semibold text-gray-12 bg-gray-4 rounded-lg">
106+
{discountCode}
107+
</code>
108+
<motion.button
109+
onClick={copyToClipboard}
110+
className="flex items-center justify-center w-10 h-10 text-gray-10 hover:text-gray-12 bg-gray-4 hover:bg-gray-5 rounded-lg transition-all duration-200"
111+
title="Copy code"
112+
whileHover={{ scale: 1.05 }}
113+
whileTap={{ scale: 0.95 }}
114+
>
115+
<FontAwesomeIcon
116+
icon={faCopy}
117+
className={`size-4 ${copied ? "text-green-600" : ""}`}
118+
/>
119+
</motion.button>
120+
</div>
121+
<p className="text-center text-gray-10">
122+
Use this code at checkout to save 30% on any premium plan
123+
</p>
124+
</div>
125+
</motion.div>
126+
127+
{/* How to Claim Steps - Clean Version */}
128+
<motion.div
129+
className="mx-auto mt-12 max-w-3xl"
130+
variants={fadeIn}
131+
custom={4}
132+
>
133+
<div className="p-8 rounded-2xl border shadow-sm border-gray-4 bg-gray-1">
134+
<h3 className="mb-6 text-xl font-semibold text-gray-12 text-center">
135+
How to claim your discount
136+
</h3>
137+
<ol className="list-none space-y-0">
138+
<div className="flex items-start py-4 border-b border-gray-4 last:border-b-0">
139+
<div className="flex justify-center items-center mr-4 rounded-full bg-gray-4 size-8 flex-shrink-0">
140+
<span className="text-sm font-medium text-gray-12">1</span>
141+
</div>
142+
<p className="mt-1 text-gray-10">
143+
Copy the discount code{" "}
144+
<strong className="text-gray-12">{discountCode}</strong>
145+
</p>
146+
</div>
147+
<div className="flex items-start py-4 border-b border-gray-4 last:border-b-0">
148+
<div className="flex justify-center items-center mr-4 rounded-full bg-gray-4 size-8 flex-shrink-0">
149+
<span className="text-sm font-medium text-gray-12">2</span>
150+
</div>
151+
<p className="mt-1 text-gray-10">
152+
Visit the{" "}
153+
<a
154+
href="/pricing"
155+
className="font-semibold underline text-gray-12"
156+
>
157+
Pricing
158+
</a>{" "}
159+
page and choose a plan
160+
</p>
161+
</div>
162+
<div className="flex items-start py-4 border-b border-gray-4 last:border-b-0">
163+
<div className="flex justify-center items-center mr-4 rounded-full bg-gray-4 size-8 flex-shrink-0">
164+
<span className="text-sm font-medium text-gray-12">3</span>
165+
</div>
166+
<p className="mt-1 text-gray-10">
167+
Enter the code at checkout to get{" "}
168+
<strong className="text-gray-12">30% off</strong>
169+
</p>
170+
</div>
171+
</ol>
172+
</div>
173+
</motion.div>
174+
175+
{/* CTA Buttons */}
176+
<motion.div
177+
className="flex flex-col justify-center items-center mt-8 space-y-4 sm:flex-row sm:space-y-0 sm:space-x-4"
178+
variants={fadeIn}
179+
custom={5}
180+
>
181+
<Button
182+
variant="primary"
183+
href="/pricing"
184+
size="lg"
185+
className="flex justify-center items-center font-medium"
186+
>
187+
View Plans & Pricing
188+
</Button>
189+
<Button
190+
variant="white"
191+
href="/download"
192+
size="lg"
193+
className="flex justify-center items-center font-medium"
194+
>
195+
Download Cap Free
196+
</Button>
197+
</motion.div>
198+
</motion.div>
199+
<img
200+
src="/illustrations/mask-big-recorder.webp"
201+
alt="Student Background"
202+
className="absolute top-0 left-0 z-0 -mt-40 w-full h-auto pointer-events-none opacity-30"
203+
/>
204+
</div>
205+
206+
{/* Main Content */}
207+
<motion.div
208+
className="pb-24 wrapper"
209+
initial="hidden"
210+
whileInView="visible"
211+
viewport={{ once: true, margin: "-100px" }}
212+
variants={staggerContainer}
213+
>
214+
{/* Student Use Cases */}
215+
<motion.div
216+
className="mx-auto mt-24 max-w-6xl"
217+
variants={fadeIn}
218+
custom={1}
219+
>
220+
<div className="text-center mb-12">
221+
<h2 className="inline-block relative mb-6 text-3xl font-medium text-gray-800">
222+
Perfect for Students
223+
</h2>
224+
<p className="text-lg text-gray-600 max-w-2xl mx-auto">
225+
Whether you're presenting, building your portfolio, or
226+
collaborating with classmates, Cap helps you create professional
227+
content that stands out.
228+
</p>
229+
</div>
230+
231+
<div className="grid gap-8 md:grid-cols-3">
232+
<div className="p-8 bg-gray-1 rounded-2xl border border-gray-4 shadow-sm">
233+
<div className="flex items-center justify-center w-14 h-14 bg-blue-50 rounded-full mb-6">
234+
<FontAwesomeIcon
235+
className="text-blue-500 size-6"
236+
icon={faBookOpen}
237+
/>
238+
</div>
239+
<h3 className="mb-4 text-xl font-semibold text-gray-800">
240+
School Projects
241+
</h3>
242+
<p className="text-gray-600 leading-relaxed">
243+
Record presentations, demos, and tutorials for your assignments.
244+
Create shareable links that are auto-transcribed and summarized,
245+
with tracking to see when they're opened.
246+
</p>
247+
</div>
248+
249+
<div className="p-8 bg-gray-1 rounded-2xl border border-gray-4 shadow-sm">
250+
<div className="flex items-center justify-center w-14 h-14 bg-purple-50 rounded-full mb-6">
251+
<FontAwesomeIcon
252+
className="text-purple-500 size-6"
253+
icon={faRocket}
254+
/>
255+
</div>
256+
<h3 className="mb-4 text-xl font-semibold text-gray-800">
257+
Portfolio Building
258+
</h3>
259+
<p className="text-gray-600 leading-relaxed">
260+
Create professional video content to showcase your work, code
261+
walkthroughs, and project demos. Share with auto-generated
262+
transcripts and summaries that help you stand out to employers.
263+
</p>
264+
</div>
265+
266+
<div className="p-8 bg-gray-1 rounded-2xl border border-gray-4 shadow-sm">
267+
<div className="flex items-center justify-center w-14 h-14 bg-pink-50 rounded-full mb-6">
268+
<FontAwesomeIcon
269+
className="text-pink-500 size-6"
270+
icon={faUsers}
271+
/>
272+
</div>
273+
<h3 className="mb-4 text-xl font-semibold text-gray-800">
274+
Study Groups
275+
</h3>
276+
<p className="text-gray-600 leading-relaxed">
277+
Share knowledge and collaborate with classmates effectively.
278+
Create trackable shareable links with auto-generated summaries
279+
to help your peers learn and succeed.
280+
</p>
281+
</div>
282+
</div>
283+
</motion.div>
284+
285+
{/* Ready to Get Started CTA */}
286+
<motion.div
287+
className="max-w-[1000px] md:bg-center w-full bg-white min-h-[300px] mx-auto border border-gray-5 my-[100px] rounded-[20px] overflow-hidden relative flex flex-col justify-center p-8"
288+
style={{
289+
backgroundImage: "url('/illustrations/ctabg.svg')",
290+
backgroundSize: "cover",
291+
backgroundRepeat: "no-repeat",
292+
}}
293+
variants={fadeIn}
294+
custom={2}
295+
>
296+
<div className="flex relative z-10 flex-col justify-center items-center mx-auto h-full">
297+
<div className="text-center max-w-[800px] mx-auto mb-8">
298+
<h2 className="mb-3 text-3xl md:text-4xl text-gray-12">
299+
Ready to elevate your student projects?
300+
</h2>
301+
<p className="text-lg text-gray-10">
302+
Join thousands of students already using Cap to create amazing
303+
content
304+
</p>
305+
</div>
306+
<div className="flex flex-col justify-center items-center space-y-4 w-full sm:flex-row sm:space-y-0 sm:space-x-4">
307+
<Button
308+
variant="primary"
309+
href="/pricing"
310+
size="lg"
311+
className="font-medium transform hover:-translate-y-[2px] transition-all duration-300"
312+
>
313+
Get Started with 30% Off
314+
</Button>
315+
<Button
316+
variant="white"
317+
href="/download"
318+
size="lg"
319+
className="font-medium transform hover:-translate-y-[2px] transition-all duration-300"
320+
>
321+
Try Cap Free First
322+
</Button>
323+
</div>
324+
</div>
325+
</motion.div>
326+
</motion.div>
327+
</div>
328+
);
329+
};

0 commit comments

Comments
 (0)