worked the new direct
This commit is contained in:
@@ -40,6 +40,7 @@ import { ImageWithFallback } from "./figma/ImageWithFallback";
|
||||
import { Badge } from "./ui/badge";
|
||||
import { Button } from "./ui/button";
|
||||
import { Card, CardContent } from "./ui/card";
|
||||
import { link } from "fs";
|
||||
|
||||
// Internal data (no need to pass props)
|
||||
const defaultCaseStudies = [
|
||||
@@ -100,8 +101,8 @@ const defaultCaseStudies = [
|
||||
category: "Loyalty & Rewards",
|
||||
industry: "Hospitality",
|
||||
featured: false,
|
||||
link: "/comming-soon",
|
||||
icon: Utensils
|
||||
// link: "/comming-soon",
|
||||
link: "", icon: Utensils
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
@@ -130,7 +131,8 @@ const defaultCaseStudies = [
|
||||
category: "Lifestyle",
|
||||
industry: "Chemicals",
|
||||
featured: false,
|
||||
link: "/comming-soon",
|
||||
// link: "/comming-soon",
|
||||
link: "",
|
||||
icon: FlaskConical
|
||||
},
|
||||
{
|
||||
@@ -150,8 +152,8 @@ const defaultCaseStudies = [
|
||||
category: "Lifestyle",
|
||||
industry: "Consumer",
|
||||
featured: false,
|
||||
link: "/comming-soon",
|
||||
icon: Trophy
|
||||
// link: "/comming-soon",
|
||||
link: "", icon: Trophy
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
@@ -180,8 +182,8 @@ const defaultCaseStudies = [
|
||||
category: "AgriTech",
|
||||
industry: "Agriculture",
|
||||
featured: false,
|
||||
link: "/comming-soon",
|
||||
icon: Tractor
|
||||
// link: "/comming-soon",
|
||||
link: "", icon: Tractor
|
||||
},
|
||||
{
|
||||
id: 17,
|
||||
@@ -190,8 +192,8 @@ const defaultCaseStudies = [
|
||||
category: "AgriTech",
|
||||
industry: "Agriculture",
|
||||
featured: false,
|
||||
link: "/comming-soon",
|
||||
icon: Globe
|
||||
// link: "/comming-soon",
|
||||
link: "", icon: Globe
|
||||
},
|
||||
];
|
||||
|
||||
@@ -261,7 +263,7 @@ export const CaseStudySlider = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<section
|
||||
<section
|
||||
className="py-20 pt-10"
|
||||
onMouseEnter={() => setIsAutoPlaying(false)}
|
||||
onMouseLeave={() => setIsAutoPlaying(autoPlay)}
|
||||
@@ -272,19 +274,19 @@ export const CaseStudySlider = ({
|
||||
<div className="flex items-center justify-end mb-8">
|
||||
{caseStudies.length > visibleSlides && (
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={prevSlide}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={prevSlide}
|
||||
disabled={currentIndex === 0}
|
||||
className="w-10 h-10 rounded-full border-white/20 hover:border-accent/50 disabled:opacity-50"
|
||||
>
|
||||
<ChevronLeft className="w-5 h-5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={nextSlide}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={nextSlide}
|
||||
disabled={currentIndex >= maxIndex}
|
||||
className="w-10 h-10 rounded-full border-white/20 hover:border-accent/50 disabled:opacity-50"
|
||||
>
|
||||
@@ -298,12 +300,12 @@ export const CaseStudySlider = ({
|
||||
<div className="relative overflow-hidden" ref={sliderRef}>
|
||||
<motion.div
|
||||
className="flex gap-6"
|
||||
animate={{
|
||||
x: `-${getTranslationPercentage()}%`
|
||||
animate={{
|
||||
x: `-${getTranslationPercentage()}%`
|
||||
}}
|
||||
transition={{
|
||||
type: "spring",
|
||||
stiffness: 400,
|
||||
transition={{
|
||||
type: "spring",
|
||||
stiffness: 400,
|
||||
damping: 40,
|
||||
duration: 0.6
|
||||
}}
|
||||
@@ -315,15 +317,15 @@ export const CaseStudySlider = ({
|
||||
<motion.div
|
||||
key={study.id}
|
||||
className="flex-shrink-0"
|
||||
style={{
|
||||
width: `calc(${100 / visibleSlides}% - 1.5rem)`
|
||||
style={{
|
||||
width: `calc(${100 / visibleSlides}% - 1.5rem)`
|
||||
}}
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{
|
||||
duration: 0.5,
|
||||
transition={{
|
||||
duration: 0.5,
|
||||
delay: index * 0.1,
|
||||
ease: "easeOut"
|
||||
ease: "easeOut"
|
||||
}}
|
||||
>
|
||||
<Card
|
||||
@@ -333,20 +335,20 @@ export const CaseStudySlider = ({
|
||||
<CardContent className="h-full p-0 CardContentOverride">
|
||||
{/* Image */}
|
||||
<div className="relative overflow-hidden">
|
||||
<ImageWithFallback
|
||||
src={study.image}
|
||||
alt={study.title}
|
||||
className="object-cover w-full h-full transition-transform duration-500 group-hover:scale-110"
|
||||
<ImageWithFallback
|
||||
src={study.image}
|
||||
alt={study.title}
|
||||
className="object-cover w-full h-full transition-transform duration-500 group-hover:scale-110"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
|
||||
|
||||
|
||||
{/* Category Badge */}
|
||||
<div className="absolute top-2 left-4">
|
||||
<Badge className="text-xs text-white border-0 bg-accent/90">
|
||||
{study.category}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Featured Badge */}
|
||||
{study.featured && (
|
||||
<div className="absolute top-2 right-4">
|
||||
@@ -356,7 +358,7 @@ export const CaseStudySlider = ({
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
{/* Icon */}
|
||||
<div className="absolute bottom-4 left-4">
|
||||
<div className="flex items-center justify-center w-10 h-10 rounded-full bg-white/20 backdrop-blur-md">
|
||||
@@ -379,11 +381,10 @@ export const CaseStudySlider = ({
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => goToSlide(index)}
|
||||
className={`w-2 h-2 rounded-full transition-all duration-300 ${
|
||||
index === currentIndex
|
||||
? "bg-accent w-6"
|
||||
className={`w-2 h-2 rounded-full transition-all duration-300 ${index === currentIndex
|
||||
? "bg-accent w-6"
|
||||
: "bg-white/30 hover:bg-white/50"
|
||||
}`}
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user