Skip to content

Commit 2c0be20

Browse files
huamanrajapsinghdev
huamanraj
authored and
apsinghdev
committed
perf: impoved the Interaction to Next Paint pages
1 parent 20ee059 commit 2c0be20

10 files changed

Lines changed: 430 additions & 450 deletions

File tree

‎apps/web/src/app/(main)/(landing)/pitch/page.tsx‎

Lines changed: 88 additions & 232 deletions
Large diffs are not rendered by default.

‎apps/web/src/app/(main)/contact/page.tsx‎

Lines changed: 72 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
/* eslint-disable react/no-unescaped-entities */
21
import React from "react";
3-
import { Mail, Phone } from "lucide-react";
2+
import { Mail, Phone, MessageSquare, Github, Youtube } from "lucide-react";
43
import type { Metadata } from "next";
54
import {
65
LegalPageLayout,
@@ -11,10 +10,15 @@ import {
1110
LegalContent,
1211
} from "@/components/legal";
1312

13+
// This page should be static and CDN-cacheable.
14+
// Helps a lot if your TTFB is high due to middleware/session work elsewhere.
15+
export const dynamic = "force-static";
16+
export const revalidate = 60000;
17+
1418
export const metadata: Metadata = {
1519
title: "Contact Us - Opensox AI",
1620
description:
17-
"Get in touch with Opensox AI. Contact us via email at hi@opensox.ai or call +91 844-7500-346 for support and inquiries.",
21+
"Get in touch with Opensox AI. Email hi@opensox.ai or call +91 844-7500-346 for support and inquiries.",
1822
};
1923

2024
export default function ContactPage() {
@@ -26,51 +30,55 @@ export default function ContactPage() {
2630
/>
2731

2832
<LegalContent>
29-
{/* Introduction */}
33+
{/* Intro */}
3034
<section>
31-
<p className="text-lg mb-8">
32-
Have questions, feedback, or need assistance? We're here to help!
33-
Reach out to us through any of the following channels:
35+
<p className="text-lg mb-8 text-text-secondary">
36+
Have questions, feedback, or need assistance? We&apos;re here to
37+
help. Reach out through any of the channels below.
3438
</p>
3539

3640
{/* Contact Cards */}
3741
<div className="grid md:grid-cols-2 gap-6">
38-
{/* Email Card */}
39-
<LegalCard className="hover:border-[#363636] transition-colors">
42+
{/* Email */}
43+
<LegalCard className="hover:border-border-light transition-colors">
4044
<div className="flex items-start gap-4">
41-
<div className="p-3 bg-[#252525] rounded-lg">
42-
<Mail className="w-6 h-6 text-[#9455f4]" />
45+
<div className="p-3 bg-surface-tertiary rounded-lg border border-border">
46+
<Mail className="w-6 h-6 text-brand-purple-light" />
4347
</div>
44-
<div>
45-
<h3 className="text-xl font-semibold mb-2">Email</h3>
48+
<div className="min-w-0">
49+
<h3 className="text-xl font-semibold mb-2 text-text-primary">
50+
Email
51+
</h3>
4652
<a
4753
href="mailto:hi@opensox.ai"
48-
className="text-blue-400 hover:text-blue-300 transition-colors text-lg"
54+
className="text-link hover:text-link-hover transition-colors text-lg break-all"
4955
>
5056
hi@opensox.ai
5157
</a>
52-
<p className="text-sm text-[#b1b1b1] mt-2">
53-
For general inquiries, support, and feedback
58+
<p className="text-sm text-text-tertiary mt-2">
59+
General inquiries, support, and feedback
5460
</p>
5561
</div>
5662
</div>
5763
</LegalCard>
5864

59-
{/* Phone Card */}
60-
<LegalCard className="hover:border-[#363636] transition-colors">
65+
{/* Phone */}
66+
<LegalCard className="hover:border-border-light transition-colors">
6167
<div className="flex items-start gap-4">
62-
<div className="p-3 bg-[#252525] rounded-lg">
63-
<Phone className="w-6 h-6 text-[#9455f4]" />
68+
<div className="p-3 bg-surface-tertiary rounded-lg border border-border">
69+
<Phone className="w-6 h-6 text-brand-purple-light" />
6470
</div>
65-
<div>
66-
<h3 className="text-xl font-semibold mb-2">Phone</h3>
71+
<div className="min-w-0">
72+
<h3 className="text-xl font-semibold mb-2 text-text-primary">
73+
Phone
74+
</h3>
6775
<a
6876
href="tel:+918447500346"
69-
className="text-blue-400 hover:text-blue-300 transition-colors text-lg"
77+
className="text-link hover:text-link-hover transition-colors text-lg"
7078
>
7179
+91 844-7500-346
7280
</a>
73-
<p className="text-sm text-[#b1b1b1] mt-2">
81+
<p className="text-sm text-text-tertiary mt-2">
7482
Available during business hours (IST)
7583
</p>
7684
</div>
@@ -81,94 +89,100 @@ export default function ContactPage() {
8189

8290
{/* Response Time */}
8391
<LegalCard>
84-
<h2 className="text-2xl lg:text-3xl font-semibold mb-4">
92+
<h2 className="text-2xl lg:text-3xl font-semibold mb-4 text-text-primary">
8593
Response Time
8694
</h2>
87-
<p>
88-
We typically respond to all inquiries within 24-48 hours during
89-
business days. For urgent matters, please mention "URGENT" in your
90-
email subject line.
95+
<p className="text-text-secondary">
96+
We typically respond within 24 to 48 hours on business days. For
97+
urgent matters, include{" "}
98+
<span className="font-semibold">URGENT</span> in your email subject.
9199
</p>
92100
</LegalCard>
93101

94-
{/* What to Include */}
95-
<LegalSection title="When Contacting Us, Please Include:">
96-
<ul className="list-disc list-inside space-y-2 ml-4">
102+
{/* What to include */}
103+
<LegalSection title="When contacting us, please include:">
104+
<ul className="list-disc list-inside space-y-2 ml-4 text-text-secondary">
97105
<li>Your registered email address (if applicable)</li>
98106
<li>A clear description of your inquiry or issue</li>
99-
<li>
100-
Any relevant screenshots or error messages (if reporting a bug)
101-
</li>
107+
<li>Relevant screenshots or error messages (if reporting a bug)</li>
102108
<li>Your subscription type (Free or Pro) if related to features</li>
103109
</ul>
104110
</LegalSection>
105111

106-
{/* Other Ways to Connect */}
107-
<LegalSection title="Other Ways to Connect">
108-
<div className="space-y-4">
112+
{/* Other ways */}
113+
<LegalSection title="Other ways to connect">
114+
<div className="space-y-6">
109115
<div>
110-
<h3 className="text-xl font-semibold mb-2">Community Discord</h3>
111-
<p className="mb-2">
112-
Join our Discord community for real-time discussions, help from
113-
other users, and updates about Opensox AI.
116+
<h3 className="text-xl font-semibold mb-2 text-text-primary">
117+
Community Discord
118+
</h3>
119+
<p className="mb-2 text-text-secondary">
120+
Join the Discord community for discussions, help from other
121+
users, and updates about Opensox AI.
114122
</p>
115123
<a
116124
href="https://discord.gg/zbHzgMNBrm"
117125
target="_blank"
118126
rel="noopener noreferrer"
119-
className="text-blue-400 hover:text-blue-300 transition-colors"
127+
className="inline-flex items-center gap-2 text-link hover:text-link-hover transition-colors"
120128
>
121-
Join Discord Community →
129+
<MessageSquare className="w-4 h-4" />
130+
Join Discord Community
122131
</a>
123132
</div>
124133

125134
<div>
126-
<h3 className="text-xl font-semibold mb-2">Social Media</h3>
127-
<p className="mb-2">
128-
Follow us on social media for updates, tips, and community
129-
highlights:
135+
<h3 className="text-xl font-semibold mb-2 text-text-primary">
136+
Social Media
137+
</h3>
138+
<p className="mb-3 text-text-secondary">
139+
Follow for updates, tips, and community highlights:
130140
</p>
131-
<div className="flex flex-wrap gap-4 mt-3">
141+
<div className="flex flex-wrap gap-4">
132142
<a
133143
href="https://x.com/opensoxai"
134144
target="_blank"
135145
rel="noopener noreferrer"
136-
className="text-blue-400 hover:text-blue-300 transition-colors"
146+
className="text-link hover:text-link-hover transition-colors"
137147
>
138148
Twitter/X
139149
</a>
140150
<a
141151
href="https://github.com/apsinghdev/opensox"
142152
target="_blank"
143153
rel="noopener noreferrer"
144-
className="text-blue-400 hover:text-blue-300 transition-colors"
154+
className="inline-flex items-center gap-2 text-link hover:text-link-hover transition-colors"
145155
>
156+
<Github className="w-4 h-4" />
146157
GitHub
147158
</a>
148159
<a
149160
href="https://www.youtube.com/channel/UC7QV7uSxlbha-bNPaev5MeQ"
150161
target="_blank"
151162
rel="noopener noreferrer"
152-
className="text-blue-400 hover:text-blue-300 transition-colors"
163+
className="inline-flex items-center gap-2 text-link hover:text-link-hover transition-colors"
153164
>
165+
<Youtube className="w-4 h-4" />
154166
YouTube
155167
</a>
156168
</div>
157169
</div>
158170

159171
<div>
160-
<h3 className="text-xl font-semibold mb-2">GitHub Issues</h3>
161-
<p className="mb-2">
162-
Found a bug or have a feature request? Open an issue on our
163-
GitHub repository:
172+
<h3 className="text-xl font-semibold mb-2 text-text-primary">
173+
GitHub Issues
174+
</h3>
175+
<p className="mb-2 text-text-secondary">
176+
Found a bug or have a feature request? Open an issue on GitHub:
164177
</p>
165178
<a
166179
href="https://github.com/apsinghdev/opensox/issues"
167180
target="_blank"
168181
rel="noopener noreferrer"
169-
className="text-blue-400 hover:text-blue-300 transition-colors"
182+
className="inline-flex items-center gap-2 text-link hover:text-link-hover transition-colors"
170183
>
171-
Report an Issue →
184+
<Github className="w-4 h-4" />
185+
Report an Issue
172186
</a>
173187
</div>
174188
</div>

‎apps/web/src/app/(main)/dashboard/oss-programs/ProgramsList.tsx‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
"use client";
22

3-
import { useState, useMemo } from "react";
3+
import { useState, useMemo, useCallback } from "react";
44
import { Program } from "@/data/oss-programs/types";
55
import { SearchInput, TagFilter, ProgramCard } from "@/components/oss-programs";
66

@@ -13,6 +13,15 @@ export default function ProgramsList({ programs, tags }: ProgramsListProps) {
1313
const [searchQuery, setSearchQuery] = useState("");
1414
const [selectedTags, setSelectedTags] = useState<string[]>([]);
1515

16+
// Memoize handlers to prevent child re-renders
17+
const handleSearchChange = useCallback((value: string) => {
18+
setSearchQuery(value);
19+
}, []);
20+
21+
const handleTagsChange = useCallback((newTags: string[]) => {
22+
setSelectedTags(newTags);
23+
}, []);
24+
1625
const filteredPrograms = useMemo(() => {
1726
return programs.filter((program) => {
1827
const matchesSearch =
@@ -41,13 +50,13 @@ export default function ProgramsList({ programs, tags }: ProgramsListProps) {
4150
<div className="flex flex-col md:flex-row gap-4 w-full min-w-0">
4251
<SearchInput
4352
value={searchQuery}
44-
onChange={setSearchQuery}
53+
onChange={handleSearchChange}
4554
placeholder="Search programs..."
4655
/>
4756
<TagFilter
4857
tags={tags}
4958
selectedTags={selectedTags}
50-
onTagsChange={setSelectedTags}
59+
onTagsChange={handleTagsChange}
5160
/>
5261
</div>
5362
</div>

0 commit comments

Comments
 (0)