Skip to content

Commit a23ede6

Browse files
richiemcilroyrichiemcilroy
committed
feat: add about page
1 parent 091e066 commit a23ede6

File tree

3 files changed

+167
-0
lines changed

3 files changed

+167
-0
lines changed

‎apps/web/app/about/page.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { AboutPage } from "@/components/pages/AboutPage";
2+
import { Metadata } from "next";
3+
4+
export const metadata: Metadata = {
5+
title: "About Us — Cap",
6+
description:
7+
"Learn about Cap's mission to make screen sharing effortless, powerful, and private through our open-source, privacy-first platform.",
8+
};
9+
10+
export default function App() {
11+
return <AboutPage />;
12+
}

‎apps/web/components/Navbar.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,10 @@ const Links = [
8080
label: "Pricing",
8181
href: "/pricing",
8282
},
83+
{
84+
label: "About",
85+
href: "/about",
86+
},
8387
{
8488
label: "Blog",
8589
href: "/blog",
@@ -233,6 +237,28 @@ export const Navbar = ({ auth }: { auth: boolean }) => {
233237
Get started
234238
</Link>
235239
</li>
240+
<li>
241+
<Link
242+
onClick={() => {
243+
setShowMobileMenu(false);
244+
}}
245+
href="/about"
246+
passHref
247+
>
248+
About
249+
</Link>
250+
</li>
251+
<li>
252+
<Link
253+
onClick={() => {
254+
setShowMobileMenu(false);
255+
}}
256+
href="/blog"
257+
passHref
258+
>
259+
Blog
260+
</Link>
261+
</li>
236262
<li>
237263
<Link
238264
href="https://github.com/CapSoftware/Cap"

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

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
"use client";
2+
3+
import { Button } from "@cap/ui";
4+
5+
export const AboutPage = () => {
6+
return (
7+
<div className="wrapper wrapper-sm pt-32 pb-20">
8+
<div className="text-center mb-8">
9+
<h1 className="text-4xl font-semibold mb-4 fade-in-down animate-delay-1">
10+
About Cap
11+
</h1>
12+
<p className="text-lg text-gray-400 max-w-2xl mx-auto fade-in-down animate-delay-2 leading-relaxed">
13+
Screen recording made simple, secure, and powerful.
14+
</p>
15+
</div>
16+
17+
<div className="bg-gray-50/3 rounded-lg p-5 mb-8 fade-in-up animate-delay-2">
18+
<p className="text-lg">
19+
Your recordings shouldn't be locked away in systems you don't control.
20+
At Cap, we're building a screen recording tool that puts you first,
21+
respects your privacy, and gives you full control over your content.
22+
</p>
23+
</div>
24+
25+
<div className="fade-in-up animate-delay-2 space-y-8">
26+
<div>
27+
<h2 className="text-2xl font-medium mb-3">Why Cap?</h2>
28+
<p className="text-lg">
29+
Cap started with a simple idea: great ideas should be easy to share.
30+
Whether you're explaining a concept, showing how something works, or
31+
working with others, the tools you use should make your job easier,
32+
not harder.
33+
</p>
34+
</div>
35+
36+
<div className="space-y-8">
37+
<div>
38+
<h2 className="text-2xl font-medium mb-3">The Problem</h2>
39+
<p className="text-lg">
40+
After years of using other screen recording tools, we found they
41+
often don't respect your privacy, limit what you can do, and lock
42+
your content in their systems. Most of these tools are run by big
43+
companies that are slow to improve and don't listen to what users
44+
actually need.
45+
</p>
46+
</div>
47+
48+
<div>
49+
<h2 className="text-2xl font-medium mb-3">Our Solution</h2>
50+
<p className="text-lg">
51+
So we built Cap—a simple, complete screen recording tool that
52+
anyone can use. Inspired by tools we love and built on principles
53+
we believe in, our goal is to help you share ideas easily while
54+
keeping control of your content. Cap makes your recordings better
55+
with features like automatic captions, easy zooming, simple
56+
editing, and flexible sharing options.
57+
</p>
58+
</div>
59+
</div>
60+
61+
<div>
62+
<h2 className="text-2xl font-medium mb-3">Two Ways to Record</h2>
63+
<p className="text-lg mb-4">
64+
Cap gives you two simple ways to record:
65+
</p>
66+
<div className="space-y-4 ml-4">
67+
<div>
68+
<h3 className="text-xl font-medium">Instant Mode</h3>
69+
<p className="text-lg">
70+
Share your screen right away with a simple link—no waiting, just
71+
record and share in seconds.
72+
</p>
73+
</div>
74+
<div>
75+
<h3 className="text-xl font-medium">Studio Mode</h3>
76+
<p className="text-lg">
77+
Records at top quality. Captures both your screen and webcam
78+
separately so you can edit them later.
79+
</p>
80+
</div>
81+
</div>
82+
</div>
83+
84+
<div>
85+
<h2 className="text-2xl font-medium mb-3">Privacy First</h2>
86+
<p className="text-lg">
87+
Unlike other tools, Cap is built with your privacy as a top
88+
priority. We don't trap your data or force you to use only our
89+
systems. You can connect your own storage, keeping complete control
90+
of your recordings forever.
91+
</p>
92+
</div>
93+
94+
<div>
95+
<h2 className="text-2xl font-medium mb-3">Open to Everyone</h2>
96+
<p className="text-lg">
97+
We believe in being open and transparent. Cap's code is available
98+
for anyone to see, use, and improve. This means your data will
99+
always be accessible, and our tool will keep getting better through
100+
community feedback and contributions.
101+
</p>
102+
</div>
103+
104+
<div>
105+
<h2 className="text-2xl font-medium mb-3">Join Us</h2>
106+
<p className="text-lg">
107+
We're working to make Cap the best screen recording tool for
108+
everyone. Whether you're creating content alone, working with a
109+
startup, or part of a large team, Cap works for you.
110+
</p>
111+
<p className="text-lg mt-3">
112+
Together, we're making it easier for everyone to share ideas and
113+
connect—one recording at a time.
114+
</p>
115+
<div className="mt-6">
116+
<Button
117+
className="inline-flex"
118+
href="/download"
119+
variant="primary"
120+
size="lg"
121+
>
122+
Download Cap
123+
</Button>
124+
</div>
125+
</div>
126+
</div>
127+
</div>
128+
);
129+
};

0 commit comments

Comments
 (0)