feat: improve ui responsivness feature cards, hero & cta

Author: mvriu5

src/components/cards/NodeCard.tsx

@@ -14,7 +14,7 @@ export async function NodeCard({ locale, animationDelay = 0 }: NodeTabsCardProps
 
     return (
         <FeatureCard
-            className="col-span-1 md:col-span-2 row-span-3"
+            className="col-span-1 md:col-span-2 row-span-4 md:row-span-3"
             contentClassName="h-full items-stretch"
             tone="pink"
             animationDelay={animationDelay}

src/components/cards/RuntimeTypesCard.tsx

@@ -15,7 +15,7 @@ export async function RuntimeTypesCard({ locale, animationDelay = 0 }: RuntimeTy
     return (
         <FeatureCard
             className="col-span-1 row-span-4"
-            contentClassName="h-full items-stretch justify-between"
+            contentClassName="h-full items-stretch justify-between gap-2"
             tone="brand"
             animationDelay={animationDelay}
         >

src/components/sections/CtaSection.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import { InteractiveGridPattern } from "@/components/InteractiveGridPattern"
+import { useMediaQuery } from "@/hooks/useMediaQuery"
 import { Section } from "@/components/ui/Section"
 import { cn } from "@/lib/utils"
 import Image from "next/image"
@@ -25,6 +26,7 @@ interface CtaSectionProps {
 
 export const CtaSection: React.FC<CtaSectionProps> = ({ content }) => {
     const { trigger } = useWebHaptics()
+    const isTouchDevice = useMediaQuery("(hover: none), (pointer: coarse)")
     if (!content) return
 
     const staggerContainer: Variants = {
@@ -61,17 +63,24 @@ export const CtaSection: React.FC<CtaSectionProps> = ({ content }) => {
                 <div className={"relative flex w-full flex-col items-center justify-center gap-8 overflow-hidden rounded-[calc(1.8rem-1px)] px-6 py-12 sm:px-10"}>
 
                     <InteractiveGridPattern
-                        className={cn("opacity-45 mask-[radial-gradient(600px_circle_at_center,white,transparent)]")}
+                        className={cn(
+                            "opacity-45 mask-[radial-gradient(600px_circle_at_center,white,transparent)]",
+                            isTouchDevice && "opacity-30",
+                        )}
                         width={40}
                         height={40}
                         squares={[30, 15]}
                     />
-                    <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.1),transparent_36%),radial-gradient(circle_at_center,rgba(248,114,226,0.16),transparent_62%)]" />
-                    <div className="pointer-events-none absolute inset-x-8 -top-16 h-40 bg-[radial-gradient(circle,rgba(122,203,255,0.18),transparent_68%)] blur-2xl" />
+                    <div className={cn(
+                        "pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.1),transparent_36%),radial-gradient(circle_at_center,rgba(248,114,226,0.16),transparent_62%)]",
+                        isTouchDevice && "opacity-70",
+                    )} />
+                    <div className="pointer-events-none absolute inset-x-8 -top-16 hidden h-40 bg-[radial-gradient(circle,rgba(122,203,255,0.18),transparent_68%)] blur-2xl sm:block" />
 
-                    <motion.div variants={staggerItem} className={"relative z-20 flex size-32 items-center justify-center rounded-2xl bg-white/5 shadow-[0_14px_36px_rgba(0,0,0,0.22)] backdrop-blur-md"}>
+                    <motion.div variants={staggerItem} className={"relative z-20 flex size-32 items-center justify-center rounded-2xl bg-white/5 shadow-[0_14px_36px_rgba(0,0,0,0.22)] md:backdrop-blur-md"}>
                         <div className="pointer-events-none absolute inset-0 rounded-2xl bg-[radial-gradient(circle_at_top_left,rgba(255,255,255,0.12),transparent_35%)]" />
-                        <div className={"relative flex items-center justify-center rounded-2xl ring ring-white/10 bg-linear-to-br from-primary via-primary to-pink/8 px-4 py-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.06)]"}>
+                        <div className={"relative isolate flex items-center justify-center rounded-2xl ring ring-white/10 px-4 py-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.06)]"}>
+                            <div className="pointer-events-none absolute inset-0 rounded-2xl bg-linear-to-br from-primary via-primary to-[#2a1638]" />
                             <Image src={"/code0_logo_white.png"} width={"112"} height={"112"} alt={"Code0 Logo"} className={"z-20"}/>
                         </div>
                     </motion.div>

src/components/sections/HeroSection.tsx

@@ -96,13 +96,12 @@ export const HeroSection: React.FC<HeroSectionProps> = ({ content }) => {
                 <div className="pointer-events-none absolute inset-0 z-10 bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.08),transparent_36%),linear-gradient(180deg,rgba(255,255,255,0.02),transparent_32%)]" />
 
                 <motion.div
-                    className={"relative z-20 flex h-full flex-col items-center justify-between gap-12 rounded-[calc(1.9rem-1px)] px-8 py-12 lg:flex-row lg:px-16 lg:py-24"}
+                    className={"relative z-20 flex h-full flex-col items-center justify-between gap-8 rounded-[calc(1.9rem-1px)] p-8 lg:flex-row lg:p-16"}
                     variants={staggerContainer}
                     initial="hidden"
                     whileInView="show"
                     viewport={{ once: true, amount: 0.25 }}
                 >
-
                     <div className="w-full lg:w-2/5 flex flex-col gap-4 text-start">
                         <motion.div variants={staggerItem}>
                             <Link href={content.badge_link ?? ""}>
@@ -117,7 +116,7 @@ export const HeroSection: React.FC<HeroSectionProps> = ({ content }) => {
                             {content.heading}
                         </motion.h1>
 
-                        <motion.p variants={staggerItem} className="relative z-10 font-medium text-white/75 text-lg lg:text-xl text-balance">
+                        <motion.p variants={staggerItem} className="relative z-10 font-medium text-white/75 text-base lg:text-xl text-pretty">
                             {content.texts.length > 0
                                 ? content.texts.map((item, index) => (
                                     <React.Fragment key={`${item.id ?? item.text}-${index}`}>
@@ -128,7 +127,7 @@ export const HeroSection: React.FC<HeroSectionProps> = ({ content }) => {
                                 : <>Beschreibung1 <br /> Beschreibung2</>}
                         </motion.p>
 
-                        <motion.div variants={staggerItem} className={"flex flex-col gap-4 mt-4"}>
+                        <motion.div variants={staggerItem} className={"flex flex-col gap-2 sm:gap-4 mt-4"}>
                             {content.buttons.map((button, index) => (
                                 <Link href={button.url} key={`${button.label}-${button.id ?? index}`} className="w-full sm:w-auto">
                                     <Button

src/components/ui/SuggesstionMenuClient.tsx

@@ -43,9 +43,13 @@ export function SuggesstionMenuClient() {
                     suppressHydrationWarning
                 >
                     <IconVariable size={12}/>
-                    <Badge color="secondary" border className="border-pink! bg-[#1c0b29]!">
+                    <Badge color="secondary" border className="min-w-0! max-w-full! border-pink! bg-[#1c0b29]!">
                         <IconNote size={12} color="#f872e2" />
-                        <Text size="sm" style={{ color: "#f872e2" }}>
+                        <Text
+                            size="sm"
+                            className="min-w-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap"
+                            style={{ color: "#f872e2" }}
+                        >
                             {label}
                         </Text>
                     </Badge>