Skip to content

Commit 6a12af9

Browse files
mdazfar2mdazfar2
committed
homepage scrollable with new UI
1 parent 1243ca5 commit 6a12af9

10 files changed

Lines changed: 1150 additions & 289 deletions

File tree

‎website3.0/components/homepage/DiscoverSection.js‎

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
import React from "react";
2+
import Link from "next/link";
3+
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
4+
import {
5+
faBookOpen,
6+
faLightbulb,
7+
faPenNib,
8+
faChartLine,
9+
faArrowTrendUp,
10+
} from "@fortawesome/free-solid-svg-icons";
11+
12+
const highlights = [
13+
{
14+
icon: faBookOpen,
15+
title: "Explore DevOps Blogs",
16+
description:
17+
"Read high-quality blogs on Docker, Kubernetes, CI/CD, Cloud, and more.",
18+
},
19+
{
20+
icon: faLightbulb,
21+
title: "Learn from Real Experiences",
22+
description:
23+
"Gain insights from real-world problems and practical solutions shared by developers.",
24+
},
25+
{
26+
icon: faPenNib,
27+
title: "Create & Share Your Knowledge",
28+
description:
29+
"Write and publish your own blogs to help others and build your personal brand.",
30+
},
31+
{
32+
icon: faChartLine,
33+
title: "Stay Updated",
34+
description:
35+
"Keep up with the latest DevOps trends, tools, and best practices.",
36+
},
37+
];
38+
39+
const blogPreviews = [
40+
{
41+
title: "Kubernetes CrashLoopBackOff: Practical Fix Guide",
42+
author: "By Aisha Khan",
43+
snippet: "A quick diagnostic checklist to identify and resolve recurring pod restarts.",
44+
tag: "Kubernetes",
45+
},
46+
{
47+
title: "CI/CD Pipeline Failures: 7 Root Causes",
48+
author: "By Aryan DevOps",
49+
snippet: "Learn the most common deployment blockers and how teams fix them fast.",
50+
tag: "CI/CD",
51+
},
52+
{
53+
title: "From Docker Errors to Stable Builds",
54+
author: "By Meera S.",
55+
snippet: "A field-tested method to reduce image build breaks and speed up feedback loops.",
56+
tag: "Docker",
57+
},
58+
];
59+
60+
function DiscoverSection({ theme, startNowHref = "/blogs", writeBlogHref }) {
61+
return (
62+
<section
63+
className={`relative px-6 sm:px-10 lg:px-16 py-20 overflow-hidden ${
64+
theme
65+
? "bg-gradient-to-b from-[#f4f8ff] via-[#f5fbff] to-[#f3fbf7]"
66+
: "bg-gradient-to-b from-[#10172a] via-[#111827] to-[#0f1f22]"
67+
}`}
68+
>
69+
<div
70+
className="absolute inset-0 opacity-30 pointer-events-none"
71+
style={{
72+
backgroundImage:
73+
"radial-gradient(circle at 20% 15%, rgba(59,130,246,0.18), transparent 40%), radial-gradient(circle at 78% 85%, rgba(16,185,129,0.14), transparent 38%)",
74+
}}
75+
></div>
76+
77+
<div className="relative z-10 mx-auto max-w-7xl grid grid-cols-1 xl:grid-cols-2 gap-10 xl:gap-14 items-start">
78+
<div data-aos="fade-up">
79+
<h2
80+
className={`text-4xl md:text-5xl font-extrabold leading-tight ${
81+
theme ? "text-[#122336]" : "text-white"
82+
}`}
83+
>
84+
<span className="text-sky-500">Discover</span>, <span className="text-violet-500">Learn</span> & <span className="text-emerald-500">Grow</span>
85+
</h2>
86+
87+
<p
88+
className={`mt-5 text-lg md:text-xl leading-relaxed ${
89+
theme ? "text-slate-600" : "text-slate-300"
90+
}`}
91+
>
92+
Explore insightful DevOps blogs, learn from real-world experiences, and share your knowledge with the community.
93+
</p>
94+
95+
<div className="mt-8 grid sm:grid-cols-2 gap-4">
96+
{highlights.map((item, index) => (
97+
<div
98+
key={item.title}
99+
data-aos="fade-up"
100+
data-aos-delay={110 + index * 70}
101+
className={`group rounded-2xl border p-4 transition-all duration-300 hover:-translate-y-1 hover:scale-[1.01] ${
102+
theme
103+
? "bg-white/90 border-slate-200 hover:border-sky-300/80 hover:shadow-[0_0_24px_rgba(59,130,246,0.20)]"
104+
: "bg-white/5 border-white/10 hover:border-sky-300/70 hover:shadow-[0_0_24px_rgba(59,130,246,0.18)]"
105+
}`}
106+
>
107+
<div className="flex items-start gap-3">
108+
<span
109+
className={`h-10 w-10 rounded-xl flex items-center justify-center transition-all duration-300 group-hover:scale-110 ${
110+
theme
111+
? "bg-sky-50 text-sky-600"
112+
: "bg-sky-500/20 text-sky-200"
113+
}`}
114+
>
115+
<FontAwesomeIcon icon={item.icon} width={17} />
116+
</span>
117+
<div>
118+
<h3 className={`font-semibold ${theme ? "text-slate-800" : "text-slate-100"}`}>
119+
{item.title}
120+
</h3>
121+
<p className={`text-sm mt-1 leading-relaxed ${theme ? "text-slate-600" : "text-slate-300"}`}>
122+
{item.description}
123+
</p>
124+
</div>
125+
</div>
126+
</div>
127+
))}
128+
</div>
129+
130+
<div className="mt-8 flex flex-wrap gap-3">
131+
<Link
132+
href={startNowHref}
133+
className="inline-flex items-center gap-2 px-7 py-3.5 rounded-xl text-white font-semibold bg-gradient-to-r from-sky-500 via-violet-500 to-emerald-500 shadow-lg shadow-sky-500/25 transition-all duration-300 hover:scale-105 hover:shadow-xl hover:shadow-sky-500/30 active:scale-95"
134+
>
135+
Start Now
136+
<FontAwesomeIcon icon={faArrowTrendUp} width={14} />
137+
</Link>
138+
139+
{writeBlogHref && (
140+
<Link
141+
href={writeBlogHref}
142+
className={`inline-flex items-center gap-2 px-6 py-3.5 rounded-xl font-semibold border transition-all duration-300 hover:scale-105 active:scale-95 ${
143+
theme
144+
? "bg-white text-slate-700 border-slate-300 hover:border-violet-400 hover:text-violet-600"
145+
: "bg-white/5 text-slate-200 border-white/15 hover:border-violet-300/70 hover:text-violet-200"
146+
}`}
147+
>
148+
Write a Blog
149+
</Link>
150+
)}
151+
</div>
152+
</div>
153+
154+
<div className="relative" data-aos="fade-left" data-aos-delay="200">
155+
<div className="grid gap-4">
156+
{blogPreviews.map((blog, index) => (
157+
<article
158+
key={blog.title}
159+
data-aos="fade-up"
160+
data-aos-delay={160 + index * 90}
161+
className={`group rounded-2xl border p-5 transition-all duration-300 hover:-translate-y-1 hover:scale-[1.01] ${
162+
theme
163+
? "bg-white/90 border-slate-200 shadow-sm hover:shadow-xl hover:border-emerald-300/70"
164+
: "bg-white/5 border-white/10 shadow-sm hover:shadow-xl hover:border-emerald-300/60"
165+
}`}
166+
>
167+
<div className="flex items-center justify-between gap-3">
168+
<span className={`text-xs px-2.5 py-1 rounded-full font-medium ${theme ? "bg-sky-100 text-sky-700" : "bg-sky-500/20 text-sky-200"}`}>
169+
{blog.tag}
170+
</span>
171+
<span className={`text-xs ${theme ? "text-slate-500" : "text-slate-400"}`}>{blog.author}</span>
172+
</div>
173+
174+
<h3 className={`mt-3 text-lg font-semibold leading-snug ${theme ? "text-slate-800" : "text-slate-100"}`}>
175+
{blog.title}
176+
</h3>
177+
<p className={`mt-2 text-sm leading-relaxed ${theme ? "text-slate-600" : "text-slate-300"}`}>
178+
{blog.snippet}
179+
</p>
180+
181+
<div className="mt-4 h-1.5 rounded-full bg-slate-200/60 overflow-hidden">
182+
<div
183+
className="h-full bg-gradient-to-r from-sky-500 to-emerald-500"
184+
style={{ width: `${70 + index * 10}%` }}
185+
></div>
186+
</div>
187+
</article>
188+
))}
189+
</div>
190+
</div>
191+
</div>
192+
</section>
193+
);
194+
}
195+
196+
export default DiscoverSection;

‎website3.0/components/homepage/FeaturesSection.js‎

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
import React from "react";
2+
import Link from "next/link";
3+
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
4+
import {
5+
faBolt,
6+
faBookOpen,
7+
faUsers,
8+
faMagnifyingGlass,
9+
faCodeFork,
10+
faScrewdriverWrench,
11+
faWandMagicSparkles,
12+
} from "@fortawesome/free-solid-svg-icons";
13+
14+
const featureCards = [
15+
{
16+
icon: faBolt,
17+
title: "Fix DevOps Errors Instantly",
18+
description:
19+
"Access ready-made solutions for common issues in Docker, Kubernetes, CI/CD, and more.",
20+
isPopular: true,
21+
},
22+
{
23+
icon: faBookOpen,
24+
title: "Explore Learning Resources",
25+
description:
26+
"Read structured blogs and guides to improve your DevOps and cloud skills.",
27+
},
28+
{
29+
icon: faUsers,
30+
title: "Ask & Get Help from Community",
31+
description:
32+
"Post your issues and get solutions from experienced developers.",
33+
},
34+
{
35+
icon: faMagnifyingGlass,
36+
title: "Smart Search for Issues",
37+
description:
38+
"Quickly find solutions by searching error messages or keywords.",
39+
},
40+
{
41+
icon: faCodeFork,
42+
title: "Contribute to Open Source",
43+
description:
44+
"Collaborate, contribute, and grow with the DevOps community.",
45+
},
46+
{
47+
icon: faScrewdriverWrench,
48+
title: "Real-World Problem Solving",
49+
description:
50+
"Learn by solving actual DevOps challenges faced by developers.",
51+
},
52+
];
53+
54+
function FeaturesSection({ theme, exploreFeaturesHref = "/resources" }) {
55+
return (
56+
<section
57+
className={`relative px-6 sm:px-10 lg:px-16 py-20 overflow-hidden ${
58+
theme
59+
? "bg-gradient-to-b from-[#f8fcff] via-[#f7fbff] to-[#f1f9f7]"
60+
: "bg-gradient-to-b from-[#101926] via-[#0f1b22] to-[#0f171f]"
61+
}`}
62+
>
63+
<div
64+
className="absolute inset-0 opacity-30 pointer-events-none"
65+
style={{
66+
backgroundImage:
67+
"radial-gradient(circle at 20% 20%, rgba(34,211,238,0.10), transparent 40%), radial-gradient(circle at 80% 80%, rgba(16,185,129,0.10), transparent 42%)",
68+
}}
69+
></div>
70+
71+
<div className="relative z-10 mx-auto max-w-7xl">
72+
<div className="text-center" data-aos="fade-up">
73+
<h2
74+
className={`text-4xl md:text-5xl font-extrabold leading-tight ${
75+
theme ? "text-[#122336]" : "text-white"
76+
}`}
77+
>
78+
What You Can Do with HelpOps-Hub
79+
</h2>
80+
<p
81+
className={`mt-5 text-lg md:text-xl max-w-3xl mx-auto leading-relaxed ${
82+
theme ? "text-slate-600" : "text-slate-300"
83+
}`}
84+
>
85+
Powerful features designed to simplify your DevOps journey and boost productivity.
86+
</p>
87+
</div>
88+
89+
<div className="mt-12 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-5">
90+
{featureCards.map((feature, index) => (
91+
<div
92+
key={feature.title}
93+
data-aos="fade-up"
94+
data-aos-delay={100 + index * 70}
95+
className={`group relative rounded-2xl border p-5 transition-all duration-300 hover:-translate-y-1 hover:scale-[1.02] ${
96+
theme
97+
? "bg-white/90 border-slate-200 shadow-sm hover:shadow-xl hover:border-cyan-300/80 hover:shadow-cyan-500/20"
98+
: "bg-white/5 border-white/10 shadow-sm hover:shadow-xl hover:border-cyan-300/80 hover:shadow-cyan-500/15"
99+
}`}
100+
>
101+
{feature.isPopular && (
102+
<span className="absolute top-3 right-3 px-2.5 py-1 text-[10px] font-semibold tracking-wider uppercase rounded-full bg-gradient-to-r from-cyan-500 to-emerald-500 text-white">
103+
Most Popular
104+
</span>
105+
)}
106+
107+
<div
108+
className={`h-11 w-11 rounded-xl flex items-center justify-center transition-all duration-300 group-hover:scale-110 ${
109+
theme
110+
? "bg-cyan-50 text-cyan-600 group-hover:bg-cyan-100"
111+
: "bg-cyan-500/20 text-cyan-200 group-hover:bg-cyan-500/30"
112+
}`}
113+
>
114+
<FontAwesomeIcon
115+
icon={feature.icon}
116+
width={18}
117+
className="group-hover:feature-icon-pulse"
118+
/>
119+
</div>
120+
121+
<h3
122+
className={`mt-4 text-xl font-semibold ${
123+
theme ? "text-slate-800" : "text-slate-100"
124+
}`}
125+
>
126+
{feature.title}
127+
</h3>
128+
<p
129+
className={`mt-2 text-sm leading-relaxed ${
130+
theme ? "text-slate-600" : "text-slate-300"
131+
}`}
132+
>
133+
{feature.description}
134+
</p>
135+
</div>
136+
))}
137+
</div>
138+
139+
<div className="mt-10 flex justify-center" data-aos="fade-up" data-aos-delay="220">
140+
<Link
141+
href={exploreFeaturesHref}
142+
className="inline-flex items-center gap-2 px-7 py-3 rounded-xl text-white font-semibold bg-gradient-to-r from-sky-500 to-emerald-500 shadow-lg shadow-sky-500/20 transition-all duration-300 hover:scale-105 hover:shadow-xl hover:shadow-sky-500/30 active:scale-95"
143+
>
144+
<FontAwesomeIcon icon={faWandMagicSparkles} width={14} />
145+
Explore Features
146+
</Link>
147+
</div>
148+
</div>
149+
150+
<style jsx>{`
151+
:global(.feature-icon-pulse) {
152+
animation: featureIconPulse 0.9s ease;
153+
}
154+
155+
@keyframes featureIconPulse {
156+
0% {
157+
transform: scale(1);
158+
}
159+
50% {
160+
transform: scale(1.2);
161+
}
162+
100% {
163+
transform: scale(1);
164+
}
165+
}
166+
`}</style>
167+
</section>
168+
);
169+
}
170+
171+
export default FeaturesSection;

0 commit comments

Comments
 (0)