Skip to content

Commit f797062

Browse files
twodevs-opstwodevs-ops
authored
Merge pull request #1 from twodevs-ops/feat/components-segregate
Configured JSON for the pages.
2 parents e19b8df + 07eda6c commit f797062

23 files changed

Lines changed: 1012 additions & 624 deletions

‎app/(public)/about/page.tsx‎

Lines changed: 53 additions & 136 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,13 @@ import Footer from "@/components/footer";
33
import { Button } from "@/components/ui/button";
44
import Link from "next/link";
55
import Image from "next/image";
6+
import {
7+
teamMembers,
8+
aboutPageContent,
9+
technologies,
10+
techSectionTitle,
11+
comparisons,
12+
} from "@/constants";
613

714
export default function AboutPage() {
815
return (
@@ -13,11 +20,10 @@ export default function AboutPage() {
1320
<section className="pt-20 pb-16 md:pt-32 md:pb-24 bg-linear-to-b from-primary/5 to-transparent">
1421
<div className="container-custom">
1522
<h1 className="heading-xl text-primary mb-6 text-balance">
16-
Meet the Team Behind CodeKraft Studios
23+
{aboutPageContent.hero.title}
1724
</h1>
1825
<p className="text-lg text-foreground/80">
19-
Two passionate developers with 9+ years of combined experience,
20-
helping Amritsar businesses thrive online.
26+
{aboutPageContent.hero.description}
2127
</p>
2228
</div>
2329
</section>
@@ -27,23 +33,14 @@ export default function AboutPage() {
2733
<div className="container-custom">
2834
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-16">
2935
<div>
30-
<h2 className="heading-lg text-primary mb-6">Our Story</h2>
31-
<p className="text-foreground/80 mb-4">
32-
We started CodeKraft Studios with a simple mission: to make
33-
professional websites accessible and affordable for every
34-
Amritsar business.
35-
</p>
36-
<p className="text-foreground/80 mb-4">
37-
Having worked with businesses of all sizes, we saw a gap in the
38-
market. Local businesses deserved quality, affordable websites
39-
without the corporate price tag. That&apos;s where CodeKraft
40-
Studios comes in.
41-
</p>
42-
<p className="text-foreground/80">
43-
Today, we&apos;re proudly serving Amritsar and Punjab,
44-
delivering results that matter: more customers, more revenue,
45-
more growth.
46-
</p>
36+
<h2 className="heading-lg text-primary mb-6">
37+
{aboutPageContent.story.title}
38+
</h2>
39+
{aboutPageContent.story.paragraphs.map((paragraph, idx) => (
40+
<p key={idx} className="text-foreground/80 mb-4">
41+
{paragraph}
42+
</p>
43+
))}
4744
</div>
4845
<div className="bg-primary/10 rounded-lg h-96 flex items-center justify-center">
4946
<Image
@@ -60,42 +57,26 @@ export default function AboutPage() {
6057
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
6158
<div className="p-8 rounded-lg border bg-card">
6259
<h3 className="text-2xl font-bold text-primary mb-4">
63-
Our Partnership
60+
{aboutPageContent.partnership.title}
6461
</h3>
6562
<p className="text-foreground/80 mb-4">
66-
CodeKraft Studios is a partnership between two dedicated
67-
developers combining frontend expertise with backend
68-
optimization knowledge.
63+
{aboutPageContent.partnership.description}
6964
</p>
7065
<p className="text-foreground/80">
71-
Together, we bring 9+ years of professional experience,
72-
creativity, and enterprise-grade technical skills to deliver
73-
websites that look great and perform exceptionally.
66+
{aboutPageContent.partnership.details}
7467
</p>
7568
</div>
7669
<div className="p-8 rounded-lg border bg-card">
7770
<h3 className="text-2xl font-bold text-primary mb-4">
78-
Why Two Developers?
71+
{aboutPageContent.whyTwo.title}
7972
</h3>
8073
<ul className="space-y-3 text-foreground/80">
81-
<li className="flex gap-3">
82-
<span className="text-secondary font-bold">✓</span>
83-
<span>Faster project delivery and completion</span>
84-
</li>
85-
<li className="flex gap-3">
86-
<span className="text-secondary font-bold">✓</span>
87-
<span>Better code quality through peer review</span>
88-
</li>
89-
<li className="flex gap-3">
90-
<span className="text-secondary font-bold">✓</span>
91-
<span>Backup coverage - never delayed by illness</span>
92-
</li>
93-
<li className="flex gap-3">
94-
<span className="text-secondary font-bold">✓</span>
95-
<span>
96-
Combined expertise: frontend + backend + architecture
97-
</span>
98-
</li>
74+
{aboutPageContent.whyTwo.benefits.map((benefit, idx) => (
75+
<li key={idx} className="flex gap-3">
76+
<span className="text-secondary font-bold">✓</span>
77+
<span>{benefit}</span>
78+
</li>
79+
))}
9980
</ul>
10081
</div>
10182
</div>
@@ -104,22 +85,18 @@ export default function AboutPage() {
10485
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
10586
<div className="p-8 rounded-lg border bg-card">
10687
<h3 className="text-2xl font-bold text-primary mb-4">
107-
Our Mission
88+
{aboutPageContent.mission.title}
10889
</h3>
10990
<p className="text-foreground/80">
110-
Making professional websites accessible and affordable for every
111-
Amritsar business. We believe technology should serve
112-
businesses, not complicate them.
91+
{aboutPageContent.mission.description}
11392
</p>
11493
</div>
11594
<div className="p-8 rounded-lg border bg-card">
11695
<h3 className="text-2xl font-bold text-primary mb-4">
117-
Our Vision
96+
{aboutPageContent.vision.title}
11897
</h3>
11998
<p className="text-foreground/80">
120-
Becoming Punjab&apos;s most trusted web development partner. We
121-
want every local business to have the digital presence they
122-
deserve.
99+
{aboutPageContent.vision.description}
123100
</p>
124101
</div>
125102
</div>
@@ -130,34 +107,7 @@ export default function AboutPage() {
130107
Our Team
131108
</h2>
132109
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
133-
{[
134-
{
135-
name: "Lakshay Kapoor",
136-
role: "Full Stack Developer & Co-Founder",
137-
exp: "2.5+ years",
138-
skills: [
139-
"React",
140-
"Next.js",
141-
"Node.js",
142-
"Express",
143-
"Python",
144-
"Frontend Expert",
145-
],
146-
},
147-
{
148-
name: "Amandeep Kochhar",
149-
role: "Senior Full Stack Developer & Co-Founder",
150-
exp: "6.5+ years",
151-
skills: [
152-
"React",
153-
"Angular",
154-
"Node.js",
155-
"System Architecture",
156-
"AWS",
157-
"Backend Optimization",
158-
],
159-
},
160-
].map((member, idx) => (
110+
{teamMembers.map((member, idx) => (
161111
<div
162112
key={idx}
163113
className="p-8 rounded-lg border text-center hover:shadow-lg transition bg-card"
@@ -170,7 +120,7 @@ export default function AboutPage() {
170120
{member.role}
171121
</p>
172122
<p className="text-secondary font-semibold mb-6">
173-
{member.exp} professional experience
123+
{member.experience} professional experience
174124
</p>
175125
<div className="flex flex-wrap gap-2 justify-center">
176126
{member.skills.map((skill, i) => (
@@ -193,23 +143,10 @@ export default function AboutPage() {
193143
<section className="py-16 md:py-24 bg-primary/5">
194144
<div className="container-custom">
195145
<h2 className="heading-lg text-primary mb-12 text-center">
196-
Expert in 15+ Technologies
146+
{techSectionTitle}
197147
</h2>
198148
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6">
199-
{[
200-
{ name: "React", category: "Frontend" },
201-
{ name: "Next.js", category: "Frontend" },
202-
{ name: "Angular", category: "Frontend" },
203-
{ name: "Node.js", category: "Backend" },
204-
{ name: "Express", category: "Backend" },
205-
{ name: "Python", category: "Backend" },
206-
{ name: "Flask", category: "Backend" },
207-
{ name: "PostgreSQL", category: "Database" },
208-
{ name: "MongoDB", category: "Database" },
209-
{ name: "Firebase", category: "Database" },
210-
{ name: "Tailwind CSS", category: "Styling" },
211-
{ name: "TypeScript", category: "Language" },
212-
].map((tech, idx) => (
149+
{technologies.map((tech, idx) => (
213150
<div
214151
key={idx}
215152
className="text-center p-4 rounded-lg bg-white border hover:shadow-lg transition"
@@ -228,53 +165,33 @@ export default function AboutPage() {
228165
<section className="py-16 md:py-24">
229166
<div className="container-custom">
230167
<h2 className="heading-lg text-primary mb-12 text-center">
231-
CodeKraft vs Others
168+
{comparisons.title}
232169
</h2>
233170
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
234171
<div className="p-8 rounded-lg border bg-card">
235172
<h3 className="font-bold text-lg text-primary mb-4">
236-
vs Freelancers
173+
{comparisons.vsFreelancers.title}
237174
</h3>
238175
<ul className="space-y-3 text-sm text-foreground/80">
239-
<li className="flex gap-3">
240-
<span className="text-secondary">✓</span>
241-
<span>Two developers (faster, backup coverage)</span>
242-
</li>
243-
<li className="flex gap-3">
244-
<span className="text-secondary">✓</span>
245-
<span>Professional business setup</span>
246-
</li>
247-
<li className="flex gap-3">
248-
<span className="text-secondary">✓</span>
249-
<span>Guaranteed delivery timelines</span>
250-
</li>
251-
<li className="flex gap-3">
252-
<span className="text-secondary">✓</span>
253-
<span>Structured process & support</span>
254-
</li>
176+
{comparisons.vsFreelancers.benefits.map((benefit, idx) => (
177+
<li key={idx} className="flex gap-3">
178+
<span className="text-secondary">✓</span>
179+
<span>{benefit}</span>
180+
</li>
181+
))}
255182
</ul>
256183
</div>
257184
<div className="p-8 rounded-lg border bg-card">
258185
<h3 className="font-bold text-lg text-primary mb-4">
259-
vs Big Agencies
186+
{comparisons.vsAgencies.title}
260187
</h3>
261188
<ul className="space-y-3 text-sm text-foreground/80">
262-
<li className="flex gap-3">
263-
<span className="text-secondary">✓</span>
264-
<span>Direct communication with developers</span>
265-
</li>
266-
<li className="flex gap-3">
267-
<span className="text-secondary">✓</span>
268-
<span>50-70% lower costs</span>
269-
</li>
270-
<li className="flex gap-3">
271-
<span className="text-secondary">✓</span>
272-
<span>Personal attention to your project</span>
273-
</li>
274-
<li className="flex gap-3">
275-
<span className="text-secondary">✓</span>
276-
<span>Local Amritsar presence</span>
277-
</li>
189+
{comparisons.vsAgencies.benefits.map((benefit, idx) => (
190+
<li key={idx} className="flex gap-3">
191+
<span className="text-secondary">✓</span>
192+
<span>{benefit}</span>
193+
</li>
194+
))}
278195
</ul>
279196
</div>
280197
</div>
@@ -285,17 +202,17 @@ export default function AboutPage() {
285202
<section className="py-16 md:py-24 bg-linear-to-r from-primary to-secondary text-primary-foreground">
286203
<div className="container-custom text-center">
287204
<h2 className="heading-lg mb-4 text-primary-foreground">
288-
Let&apos;s Work Together
205+
{aboutPageContent.cta.title}
289206
</h2>
290207
<p className="text-lg mb-8 text-primary-foreground/90">
291-
We&apos;re excited to help grow your business
208+
{aboutPageContent.cta.description}
292209
</p>
293210
<Button
294211
asChild
295212
size="lg"
296213
className="bg-white text-primary hover:bg-primary-foreground"
297214
>
298-
<Link href="/contact">Get in Touch Today</Link>
215+
<Link href="/contact">{aboutPageContent.cta.buttonText}</Link>
299216
</Button>
300217
</div>
301218
</section>

0 commit comments

Comments
 (0)