Skip to content

chore: fix text sizing on landing page #1133

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Oct 4, 2025
Merged

chore: fix text sizing on landing page #1133

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9aa8711
fix text sizing
ameer2468 Oct 4, 2025
39a49d2
Update RecordingModes.tsx
ameer2468 Oct 4, 2025
14758c8
Update RecordingModes.tsx
ameer2468 Oct 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions apps/web/components/pages/HomePage/Features.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,8 +149,8 @@ const features: Feature[] = homepageCopy.features.features.map(
const Features = () => {
return (
<div className="text-center max-w-[1440px] mx-auto px-5">
<h2 className="mb-3">{homepageCopy.features.title}</h2>
<p className="text-lg leading-[1.75rem] w-full max-w-[600px] mx-auto">
<h1 className="mb-3">{homepageCopy.features.title}</h1>
<p className="text-lg text-gray-10 leading-[1.75rem] w-full max-w-[600px] mx-auto">
{homepageCopy.features.subtitle}
</p>
<div className="flex flex-col gap-4 mt-[52px]">
Expand Down
8 changes: 4 additions & 4 deletions apps/web/components/pages/HomePage/Pricing/CommercialCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,13 +77,13 @@ export const CommercialCard = () => {
<h3 className="mb-2 text-xl font-semibold text-center text-gray-12">
{homepageCopy.pricing.commercial.title}
</h3>
<p className="mb-3 text-sm text-center text-gray-11 w-full max-w-[285px] mx-auto font-medium">
<p className="mb-3 text-base text-center text-gray-11 w-full max-w-[285px] mx-auto">
{homepageCopy.pricing.commercial.description}
</p>
<div className="mb-6 text-center">
<a
href="/docs/commercial-license"
className="text-xs underline text-gray-10 hover:text-gray-12"
className="text-sm underline text-gray-10 hover:text-gray-12"
>
Learn more about the commercial license here
</a>
Expand All @@ -99,15 +99,15 @@ export const CommercialCard = () => {
/ {billingCycleText}
</span>
{isYearly ? (
<p className="text-sm tabular-nums text-gray-10">
<p className="text-base tabular-nums text-gray-10">
or, $
<NumberFlow
value={licenses * COMMERCIAL_LICENSE_LIFETIME_PRICE}
/>{" "}
one-time payment
</p>
) : (
<p className="text-sm tabular-nums text-gray-10">
<p className="text-base tabular-nums text-gray-10">
or, $
<NumberFlow value={licenses * COMMERCIAL_LICENSE_YEARLY_PRICE} />{" "}
/ year
Expand Down
2 changes: 1 addition & 1 deletion apps/web/components/pages/HomePage/Pricing/EnterpriseCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ export const EnterpriseCard = () => {
<h3 className="mb-2 text-xl font-semibold text-center text-gray-12">
Cap for Enterprise
</h3>
<p className="mb-4 text-sm font-medium text-center text-gray-11">
<p className="mb-4 text-base text-center text-gray-11">
Deploy Cap across your organization with enterprise-grade
features, dedicated support, and custom integrations.
</p>
Expand Down
20 changes: 13 additions & 7 deletions apps/web/components/pages/HomePage/Pricing/ProCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@ export const ProCard = () => {
<h3 className="mb-2 text-xl font-semibold text-center">
{homepageCopy.pricing.pro.title}
</h3>
<p className="mb-4 text-sm font-medium text-center text-gray-6">
<p className="mb-4 text-base text-center text-gray-6">
{homepageCopy.pricing.pro.description}
</p>
</div>
Expand All @@ -134,11 +134,11 @@ export const ProCard = () => {
{billingCycleTextPro}
</span>
{isAnnually ? (
<p className="text-sm text-gray-8">
<p className="text-base text-gray-8">
or,{" "}
<NumberFlow
value={CAP_PRO_MONTHLY_PRICE_PER_USER * users}
className="text-sm tabular-nums"
className="text-base tabular-nums"
format={{
notation: "compact",
style: "currency",
Expand All @@ -151,18 +151,21 @@ export const ProCard = () => {
) : (
<>
for{" "}
<NumberFlow value={users} className="text-sm tabular-nums" />{" "}
<NumberFlow
value={users}
className="text-base tabular-nums"
/>{" "}
users,{" "}
</>
)}
billed monthly
</p>
) : (
<p className="text-sm text-gray-8">
<p className="text-base text-gray-8">
or,{" "}
<NumberFlow
value={CAP_PRO_ANNUAL_PRICE_PER_USER * users}
className="text-sm tabular-nums"
className="text-base tabular-nums"
format={{
notation: "compact",
style: "currency",
Expand All @@ -175,7 +178,10 @@ export const ProCard = () => {
) : (
<>
for{" "}
<NumberFlow value={users} className="text-sm tabular-nums" />{" "}
<NumberFlow
value={users}
className="text-base tabular-nums"
/>{" "}
users,{" "}
</>
)}
Expand Down
4 changes: 2 additions & 2 deletions apps/web/components/pages/HomePage/Pricing/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ const Pricing = () => {
return (
<div className="w-full max-w-[1100px] mx-auto px-5">
<div className="px-5 mb-16 text-center">
<h2 className="mb-3 w-full">{homepageCopy.pricing.title}</h2>
<p className="text-lg max-w-[800px] mx-auto leading-[1.75rem] w-full">
<h1 className="mb-3 w-full">{homepageCopy.pricing.title}</h1>
<p className="text-lg text-gray-10 max-w-[800px] mx-auto leading-[1.75rem] w-full">
{homepageCopy.pricing.subtitle}
</p>
<div className="flex justify-center items-center px-5 py-2.5 gap-2 mx-auto mt-6 rounded-full border bg-gray-1 border-gray-5 w-fit">
Expand Down
2 changes: 1 addition & 1 deletion apps/web/components/pages/HomePage/RecordingModes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ const RecordingModes = () => {
</div>
{/*Video Description*/}
<div className="p-4 border-t border-b bg-gray-2 border-gray-5">
<p className="mx-auto w-full text-sm text-center md:text-xl text-gray-12">
<p className="mx-auto w-full text-lg text-center text-gray-12">
{activeMode?.description}
</p>
</div>
Expand Down
8 changes: 4 additions & 4 deletions apps/web/components/pages/HomePage/Testimonials.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,11 +120,11 @@ const testimonialItems: TestimonialItem[] = [
const Testimonials = () => {
return (
<div className="w-full max-w-[1200px] mx-auto md:px-5">
<div className="px-5 mb-16 text-center md:text-left">
<h2 className="mb-3 w-full max-w-[440px]">
<div className="px-5 mb-16 text-center">
<h1 className="mb-3 w-full max-w-[500px] mx-auto text-balance">
{homepageCopy.testimonials.title}
</h2>
<p className="text-lg leading-[1.75rem] w-full max-w-[500px]">
</h1>
<p className="text-lg text-gray-10 text-balance mx-auto leading-[1.75rem] w-full max-w-[500px]">
{homepageCopy.testimonials.subtitle}
</p>
</div>
Expand Down
14 changes: 7 additions & 7 deletions apps/web/components/pages/seo/AgenciesPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,9 @@ const FAQItem = ({
return (
<div
className={clsx(
"rounded-xl overflow-hidden border border-gray-5",
"overflow-hidden rounded-xl border border-gray-5",
isOpen
? "bg-blue-500 text-white"
? "text-white bg-blue-500"
: "bg-gray-1 hover:bg-gray-3 text-gray-12",
"transition-colors duration-200",
)}
Expand Down Expand Up @@ -96,8 +96,8 @@ const AnimatedDomainBanner = () => {
}, []);

return (
<div className="mx-auto max-w-2xl mb-12 text-center">
<div className="relative rounded-xl bg-white border border-gray-200 p-8 shadow-sm">
<div className="mx-auto mb-12 max-w-2xl text-center">
<div className="relative p-8 bg-white rounded-xl border border-gray-200 shadow-sm">
<div className="flex flex-col items-center space-y-4">
{/* Art */}
<div className="flex-shrink-0">
Expand All @@ -110,7 +110,7 @@ const AnimatedDomainBanner = () => {
</h3>

{/* Description */}
<p className="text-sm text-gray-600 max-w-md">
<p className="max-w-md text-sm text-gray-600">
Send from your own domain for higher client trust and professional
branding. Your share links reflect your agency's identity.
</p>
Expand Down Expand Up @@ -399,14 +399,14 @@ export const AgenciesPage = () => {
</div>
</div>

<div className="relative z-10 space-y-24 md:space-y-32 mt-24 mb-24 wrapper">
<div className="relative z-10 mt-24 mb-24 space-y-24 md:space-y-32 wrapper">
{/* Features Section */}
<div>
<div className="text-center max-w-[800px] mx-auto mb-16">
<h2 className="inline-block relative mb-2 text-3xl font-medium md:text-4xl text-gray-12">
{agenciesContent.featuresTitle}
</h2>
<p className="text-xl leading-relaxed text-gray-600">
<p className="text-xl leading-relaxed text-gray-10">
{agenciesContent.featuresDescription}
</p>
</div>
Expand Down
4 changes: 2 additions & 2 deletions apps/web/components/seo/SeoPageTemplate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,7 +223,7 @@ export const SeoPageTemplate = ({
<h2 className="inline-block relative mb-2 text-3xl font-medium md:text-4xl text-gray-12">
{content.featuresTitle}
</h2>
<p className="text-xl leading-relaxed text-gray-600">
<p className="text-xl leading-relaxed text-gray-10">
{renderHTML(content.featuresDescription)}
</p>
</div>
Expand All @@ -241,7 +241,7 @@ export const SeoPageTemplate = ({
<h3 className="mb-4 text-xl font-semibold text-gray-12">
{feature.title}
</h3>
<p className="leading-relaxed text-gray-600">
<p className="leading-relaxed text-gray-10">
{renderHTML(feature.description)}
</p>
</div>
Expand Down