styles: projects select card

peakshift · Dec 28, 2023 · 664fef8 · 664fef8
1 parent 6255af0
commit 664fef8
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 60 deletions.
diff --git a/v2/src/Components/ProjectsSelect/ProjectsSelect.tsx b/v2/src/Components/ProjectsSelect/ProjectsSelect.tsx
@@ -48,7 +48,7 @@ export default function ProjectsSelect({ excludeProjects }: Props) {
               layout
               layoutId={`project-${option.slug}`}
               key={idx}
-              className="shrink-0 grow-0 basis-[min(80%,600px)]"
+              className="shrink-0 grow-0 basis-[80%] md:basis-[min(40%,500px)] 2xl:basis-[min(40%,600px)]"
             >
               <button
                 className={`p-24 w-full flex flex-col items-stretch uppercase border-2 max-w-[600px] h-full text-left`}
@@ -75,11 +75,12 @@ export default function ProjectsSelect({ excludeProjects }: Props) {
                     ))}
                   </div>
                 </div>
-                <div className="mt-auto mx-auto">
+                <div className="mt-auto mx-auto lg:max-w-[80%]">
                   <Image
                     src={option.image}
                     alt=""
-                    className="max-w-[450px] w-full my-42 shadow-2xl"
+                    className="w-full my-42 shadow-2xl"
+                    placeholder="blur"
                   />
                 </div>
               </button>

diff --git a/v2/src/app/home/ResearchLab.tsx b/v2/src/app/home/ResearchLab.tsx
@@ -33,7 +33,7 @@ export default function ResearchLab() {
         />
         <Container className="relative">
           <div className="flex max-lg:flex-wrap justify-between gap-40 min-h-[100vh] w-full items-center ">
-            <div className="max-w-[480px]">
+            <div className="max-w-[480px] backdrop-blur-sm p-16 rounded-12">
               <h2
                 className={`${condensedHeadings.className} text-primary text-h2 lg:text-[48px] font-light`}
               >