Skip to content

Commit f5977f1

Browse files
ViktorSvertokaViktorSvertoka
authored
Merge pull request #183 from DevLoversTeam/yd/feat/about/page-improvements
(SP: 1) [Frontend] About Us Page. Fixed game, topics, mobile layout
2 parents 654e70c + 3f22192 commit f5977f1

9 files changed

Lines changed: 485 additions & 212 deletions

File tree

‎frontend/app/globals.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -251,3 +251,12 @@
251251
.hover\:pause:hover .animate-marquee-vertical {
252252
animation-play-state: paused;
253253
}
254+
255+
/* Hide scrollbar for horizontal scroll containers */
256+
.scrollbar-hide {
257+
-ms-overflow-style: none; /* IE and Edge */
258+
scrollbar-width: none; /* Firefox */
259+
}
260+
.scrollbar-hide::-webkit-scrollbar {
261+
display: none; /* Chrome, Safari and Opera */
262+
}

‎frontend/components/about/CommunitySection.tsx‎

Lines changed: 33 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -46,27 +46,46 @@ export function CommunitySection() {
4646
</div>
4747

4848
<div className="max-w-7xl mx-auto px-4 text-center">
49-
<Link
50-
href="https://github.com/DevLoversTeam/devlovers.net/discussions"
49+
<div className="flex flex-col items-center gap-3 md:hidden">
50+
<span className="text-sm text-gray-600 dark:text-gray-400 font-medium">
51+
Have a success story or feature request?
52+
</span>
53+
<Link
54+
href="https://github.com/DevLoversTeam/devlovers.net/discussions"
55+
target="_blank"
56+
className="group inline-flex items-center gap-2 px-5 py-3 rounded-full
57+
bg-gray-900 dark:bg-white text-white dark:text-black
58+
text-xs font-bold uppercase tracking-wider
59+
transition-all duration-300
60+
hover:bg-[#1e5eff] dark:hover:bg-[#ff2d55]
61+
hover:text-white dark:hover:text-white
62+
hover:scale-[1.02]"
63+
>
64+
<Github size={14} />
65+
Join Discussion
66+
<ArrowRight size={12} className="group-hover:translate-x-1 transition-transform" />
67+
</Link>
68+
</div>
69+
70+
<Link
71+
href="https://github.com/DevLoversTeam/devlovers.net/discussions"
5172
target="_blank"
52-
className="group relative inline-flex flex-col md:flex-row items-center justify-center gap-4 p-1.5 pl-6 pr-1.5 rounded-full
73+
className="group relative hidden md:inline-flex items-center justify-center gap-4 p-1.5 pl-6 pr-1.5 rounded-full
5374
bg-white dark:bg-white/5 border border-gray-200 dark:border-white/10
5475
transition-all duration-300 ease-out
55-
hover:scale-[1.02]
76+
hover:scale-[1.02]
5677
hover:border-[#1e5eff]/50 dark:hover:border-[#ff2d55]/50
5778
hover:shadow-[0_0_30px_-5px_rgba(30,94,255,0.15)] dark:hover:shadow-[0_0_30px_-5px_rgba(255,45,85,0.15)]"
5879
>
59-
<div className="flex flex-col items-start md:items-center">
60-
<span className="text-sm text-gray-700 dark:text-gray-200 font-medium">
61-
Have a success story or feature request?
62-
</span>
63-
</div>
64-
65-
<span className="flex items-center gap-2 px-5 py-2.5 rounded-full
66-
bg-gray-900 dark:bg-white text-white dark:text-black
67-
text-xs font-bold uppercase tracking-wider
80+
<span className="text-sm text-gray-700 dark:text-gray-200 font-medium">
81+
Have a success story or feature request?
82+
</span>
83+
84+
<span className="flex items-center gap-2 px-5 py-2.5 rounded-full
85+
bg-gray-900 dark:bg-white text-white dark:text-black
86+
text-xs font-bold uppercase tracking-wider
6887
transition-all duration-300
69-
group-hover:bg-[#1e5eff] dark:group-hover:bg-[#ff2d55]
88+
group-hover:bg-[#1e5eff] dark:group-hover:bg-[#ff2d55]
7089
group-hover:text-white dark:group-hover:text-white"
7190
>
7291
<Github size={14} />

‎frontend/components/about/FeaturesSection.tsx‎

Lines changed: 34 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -128,39 +128,40 @@ export function FeaturesSection() {
128128
</Link>
129129
</div>
130130

131-
<div className="flex flex-wrap justify-center gap-2 mb-8 p-1.5 transition-all
132-
rounded-2xl md:rounded-full
133-
border border-gray-200 dark:border-white/10
134-
bg-white dark:bg-white/5 backdrop-blur-md shadow-sm dark:shadow-none"
135-
>
136-
{features.map((feature) => {
137-
const isActive = activeTab === feature.id
138-
return (
139-
<button
140-
key={feature.id}
141-
onClick={() => setActiveTab(feature.id)}
142-
className={`relative px-5 py-2.5 rounded-full text-sm font-medium transition-all duration-300 ${
143-
isActive
144-
? "text-white"
145-
: "text-gray-600 dark:text-gray-400 hover:text-black dark:hover:text-white hover:bg-gray-100 dark:hover:bg-white/10"
146-
}`}
147-
>
148-
{isActive && (
149-
<motion.div
150-
layoutId="activeTabBackground"
151-
className="absolute inset-0 bg-[#1e5eff] dark:bg-[#ff2d55] shadow-lg shadow-[#1e5eff]/25 dark:shadow-[#ff2d55]/25"
152-
initial={false}
153-
transition={{ type: "spring", bounce: 0.2, duration: 0.6 }}
154-
style={{ borderRadius: 9999 }}
155-
/>
156-
)}
157-
<span className="relative z-10 flex items-center gap-2">
158-
<feature.icon size={16} />
159-
{t(`${feature.id}.title`)}
160-
</span>
161-
</button>
162-
)
163-
})}
131+
<div className="flex justify-center mb-8">
132+
<div className="inline-flex gap-1 md:gap-2 p-1.5 rounded-full
133+
border border-gray-200 dark:border-white/10
134+
bg-white dark:bg-white/5 backdrop-blur-md shadow-sm dark:shadow-none"
135+
>
136+
{features.map((feature) => {
137+
const isActive = activeTab === feature.id
138+
return (
139+
<button
140+
key={feature.id}
141+
onClick={() => setActiveTab(feature.id)}
142+
className={`relative p-2.5 md:px-5 md:py-2.5 rounded-full text-sm font-medium transition-all duration-300 ${
143+
isActive
144+
? "text-white"
145+
: "text-gray-600 dark:text-gray-400 hover:text-black dark:hover:text-white hover:bg-gray-100 dark:hover:bg-white/10"
146+
}`}
147+
>
148+
{isActive && (
149+
<motion.div
150+
layoutId="activeTabBackground"
151+
className="absolute inset-0 bg-[#1e5eff] dark:bg-[#ff2d55] shadow-lg shadow-[#1e5eff]/25 dark:shadow-[#ff2d55]/25"
152+
initial={false}
153+
transition={{ type: "spring", bounce: 0.2, duration: 0.6 }}
154+
style={{ borderRadius: 9999 }}
155+
/>
156+
)}
157+
<span className="relative z-10 flex items-center gap-2">
158+
<feature.icon size={18} className="md:w-4 md:h-4" />
159+
<span className="hidden md:inline">{t(`${feature.id}.title`)}</span>
160+
</span>
161+
</button>
162+
)
163+
})}
164+
</div>
164165
</div>
165166

166167
<div className="max-w-2xl mx-auto text-center relative h-20 w-full overflow-hidden">

‎frontend/components/about/HeroSection.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export function HeroSection({ stats }: { stats?: PlatformStats }) {
1515
}
1616

1717
return (
18-
<DynamicGridBackground className="flex min-h-[calc(100svh)] items-center justify-center bg-gray-50 transition-colors duration-300 dark:bg-transparent pt-20 pb-10">
18+
<DynamicGridBackground showStaticGrid className="flex min-h-[calc(100svh)] items-center justify-center bg-gray-50 transition-colors duration-300 dark:bg-transparent pt-20 pb-10">
1919
<div className="relative z-10 grid w-full max-w-[1600px] grid-cols-1 items-center px-4 sm:px-6 lg:px-8 xl:grid-cols-12 xl:gap-8 h-full">
2020

2121
<div className="hidden h-full flex-col justify-center gap-24 xl:col-span-3 xl:flex">

0 commit comments

Comments
 (0)