diff --git a/src/app/sponsors/page.tsx b/src/app/sponsors/page.tsx index 3dc03c2..d6ccc8b 100644 --- a/src/app/sponsors/page.tsx +++ b/src/app/sponsors/page.tsx @@ -5,7 +5,7 @@ import Image from 'next/image'; import astronaut from '../../assets/images/astronaut.svg'; export default function Sponsors() { - const sponsorsList: SponsorCardProps[] = []; + const sponsorsList: SponsorCardProps[] = Array(30).fill({ name: 'nextjs', logo: '/next.svg' }); // backend logic // sponsorsList = await(await fetch("backend url",{next:{tags:['collection']}})).json(); @@ -23,10 +23,12 @@ export default function Sponsors() {
SPONSORS
-
- {sponsorsList.map((e: SponsorCardProps) => ( - - ))} +
+
+ {sponsorsList.map((e: SponsorCardProps) => ( + + ))} +
) : ( diff --git a/src/app/sponsors/sponsors.module.css b/src/app/sponsors/sponsors.module.css index accabd1..f48b26f 100644 --- a/src/app/sponsors/sponsors.module.css +++ b/src/app/sponsors/sponsors.module.css @@ -91,7 +91,7 @@ height: min-content; @media screen and (max-width:560px) { - transform: translate(10%, -85%); + transform: translate(10%, -05%); margin-top: 60px; } } @@ -120,6 +120,7 @@ display: flex; justify-content: center; align-items: center; + @media screen and (max-width:560px) { transform: translate(10%, -45%); margin-top: 60px; @@ -131,21 +132,39 @@ display: flex; flex-wrap: wrap; max-height: 100%; - overflow-y: scroll; + width: fit-content; + height: fit-content; overflow-x: hidden; + gap: 115px; + justify-content: center; + @media screen and (max-width:560px) { flex-wrap: nowrap; flex-direction: column; align-items: center; - gap:5px; + gap: 5px; } } .astro { overflow: hidden; min-width: 220px !important; + @media screen and (max-width:560px) { display: none; } +} + +.parentList { + padding: 50px; + display: flex; + justify-content: center; + align-items: center; + overflow-y: scroll; + + +} +.parentList::-webkit-scrollbar { + display: none; } \ No newline at end of file diff --git a/src/assets/images/top-left-border.svg b/src/assets/images/top-left-border.svg index be9956d..4016c5a 100644 --- a/src/assets/images/top-left-border.svg +++ b/src/assets/images/top-left-border.svg @@ -1,3 +1,3 @@ - + diff --git a/src/assets/images/top-right-border.svg b/src/assets/images/top-right-border.svg index 8681aeb..ccc2310 100644 --- a/src/assets/images/top-right-border.svg +++ b/src/assets/images/top-right-border.svg @@ -1,3 +1,3 @@ - + diff --git a/src/components/SponsorCard/SponsorCard.tsx b/src/components/SponsorCard/SponsorCard.tsx index 0597454..60c242f 100644 --- a/src/components/SponsorCard/SponsorCard.tsx +++ b/src/components/SponsorCard/SponsorCard.tsx @@ -9,9 +9,9 @@ import { motion } from 'framer-motion'; import { useEffect, useState } from 'react'; const SponsorCard = ({ name, logo }: SponsorCardProps) => { - const [dim, setDim] = useState(0.75); + const [dim, setDim] = useState(1); useEffect(() => { - setDim(window.innerWidth < 560 ? 0.65 : 0.75); + setDim(window.innerWidth < 560 ? 0.65 : 1); }, []); return ( diff --git a/src/components/SponsorCard/styles.module.css b/src/components/SponsorCard/styles.module.css index c5f8add..63ca903 100644 --- a/src/components/SponsorCard/styles.module.css +++ b/src/components/SponsorCard/styles.module.css @@ -6,8 +6,8 @@ .borderOverlay, .sponsorParent { - width: 455px; - height: 340px; + width: 341px; + height:255px; grid-area: 1/1; } @@ -34,8 +34,8 @@ } .title { - width: 425px; - height: 85px; + width: 318px; + height: 64px; flex-shrink: 0; transform: translateY(-15%); background: rgba(57, 158, 184, 0.5); @@ -52,8 +52,8 @@ font-style: normal; font-weight: 400; line-height: normal; - width: 405px; - height: 65px; + width: 304px; + height: 49px; flex-shrink: 0; border: 5px solid rgba(255, 255, 255, 0.5); display: flex; @@ -62,8 +62,8 @@ } .body { - width: 425px; - height: 195px; + width: 319px; + height: 146px; flex-shrink: 0; border: 0.5px solid #fff; @@ -71,4 +71,6 @@ display: flex; justify-content: center; align-items: center; + + padding: 10px; } \ No newline at end of file