removed seezuns
This commit is contained in:
aryabenade
@@ -4,7 +4,7 @@ import { Button } from "./ui/button";
|
||||
import { GridPattern } from "./GridPattern";
|
||||
import { ImageWithFallback } from "./figma/ImageWithFallback";
|
||||
import regroupImage from '../src/images/regroup.webp';
|
||||
import seezunImage from '../src/images/seezun.webp';
|
||||
// import seezunImage from '../src/images/seezun.webp';
|
||||
// import wokaImage from '../src/images/woka.webp';
|
||||
import wokaAwardImage from '../src/images/woka.webp';
|
||||
import tanamiImage from '../src/images/tanami.webp';
|
||||
@@ -24,13 +24,13 @@ const featuredCaseStudy = {
|
||||
};
|
||||
|
||||
const caseStudies = [
|
||||
{
|
||||
title: "Seezun",
|
||||
description: "Created Seezun as a dynamic customer-driven platform connecting buyers, sellers, and renters for a seamless marketplace that renders fashion accessible, sustainable, and affordable.",
|
||||
achievement: "+85% Brand Recognition",
|
||||
industryTags: ["Branding", "Fashion"],
|
||||
image: seezunImage
|
||||
},
|
||||
// {
|
||||
// title: "Seezun",
|
||||
// description: "Created Seezun as a dynamic customer-driven platform connecting buyers, sellers, and renters for a seamless marketplace that renders fashion accessible, sustainable, and affordable.",
|
||||
// achievement: "+85% Brand Recognition",
|
||||
// industryTags: ["Branding", "Fashion"],
|
||||
// image: seezunImage
|
||||
// },
|
||||
{
|
||||
title: "Regroup",
|
||||
description: "Built Regroup as a social platform that brings together passion, global connections, teamwork, and love for sports through a vibrant online community.",
|
||||
@@ -50,8 +50,8 @@ const caseStudies = [
|
||||
const SmallCaseStudyCard = ({ study, index }: { study: typeof caseStudies[0]; index: number }) => {
|
||||
const getNavigationPath = (title: string) => {
|
||||
switch (title) {
|
||||
case 'Seezun':
|
||||
return '/projects/seezun';
|
||||
// case 'Seezun':
|
||||
// return '/projects/seezun';
|
||||
case 'Woka':
|
||||
return '/projects/woka';
|
||||
case 'Tanami':
|
||||
@@ -78,7 +78,7 @@ const SmallCaseStudyCard = ({ study, index }: { study: typeof caseStudies[0]; in
|
||||
<ImageWithFallback
|
||||
src={study.image}
|
||||
alt={
|
||||
study.title === "Seezun" ? "Seezun fashion marketplace app banner showcasing mobile shopping experience" :
|
||||
// study.title === "Seezun" ? "Seezun fashion marketplace app banner showcasing mobile shopping experience" :
|
||||
study.title === "Woka" ? "Woka learning platform banner showcasing educational mobile app features" :
|
||||
study.title === "Tanami" ? "Tanami Capital financial platform banner showcasing investment portfolio management" :
|
||||
study.title === "Regroup" ? "Regroup mobile app banner showcasing sports networking features" :
|
||||
@@ -86,7 +86,7 @@ const SmallCaseStudyCard = ({ study, index }: { study: typeof caseStudies[0]; in
|
||||
}
|
||||
className={`w-full h-full ${["Seezun", "Woka", "Tanami", "Regroup"].includes(study.title) ? "object-contain" : "object-cover"} object-center ${["Seezun", "Woka", "Tanami", "Regroup"].includes(study.title) ? "group-hover:scale-[1.02]" : "group-hover:scale-105"} transition-transform duration-500 rounded-[10px]`}
|
||||
/>
|
||||
<div className="absolute top-4 left-4 z-10">
|
||||
<div className="absolute z-10 top-4 left-4">
|
||||
<span className="px-3 py-1 bg-accent text-accent-foreground text-sm font-medium rounded-[10px]">
|
||||
{study.achievement}
|
||||
</span>
|
||||
@@ -94,10 +94,10 @@ const SmallCaseStudyCard = ({ study, index }: { study: typeof caseStudies[0]; in
|
||||
</div>
|
||||
|
||||
<div className="p-6">
|
||||
<h3 className="text-xl font-semibold text-foreground mb-3 group-hover:text-accent transition-colors duration-300">
|
||||
<h3 className="mb-3 text-xl font-semibold transition-colors duration-300 text-foreground group-hover:text-accent">
|
||||
{study.title}
|
||||
</h3>
|
||||
<p className="text-muted-foreground text-sm mb-4 leading-relaxed">
|
||||
<p className="mb-4 text-sm leading-relaxed text-muted-foreground">
|
||||
{study.description}
|
||||
</p>
|
||||
|
||||
@@ -113,7 +113,7 @@ const SmallCaseStudyCard = ({ study, index }: { study: typeof caseStudies[0]; in
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="text-accent text-sm font-medium hover:text-foreground transition-colors duration-300 flex items-center gap-2 group-hover:translate-x-1 transition-transform duration-300"
|
||||
className="flex items-center gap-2 text-sm font-medium transition-colors transition-transform duration-300 text-accent hover:text-foreground group-hover:translate-x-1"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
navigate(getNavigationPath(study.title));
|
||||
@@ -129,21 +129,21 @@ const SmallCaseStudyCard = ({ study, index }: { study: typeof caseStudies[0]; in
|
||||
export const CaseStudyHighlight = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="relative py-20 bg-background overflow-hidden">
|
||||
<section className="relative py-20 overflow-hidden bg-background">
|
||||
<GridPattern strokeDasharray="4 2" />
|
||||
|
||||
<div className="relative z-10 container mx-auto px-6 lg:px-8">
|
||||
<div className="container relative z-10 px-6 mx-auto lg:px-8">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-center mb-16"
|
||||
className="mb-16 text-center"
|
||||
>
|
||||
<h2 className="text-3xl lg:text-4xl font-semibold text-foreground mb-4">
|
||||
<h2 className="mb-4 text-3xl font-semibold lg:text-4xl text-foreground">
|
||||
See What We've Built
|
||||
</h2>
|
||||
<p className="text-muted-foreground text-lg max-w-2xl mx-auto">
|
||||
<p className="max-w-2xl mx-auto text-lg text-muted-foreground">
|
||||
Real results from real projects. Here's how we've helped companies scale their digital products.
|
||||
</p>
|
||||
</motion.div>
|
||||
@@ -156,33 +156,33 @@ export const CaseStudyHighlight = () => {
|
||||
className="bg-card rounded-[10px] overflow-hidden mb-12 group cursor-pointer hover:bg-card/80 hover:shadow-xl hover:scale-[1.01] transition-all duration-300 border border-transparent hover:border-accent/20"
|
||||
onClick={() => navigate('/projects/woka')}
|
||||
>
|
||||
<div className="grid lg:grid-cols-3 gap-0">
|
||||
<div className="grid gap-0 lg:grid-cols-3">
|
||||
<div className="lg:col-span-2 relative aspect-[16/10] sm:aspect-[16/9] overflow-hidden bg-muted/30 px-2 rounded-[10px]">
|
||||
<ImageWithFallback
|
||||
src={featuredCaseStudy.image}
|
||||
alt="Woka educational platform mobile app interface with award recognition and interactive learning features for children"
|
||||
className="w-full h-full object-contain object-center group-hover:scale-[1.02] transition-transform duration-700 rounded-[10px]"
|
||||
/>
|
||||
<div className="absolute top-6 left-6 z-10">
|
||||
<div className="absolute z-10 top-6 left-6">
|
||||
<span className="px-4 py-2 bg-accent text-accent-foreground font-semibold rounded-[10px]">
|
||||
{featuredCaseStudy.achievement}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-8 lg:p-12 flex flex-col justify-center">
|
||||
<h3 className="text-3xl lg:text-4xl font-semibold text-foreground mb-6 group-hover:text-accent transition-colors duration-300">
|
||||
<div className="flex flex-col justify-center p-8 lg:p-12">
|
||||
<h3 className="mb-6 text-3xl font-semibold transition-colors duration-300 lg:text-4xl text-foreground group-hover:text-accent">
|
||||
{featuredCaseStudy.title}
|
||||
</h3>
|
||||
<p className="text-muted-foreground mb-8 leading-relaxed">
|
||||
<p className="mb-8 leading-relaxed text-muted-foreground">
|
||||
{featuredCaseStudy.description}
|
||||
</p>
|
||||
|
||||
<div className="space-y-4 mb-8">
|
||||
<div className="mb-8 space-y-4">
|
||||
{featuredCaseStudy.metrics.map((metric) => (
|
||||
<div key={metric.label} className="flex justify-between items-center">
|
||||
<span className="text-muted-foreground text-sm">{metric.label}</span>
|
||||
<span className="text-foreground font-semibold">{metric.value}</span>
|
||||
<div key={metric.label} className="flex items-center justify-between">
|
||||
<span className="text-sm text-muted-foreground">{metric.label}</span>
|
||||
<span className="font-semibold text-foreground">{metric.value}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -199,7 +199,7 @@ export const CaseStudyHighlight = () => {
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="text-accent font-medium hover:text-foreground transition-colors duration-300 flex items-center gap-3 group-hover:translate-x-2 transition-transform duration-300"
|
||||
className="flex items-center gap-3 font-medium transition-colors transition-transform duration-300 text-accent hover:text-foreground group-hover:translate-x-2"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
navigate('/projects/woka');
|
||||
@@ -211,7 +211,7 @@ export const CaseStudyHighlight = () => {
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
|
||||
<div className="grid gap-8 mb-12 md:grid-cols-2 lg:grid-cols-3">
|
||||
{caseStudies.map((study, index) => (
|
||||
<SmallCaseStudyCard key={study.title} study={study} index={index} />
|
||||
))}
|
||||
|
||||
@@ -31,7 +31,7 @@ import niftyCase from "../src/images/niftyCase.webp";
|
||||
import prospertyCase from "../src/images/prospertyCase.webp";
|
||||
import ranoutofCase from "../src/images/ranoutof-case.webp";
|
||||
import RrCase from "../src/images/resturant-reward-case.webp";
|
||||
import seezunCase from "../src/images/seezun-case.webp";
|
||||
// import seezunCase from "../src/images/seezun-case.webp";
|
||||
import simplitendCase from "../src/images/simplitendCase.webp";
|
||||
import tcCase from "../src/images/tc-case.webp";
|
||||
import vib360Case from "../src/images/vib360Case.webp";
|
||||
@@ -53,16 +53,16 @@ const defaultCaseStudies = [
|
||||
link: "/projects/ranoutof",
|
||||
icon: Package
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Seezun",
|
||||
image: seezunCase,
|
||||
category: "E-commerce",
|
||||
industry: "Retail",
|
||||
featured: true,
|
||||
link: "/projects/seezun",
|
||||
icon: ShoppingCart
|
||||
},
|
||||
// {
|
||||
// id: 2,
|
||||
// title: "Seezun",
|
||||
// image: seezunCase,
|
||||
// category: "E-commerce",
|
||||
// industry: "Retail",
|
||||
// featured: true,
|
||||
// link: "/projects/seezun",
|
||||
// icon: ShoppingCart
|
||||
// },
|
||||
{
|
||||
id: 3,
|
||||
title: "Woka",
|
||||
@@ -267,7 +267,7 @@ export const CaseStudySlider = ({
|
||||
onMouseLeave={() => setIsAutoPlaying(autoPlay)}
|
||||
ref={containerRef}
|
||||
>
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
<div className="container px-6 mx-auto lg:px-8">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-end mb-8">
|
||||
{caseStudies.length > visibleSlides && (
|
||||
@@ -277,7 +277,7 @@ export const CaseStudySlider = ({
|
||||
size="icon"
|
||||
onClick={prevSlide}
|
||||
disabled={currentIndex === 0}
|
||||
className="h-10 w-10 rounded-full border-white/20 hover:border-accent/50 disabled:opacity-50"
|
||||
className="w-10 h-10 rounded-full border-white/20 hover:border-accent/50 disabled:opacity-50"
|
||||
>
|
||||
<ChevronLeft className="w-5 h-5" />
|
||||
</Button>
|
||||
@@ -286,7 +286,7 @@ export const CaseStudySlider = ({
|
||||
size="icon"
|
||||
onClick={nextSlide}
|
||||
disabled={currentIndex >= maxIndex}
|
||||
className="h-10 w-10 rounded-full border-white/20 hover:border-accent/50 disabled:opacity-50"
|
||||
className="w-10 h-10 rounded-full border-white/20 hover:border-accent/50 disabled:opacity-50"
|
||||
>
|
||||
<ChevronRight className="w-5 h-5" />
|
||||
</Button>
|
||||
@@ -330,19 +330,19 @@ export const CaseStudySlider = ({
|
||||
className="bg-card/50 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-500 shadow-lg hover:shadow-2xl hover:shadow-accent/10 rounded-2xl overflow-hidden h-[full] cursor-pointer"
|
||||
onClick={() => navigate(study.link)}
|
||||
>
|
||||
<CardContent className="p-0 h-full CardContentOverride">
|
||||
<CardContent className="h-full p-0 CardContentOverride">
|
||||
{/* Image */}
|
||||
<div className="relative overflow-hidden">
|
||||
<ImageWithFallback
|
||||
src={study.image}
|
||||
alt={study.title}
|
||||
className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
|
||||
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="bg-accent/90 text-white border-0 text-xs">
|
||||
<Badge className="text-xs text-white border-0 bg-accent/90">
|
||||
{study.category}
|
||||
</Badge>
|
||||
</div>
|
||||
@@ -350,7 +350,7 @@ export const CaseStudySlider = ({
|
||||
{/* Featured Badge */}
|
||||
{study.featured && (
|
||||
<div className="absolute top-2 right-4">
|
||||
<div className="bg-amber-500/90 text-white px-2 py-1 rounded-full text-xs font-medium flex items-center gap-1">
|
||||
<div className="flex items-center gap-1 px-2 py-1 text-xs font-medium text-white rounded-full bg-amber-500/90">
|
||||
<Star className="w-3 h-3 fill-current" />
|
||||
Featured
|
||||
</div>
|
||||
@@ -359,7 +359,7 @@ export const CaseStudySlider = ({
|
||||
|
||||
{/* Icon */}
|
||||
<div className="absolute bottom-4 left-4">
|
||||
<div className="w-10 h-10 bg-white/20 backdrop-blur-md rounded-full flex items-center justify-center">
|
||||
<div className="flex items-center justify-center w-10 h-10 rounded-full bg-white/20 backdrop-blur-md">
|
||||
<IconComponent className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -374,7 +374,7 @@ export const CaseStudySlider = ({
|
||||
|
||||
{/* Dots Indicator */}
|
||||
{caseStudies.length > visibleSlides && (
|
||||
<div className="flex justify-center items-center gap-2 mt-8">
|
||||
<div className="flex items-center justify-center gap-2 mt-8">
|
||||
{Array.from({ length: maxIndex + 1 }).map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
|
||||
@@ -7,7 +7,7 @@ const companyLogos = [
|
||||
{ name: "CloudNova Systems", logo: null, width: "140" },
|
||||
{ name: "AMOZ", logo: null, width: "90" },
|
||||
{ name: "SimpliTend", logo: null, width: "120" },
|
||||
{ name: "Seezun", logo: null, width: "100" },
|
||||
// { name: "Seezun", logo: null, width: "100" },
|
||||
{ name: "TradersCircuit", logo: null, width: "140" },
|
||||
{ name: "FreeU", logo: null, width: "90" },
|
||||
{ name: "Amble", logo: null, width: "100" },
|
||||
@@ -128,7 +128,7 @@ const ProjectImageCircles = () => (
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.3 }}
|
||||
viewport={{ once: true }}
|
||||
className="flex justify-center items-center mb-12"
|
||||
className="flex items-center justify-center mb-12"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
{countryFlags.map((flag, index) => (
|
||||
@@ -154,9 +154,9 @@ const ProjectImageCircles = () => (
|
||||
zIndex: countryFlags.length - index
|
||||
}}
|
||||
>
|
||||
<div className="absolute inset-0 w-16 h-16 rounded-full bg-white/10 backdrop-blur-sm border-2 border-white/20 group-hover:border-accent/50 group-hover:bg-white/15 transition-all duration-300 shadow-lg group-hover:shadow-xl flex items-center justify-center overflow-hidden">
|
||||
<div className="absolute inset-0 flex items-center justify-center w-16 h-16 overflow-hidden transition-all duration-300 border-2 rounded-full shadow-lg bg-white/10 backdrop-blur-sm border-white/20 group-hover:border-accent/50 group-hover:bg-white/15 group-hover:shadow-xl">
|
||||
<div
|
||||
className="w-10 h-8 flex items-center justify-center transform group-hover:scale-110 transition-transform duration-300"
|
||||
className="flex items-center justify-center w-10 h-8 transition-transform duration-300 transform group-hover:scale-110"
|
||||
role="img"
|
||||
aria-label={flag.alt}
|
||||
>
|
||||
@@ -165,7 +165,7 @@ const ProjectImageCircles = () => (
|
||||
</div>
|
||||
|
||||
{/* Subtle glow effect */}
|
||||
<div className="absolute inset-0 w-16 h-16 rounded-full bg-gradient-to-br from-accent/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||||
<div className="absolute inset-0 w-16 h-16 transition-opacity duration-300 rounded-full opacity-0 bg-gradient-to-br from-accent/10 to-transparent group-hover:opacity-100"></div>
|
||||
|
||||
{/* Tooltip */}
|
||||
<div className="absolute -top-12 left-1/2 transform -translate-x-1/2 bg-[#0E0E0E] text-white text-xs px-3 py-1.5 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none shadow-lg border border-white/10 z-50">
|
||||
@@ -182,10 +182,10 @@ const ProjectImageCircles = () => (
|
||||
|
||||
const LogoCard = ({ name, width }: { name: string; width: string }) => (
|
||||
<div
|
||||
className="flex items-center justify-center h-16 bg-white/8 rounded-xl border border-white/10 hover:scale-105 hover:bg-white/12 hover:border-accent/20 transition-all duration-300 px-6 shadow-lg backdrop-blur-sm group"
|
||||
className="flex items-center justify-center h-16 px-6 transition-all duration-300 border shadow-lg bg-white/8 rounded-xl border-white/10 hover:scale-105 hover:bg-white/12 hover:border-accent/20 backdrop-blur-sm group"
|
||||
style={{ minWidth: `${width}px` }}
|
||||
>
|
||||
<span className="text-white/80 font-medium text-sm text-center leading-tight group-hover:text-white/95 transition-colors duration-300">
|
||||
<span className="text-sm font-medium leading-tight text-center transition-colors duration-300 text-white/80 group-hover:text-white/95">
|
||||
{name}
|
||||
</span>
|
||||
</div>
|
||||
@@ -204,7 +204,7 @@ const MarqueeRow = ({ logos }: { logos: typeof companyLogos }) => (
|
||||
ease: "linear",
|
||||
},
|
||||
}}
|
||||
className="flex gap-6 items-center"
|
||||
className="flex items-center gap-6"
|
||||
style={{
|
||||
width: "fit-content",
|
||||
}}
|
||||
@@ -220,15 +220,15 @@ export const ClientLogos = () => {
|
||||
<section className="relative py-20 bg-[#121212] border-y border-white/5 overflow-hidden">
|
||||
<GridPattern strokeDasharray="4 2" />
|
||||
|
||||
<div className="relative z-10 container mx-auto px-6 lg:px-8">
|
||||
<div className="container relative z-10 px-6 mx-auto lg:px-8">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-center mb-8"
|
||||
className="mb-8 text-center"
|
||||
>
|
||||
<h2 className="text-3xl lg:text-4xl font-semibold text-white mb-6">
|
||||
<h2 className="mb-6 text-3xl font-semibold text-white lg:text-4xl">
|
||||
Trusted by Founders and CTOs Across 15+ Countries
|
||||
</h2>
|
||||
</motion.div>
|
||||
|
||||
@@ -9,14 +9,14 @@ const foundersAndCTOs = [
|
||||
flagEmoji: "🇮🇳",
|
||||
projectType: "Care Management"
|
||||
},
|
||||
{
|
||||
name: "Seezun",
|
||||
title: "Fashion Marketplace",
|
||||
country: "United Kingdom",
|
||||
code: "GB",
|
||||
flagEmoji: "🇬🇧",
|
||||
projectType: "P2P Platform"
|
||||
},
|
||||
// {
|
||||
// name: "Seezun",
|
||||
// title: "Fashion Marketplace",
|
||||
// country: "United Kingdom",
|
||||
// code: "GB",
|
||||
// flagEmoji: "🇬🇧",
|
||||
// projectType: "P2P Platform"
|
||||
// },
|
||||
{
|
||||
name: "AMOZ",
|
||||
title: "E-commerce Platform",
|
||||
@@ -132,7 +132,7 @@ export const CountryFlags = () => {
|
||||
viewport={{ once: true }}
|
||||
className="mb-12"
|
||||
>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-6 max-w-7xl mx-auto">
|
||||
<div className="grid grid-cols-2 gap-6 mx-auto sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 max-w-7xl">
|
||||
{foundersAndCTOs.map((project, index) => (
|
||||
<motion.div
|
||||
key={project.code + index}
|
||||
@@ -149,12 +149,12 @@ export const CountryFlags = () => {
|
||||
scale: 1.05,
|
||||
transition: { duration: 0.2 }
|
||||
}}
|
||||
className="group cursor-pointer relative"
|
||||
className="relative cursor-pointer group"
|
||||
>
|
||||
<div className="text-center">
|
||||
{/* Flag Icon */}
|
||||
<div className="flex justify-center mb-3">
|
||||
<div className="w-14 h-14 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 flex items-center justify-center group-hover:bg-white/20 group-hover:border-accent/30 transition-all duration-300 shadow-lg group-hover:shadow-xl">
|
||||
<div className="flex items-center justify-center transition-all duration-300 border rounded-full shadow-lg w-14 h-14 bg-white/10 backdrop-blur-sm border-white/20 group-hover:bg-white/20 group-hover:border-accent/30 group-hover:shadow-xl">
|
||||
<span className="text-2xl" role="img" aria-label={`${project.country} flag`}>
|
||||
{project.flagEmoji}
|
||||
</span>
|
||||
@@ -163,10 +163,10 @@ export const CountryFlags = () => {
|
||||
|
||||
{/* Project Badge */}
|
||||
<div className="bg-white/8 rounded-lg border border-white/10 px-3 py-2.5 group-hover:bg-white/12 group-hover:border-accent/30 transition-all duration-300 shadow-sm backdrop-blur-sm min-h-[60px] flex flex-col justify-center">
|
||||
<div className="text-white/90 font-medium text-sm leading-tight mb-1 group-hover:text-white transition-colors duration-300">
|
||||
<div className="mb-1 text-sm font-medium leading-tight transition-colors duration-300 text-white/90 group-hover:text-white">
|
||||
{project.name}
|
||||
</div>
|
||||
<div className="text-white/60 text-xs leading-tight">
|
||||
<div className="text-xs leading-tight text-white/60">
|
||||
{project.projectType}
|
||||
</div>
|
||||
</div>
|
||||
@@ -174,9 +174,9 @@ export const CountryFlags = () => {
|
||||
{/* Enhanced Tooltip */}
|
||||
<div className="absolute -top-24 left-1/2 transform -translate-x-1/2 bg-[#0E0E0E] text-white text-xs px-4 py-3 rounded-xl opacity-0 group-hover:opacity-100 transition-all duration-300 whitespace-nowrap pointer-events-none shadow-xl border border-white/20 z-50 backdrop-blur-md">
|
||||
<div className="text-center">
|
||||
<div className="font-semibold text-accent mb-1">{project.name}</div>
|
||||
<div className="text-white/80 mb-1">{project.title}</div>
|
||||
<div className="text-white/60 flex items-center gap-1 justify-center">
|
||||
<div className="mb-1 font-semibold text-accent">{project.name}</div>
|
||||
<div className="mb-1 text-white/80">{project.title}</div>
|
||||
<div className="flex items-center justify-center gap-1 text-white/60">
|
||||
<span>{project.flagEmoji}</span>
|
||||
<span>{project.country}</span>
|
||||
</div>
|
||||
|
||||
@@ -4,12 +4,12 @@ import { Button } from "./ui/button";
|
||||
import { Badge } from "./ui/badge";
|
||||
import { Card, CardContent } from "./ui/card";
|
||||
import { ImageWithFallback } from "./figma/ImageWithFallback";
|
||||
import {
|
||||
ArrowRight,
|
||||
TrendingUp,
|
||||
Users,
|
||||
Zap,
|
||||
Eye,
|
||||
import {
|
||||
ArrowRight,
|
||||
TrendingUp,
|
||||
Users,
|
||||
Zap,
|
||||
Eye,
|
||||
ShoppingCart,
|
||||
Heart,
|
||||
Star,
|
||||
@@ -26,7 +26,7 @@ import {
|
||||
PieChart
|
||||
} from "lucide-react";
|
||||
import ranoutofLocalImage from '../src/images/ranoutof.webp';
|
||||
import seezunLocalImage from '../src/images/seezun.webp';
|
||||
// import seezunLocalImage from '../src/images/seezun.webp';
|
||||
import simpletendLocalImage from '../src/images/simplitend.webp';
|
||||
import wokasideawardLocalImage from '../src/images/woka-side-award.webp';
|
||||
import traderCircuitLocalImage from '../src/images/traders-circuit.webp';
|
||||
@@ -52,22 +52,22 @@ const FeaturedCaseStudies = () => {
|
||||
accentColor: "blue",
|
||||
featured: true
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Seezun",
|
||||
client: "Seezun",
|
||||
description: "Seezun is a trend-driven P2P fashion marketplace enabling users to rent, buy, sell, or lend South Asian ethnicwear via mobile and web platforms.",
|
||||
keyAchievement: {
|
||||
number: "85%",
|
||||
metric: "Brand Recognition",
|
||||
icon: TrendingUp
|
||||
},
|
||||
visual: seezunLocalImage,
|
||||
tags: ["Marketplace", "P2P", "Fashion", "Mobile & Web"],
|
||||
gradient: "from-purple-500/20 to-pink-500/20",
|
||||
accentColor: "purple",
|
||||
featured: false
|
||||
},
|
||||
// {
|
||||
// id: 2,
|
||||
// title: "Seezun",
|
||||
// client: "Seezun",
|
||||
// description: "Seezun is a trend-driven P2P fashion marketplace enabling users to rent, buy, sell, or lend South Asian ethnicwear via mobile and web platforms.",
|
||||
// keyAchievement: {
|
||||
// number: "85%",
|
||||
// metric: "Brand Recognition",
|
||||
// icon: TrendingUp
|
||||
// },
|
||||
// visual: seezunLocalImage,
|
||||
// tags: ["Marketplace", "P2P", "Fashion", "Mobile & Web"],
|
||||
// gradient: "from-purple-500/20 to-pink-500/20",
|
||||
// accentColor: "purple",
|
||||
// featured: false
|
||||
// },
|
||||
{
|
||||
id: 3,
|
||||
title: "WOKA",
|
||||
@@ -157,14 +157,14 @@ const FeaturedCaseStudies = () => {
|
||||
|
||||
return (
|
||||
<section className="py-20 bg-black">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
<div className="container px-6 mx-auto lg:px-8">
|
||||
{/* Section Header */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-center mb-16"
|
||||
className="mb-16 text-center"
|
||||
>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
@@ -174,26 +174,26 @@ const FeaturedCaseStudies = () => {
|
||||
className="mb-6"
|
||||
>
|
||||
<div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500">
|
||||
<div className="bg-black rounded-full px-6 py-3 flex items-center gap-2">
|
||||
<div className="flex items-center gap-2 px-6 py-3 bg-black rounded-full">
|
||||
<Star className="w-5 h-5 text-accent" />
|
||||
<span className="text-white text-base font-medium">Featured Work</span>
|
||||
<span className="text-base font-medium text-white">Featured Work</span>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
|
||||
<h2 className="mb-6 text-4xl font-semibold text-white lg:text-5xl">
|
||||
Featured Success Stories
|
||||
</h2>
|
||||
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
|
||||
<p className="max-w-3xl mx-auto text-xl leading-relaxed text-gray-300">
|
||||
Discover how we've helped companies across industries achieve remarkable results with our innovative development solutions.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Case Studies Grid - Consistent Dimensions */}
|
||||
<div className="grid lg:grid-cols-3 gap-8 items-stretch">
|
||||
<div className="grid items-stretch gap-8 lg:grid-cols-3">
|
||||
{caseStudies.map((study, index) => {
|
||||
const AchievementIcon = study.keyAchievement.icon;
|
||||
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key={study.id}
|
||||
@@ -201,16 +201,18 @@ const FeaturedCaseStudies = () => {
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: index * 0.2 }}
|
||||
viewport={{ once: true }}
|
||||
className="group h-full"
|
||||
className="h-full group"
|
||||
>
|
||||
<Card
|
||||
<Card
|
||||
className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-500 shadow-lg hover:shadow-2xl rounded-2xl overflow-hidden h-full group-hover:scale-[1.02] transform flex flex-col cursor-pointer"
|
||||
onClick={() => {
|
||||
if (study.title === 'Seezun') {
|
||||
navigate('/projects/seezun');
|
||||
} else if (study.title === 'WOKA') {
|
||||
if (study.title === 'WOKA') {
|
||||
navigate('/projects/woka');
|
||||
} else if (study.title === 'Tanami') {
|
||||
}
|
||||
// else if (study.title === 'Seezun') {
|
||||
// navigate('/projects/seezun');
|
||||
// }
|
||||
else if (study.title === 'Tanami') {
|
||||
navigate('/projects/tanami');
|
||||
} else {
|
||||
navigate('/case-studies');
|
||||
@@ -220,20 +222,20 @@ const FeaturedCaseStudies = () => {
|
||||
<CardContent className="p-0 flex flex-col h-full min-h-[600px]">
|
||||
{/* Visual Section - Fixed Height */}
|
||||
<div className="relative overflow-hidden">
|
||||
<div className="relative h-64 w-full">
|
||||
<div className="relative w-full h-64">
|
||||
<ImageWithFallback
|
||||
src={study.visual}
|
||||
alt={study.title}
|
||||
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
|
||||
className="object-cover w-full h-full transition-transform duration-700 group-hover:scale-110"
|
||||
/>
|
||||
|
||||
|
||||
{/* Overlay with gradient */}
|
||||
<div className={`absolute inset-0 bg-gradient-to-t ${study.gradient} opacity-20 group-hover:opacity-40 transition-opacity duration-500`} />
|
||||
|
||||
|
||||
{/* Featured Badge */}
|
||||
{study.featured && (
|
||||
<div className="absolute top-4 left-4">
|
||||
<Badge className="bg-accent text-white shadow-lg">
|
||||
<Badge className="text-white shadow-lg bg-accent">
|
||||
<Star className="w-3 h-3 mr-1" />
|
||||
Featured
|
||||
</Badge>
|
||||
@@ -244,22 +246,21 @@ const FeaturedCaseStudies = () => {
|
||||
<div className="absolute bottom-4 left-4 right-4">
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.05 }}
|
||||
className="bg-black/80 backdrop-blur-md rounded-xl p-4 border border-white/10"
|
||||
className="p-4 border bg-black/80 backdrop-blur-md rounded-xl border-white/10"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`w-10 h-10 rounded-lg bg-gradient-to-r ${
|
||||
study.accentColor === 'blue' ? 'from-blue-500 to-cyan-500' :
|
||||
study.accentColor === 'green' ? 'from-green-500 to-emerald-500' :
|
||||
study.accentColor === 'purple' ? 'from-purple-500 to-pink-500' :
|
||||
study.accentColor === 'cyan' ? 'from-cyan-500 to-blue-500' :
|
||||
study.accentColor === 'orange' ? 'from-orange-500 to-red-500' :
|
||||
'from-emerald-500 to-teal-500'
|
||||
} flex items-center justify-center flex-shrink-0`}>
|
||||
<div className={`w-10 h-10 rounded-lg bg-gradient-to-r ${study.accentColor === 'blue' ? 'from-blue-500 to-cyan-500' :
|
||||
study.accentColor === 'green' ? 'from-green-500 to-emerald-500' :
|
||||
study.accentColor === 'purple' ? 'from-purple-500 to-pink-500' :
|
||||
study.accentColor === 'cyan' ? 'from-cyan-500 to-blue-500' :
|
||||
study.accentColor === 'orange' ? 'from-orange-500 to-red-500' :
|
||||
'from-emerald-500 to-teal-500'
|
||||
} flex items-center justify-center flex-shrink-0`}>
|
||||
<AchievementIcon className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-2xl font-bold text-white">{study.keyAchievement.number}</div>
|
||||
<div className="text-sm text-gray-300 leading-tight">{study.keyAchievement.metric}</div>
|
||||
<div className="text-sm leading-tight text-gray-300">{study.keyAchievement.metric}</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
@@ -272,15 +273,15 @@ const FeaturedCaseStudies = () => {
|
||||
<div className="flex-1">
|
||||
{/* Project Title - Consistent Height */}
|
||||
<div className="mb-4 min-h-[60px] flex items-start">
|
||||
<h3 className="text-xl font-semibold text-white leading-tight group-hover:text-accent transition-colors duration-300 line-clamp-2">
|
||||
<h3 className="text-xl font-semibold leading-tight text-white transition-colors duration-300 group-hover:text-accent line-clamp-2">
|
||||
{study.title}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{/* Client & Description - Consistent Height */}
|
||||
<div className="mb-6 min-h-[100px]">
|
||||
<div className="text-accent font-medium text-sm mb-2">{study.client}</div>
|
||||
<p className="text-gray-300 text-sm leading-relaxed line-clamp-4">
|
||||
<div className="mb-2 text-sm font-medium text-accent">{study.client}</div>
|
||||
<p className="text-sm leading-relaxed text-gray-300 line-clamp-4">
|
||||
{study.description}
|
||||
</p>
|
||||
</div>
|
||||
@@ -289,10 +290,10 @@ const FeaturedCaseStudies = () => {
|
||||
<div className="mb-6 min-h-[32px]">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{study.tags.map((tag) => (
|
||||
<Badge
|
||||
key={tag}
|
||||
variant="secondary"
|
||||
className="text-xs bg-gray-800/50 text-gray-300 border-gray-700 hover:bg-gray-700/50 transition-colors"
|
||||
<Badge
|
||||
key={tag}
|
||||
variant="secondary"
|
||||
className="text-xs text-gray-300 transition-colors border-gray-700 bg-gray-800/50 hover:bg-gray-700/50"
|
||||
>
|
||||
{tag}
|
||||
</Badge>
|
||||
@@ -304,15 +305,17 @@ const FeaturedCaseStudies = () => {
|
||||
{/* CTA Button - Fixed at Bottom */}
|
||||
<div className="mt-auto">
|
||||
<motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
|
||||
<Button
|
||||
className="w-full bg-gradient-to-r from-accent to-accent/80 hover:from-accent/90 hover:to-accent/70 text-white font-semibold py-3 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 group h-12"
|
||||
<Button
|
||||
className="w-full h-12 py-3 font-semibold text-white transition-all duration-300 shadow-lg bg-gradient-to-r from-accent to-accent/80 hover:from-accent/90 hover:to-accent/70 rounded-xl hover:shadow-xl group"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
if (study.title === 'Seezun') {
|
||||
navigate('/projects/seezun');
|
||||
} else if (study.title === 'WOKA') {
|
||||
if (study.title === 'WOKA') {
|
||||
navigate('/projects/woka');
|
||||
} else if (study.title === 'Tanami') {
|
||||
}
|
||||
// else if (study.title === 'Seezun') {
|
||||
// navigate('/projects/seezun');
|
||||
// }
|
||||
else if (study.title === 'Tanami') {
|
||||
navigate('/projects/tanami');
|
||||
} else {
|
||||
navigate('/case-studies');
|
||||
@@ -320,7 +323,7 @@ const FeaturedCaseStudies = () => {
|
||||
}}
|
||||
>
|
||||
<span>View Full Case Study</span>
|
||||
<ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform duration-300" />
|
||||
<ArrowRight className="w-4 h-4 ml-2 transition-transform duration-300 group-hover:translate-x-1" />
|
||||
</Button>
|
||||
</motion.div>
|
||||
</div>
|
||||
@@ -340,14 +343,14 @@ const FeaturedCaseStudies = () => {
|
||||
viewport={{ once: true }}
|
||||
className="mt-20 mb-16"
|
||||
>
|
||||
<h3 className="text-3xl lg:text-4xl font-semibold text-white mb-12 text-center">
|
||||
<h3 className="mb-12 text-3xl font-semibold text-center text-white lg:text-4xl">
|
||||
More Success Stories
|
||||
</h3>
|
||||
|
||||
<div className="grid lg:grid-cols-3 gap-8 items-stretch">
|
||||
|
||||
<div className="grid items-stretch gap-8 lg:grid-cols-3">
|
||||
{moreSuccessStories.map((story, index) => {
|
||||
const AchievementIcon = story.keyAchievement.icon;
|
||||
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key={story.id}
|
||||
@@ -355,9 +358,9 @@ const FeaturedCaseStudies = () => {
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: index * 0.01 }}
|
||||
viewport={{ once: true }}
|
||||
className="group h-full"
|
||||
className="h-full group"
|
||||
>
|
||||
<Card
|
||||
<Card
|
||||
className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-500 shadow-lg hover:shadow-2xl rounded-2xl overflow-hidden h-full group-hover:scale-[1.02] transform flex flex-col cursor-pointer"
|
||||
onClick={() => {
|
||||
if (story.title === 'TradersCircuit') {
|
||||
@@ -376,36 +379,35 @@ const FeaturedCaseStudies = () => {
|
||||
<CardContent className="p-0 flex flex-col h-full min-h-[600px]">
|
||||
{/* Visual Section - Fixed Height */}
|
||||
<div className="relative overflow-hidden">
|
||||
<div className="relative h-64 w-full">
|
||||
<div className="relative w-full h-64">
|
||||
<ImageWithFallback
|
||||
src={story.visual}
|
||||
alt={`${story.title} - ${story.client}`}
|
||||
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
|
||||
className="object-cover w-full h-full transition-transform duration-700 group-hover:scale-110"
|
||||
/>
|
||||
|
||||
|
||||
{/* Overlay with gradient */}
|
||||
<div className={`absolute inset-0 bg-gradient-to-t ${story.gradient} opacity-20 group-hover:opacity-40 transition-opacity duration-500`} />
|
||||
|
||||
|
||||
{/* Key Achievement - Overlaid on Visual */}
|
||||
<div className="absolute bottom-4 left-4 right-4">
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.05 }}
|
||||
className="bg-black/80 backdrop-blur-md rounded-xl p-4 border border-white/10"
|
||||
className="p-4 border bg-black/80 backdrop-blur-md rounded-xl border-white/10"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`w-10 h-10 rounded-lg bg-gradient-to-r ${
|
||||
story.accentColor === 'blue' ? 'from-blue-500 to-cyan-500' :
|
||||
story.accentColor === 'green' ? 'from-green-500 to-emerald-500' :
|
||||
story.accentColor === 'purple' ? 'from-purple-500 to-pink-500' :
|
||||
story.accentColor === 'cyan' ? 'from-cyan-500 to-blue-500' :
|
||||
story.accentColor === 'orange' ? 'from-orange-500 to-red-500' :
|
||||
'from-emerald-500 to-teal-500'
|
||||
} flex items-center justify-center flex-shrink-0`}>
|
||||
<div className={`w-10 h-10 rounded-lg bg-gradient-to-r ${story.accentColor === 'blue' ? 'from-blue-500 to-cyan-500' :
|
||||
story.accentColor === 'green' ? 'from-green-500 to-emerald-500' :
|
||||
story.accentColor === 'purple' ? 'from-purple-500 to-pink-500' :
|
||||
story.accentColor === 'cyan' ? 'from-cyan-500 to-blue-500' :
|
||||
story.accentColor === 'orange' ? 'from-orange-500 to-red-500' :
|
||||
'from-emerald-500 to-teal-500'
|
||||
} flex items-center justify-center flex-shrink-0`}>
|
||||
<AchievementIcon className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-2xl font-bold text-white">{story.keyAchievement.number}</div>
|
||||
<div className="text-sm text-gray-300 leading-tight">{story.keyAchievement.metric}</div>
|
||||
<div className="text-sm leading-tight text-gray-300">{story.keyAchievement.metric}</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
@@ -418,15 +420,15 @@ const FeaturedCaseStudies = () => {
|
||||
<div className="flex-1">
|
||||
{/* Project Title - Consistent Height */}
|
||||
<div className="mb-4 min-h-[60px] flex items-start">
|
||||
<h4 className="text-xl font-semibold text-white leading-tight group-hover:text-accent transition-colors duration-300 line-clamp-2">
|
||||
<h4 className="text-xl font-semibold leading-tight text-white transition-colors duration-300 group-hover:text-accent line-clamp-2">
|
||||
{story.title}
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
{/* Client & Description - Consistent Height */}
|
||||
<div className="mb-6 min-h-[100px]">
|
||||
<div className="text-accent font-medium text-sm mb-2">{story.client}</div>
|
||||
<p className="text-gray-300 text-sm leading-relaxed line-clamp-4">
|
||||
<div className="mb-2 text-sm font-medium text-accent">{story.client}</div>
|
||||
<p className="text-sm leading-relaxed text-gray-300 line-clamp-4">
|
||||
{story.description}
|
||||
</p>
|
||||
</div>
|
||||
@@ -435,10 +437,10 @@ const FeaturedCaseStudies = () => {
|
||||
<div className="mb-6 min-h-[32px]">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{story.tags.map((tag) => (
|
||||
<Badge
|
||||
key={tag}
|
||||
variant="secondary"
|
||||
className="text-xs bg-gray-800/50 text-gray-300 border-gray-700 hover:bg-gray-700/50 transition-colors"
|
||||
<Badge
|
||||
key={tag}
|
||||
variant="secondary"
|
||||
className="text-xs text-gray-300 transition-colors border-gray-700 bg-gray-800/50 hover:bg-gray-700/50"
|
||||
>
|
||||
{tag}
|
||||
</Badge>
|
||||
@@ -450,8 +452,8 @@ const FeaturedCaseStudies = () => {
|
||||
{/* CTA Button - Fixed at Bottom */}
|
||||
<div className="mt-auto">
|
||||
<motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
|
||||
<Button
|
||||
className="w-full bg-gradient-to-r from-accent to-accent/80 hover:from-accent/90 hover:to-accent/70 text-white font-semibold py-3 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 group h-12"
|
||||
<Button
|
||||
className="w-full h-12 py-3 font-semibold text-white transition-all duration-300 shadow-lg bg-gradient-to-r from-accent to-accent/80 hover:from-accent/90 hover:to-accent/70 rounded-xl hover:shadow-xl group"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
if (story.title === 'TradersCircuit') {
|
||||
@@ -468,7 +470,7 @@ const FeaturedCaseStudies = () => {
|
||||
}}
|
||||
>
|
||||
<span>View Full Case Study</span>
|
||||
<ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform duration-300" />
|
||||
<ArrowRight className="w-4 h-4 ml-2 transition-transform duration-300 group-hover:translate-x-1" />
|
||||
</Button>
|
||||
</motion.div>
|
||||
</div>
|
||||
@@ -487,12 +489,12 @@ const FeaturedCaseStudies = () => {
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-center mt-16"
|
||||
className="mt-16 text-center"
|
||||
>
|
||||
<Button
|
||||
variant="outline"
|
||||
<Button
|
||||
variant="outline"
|
||||
size="lg"
|
||||
className="border-gray-600 text-gray-300 hover:bg-gray-800 hover:text-white hover:border-accent/50 transition-all duration-300"
|
||||
className="text-gray-300 transition-all duration-300 border-gray-600 hover:bg-gray-800 hover:text-white hover:border-accent/50"
|
||||
>
|
||||
<Eye className="w-5 h-5 mr-2" />
|
||||
View All Case Studies
|
||||
|
||||
Reference in New Issue
Block a user