apex-ui-kit 2.0.7 → 2.1.0

package/dist/ApexUI-Kit/templates/NavDropDown/NavDropDown.jsx

@@ -1,114 +1,285 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { gsap } from 'gsap';
-import { ChevronDown } from 'lucide-react';
-const DropdownPanel = ({ item, isActive }) => {
-    const panelRef = useRef(null);
+import React, { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from 'react';
+import { AnimatePresence, LayoutGroup, MotionConfig, motion } from 'framer-motion';
+import { ArrowRight, ArrowUpRight, ChevronDown } from 'lucide-react';
 
-    // GSAP animation for revealing the panel
-    useEffect(() => {
-        if (isActive) {
-            gsap.to(panelRef.current, {
-                autoAlpha: 1,
-                y: 0,
-                scale: 1,
-                duration: 0.2,
-                ease: 'power3.out'
-            });
-        } else {
-            gsap.to(panelRef.current, {
-                autoAlpha: 0,
-                y: -10,
-                scale: 0.95,
-                duration: 0.2,
-                ease: 'power3.in'
-            });
-        }
-    }, [isActive]);
+const ease = [0.22, 1, 0.36, 1];
+const CLOSE_DELAY = 140;
+
+/* "services": two columns of feature tiles with a monogram (or a custom icon). */
+const Services = ({ items }) => (
+    <ul className="grid w-[min(34rem,calc(100vw-2rem))] grid-cols-1 gap-1 p-2 sm:grid-cols-2">
+        {items.map((sub, i) => (
+            <li key={i}>
+                <a href={sub.href} className="group flex items-start gap-3 rounded-xl p-3 outline-none transition-colors hover:bg-white/[0.05] focus-visible:bg-white/[0.07]">
+                    <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-lime-400/20 bg-lime-400/10 text-sm font-semibold text-lime-300 transition-colors group-hover:border-lime-400/40 group-hover:bg-lime-400/15">
+                        {sub.icon ? <sub.icon size={16} /> : sub.label.charAt(0)}
+                    </span>
+                    <span className="min-w-0">
+                        <span className="flex items-center gap-1 text-sm font-medium text-zinc-100">
+                            {sub.label}
+                            <ArrowRight size={13} className="-translate-x-1 text-lime-300 opacity-0 transition-all duration-200 group-hover:translate-x-0 group-hover:opacity-100" />
+                        </span>
+                        {sub.subtitle && <span className="mt-0.5 block text-[0.8rem] leading-snug text-zinc-500">{sub.subtitle}</span>}
+                    </span>
+                </a>
+            </li>
+        ))}
+    </ul>
+);
+
+/* "products": image cards, four across on wide screens. */
+const Products = ({ items }) => (
+    <ul className="grid w-[min(40rem,calc(100vw-2rem))] grid-cols-2 gap-2 p-2 sm:grid-cols-4">
+        {items.map((sub, i) => (
+            <li key={i}>
+                <a href={sub.href} className="group block rounded-xl p-1.5 outline-none transition-colors hover:bg-white/[0.05] focus-visible:bg-white/[0.07]">
+                    <span className="block aspect-[4/3] overflow-hidden sm:aspect-square rounded-lg bg-zinc-900 ring-1 ring-white/10">
+                        <img src={sub.image} alt="" decoding="async" className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110" />
+                    </span>
+                    <span className="mt-2 block truncate px-0.5 text-sm font-medium text-zinc-100">{sub.label}</span>
+                    {sub.subtitle && <span className="block truncate px-0.5 text-xs text-zinc-500">{sub.subtitle}</span>}
+                </a>
+            </li>
+        ))}
+    </ul>
+);
 
+/* "links": a titled list; switches to two columns when it gets long. */
+const Links = ({ title, items }) => {
+    const wide = items.length > 5;
     return (
-        <div
-            ref={panelRef}
-            style={{ visibility: 'hidden', transformOrigin: 'top left' }}
-            className="absolute top-full left-1/2 -translate-x-1/2 mt-8 w-max max-w-4xl"
-        >
-            <div className="bg-gray-950 rounded-4xl shadow-xl p-6 z-50 border border-dashed border-gray-700/40">
-                {/* Links Dropdown */}
-                {item.type === "links" && (
-                    <ul className="grid grid-cols-2 gap-x-8 gap-y-2 text-left">
-                        {item.submenu.map((subItem, i) => (
-                            <li key={i}>
-                                <a href={subItem.href} className="block p-1.5 text-sm text-gray-400 rounded-md transition-colors duration-75 hover:text-lime-400 hover:bg-slate-800">
-                                    {subItem.label}
-                                </a>
-                            </li>
-                        ))}
-                    </ul>
-                )}
-                {/* Products Dropdown */}
-                {item.type === "products" && (
-                    <div className=' border border-gray-700/40 bg-black/10 rounded-2xl p-5'>
-                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 z-50">
-                            {item.submenu.map((subItem, i) => (
-                                <a href={subItem.href} key={i} className={`flex items-center gap-4 bg-slate-800/50 p-3 rounded-lg hover:bg-slate-800 transition-all group w-80`}>
-                                    <div className="overflow-hidden rounded-md">
-                                        <img src={subItem.image} alt={subItem.label} className="w-20 h-20 object-cover transition-transform duration-300 group-hover:scale-110" />
-                                    </div>
-                                    <div className="text-left">
-                                        <h3 className="text-gray-200 font-medium text-sm">{subItem.label}</h3>
-                                        <p className="text-gray-500 text-xs">{subItem.subtitle}</p>
-                                    </div>
-                                </a>
-                            ))}
-                        </div>
-                    </div>
-                )}
-                {/* Services Dropdown */}
-                {item.type === "services" && (
-                    <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-                        {item.submenu.map((subItem, i) => (
-                            <a href={subItem.href} key={i} className="group block bg-slate-800/50 p-3 rounded-lg hover:bg-slate-800 transition-all w-64">
-                                <h3 className="text-lime-400 font-medium transition-colors group-hover:text-lime-300">{subItem.label}</h3>
-                                <p className="text-gray-500 text-sm">{subItem.subtitle}</p>
-                            </a>
-                        ))}
-                    </div>
-                )}
-            </div>
+        <div className={`p-2 ${wide ? 'w-[min(26rem,calc(100vw-2rem))]' : 'w-[min(15rem,calc(100vw-2rem))]'}`}>
+            <p className="px-3 pb-1 pt-2 text-[0.68rem] font-medium uppercase tracking-[0.14em] text-zinc-500">{title}</p>
+            <ul className={wide ? 'grid grid-cols-2' : ''}>
+                {items.map((sub, i) => (
+                    <li key={i}>
+                        <a href={sub.href} className="group flex items-center justify-between gap-3 rounded-lg px-3 py-2 text-sm text-zinc-400 outline-none transition-colors hover:bg-white/[0.05] hover:text-zinc-100 focus-visible:bg-white/[0.07] focus-visible:text-zinc-100">
+                            {sub.label}
+                            <ArrowUpRight size={14} className="text-lime-300 opacity-0 transition-opacity group-hover:opacity-100" />
+                        </a>
+                    </li>
+                ))}
+            </ul>
         </div>
     );
 };
 
-const NavDropDown = ({ navData }) => {
-    const [openIndex, setOpenIndex] = useState(null);
+const PanelContent = ({ item }) => {
+    if (item.type === 'products') return <Products items={item.submenu} />;
+    if (item.type === 'links') return <Links title={item.label} items={item.submenu} />;
+    return <Services items={item.submenu} />;
+};
+
+const NavDropDown = ({ navData = [], className = '' }) => {
+    const uid = useId();
+    const rootRef = useRef(null);
+    const barRef = useRef(null);
+    const triggerRefs = useRef([]);
+    const contentRef = useRef(null);
+    const closeTimer = useRef(0);
+    const pointerType = useRef('');
+
+    const [open, setOpen] = useState(null);
+    const [hovered, setHovered] = useState(null);
+    // +1 / -1: which side the next panel's content slides in from.
+    const [dir, setDir] = useState(0);
+    const [size, setSize] = useState({ w: 0, h: 0 });
+    const [caretX, setCaretX] = useState(0);
+
+    const show = useCallback((index) => {
+        clearTimeout(closeTimer.current);
+        setOpen((prev) => {
+            if (prev !== null && prev !== index) setDir(index > prev ? 1 : -1);
+            else if (prev === null) setDir(0);
+            return index;
+        });
+    }, []);
+
+    const hide = useCallback(() => {
+        clearTimeout(closeTimer.current);
+        setOpen(null);
+    }, []);
+
+    // A short delay lets the pointer travel from a trigger into the panel.
+    const hideSoon = () => {
+        clearTimeout(closeTimer.current);
+        closeTimer.current = setTimeout(hide, CLOSE_DELAY);
+    };
+
+    // Size the panel to its content and point the caret at the open trigger.
+    const measure = useCallback(() => {
+        const content = contentRef.current;
+        const bar = barRef.current;
+        const trigger = triggerRefs.current[open];
+        if (!content || !bar || !trigger) return;
+        const w = content.offsetWidth;
+        setSize({ w, h: content.offsetHeight });
+        const barBox = bar.getBoundingClientRect();
+        const t = trigger.getBoundingClientRect();
+        const panelLeft = (barBox.width - w) / 2;
+        setCaretX(Math.min(Math.max(t.left - barBox.left + t.width / 2 - panelLeft, 20), w - 20));
+    }, [open]);
+
+    useLayoutEffect(() => {
+        if (open !== null) measure();
+    }, [open, measure]);
+
+    useEffect(() => {
+        if (open === null) return undefined;
+        const onKey = (e) => {
+            if (e.key !== 'Escape') return;
+            triggerRefs.current[open]?.focus();
+            hide();
+        };
+        const onPointer = (e) => {
+            if (!rootRef.current?.contains(e.target)) hide();
+        };
+        window.addEventListener('keydown', onKey);
+        window.addEventListener('pointerdown', onPointer);
+        window.addEventListener('resize', measure);
+        return () => {
+            window.removeEventListener('keydown', onKey);
+            window.removeEventListener('pointerdown', onPointer);
+            window.removeEventListener('resize', measure);
+        };
+    }, [open, hide, measure]);
+
+    useEffect(() => () => clearTimeout(closeTimer.current), []);
+
+    // Warm the cache for submenu images so a panel never opens with empty tiles.
+    useEffect(() => {
+        const id = setTimeout(() => {
+            navData.forEach((item) => item.submenu?.forEach((sub) => {
+                if (sub.image) new Image().src = sub.image;
+            }));
+        }, 300);
+        return () => clearTimeout(id);
+    }, [navData]);
+
+    const onTriggerKey = (e, index) => {
+        if (e.key !== 'ArrowDown') return;
+        e.preventDefault();
+        show(index);
+        // Wait for the panel to render, then move focus into it.
+        requestAnimationFrame(() => contentRef.current?.querySelector('a')?.focus());
+    };
+
+    const active = open !== null ? navData[open] : null;
+    const panelId = `${uid}-panel`;
 
     return (
-        // New container panel with dashed border
-        <div className=" inline-block bg-stone-950 border border-dashed border-slate-300/20 rounded-xl p-4 fixed" style={{ zIndex: '4000' }}>
-            <nav className="relative">
-                <ul className="flex space-x-2 justify-center">
-                    {navData.map((item, index) => (
-                        <li
-                            key={index}
-                            className="relative"
-                            onMouseEnter={() => item.submenu && setOpenIndex(index)}
-                            onMouseLeave={() => item.submenu && setOpenIndex(null)}
-                        >
-                            <a
-                                href={item.href || '#'}
-                                className="flex items-center px-3 py-2 text-sm font-medium hover:text-lime-400 text-slate-300 transition-colors duration-300 cursor-pointer"
+        <MotionConfig reducedMotion="user">
+            <div
+                ref={rootRef}
+                className={`relative inline-block max-w-full ${className}`}
+                style={{ zIndex: 4000 }}
+                onPointerLeave={(e) => e.pointerType === 'mouse' && hideSoon()}
+                onPointerEnter={() => clearTimeout(closeTimer.current)}
+                onBlur={(e) => !rootRef.current?.contains(e.relatedTarget) && hide()}
+            >
+                <nav aria-label="Main" ref={barRef} className="max-w-full overflow-x-auto rounded-full border border-white/10 bg-zinc-950/85 p-1 [scrollbar-width:none] sm:p-1.5 shadow-[0_10px_40px_-12px_rgba(0,0,0,0.7)] backdrop-blur-xl">
+                    <LayoutGroup id={uid}>
+                        <ul className="flex items-center gap-0.5" onPointerLeave={() => setHovered(null)}>
+                            {navData.map((item, index) => {
+                                const hasMenu = Boolean(item.submenu?.length);
+                                const isOpen = open === index;
+                                const lit = hovered === index || (hovered === null && isOpen);
+                                const base = `relative flex items-center gap-0.5 whitespace-nowrap rounded-full px-2 py-1.5 text-[0.78rem] font-medium sm:gap-1 sm:px-3.5 sm:py-2 sm:text-sm outline-none transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-lime-400/60 ${isOpen ? 'text-lime-300' : 'text-zinc-300 hover:text-white'}`;
+                                const highlight = lit && (
+                                    <motion.span layoutId="hover" className="absolute inset-0 -z-10 rounded-full bg-white/[0.07]" transition={{ type: 'spring', stiffness: 500, damping: 40 }} />
+                                );
+                                return (
+                                    <li key={index} className="relative isolate" onPointerEnter={() => setHovered(index)}>
+                                        {hasMenu ? (
+                                            <button
+                                                type="button"
+                                                ref={(el) => (triggerRefs.current[index] = el)}
+                                                className={base}
+                                                aria-expanded={isOpen}
+                                                aria-controls={isOpen ? panelId : undefined}
+                                                onPointerEnter={(e) => e.pointerType === 'mouse' && show(index)}
+                                                onPointerDown={(e) => (pointerType.current = e.pointerType)}
+                                                onClick={() => {
+                                                    // Hover already opened it for a mouse; touch and keyboard toggle.
+                                                    if (pointerType.current === 'mouse' || !isOpen) show(index);
+                                                    else hide();
+                                                    pointerType.current = '';
+                                                }}
+                                                onKeyDown={(e) => onTriggerKey(e, index)}
+                                            >
+                                                {highlight}
+                                                {item.label}
+                                                <ChevronDown size={15} className={`transition-transform duration-300 ${isOpen ? 'rotate-180' : ''}`} />
+                                            </button>
+                                        ) : (
+                                            <a href={item.href || '#'} className={base} onPointerEnter={(e) => e.pointerType === 'mouse' && hideSoon()}>
+                                                {highlight}
+                                                {item.label}
+                                            </a>
+                                        )}
+                                    </li>
+                                );
+                            })}
+                        </ul>
+                    </LayoutGroup>
+                </nav>
+
+                {/* One shared panel that resizes and slides its content as you move between menus. */}
+                <div className="pointer-events-none absolute left-1/2 top-full flex -translate-x-1/2 justify-center pt-3">
+                    <AnimatePresence>
+                        {active && (
+                            <motion.div
+                                id={panelId}
+                                className="pointer-events-auto relative origin-top"
+                                initial={{ opacity: 0, y: -8, scale: 0.97 }}
+                                animate={{ opacity: 1, y: 0, scale: 1 }}
+                                exit={{ opacity: 0, y: -6, scale: 0.98, transition: { duration: 0.15 } }}
+                                transition={{ duration: 0.25, ease }}
                             >
-                                {item.label}
-                                {item.submenu && (
-                                    <ChevronDown size={16} className={`ml-1 transition-transform duration-300 ${openIndex === index ? "rotate-180" : ""}`} />
-                                )}
-                            </a>
-                            {item.submenu && <DropdownPanel item={item} isActive={openIndex === index} />}
-                        </li>
-                    ))}
-                </ul>
-            </nav>
-        </div>
+                                <motion.span
+                                    aria-hidden
+                                    className="absolute -top-[5px] z-10 h-2.5 w-2.5 -translate-x-1/2 rotate-45 rounded-[2px] border-l border-t border-white/10 bg-zinc-950"
+                                    initial={false}
+                                    animate={{ left: caretX }}
+                                    transition={{ duration: 0.3, ease }}
+                                />
+                                <motion.div
+                                    className="relative overflow-hidden rounded-2xl border border-white/10 bg-zinc-950/95 shadow-[0_24px_60px_-20px_rgba(0,0,0,0.8)] backdrop-blur-xl"
+                                    initial={false}
+                                    animate={{ width: size.w || 'auto', height: size.h || 'auto' }}
+                                    transition={{ duration: 0.3, ease }}
+                                >
+                                    <span aria-hidden className="pointer-events-none absolute inset-x-10 top-0 z-10 h-px bg-gradient-to-r from-transparent via-lime-400/50 to-transparent" />
+                                    <AnimatePresence initial={false} custom={dir}>
+                                        <motion.div
+                                            key={open}
+                                            // The leaving copy unmounts later; ignore its null so the ref keeps the new content.
+                                            ref={(el) => {
+                                                if (el) contentRef.current = el;
+                                            }}
+                                            custom={dir}
+                                            className="absolute left-0 top-0"
+                                            variants={{
+                                                enter: (d) => ({ opacity: 0, x: d * 32 }),
+                                                center: { opacity: 1, x: 0 },
+                                                leave: (d) => ({ opacity: 0, x: d * -32 }),
+                                            }}
+                                            initial="enter"
+                                            animate="center"
+                                            exit="leave"
+                                            transition={{ duration: 0.25, ease }}
+                                        >
+                                            <PanelContent item={active} />
+                                        </motion.div>
+                                    </AnimatePresence>
+                                </motion.div>
+                            </motion.div>
+                        )}
+                    </AnimatePresence>
+                </div>
+            </div>
+        </MotionConfig>
     );
 };
 
-export default NavDropDown; 
+export default NavDropDown;

package/dist/ApexUI-Kit/templates/NavMenu/NavMenu.jsx

@@ -121,7 +121,13 @@ const ResponsiveNavMenu = (props) => {
             </div>
 
             <div className="md:hidden flex w-full justify-end">
-                <button onClick={() => setIsOpen(!isOpen)} className="text-white focus:outline-none">
+                {/* Same backdrop as the desktop bar, so the icon stays visible on light pages too. */}
+                <button
+                    onClick={() => setIsOpen(!isOpen)}
+                    aria-label={isOpen ? "Close menu" : "Open menu"}
+                    className="rounded-full border border-white/10 p-2.5 text-white shadow-lg focus:outline-none"
+                    style={{ backdropFilter: 'blur(16px)', WebkitBackdropFilter: 'blur(16px)', background: props.backgroundColor ?? 'rgba(17, 24, 39, 0.7)' }}
+                >
                     <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={isOpen ? "M6 18L18 6M6 6l12 12" : "M4 6h16M4 12h16m-7 6h7"} />
                     </svg>
@@ -132,7 +138,7 @@ const ResponsiveNavMenu = (props) => {
                 <div className="md:hidden absolute top-20 left-4 right-4 rounded-xl shadow-lg border border-white/10"
                     style={{ backdropFilter: 'blur(16px)', WebkitBackdropFilter: 'blur(16px)', background: 'rgba(17, 24, 39, 0.7)' }}>
                     <div className="flex flex-col items-center gap-2 p-4">
-                        {navItems.map((label, i) => (
+                        {navItems.map((label) => (
                             <button
                                 key={label}
                                 onClick={() => {

package/dist/ApexUI-Kit/templates/ParallaxCard/ParallaxCard.jsx

@@ -14,6 +14,7 @@ const ParallaxCard = ({ cardData = [], tiltEnable, glareEnable, scale, perspecti
     const linkRefs = useRef([]);
 
     useEffect(() => {
+        const cleanups = [];
         cardData.forEach((_, idx) => {
             const cardElement = cardRefs.current[idx];
             const titleElement = titleRefs.current[idx];
@@ -40,11 +41,11 @@ const ParallaxCard = ({ cardData = [], tiltEnable, glareEnable, scale, perspecti
                     ease: "power3.out",
                 });
 
-                gsap.to(titleElement, { duration: 0.7, x: rotateY * 0.8, y: -rotateX * 0.8 });
-                gsap.to(imageElement, { duration: 0.8, x: rotateY * 1.5, y: -rotateX * 1.5 });
-                gsap.to(descElement, { duration: 0.9, x: rotateY * 1.2, y: -rotateX * 1.2 });
-                gsap.to(buttonElement, { duration: 1, x: rotateY * 1.1, y: -rotateX * 1.1 });
-                gsap.to(linkElement, { duration: 1, x: rotateY * 1.1, y: -rotateX * 1.1 });
+                if (titleElement) gsap.to(titleElement, { duration: 0.7, x: rotateY * 0.8, y: -rotateX * 0.8 });
+                if (imageElement) gsap.to(imageElement, { duration: 0.8, x: rotateY * 1.5, y: -rotateX * 1.5 });
+                if (descElement) gsap.to(descElement, { duration: 0.9, x: rotateY * 1.2, y: -rotateX * 1.2 });
+                if (buttonElement) gsap.to(buttonElement, { duration: 1, x: rotateY * 1.1, y: -rotateX * 1.1 });
+                if (linkElement) gsap.to(linkElement, { duration: 1, x: rotateY * 1.1, y: -rotateX * 1.1 });
             };
 
             const handleMouseLeave = () => {
@@ -56,7 +57,7 @@ const ParallaxCard = ({ cardData = [], tiltEnable, glareEnable, scale, perspecti
                         scale: 1,
                         ease: "elastic.out(1, 0.5)",
                     });
-                    gsap.to([titleElement, imageElement, descElement, buttonElement, linkElement], {
+                    gsap.to([titleElement, imageElement, descElement, buttonElement, linkElement].filter(Boolean), {
                         duration: 1.2,
                         x: 0,
                         y: 0,
@@ -65,18 +66,19 @@ const ParallaxCard = ({ cardData = [], tiltEnable, glareEnable, scale, perspecti
                 }
             };
 
-            cardElement.addEventListener("mousemove", handleMouseMove);
+            cardElement.addEventListener("mousemove", handleMouseMove, { passive: true });
             cardElement.addEventListener("mouseleave", handleMouseLeave);
 
-            return () => {
+            cleanups.push(() => {
                 cardElement.removeEventListener("mousemove", handleMouseMove);
                 cardElement.removeEventListener("mouseleave", handleMouseLeave);
-            };
+            });
         });
+        return () => cleanups.forEach((fn) => fn());
     }, [cardData, tiltEnable, scale]);
 
     return (
-        <div className="flex flex-wrap gap-8 justify-center">
+        <div className="flex w-full flex-wrap gap-8 justify-center">
             {cardData.map((card, idx) => (
                 <div
                     key={idx}
@@ -84,7 +86,7 @@ const ParallaxCard = ({ cardData = [], tiltEnable, glareEnable, scale, perspecti
                     className="w-full max-w-md rounded-2xl"
                     style={{ transformStyle: 'preserve-3d', perspective: `${perspective}px` }}
                 >
-                    <div className="relative md:w-full w-70 h-[50vh] md:h-full  bg-stone-950 rounded-2xl p-8 border border-lime-500/20 shadow-2 shadow-lime-900/40 overflow-hidden"
+                    <div className="relative w-full md:h-full bg-stone-950 rounded-2xl p-6 sm:p-8 border border-lime-500/20 shadow-2 shadow-lime-900/40 overflow-hidden"
                         style={{ transformStyle: 'preserve-3d' }}
                     >
                         {glareEnable && (

package/dist/ApexUI-Kit/templates/ParallaxCarousel/ParallaxCarousel.jsx

@@ -47,10 +47,10 @@ const CarouselCard = ({ slide, isCenter, isScrolling }) => {
                 <img src={slide.imageUrl} alt={slide.title} className="w-full h-full object-cover group-hover:opacity-30 transition-all duration-300 ease-in-out rounded-2xl" />
                 <img src={slide.pngUrl} alt={slide.title} className="absolute inset-0 w-full h-full object-cover group-hover:translate-z-15 transition-all duration-300 ease-in-out rounded-2xl" />
             </div>
-            <div className="relative flex flex-col justify-end h-full text-white p-8" style={{ transformStyle: 'preserve-3d', perspective: '1500px' }}>
-                <h2 className="text-3xl font-bold group-hover:translate-z-18 transition-all duration-300 ease-in-out">{slide.title}</h2>
+            <div className="relative flex flex-col justify-end h-full text-white p-5 sm:p-8" style={{ transformStyle: 'preserve-3d', perspective: '1500px' }}>
+                <h2 className="text-2xl sm:text-3xl font-bold group-hover:translate-z-18 transition-all duration-300 ease-in-out">{slide.title}</h2>
                 <p className="text-lime-400 mt-1 group-hover:translate-z-18 transition-all duration-300 ease-in-out">{slide.subtitle}</p>
-                <p className="text-slate-300 mt-4 text-sm leading-relaxed group-hover:translate-z-18 transition-all duration-300 ease-in-out">{slide.text}</p>
+                <p className="text-slate-300 mt-3 sm:mt-4 text-xs sm:text-sm leading-relaxed line-clamp-3 sm:line-clamp-none group-hover:translate-z-18 transition-all duration-300 ease-in-out">{slide.text}</p>
             </div>
         </motion.div>
     );
@@ -109,7 +109,7 @@ const ParallaxCarousel = ({ slides }) => {
     return (
         <div className="relative w-full flex flex-col items-center px-2">
             <div
-                className="relative w-full h-[480px] portrait:h-[480px] portrait:px-0"
+                className="relative w-full h-[380px] sm:h-[480px]"
                 style={{ perspective: '1200px', transformStyle: 'preserve-3d' }}
             >
                 {slides.map((slide, index) => {
@@ -125,7 +125,7 @@ const ParallaxCarousel = ({ slides }) => {
                     return (
                         <motion.div
                             key={index}
-                            className={`absolute w-full h-[340px] portrait:w-full portrait:h-[480px] top-0 left-0 portrait:left-0 portrait:top-0 ${positionOffset === 0 ? '' : ' pointer-events-none'} md:w-[50%] md:h-[400px] md:top-[50px] md:left-1/2 lg:-translate-x-1/2`}
+                            className={`absolute left-1/2 top-1/2 aspect-[25/26] w-[min(80%,25rem)] sm:w-[min(88%,25rem)] -translate-x-1/2 -translate-y-1/2 ${positionOffset === 0 ? '' : 'pointer-events-none'}`}
                             initial={false}
                             style={{ transformStyle: 'preserve-3d', willChange: 'transform, opacity' }}
                             animate={{
@@ -141,11 +141,11 @@ const ParallaxCarousel = ({ slides }) => {
                 })}
             </div>
 
-            <motion.button onClick={handlePrev} className="absolute -left-10 lg:left-0 top-1/2 -translate-y-1/2 z-30 p-3 rounded-full text-slate-400 hover:text-lime-400 transition-colors" whileTap={{ scale: 0.9 }}>
-                <ArrowLeft size={32} />
+            <motion.button onClick={handlePrev} className="absolute left-0 top-1/2 -translate-y-1/2 z-30 p-1.5 sm:p-3 rounded-full text-slate-400 hover:text-lime-400 transition-colors" whileTap={{ scale: 0.9 }}>
+                <ArrowLeft size={32} className="h-5 w-5 sm:h-8 sm:w-8" />
             </motion.button>
-            <motion.button onClick={handleNext} className="absolute -right-10 lg:right-0 top-1/2 -translate-y-1/2 z-30 p-3 rounded-full text-slate-400 hover:text-lime-400 transition-colors" whileTap={{ scale: 0.9 }}>
-                <ArrowRight size={32} />
+            <motion.button onClick={handleNext} className="absolute right-0 top-1/2 -translate-y-1/2 z-30 p-1.5 sm:p-3 rounded-full text-slate-400 hover:text-lime-400 transition-colors" whileTap={{ scale: 0.9 }}>
+                <ArrowRight size={32} className="h-5 w-5 sm:h-8 sm:w-8" />
             </motion.button>
         </div>
     );