130 lines
4.3 KiB
JavaScript
130 lines
4.3 KiB
JavaScript
import ThreeDScrollTriggerRow, {
|
|
ThreeDScrollTriggerContainer,
|
|
} from "../lightswind/ThreeDScrollTrigger";
|
|
import React, { useState } from "react";
|
|
|
|
const reviews = [
|
|
{
|
|
name: "Aria Thompson",
|
|
company: "CreativePixel Studio",
|
|
image:
|
|
"https://images.unsplash.com/photo-1517841905240-472988babdf9?auto=format&fit=facearea&w=96&h=96&facepad=2",
|
|
review:
|
|
"Lightswind UI has completely changed how we design modern interfaces. Every component feels elegant, responsive, and intuitive.",
|
|
},
|
|
{
|
|
name: "Ethan Rivera",
|
|
company: "CodeLoom Technologies",
|
|
image:
|
|
"https://images.unsplash.com/photo-1465101162946-4377e57745c3?auto=format&fit=facearea&w=96&h=96&facepad=2",
|
|
review:
|
|
"The customization options in Lightswind UI are unmatched. We built an entire SaaS dashboard in days instead of weeks.",
|
|
},
|
|
{
|
|
name: "Liam Patel",
|
|
company: "NextGen Interfaces",
|
|
image:
|
|
"https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=facearea&w=96&h=96&facepad=2",
|
|
review:
|
|
"From landing pages to complex dashboards, Lightswind UI makes building visually consistent UIs effortless and fun.",
|
|
},
|
|
{
|
|
name: "Sarah Mitchell",
|
|
company: "DesignFlow Co",
|
|
image:
|
|
"https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=facearea&w=96&h=96&facepad=2",
|
|
review:
|
|
"The component library is extensive and well-documented. Saved us months of development time.",
|
|
},
|
|
{
|
|
name: "James Chen",
|
|
company: "TechVision Labs",
|
|
image:
|
|
"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=facearea&w=96&h=96&facepad=2",
|
|
review:
|
|
"Outstanding support and continuous updates. Lightswind UI keeps getting better every release.",
|
|
},
|
|
{
|
|
name: "Emma Davis",
|
|
company: "PixelPerfect Studios",
|
|
image:
|
|
"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=facearea&w=96&h=96&facepad=2",
|
|
review:
|
|
"Responsive by default and looks amazing on all devices. This is exactly what we needed.",
|
|
},
|
|
];
|
|
|
|
export default function ThreeScrollTrigger() {
|
|
// Split reviews into 2 rows with 3 cards each
|
|
const row1 = reviews.slice(0, 3);
|
|
const row2 = reviews.slice(3, 6);
|
|
const [paused, setPaused] = useState(false);
|
|
|
|
return (
|
|
<div className="w-full mx-auto max-w-[1400px] overflow-hidden">
|
|
<ThreeDScrollTriggerContainer className="py-8 space-y-8">
|
|
{/* Row 1 - 3 Cards scrolling right */}
|
|
<ThreeDScrollTriggerRow baseVelocity={2} direction={1} paused={paused}>
|
|
<div className="flex flex-row gap-6 px-3 py-1">
|
|
{row1.map((rev, idx) => (
|
|
<ReviewCard
|
|
key={idx}
|
|
{...rev}
|
|
onMouseEnter={() => setPaused(true)}
|
|
onMouseLeave={() => setPaused(false)}
|
|
/>
|
|
))}
|
|
</div>
|
|
</ThreeDScrollTriggerRow>
|
|
|
|
{/* Row 2 - 3 Cards scrolling left */}
|
|
<ThreeDScrollTriggerRow baseVelocity={2} direction={-1} paused={paused}>
|
|
<div className="flex flex-row gap-6 px-3 py-1">
|
|
{row2.map((rev, idx) => (
|
|
<ReviewCard
|
|
key={idx}
|
|
{...rev}
|
|
onMouseEnter={() => setPaused(true)}
|
|
onMouseLeave={() => setPaused(false)}
|
|
/>
|
|
))}
|
|
</div>
|
|
</ThreeDScrollTriggerRow>
|
|
</ThreeDScrollTriggerContainer>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Card component for clarity and reuse
|
|
function ReviewCard({
|
|
name,
|
|
company,
|
|
image,
|
|
review,
|
|
onMouseEnter,
|
|
onMouseLeave,
|
|
}) {
|
|
return (
|
|
<div
|
|
className="bg-[#fbfbfb] rounded-xl shadow-md p-6 w-80 min-w-80 flex-shrink-0 hover:shadow-lg transition-shadow"
|
|
onMouseEnter={onMouseEnter}
|
|
onMouseLeave={onMouseLeave}
|
|
>
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<img
|
|
src={image}
|
|
alt={name}
|
|
className="w-12 h-12 rounded-full object-cover flex-shrink-0"
|
|
loading="lazy"
|
|
/>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="font-semibold text-gray-900 truncate">{name}</div>
|
|
<div className="text-xs text-gray-500 truncate">{company}</div>
|
|
</div>
|
|
</div>
|
|
<div className="text-sm text-gray-700 line-clamp-4">
|
|
"{review}"
|
|
</div>
|
|
</div>
|
|
);
|
|
} |