feat: imrpove swipecard height

Author: mvriu5

src/components/cards/EditionUseCaseCard.tsx

@@ -64,9 +64,11 @@ export function EditionUseCaseCard({
                     </p>
 
                     {link?.url && link?.label && (
-                        <LinkButton href={link.url} className="mt-auto pt-2">
-                            {link.label}
-                        </LinkButton>
+                        <div className="mt-auto pt-2">
+                            <LinkButton href={link.url} className="my-2">
+                                {link.label}
+                            </LinkButton>
+                        </div>
                     )}
                 </div>
             </div>

src/components/sections/SwipeCardSection.tsx

@@ -113,14 +113,19 @@ export function SwipeCardSection({ content }: SwipeCardSectionProps) {
                             onDragEnd={handleDragEnd}
                         >
                             <div className="relative flex w-full items-stretch justify-center">
-                                <div className="h-full w-[64vw] max-w-4xl opacity-0 pointer-events-none">
-                                    <EditionUseCaseCard
-                                        title={cards[focusedIndex]?.title ?? ""}
-                                        description={cards[focusedIndex]?.description ?? ""}
-                                        image={cards[focusedIndex]?.image}
-                                        link={cards[focusedIndex]?.link}
-                                        isFocused
-                                    />
+                                <div className="invisible pointer-events-none grid w-[60%]">
+                                    {cards.map((card, index) => (
+                                        <div key={card.id || index} className="col-start-1 row-start-1">
+                                            <EditionUseCaseCard
+                                                title={card.title}
+                                                description={card.description}
+                                                image={card.image}
+                                                link={card.link}
+                                                isFocused
+                                                className="h-auto"
+                                            />
+                                        </div>
+                                    ))}
                                 </div>
                                 {cards.map((card, index) => {
                                     const offset = index - focusedIndex
@@ -132,7 +137,7 @@ export function SwipeCardSection({ content }: SwipeCardSectionProps) {
                                             key={card.id || index}
                                             className={cn(
                                                 "absolute inset-y-0 h-full w-full transition-all duration-500 ease-out",
-                                                "left-1/2 w-[64vw] max-w-4xl",
+                                                "left-1/2 w-[60%]",
                                                 !isVisibleMobile && "lg:opacity-100 lg:pointer-events-auto opacity-0 pointer-events-none",
                                                 !isVisibleDesktop && "lg:opacity-0 lg:pointer-events-none",
                                             )}