Skip to content

Commit 4cfdc6b

Browse files
0xdevcollins0xdevcollins
committed
refactor: enhance ProjectCard component with improved animations and structure
- Introduced memoization and useCallback for performance optimization. - Updated GSAP animations for smoother hover effects and entrance transitions. - Added a Progress component to display project funding status. - Refactored layout for better readability and maintainability.
1 parent fa518b8 commit 4cfdc6b

20 files changed

Lines changed: 582 additions & 219 deletions

‎app/(landing)/waitlist/page.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,21 @@ import { Metadata } from 'next';
22
import { generatePageMetadata } from '@/lib/metadata';
33
import WaitlistForm from '@/components/waitlist/WaitlistForm';
44
import BeamBackground from '@/components/landing-page/BeamBackground';
5+
import Image from 'next/image';
56

67
export const metadata: Metadata = generatePageMetadata('waitlist');
78

89
export default function WaitlistPage() {
910
return (
10-
<div className='bg-[url(/waitlist-bg.svg)] bg-cover bg-center'>
11+
<div className=''>
12+
<Image
13+
src='/waitlist-bg.svg'
14+
alt='waitlist-bg'
15+
fill
16+
className='absolute top-0 left-0 bg-acscent h-screen w-screen'
17+
/>
1118
<BeamBackground />
19+
1220
<WaitlistForm />
1321
</div>
1422
);

‎app/globals.css‎

Lines changed: 269 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,9 @@
7070
--radius-md: calc(var(--radius) - 2px);
7171
--radius-lg: var(--radius);
7272
--radius-xl: calc(var(--radius) + 4px);
73+
74+
/* Custom breakpoints for 4K screens */
75+
--breakpoint-4xl: 2560px;
7376
}
7477

7578
:root {
@@ -412,3 +415,269 @@ input[type='number'] {
412415
background-image: url('/landing/about/Abstract_03md.png');
413416
}
414417
}
418+
419+
/* Custom 4K breakpoint media queries */
420+
@media (min-width: 2560px) {
421+
.4xl\:text-7xl {
422+
font-size: 5rem;
423+
line-height: 1;
424+
}
425+
.4xl\:text-2xl {
426+
font-size: 1.5rem;
427+
line-height: 2rem;
428+
}
429+
.4xl\:px-16 {
430+
padding-left: 4rem;
431+
padding-right: 4rem;
432+
}
433+
.4xl\:px-32 {
434+
padding-left: 8rem;
435+
padding-right: 8rem;
436+
}
437+
.4xl\:py-8 {
438+
padding-top: 2rem;
439+
padding-bottom: 2rem;
440+
}
441+
.4xl\:py-6 {
442+
padding-top: 1.5rem;
443+
padding-bottom: 1.5rem;
444+
}
445+
.4xl\:py-5 {
446+
padding-top: 1.25rem;
447+
padding-bottom: 1.25rem;
448+
}
449+
.4xl\:py-4 {
450+
padding-top: 1rem;
451+
padding-bottom: 1rem;
452+
}
453+
.4xl\:px-10 {
454+
padding-left: 2.5rem;
455+
padding-right: 2.5rem;
456+
}
457+
.4xl\:px-12 {
458+
padding-left: 3rem;
459+
padding-right: 3rem;
460+
}
461+
.4xl\:px-16 {
462+
padding-left: 4rem;
463+
padding-right: 4rem;
464+
}
465+
.4xl\:px-5 {
466+
padding-left: 1.25rem;
467+
padding-right: 1.25rem;
468+
}
469+
.4xl\:px-6 {
470+
padding-left: 1.5rem;
471+
padding-right: 1.5rem;
472+
}
473+
.4xl\:gap-10 {
474+
gap: 2.5rem;
475+
}
476+
.4xl\:gap-8 {
477+
gap: 2rem;
478+
}
479+
.4xl\:gap-6 {
480+
gap: 1.5rem;
481+
}
482+
.4xl\:gap-4 {
483+
gap: 1rem;
484+
}
485+
.4xl\:gap-3 {
486+
gap: 0.75rem;
487+
}
488+
.4xl\:space-x-3 > :not([hidden]) ~ :not([hidden]) {
489+
margin-left: 0.75rem;
490+
}
491+
.4xl\:space-y-3 > :not([hidden]) ~ :not([hidden]) {
492+
margin-top: 0.75rem;
493+
}
494+
.4xl\:space-y-2 > :not([hidden]) ~ :not([hidden]) {
495+
margin-top: 0.5rem;
496+
}
497+
.4xl\:space-y-1 > :not([hidden]) ~ :not([hidden]) {
498+
margin-top: 0.25rem;
499+
}
500+
.4xl\:w-8 {
501+
width: 2rem;
502+
}
503+
.4xl\:h-8 {
504+
height: 2rem;
505+
}
506+
.4xl\:w-7 {
507+
width: 1.75rem;
508+
}
509+
.4xl\:h-7 {
510+
height: 1.75rem;
511+
}
512+
.4xl\:w-6 {
513+
width: 1.5rem;
514+
}
515+
.4xl\:h-6 {
516+
height: 1.5rem;
517+
}
518+
.4xl\:w-5 {
519+
width: 1.25rem;
520+
}
521+
.4xl\:h-5 {
522+
height: 1.25rem;
523+
}
524+
.4xl\:w-4 {
525+
width: 1rem;
526+
}
527+
.4xl\:h-4 {
528+
height: 1rem;
529+
}
530+
.4xl\:w-3 {
531+
width: 0.75rem;
532+
}
533+
.4xl\:h-3 {
534+
height: 0.75rem;
535+
}
536+
.4xl\:w-2 {
537+
width: 0.5rem;
538+
}
539+
.4xl\:h-2 {
540+
height: 0.5rem;
541+
}
542+
.4xl\:w-1 {
543+
width: 0.25rem;
544+
}
545+
.4xl\:h-1 {
546+
height: 0.25rem;
547+
}
548+
.4xl\:max-w-7xl {
549+
max-width: 80rem;
550+
}
551+
.4xl\:max-w-6xl {
552+
max-width: 72rem;
553+
}
554+
.4xl\:max-w-5xl {
555+
max-width: 64rem;
556+
}
557+
.4xl\:max-w-4xl {
558+
max-width: 56rem;
559+
}
560+
.4xl\:max-w-3xl {
561+
max-width: 48rem;
562+
}
563+
.4xl\:max-w-2xl {
564+
max-width: 42rem;
565+
}
566+
.4xl\:max-w-xl {
567+
max-width: 36rem;
568+
}
569+
.4xl\:max-w-lg {
570+
max-width: 32rem;
571+
}
572+
.4xl\:max-w-md {
573+
max-width: 28rem;
574+
}
575+
.4xl\:max-w-sm {
576+
max-width: 24rem;
577+
}
578+
.4xl\:max-w-xs {
579+
max-width: 20rem;
580+
}
581+
.4xl\:max-w-\[600px\] {
582+
max-width: 600px;
583+
}
584+
.4xl\:max-w-\[500px\] {
585+
max-width: 500px;
586+
}
587+
.4xl\:max-w-\[400px\] {
588+
max-width: 400px;
589+
}
590+
.4xl\:max-w-\[300px\] {
591+
max-width: 300px;
592+
}
593+
.4xl\:max-w-\[280px\] {
594+
max-width: 280px;
595+
}
596+
.4xl\:max-w-\[320px\] {
597+
max-width: 320px;
598+
}
599+
.4xl\:grid-cols-5 {
600+
grid-template-columns: repeat(5, minmax(0, 1fr));
601+
}
602+
.4xl\:grid-cols-4 {
603+
grid-template-columns: repeat(4, minmax(0, 1fr));
604+
}
605+
.4xl\:grid-cols-3 {
606+
grid-template-columns: repeat(3, minmax(0, 1fr));
607+
}
608+
.4xl\:grid-cols-2 {
609+
grid-template-columns: repeat(2, minmax(0, 1fr));
610+
}
611+
.4xl\:grid-cols-1 {
612+
grid-template-columns: repeat(1, minmax(0, 1fr));
613+
}
614+
.4xl\:col-span-5 {
615+
grid-column: span 5 / span 5;
616+
}
617+
.4xl\:col-span-4 {
618+
grid-column: span 4 / span 4;
619+
}
620+
.4xl\:col-span-3 {
621+
grid-column: span 3 / span 3;
622+
}
623+
.4xl\:col-span-2 {
624+
grid-column: span 2 / span 2;
625+
}
626+
.4xl\:col-span-1 {
627+
grid-column: span 1 / span 1;
628+
}
629+
.4xl\:h-\[900px\] {
630+
height: 900px;
631+
}
632+
.4xl\:h-\[800px\] {
633+
height: 800px;
634+
}
635+
.4xl\:h-\[700px\] {
636+
height: 700px;
637+
}
638+
.4xl\:h-\[600px\] {
639+
height: 600px;
640+
}
641+
.4xl\:h-\[500px\] {
642+
height: 500px;
643+
}
644+
.4xl\:h-\[400px\] {
645+
height: 400px;
646+
}
647+
.4xl\:rounded-2xl {
648+
border-radius: 1rem;
649+
}
650+
.4xl\:rounded-xl {
651+
border-radius: 0.75rem;
652+
}
653+
.4xl\:rounded-lg {
654+
border-radius: 0.5rem;
655+
}
656+
.4xl\:rounded-md {
657+
border-radius: 0.375rem;
658+
}
659+
.4xl\:rounded-sm {
660+
border-radius: 0.125rem;
661+
}
662+
.4xl\:rounded {
663+
border-radius: 0.25rem;
664+
}
665+
.4xl\:tracking-\[0\.84px\] {
666+
letter-spacing: 0.84px;
667+
}
668+
.4xl\:tracking-\[0\.72px\] {
669+
letter-spacing: 0.72px;
670+
}
671+
.4xl\:tracking-\[0\.6px\] {
672+
letter-spacing: 0.6px;
673+
}
674+
.4xl\:tracking-\[0\.48px\] {
675+
letter-spacing: 0.48px;
676+
}
677+
.4xl\:tracking-\[0\.36px\] {
678+
letter-spacing: 0.36px;
679+
}
680+
.4xl\:tracking-\[0\.24px\] {
681+
letter-spacing: 0.24px;
682+
}
683+
}

0 commit comments

Comments
 (0)