Skip to content

Commit 236ca5d

Browse files
abinav2307abinav2307
authored
Refactor contributor section layout and styles
1 parent 2cff309 commit 236ca5d

File tree

1 file changed

+122
-39
lines changed

1 file changed

+122
-39
lines changed

‎app/page.tsx‎

Lines changed: 122 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -307,63 +307,146 @@ export default function Home() {
307307
Our Contributors
308308
</h2>
309309
<p className="text-xl text-gray-400 max-w-2xl mx-auto">
310-
Collaborating with industry leaders to advance the document database ecosystem
310+
Collaborating with industry leaders to advance the document
311+
database ecosystem
311312
</p>
312313
<div className="mt-6 w-24 h-1 bg-gradient-to-r from-blue-500 to-purple-500 mx-auto rounded-full"></div>
313314
</div>
314315

315-
<div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-3 gap-4 items-center">
316-
{/* Amazon DocumentDB */}
317-
316+
<div className="grid grid-cols-1 md:grid-cols-5 lg:grid-cols-5 gap-4 items-center">
317+
{/* Microsoft Azure */}
318+
<div className="group relative">
319+
<div className="absolute inset-0 bg-gradient-to-r from-blue-500/20 to-cyan-500/20 rounded-xl blur-lg group-hover:blur-xl transition-all duration-300 opacity-0 group-hover:opacity-100"></div>
320+
<div className="relative flex flex-col items-center justify-center p-8 bg-neutral-800/80 backdrop-blur-sm rounded-xl border border-neutral-700/50 hover:border-blue-500/50 transition-all duration-300 group-hover:transform group-hover:scale-105">
321+
<div className="w-20 h-20 flex items-center justify-center mb-4">
322+
<img
323+
src="/images/AzureLogo.png"
324+
alt="Microsoft Azure"
325+
className="w-12 h-12 group-hover:scale-110 transition-transform"
326+
/>
327+
</div>
328+
<div className="text-center">
329+
<h3 className="text-sm font-bold text-white group-hover:text-blue-300 transition-colors mb-1">
330+
Microsoft
331+
</h3>
332+
</div>
333+
</div>
334+
</div>
318335

319-
{/* YugabyteDB */}
320-
<div className="group relative">
321-
<div className="absolute inset-0 bg-gradient-to-r from-blue-500/20 to-cyan-500/20 rounded-xl blur-lg group-hover:blur-xl transition-all duration-300 opacity-0 group-hover:opacity-100"></div>
322-
<div className="relative flex flex-col items-center justify-center p-8 bg-neutral-800/80 backdrop-blur-sm rounded-xl border border-neutral-700/50 hover:border-blue-500/50 transition-all duration-300 group-hover:transform group-hover:scale-105">
323-
<div className="w-20 h-20 flex items-center justify-center mb-4">
324-
<img src="/images/YugabyteLogo.png" alt="YugabyteDB" className="w-9 h-9 group-hover:scale-110 transition-transform" />
325-
</div>
326-
<div className="text-center">
327-
<h3 className="text-sm font-bold text-white group-hover:text-blue-300 transition-colors mb-1">YugabyteDB</h3>
328-
<p className="text-xs text-gray-400 group-hover:text-gray-300 transition-colors">Distributed SQL</p>
329-
</div>
336+
{/* Amazon DocumentDB */}
337+
<div className="group relative">
338+
<div className="absolute inset-0 bg-gradient-to-r from-orange-500/20 to-yellow-500/20 rounded-xl blur-lg group-hover:blur-xl transition-all duration-300 opacity-0 group-hover:opacity-100"></div>
339+
<div className="relative flex flex-col items-center justify-center p-8 bg-neutral-800/80 backdrop-blur-sm rounded-xl border border-neutral-700/50 hover:border-orange-500/50 transition-all duration-300 group-hover:transform group-hover:scale-105">
340+
<div className="w-20 h-20 flex items-center justify-center mb-4">
341+
<img
342+
src="/images/AWS Logo.png"
343+
alt="Amazon Web Services"
344+
className="w-12 h-12 group-hover:scale-110 transition-transform"
345+
/>
346+
</div>
347+
<div className="text-center">
348+
<h3 className="text-sm font-bold text-white group-hover:text-orange-300 transition-colors mb-1">
349+
Amazon
350+
</h3>
330351
</div>
331352
</div>
353+
</div>
332354

355+
{/* Rippling */}
356+
<div className="group relative">
357+
<div className="absolute inset-0 bg-gradient-to-r from-blue-500/20 to-cyan-500/20 rounded-xl blur-lg group-hover:blur-xl transition-all duration-300 opacity-0 group-hover:opacity-100"></div>
358+
<div className="relative flex flex-col items-center justify-center p-8 bg-neutral-800/80 backdrop-blur-sm rounded-xl border border-neutral-700/50 hover:border-blue-500/50 transition-all duration-300 group-hover:transform group-hover:scale-105">
359+
<div className="w-60 h-20 flex items-center justify-center mb-4">
360+
<img
361+
src="/images/Rippling Logo no background.png"
362+
alt="Rippling"
363+
className="w-12 h-12 group-hover:scale-110 transition-transform"
364+
/>
365+
</div>
366+
<div className="text-center">
367+
<h3 className="text-sm font-bold text-white group-hover:text-blue-300 transition-colors mb-1">
368+
Rippling
369+
</h3>
370+
</div>
371+
</div>
372+
</div>
333373

374+
{/* YugabyteDB */}
375+
<div className="group relative">
376+
<div className="absolute inset-0 bg-gradient-to-r from-blue-500/20 to-cyan-500/20 rounded-xl blur-lg group-hover:blur-xl transition-all duration-300 opacity-0 group-hover:opacity-100"></div>
377+
<div className="relative flex flex-col items-center justify-center p-8 bg-neutral-800/80 backdrop-blur-sm rounded-xl border border-neutral-700/50 hover:border-blue-500/50 transition-all duration-300 group-hover:transform group-hover:scale-105">
378+
<div className="w-20 h-20 flex items-center justify-center mb-4">
379+
<img
380+
src="/images/YugabyteLogo.png"
381+
alt="YugabyteDB"
382+
className="w-9 h-9 group-hover:scale-110 transition-transform"
383+
/>
384+
</div>
385+
<div className="text-center">
386+
<h3 className="text-sm font-bold text-white group-hover:text-blue-300 transition-colors mb-1">
387+
YugabyteDB
388+
</h3>
389+
</div>
390+
</div>
391+
</div>
334392

335-
{/* Microsoft Azure */}
336-
<div className="group relative">
337-
<div className="absolute inset-0 bg-gradient-to-r from-blue-500/20 to-cyan-500/20 rounded-xl blur-lg group-hover:blur-xl transition-all duration-300 opacity-0 group-hover:opacity-100"></div>
338-
<div className="relative flex flex-col items-center justify-center p-8 bg-neutral-800/80 backdrop-blur-sm rounded-xl border border-neutral-700/50 hover:border-blue-500/50 transition-all duration-300 group-hover:transform group-hover:scale-105">
339-
<div className="w-20 h-20 flex items-center justify-center mb-4">
340-
<img src="/images/AzureLogo.png" alt="Microsoft Azure" className="w-12 h-12 group-hover:scale-110 transition-transform" />
341-
</div>
342-
<div className="text-center">
343-
<h3 className="text-sm font-bold text-white group-hover:text-blue-300 transition-colors mb-1">Microsoft</h3>
344-
<p className="text-xs text-gray-400 group-hover:text-gray-300 transition-colors">Azure</p>
345-
</div>
346-
</div>
393+
{/* AB InBev */}
394+
<div className="group relative">
395+
<div className="absolute inset-0 bg-gradient-to-r from-blue-500/20 to-cyan-500/20 rounded-xl blur-lg group-hover:blur-xl transition-all duration-300 opacity-0 group-hover:opacity-100"></div>
396+
<div className="relative flex flex-col items-center justify-center p-8 bg-neutral-800/80 backdrop-blur-sm rounded-xl border border-neutral-700/50 hover:border-blue-500/50 transition-all duration-300 group-hover:transform group-hover:scale-105">
397+
<div className="w-21 h-20 flex items-center justify-center mb-4">
398+
<img
399+
src="/images/AB InBev transparent logo.png"
400+
alt="AB InBev"
401+
className="w-15 h-12 group-hover:scale-110 transition-transform"
402+
/>
347403
</div>
404+
<div className="text-center">
405+
<h3 className="text-sm font-bold text-white group-hover:text-blue-300 transition-colors mb-1">
406+
AB InBev
407+
</h3>
408+
</div>
409+
</div>
410+
</div>
348411
</div>
349412

350-
351-
352413
{/* Artistic connection lines */}
353414
<div className="hidden lg:block absolute inset-0 pointer-events-none">
354415
<svg className="w-full h-full opacity-20" viewBox="0 0 800 400">
355-
<path d="M150 200 Q400 100 650 200" stroke="url(#gradient1)" strokeWidth="1" fill="none"/>
356-
<path d="M150 200 Q400 300 650 200" stroke="url(#gradient2)" strokeWidth="1" fill="none"/>
416+
<path
417+
d="M150 200 Q400 100 650 200"
418+
stroke="url(#gradient1)"
419+
strokeWidth="1"
420+
fill="none"
421+
/>
422+
<path
423+
d="M150 200 Q400 300 650 200"
424+
stroke="url(#gradient2)"
425+
strokeWidth="1"
426+
fill="none"
427+
/>
357428
<defs>
358-
<linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="0%">
359-
<stop offset="0%" stopColor="#3B82F6" stopOpacity="0"/>
360-
<stop offset="50%" stopColor="#8B5CF6" stopOpacity="1"/>
361-
<stop offset="100%" stopColor="#EF4444" stopOpacity="0"/>
429+
<linearGradient
430+
id="gradient1"
431+
x1="0%"
432+
y1="0%"
433+
x2="100%"
434+
y2="0%"
435+
>
436+
<stop offset="0%" stopColor="#3B82F6" stopOpacity="0" />
437+
<stop offset="50%" stopColor="#8B5CF6" stopOpacity="1" />
438+
<stop offset="100%" stopColor="#EF4444" stopOpacity="0" />
362439
</linearGradient>
363-
<linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="0%">
364-
<stop offset="0%" stopColor="#10B981" stopOpacity="0"/>
365-
<stop offset="50%" stopColor="#F59E0B" stopOpacity="1"/>
366-
<stop offset="100%" stopColor="#8B5CF6" stopOpacity="0"/>
440+
<linearGradient
441+
id="gradient2"
442+
x1="0%"
443+
y1="0%"
444+
x2="100%"
445+
y2="0%"
446+
>
447+
<stop offset="0%" stopColor="#10B981" stopOpacity="0" />
448+
<stop offset="50%" stopColor="#F59E0B" stopOpacity="1" />
449+
<stop offset="100%" stopColor="#8B5CF6" stopOpacity="0" />
367450
</linearGradient>
368451
</defs>
369452
</svg>

0 commit comments

Comments
 (0)