Skip to content

Commit 543b337

Browse files
ajay-dhangarajay-dhangar
authored
Merge pull request #4960 from codeharborhub/dev-6
update site
2 parents 34e40d3 + 8155e7c commit 543b337

File tree

3 files changed

+323
-1
lines changed

3 files changed

+323
-1
lines changed

‎src/components/HomePage/Header.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ const HeaderContent = () => {
6464
type="button" // Button type
6565
>
6666
{/* Link to documentation page */}
67-
<Link to="/docs" className="chh__header-content__input--link">
67+
<Link to="/tutorials" className="chh__header-content__input--link">
6868
Get Started
6969
</Link>
7070
</motion.button>

‎src/css/custom.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,19 @@
7272
--ifm-text-color: #fff;
7373
}
7474

75+
76+
.bg-grid-slate-200\/50 {
77+
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(226 232 240 / 0.5)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
78+
}
79+
80+
.bg-grid-slate-800\/50 {
81+
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(30 41 59 / 0.5)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
82+
}
83+
84+
.text-balance {
85+
text-wrap: balance;
86+
}
87+
7588
body {
7689
background-image: linear-gradient(
7790
to bottom,

‎src/pages/tutorials.tsx‎

Lines changed: 309 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,309 @@
1+
import React from "react";
2+
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
3+
import Layout from "@theme/Layout";
4+
import Head from "@docusaurus/Head";
5+
import Link from "@docusaurus/Link";
6+
import {
7+
Code2,
8+
Terminal,
9+
Globe,
10+
Cpu,
11+
Database,
12+
ShieldCheck,
13+
Smartphone,
14+
Layout as LayoutIcon,
15+
Layers,
16+
Rocket,
17+
Binary,
18+
Briefcase,
19+
Sparkles,
20+
ArrowRight,
21+
GitBranch,
22+
} from "lucide-react";
23+
import { motion } from "framer-motion";
24+
25+
export default function Tutorials(): JSX.Element {
26+
const { siteConfig } = useDocusaurusContext();
27+
28+
// Full content mapping based on your tutorial list
29+
const tutorialCategories = [
30+
{
31+
title: "Absolute Beginners",
32+
icon: Rocket,
33+
description: "Start here: Frontend, Backend, DevOps, and Git basics.",
34+
color: "from-green-500 to-emerald-500",
35+
path: "#", // /absolute-beginners
36+
tags: ["Frontend", "Backend", "Git/GitHub", "Full Stack"],
37+
},
38+
{
39+
title: "Web Development",
40+
icon: Globe,
41+
description: "The complete path from QA and API design to WordPress.",
42+
color: "from-blue-500 to-indigo-500",
43+
path: "#", // /web-development
44+
tags: ["Frontend", "Backend", "API Design", "GraphQL"],
45+
},
46+
{
47+
title: "AI & Machine Learning",
48+
icon: Sparkles,
49+
description: "AI Engineering, MLOps, Data Analysis, and Data Science.",
50+
color: "from-purple-500 to-pink-500",
51+
path: "#", // /ai-ml
52+
tags: ["AI Engineer", "Prompt Engineering", "MLOps"],
53+
},
54+
{
55+
title: "Languages & Platforms",
56+
icon: Terminal,
57+
description: "Master SQL, JS, Python, Rust, Go, Java, and more.",
58+
color: "from-yellow-500 to-orange-500",
59+
path: "#", // languages
60+
tags: ["Rust", "Python", "Go", "TypeScript", "C++"],
61+
},
62+
{
63+
title: "DevOps & Security",
64+
icon: ShieldCheck,
65+
description:
66+
"Infrastructure, Linux, Kubernetes, Docker, and Cyber Security.",
67+
color: "from-red-500 to-rose-500",
68+
path: "#", // devops
69+
tags: ["AWS", "Terraform", "Kubernetes", "Cyber Security"],
70+
},
71+
{
72+
title: "Computer Science",
73+
icon: Binary,
74+
description: "System Design, Architecture, and Data Structures.",
75+
color: "from-cyan-500 to-blue-500",
76+
path: "#", // computer-science
77+
tags: ["DSA", "System Design", "Software Architecture"],
78+
},
79+
{
80+
title: "Frameworks",
81+
icon: Layers,
82+
description: "React, Vue, Angular, Spring Boot, Laravel, and Django.",
83+
color: "from-indigo-500 to-purple-500",
84+
path: "#", // frameworks
85+
tags: ["React", "Next.js", "Spring Boot", "Laravel"],
86+
},
87+
{
88+
title: "Mobile & Game Dev",
89+
icon: Smartphone,
90+
description: "iOS, Android, Flutter, React Native, and Game Engines.",
91+
color: "from-emerald-500 to-teal-500",
92+
path: "#", // /mobile-game
93+
tags: ["Android", "iOS", "Flutter", "C++", "Rust"],
94+
},
95+
{
96+
title: "Management & Design",
97+
icon: Briefcase,
98+
description: "Engineering Manager, Product Manager, and UX Design.",
99+
color: "from-slate-500 to-zinc-500",
100+
path: "#", // /management
101+
tags: ["UX Design", "Product Manager", "Engineering Lead"],
102+
},
103+
];
104+
105+
return (
106+
<Layout title="Tutorials" description={siteConfig.title}>
107+
<Head>
108+
<script
109+
async
110+
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5832817025080991"
111+
crossOrigin="anonymous"
112+
/>
113+
</Head>
114+
115+
<main
116+
className="min-h-screen"
117+
style={{ backgroundColor: "var(--ifm-bg-color)" }}
118+
>
119+
{/* --- Hero Section --- */}
120+
<section className="relative pt-20 pb-12 sm:pt-32 border-b border-[var(--c-gray-20)] dark:border-[var(--c-gray-80)] overflow-hidden">
121+
122+
<div className="absolute inset-0 bg-grid-slate-200/50 dark:bg-grid-slate-800/50 [mask-image:linear-gradient(0deg,white,rgba(255,255,255,0.6))] dark:[mask-image:linear-gradient(0deg,rgba(15,23,42,1),rgba(15, 23, 42, 0.73))]" />
123+
124+
<div className="relative max-w-7xl mx-auto px-6 text-center">
125+
<motion.div
126+
initial={{ opacity: 0, y: 20 }}
127+
animate={{ opacity: 1, y: 0 }}
128+
transition={{ duration: 0.5 }}
129+
>
130+
<div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-[var(--c-indigo-10)] dark:bg-[var(--c-indigo-90)] mb-8 border border-[var(--c-indigo-20)] dark:border-[var(--c-indigo-80)]">
131+
<GitBranch className="w-4 h-4 text-[var(--ifm-color-primary)]" />
132+
<span className="text-xs font-bold uppercase tracking-wider text-[var(--c-indigo-70)] dark:text-[var(--c-indigo-20)]">
133+
The Harbor for Modern Developers
134+
</span>
135+
</div>
136+
<h1
137+
className="text-4xl md:text-6xl mb-6"
138+
style={{ color: "var(--ifm-text-color)" }}
139+
>
140+
CodeHarbor
141+
<span style={{ color: "var(--ifm-color-primary)" }}>Hub</span>{" "}
142+
Tutorials
143+
</h1>
144+
<p
145+
className="text-xl opacity-70 max-w-3xl mx-auto mt-10 mb-12"
146+
style={{ color: "var(--ifm-text-color)" }}
147+
>
148+
Comprehensive developer tutorials covering{" "}
149+
<strong>Web, Mobile, AI, DevOps,</strong> and{" "}
150+
<strong>Computer Science</strong>. Your structured guide from
151+
zero to mastery.
152+
</p>
153+
154+
<div className="flex flex-col sm:flex-row gap-4 justify-center mb-12">
155+
<Link
156+
to="https://codeharborhub.github.io/tutorial/"
157+
className="inline-flex items-center justify-center gap-2 px-8 bg-[var(--ifm-color-primary)] to-cyan-600 text-white font-semibold rounded-xl hover:shadow-lg hover:scale-105 transition-all hover:text-white hover:no-underline"
158+
>
159+
Start Learning
160+
<ArrowRight className="w-5 h-5" />
161+
</Link>
162+
<Link
163+
to="#"
164+
className="inline-flex items-center justify-center gap-2 px-8 py-4 bg-white dark:bg-slate-900 border-2 border-slate-100 dark:border-slate-800 text-slate-900 dark:text-white font-semibold rounded-xl hover:border-blue-600 dark:hover:border-blue-400 hover:scale-105 transition-all hover:no-underline"
165+
>
166+
Explore Resources
167+
</Link>
168+
</div>
169+
170+
</motion.div>
171+
</div>
172+
</section>
173+
174+
{/* --- Content Overview Grid --- */}
175+
<section className="py-20 px-4">
176+
<div className="mx-auto">
177+
<div className="flex items-center justify-between mb-12">
178+
<div>
179+
<h2
180+
className="text-3xl font-bold"
181+
style={{ color: "var(--ifm-text-color)" }}
182+
>
183+
Explore Tutorials
184+
</h2>
185+
<p
186+
className="opacity-60"
187+
style={{ color: "var(--ifm-text-color)" }}
188+
>
189+
Select a category to view the full learning path.
190+
</p>
191+
</div>
192+
</div>
193+
194+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
195+
{tutorialCategories.map((category, index) => (
196+
<motion.div
197+
key={category.title}
198+
initial={{ opacity: 0, scale: 0.95 }}
199+
whileInView={{ opacity: 1, scale: 1 }}
200+
viewport={{ once: true }}
201+
transition={{ delay: index * 0.05 }}
202+
>
203+
<Link
204+
to={category.path}
205+
className="group flex flex-col h-full p-8 rounded-3xl border border-[var(--c-gray-20)] dark:border-[var(--c-gray-80)] transition-all hover:border-[var(--ifm-color-primary)] no-underline relative overflow-hidden hover:no-underline"
206+
style={{ backgroundColor: "var(--token-secondary-bg-c)" }}
207+
>
208+
<div
209+
className={`absolute top-0 right-0 w-24 h-24 bg-gradient-to-br ${category.color} opacity-5 group-hover:opacity-20 transition-opacity rounded-bl-full`}
210+
/>
211+
212+
<div
213+
className={`w-14 h-14 rounded-2xl bg-gradient-to-br ${category.color} flex items-center justify-center mb-6 shadow-lg group-hover:scale-110 transition-transform`}
214+
>
215+
<category.icon className="text-white w-7 h-7" />
216+
</div>
217+
218+
<h3
219+
className="font-bold mb-3"
220+
style={{ color: "var(--ifm-text-color)" }}
221+
>
222+
{category.title}
223+
</h3>
224+
<p
225+
className="opacity-60 mb-6 flex-grow"
226+
style={{ color: "var(--ifm-text-color)" }}
227+
>
228+
{category.description}
229+
</p>
230+
231+
<div className="flex flex-wrap gap-2 mb-6">
232+
{category.tags.map((tag) => (
233+
<span
234+
key={tag}
235+
className="text-[10px] font-bold uppercase tracking-widest px-2 py-1 rounded bg-[var(--c-gray-10)] dark:bg-[var(--c-gray-80)] opacity-80"
236+
style={{ color: "var(--ifm-text-color)" }}
237+
>
238+
{tag}
239+
</span>
240+
))}
241+
</div>
242+
243+
<div
244+
className="flex items-center gap-2 font-bold text-sm"
245+
style={{ color: "var(--ifm-color-primary)" }}
246+
>
247+
View tutorial{" "}
248+
<ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
249+
</div>
250+
</Link>
251+
</motion.div>
252+
))}
253+
</div>
254+
</div>
255+
</section>
256+
257+
{/* --- Best Practices & Contributing --- */}
258+
<section className="pb-32 px-4">
259+
<div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8">
260+
<div className="p-10 rounded-[2.5rem] bg-zinc-900 text-white relative overflow-hidden shadow-2xl">
261+
<div className="relative z-10">
262+
<ShieldCheck className="w-12 h-12 mb-6 text-green-400" />
263+
<h3 className="text-3xl font-bold mb-4">
264+
Industry Best Practices
265+
</h3>
266+
<p className="opacity-70 mb-8">
267+
Master API security, AWS configurations, and performance
268+
optimization techniques used by top engineering teams.
269+
</p>
270+
<Link
271+
to="#" // /best-practices
272+
className="inline-flex items-center gap-2 font-bold text-green-400 no-underline hover:underline"
273+
>
274+
Learn Best Practices <ArrowRight className="w-4 h-4" />
275+
</Link>
276+
</div>
277+
</div>
278+
279+
<div className="p-10 rounded-[2.5rem] border-4 border-dashed border-[var(--c-gray-30)] dark:border-[var(--c-gray-70)] flex flex-col justify-center text-center">
280+
<h3
281+
className="text-3xl font-bold mb-4"
282+
style={{ color: "var(--ifm-text-color)" }}
283+
>
284+
Found a Gap?
285+
</h3>
286+
<p
287+
className="opacity-60 mb-8"
288+
style={{ color: "var(--ifm-text-color)" }}
289+
>
290+
Our tutorials are community-driven. Help us by contributing your
291+
expertise to the harbor.
292+
</p>
293+
<Link
294+
to="https://github.com/codeharborhub/tutorial"
295+
className="py-4 px-8 rounded-2xl font-bold no-underline transition-transform hover:scale-105"
296+
style={{
297+
backgroundColor: "var(--ifm-color-primary)",
298+
color: "white",
299+
}}
300+
>
301+
Contribute on GitHub
302+
</Link>
303+
</div>
304+
</div>
305+
</section>
306+
</main>
307+
</Layout>
308+
);
309+
}

0 commit comments

Comments
 (0)