491 lines
17 KiB
TypeScript
491 lines
17 KiB
TypeScript
import { motion } from "framer-motion";
|
||
import {
|
||
Activity,
|
||
ArrowRight,
|
||
ArrowUpRight,
|
||
Award,
|
||
Building2,
|
||
FlaskConical,
|
||
Globe,
|
||
Heart,
|
||
Package,
|
||
PartyPopper,
|
||
Search,
|
||
ShoppingCart,
|
||
Star,
|
||
Tractor,
|
||
TrendingUp,
|
||
Trophy,
|
||
Tv,
|
||
Users,
|
||
Utensils
|
||
} from "lucide-react";
|
||
import { useState } from "react";
|
||
import { Helmet } from "react-helmet-async";
|
||
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
|
||
import { Footer } from "../components/Footer";
|
||
import { Navigation } from "../components/Navigation";
|
||
import { Badge } from "../components/ui/badge";
|
||
import { Button } from "../components/ui/button";
|
||
import { Card, CardContent } from "../components/ui/card";
|
||
import { Input } from "../components/ui/input";
|
||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/ui/select";
|
||
import ambleCase from "../src/images/amble-case.webp";
|
||
import ranoutofCase from "../src/images/ranoutof-case.webp";
|
||
// import seezunCase from "../src/images/seezun-case.webp";
|
||
import tcCase from "../src/images/tc-case.webp";
|
||
import wokaCase from "../src/images/woka-case.webp";
|
||
import gtCase from "../src/images/gt-case.webp";
|
||
import RrCase from "../src/images/resturant-reward-case.webp";
|
||
import dkCase from "../src/images/dkCase.webp";
|
||
import vib360Case from "../src/images/vib360Case.webp";
|
||
import niftyCase from "../src/images/niftyCase.webp";
|
||
import prospertyCase from "../src/images/prospertyCase.webp";
|
||
import simplitendCase from "../src/images/simplitendCase.webp";
|
||
import amozCase from "../src/images/amozCase.webp";
|
||
import farmCase from "../src/images/farmCase.webp";
|
||
import leanCase from "../src/images/leanCase.webp";
|
||
import { useNavigate } from "react-router-dom";
|
||
|
||
|
||
const caseStudies = [
|
||
{
|
||
id: 1,
|
||
title: "RanOutOf",
|
||
image: ranoutofCase,
|
||
category: "Lifestyle",
|
||
industry: "Consumer",
|
||
featured: true,
|
||
link: "/projects/ranoutof",
|
||
icon: Package
|
||
},
|
||
// {
|
||
// id: 2,
|
||
// title: "Seezun",
|
||
// image: seezunCase,
|
||
// category: "E-commerce",
|
||
// industry: "Retail",
|
||
// featured: true,
|
||
// link: "/projects/seezun",
|
||
// icon: ShoppingCart
|
||
// },
|
||
{
|
||
id: 3,
|
||
title: "Woka",
|
||
image: wokaCase,
|
||
category: "Health & Fitness",
|
||
industry: "Healthcare",
|
||
featured: true,
|
||
link: "/projects/woka",
|
||
icon: Tv
|
||
},
|
||
{
|
||
id: 6,
|
||
title: "Traders Circuit",
|
||
image: tcCase,
|
||
category: "FinTech",
|
||
industry: "Finance",
|
||
featured: true,
|
||
link: "/projects/traderscircuit",
|
||
icon: TrendingUp
|
||
},
|
||
{
|
||
id: 7,
|
||
title: "Good Times",
|
||
image: gtCase,
|
||
category: "Events",
|
||
industry: "Entertainment",
|
||
featured: true,
|
||
link: "/projects/goodtimes",
|
||
icon: PartyPopper
|
||
},
|
||
{
|
||
id: 8,
|
||
title: "Resturant Reward App",
|
||
image: RrCase,
|
||
category: "Loyalty & Rewards",
|
||
industry: "Hospitality",
|
||
featured: false,
|
||
link: "",
|
||
icon: Utensils
|
||
},
|
||
{
|
||
id: 9,
|
||
title: "Amble",
|
||
image: ambleCase,
|
||
category: "Social",
|
||
industry: "Heritage",
|
||
featured: false,
|
||
link: "/projects/amble",
|
||
icon: Users
|
||
},
|
||
{
|
||
id: 10,
|
||
title: "Amoz",
|
||
image: amozCase,
|
||
category: "Lifestyle",
|
||
industry: "Consumer",
|
||
featured: false,
|
||
link: "/projects/amoz",
|
||
icon: Heart
|
||
},
|
||
{
|
||
id: 11,
|
||
title: "Dorf Ketal",
|
||
image: dkCase,
|
||
category: "Lifestyle",
|
||
industry: "Chemicals",
|
||
featured: false,
|
||
link: "",
|
||
icon: FlaskConical
|
||
},
|
||
{
|
||
id: 12,
|
||
title: "VIB360",
|
||
image: vib360Case,
|
||
category: "Lifestyle",
|
||
industry: "Consumer",
|
||
featured: false,
|
||
link: "/projects/vib360",
|
||
icon: Activity
|
||
},
|
||
{
|
||
id: 13,
|
||
title: "Nifty 11",
|
||
image: niftyCase,
|
||
category: "Lifestyle",
|
||
industry: "Consumer",
|
||
featured: false,
|
||
link: "",
|
||
icon: Trophy
|
||
},
|
||
{
|
||
id: 13,
|
||
title: "Prosperty",
|
||
image: prospertyCase,
|
||
category: "Lifestyle",
|
||
industry: "Real Estate",
|
||
featured: false,
|
||
link: "/projects/prosperty",
|
||
icon: Building2
|
||
},
|
||
{
|
||
id: 14,
|
||
title: "Simpletend",
|
||
image: simplitendCase,
|
||
category: "Health & Fitness",
|
||
industry: "Healthcare",
|
||
featured: false,
|
||
link: "/projects/simpletend",
|
||
icon: Activity
|
||
},
|
||
{
|
||
id: 15,
|
||
title: "Farm Feeder",
|
||
image: farmCase,
|
||
category: "AgriTech",
|
||
industry: "Agriculture",
|
||
featured: false,
|
||
link: "",
|
||
icon: Tractor
|
||
},
|
||
{
|
||
id: 16,
|
||
title: "Lean In World",
|
||
image: leanCase,
|
||
category: "AgriTech",
|
||
industry: "Agriculture",
|
||
featured: false,
|
||
link: "",
|
||
icon: Globe
|
||
},
|
||
];
|
||
|
||
const industries = ["All Industries", "Consumer", "Retail", "Healthcare", "Technology", "Agriculture", "Finance", "Entertainment", "Real Estate", "Heritage", "Chemicals", "Hospitality"];
|
||
const categories = ["All Categories", "Lifestyle", "E-commerce", "Health & Fitness", "Social", "AgriTech", "FinTech", "Events", "PropTech", "Loyalty & Rewards"];
|
||
|
||
export const CaseStudies = () => {
|
||
const [searchTerm, setSearchTerm] = useState("");
|
||
const [selectedIndustry, setSelectedIndustry] = useState("All Industries");
|
||
const [selectedCategory, setSelectedCategory] = useState("All Categories");
|
||
const [showFeaturedOnly, setShowFeaturedOnly] = useState(false);
|
||
|
||
// Filter case studies based on search and filters
|
||
const filteredCaseStudies = caseStudies.filter((study) => {
|
||
const search = searchTerm.toLowerCase();
|
||
|
||
// Now we only check against `title`, `category`, and `industry`
|
||
const matchesSearch =
|
||
study.title.toLowerCase().includes(search) ||
|
||
study.category.toLowerCase().includes(search) ||
|
||
study.industry.toLowerCase().includes(search);
|
||
|
||
const matchesIndustry =
|
||
selectedIndustry === "All Industries" || study.industry === selectedIndustry;
|
||
|
||
const matchesCategory =
|
||
selectedCategory === "All Categories" || study.category === selectedCategory;
|
||
|
||
const matchesFeatured = !showFeaturedOnly || study.featured;
|
||
|
||
return matchesSearch && matchesIndustry && matchesCategory && matchesFeatured;
|
||
});
|
||
|
||
const navigate = useNavigate();
|
||
|
||
return (
|
||
<div className="min-h-screen dark bg-background">
|
||
{/* <Navigation /> */}
|
||
|
||
{/* Hero Section */}
|
||
<section className="relative pt-24 pb-20 overflow-hidden bg-black">
|
||
<Helmet>
|
||
{/* Page Title and Meta Description */}
|
||
<title>Case Studies | AI Web Development Projects by WDI</title>
|
||
<meta
|
||
name="description"
|
||
content="Explore real-world AI web development case studies from WDI. See how we help enterprises and startups create scalable, smart digital solutions."
|
||
/>
|
||
|
||
{/* Canonical Link */}
|
||
<link rel="canonical" href="https://www.wdipl.com/case-studies" />
|
||
|
||
{/* Open Graph Tags (for Facebook, LinkedIn) */}
|
||
<meta property="og:title" content="Case Studies | AI Web Development Projects by WDI" />
|
||
<meta
|
||
property="og:description"
|
||
content="Explore real-world AI web development case studies from WDI. See how we help enterprises and startups create scalable, smart digital solutions."
|
||
/>
|
||
<meta property="og:url" content="https://www.wdipl.com/services" />
|
||
<meta property="og:type" content="website" />
|
||
<meta property="og:image" content="https://www.wdipl.com/your-preview-image.jpg" />
|
||
|
||
{/* Twitter Card Tags */}
|
||
<meta name="twitter:card" content="summary_large_image" />
|
||
<meta name="twitter:title" content="Case Studies | AI Web Development Projects by WDI" />
|
||
<meta
|
||
name="twitter:description"
|
||
content="Explore real-world AI web development case studies from WDI. See how we help enterprises and startups create scalable, smart digital solutions."
|
||
/>
|
||
<meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" />
|
||
|
||
{/* Social Profiles (using JSON-LD Schema) */}
|
||
<script type="application/ld+json">
|
||
{`
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "Organization",
|
||
"name": "WDI",
|
||
"url": "https://www.wdipl.com",
|
||
"sameAs": [
|
||
"https://www.facebook.com/wdideas",
|
||
"https://www.linkedin.com/in/website-developers-india/",
|
||
"https://www.instagram.com/wdipl/"
|
||
]
|
||
}
|
||
`}
|
||
</script>
|
||
</Helmet>
|
||
<div className="absolute inset-0 bg-gradient-to-br from-accent/5 via-background to-background" />
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
className="container relative px-6 mx-auto lg:px-8"
|
||
>
|
||
<div className="max-w-4xl mx-auto text-center">
|
||
<Badge variant="outline" className="mb-6 border-accent/20 text-accent">
|
||
Our Success Stories
|
||
</Badge>
|
||
<h1 className="mb-6 text-4xl font-semibold leading-tight md:text-6xl lg:text-7xl">
|
||
<span className="text-white">Portfolios That </span>
|
||
<span className="text-accent">Define Excellence</span>
|
||
</h1>
|
||
<p className="max-w-3xl mx-auto text-xl leading-relaxed text-gray-300">
|
||
Explore our portfolio of AI‑driven, award‑winning projects that have transformed businesses and delighted millions of users across diverse industries.
|
||
</p>
|
||
</div>
|
||
</motion.div>
|
||
</section>
|
||
|
||
{/* Filters Section */}
|
||
<section className="py-12 border-b bg-background border-white/10">
|
||
<div className="container px-6 mx-auto lg:px-8">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6, delay: 0.2 }}
|
||
className="max-w-6xl mx-auto"
|
||
>
|
||
<div className="grid items-end grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||
{/* Search */}
|
||
<div className="relative">
|
||
<Search className="absolute w-4 h-4 transform -translate-y-1/2 left-3 top-1/2 text-muted-foreground" />
|
||
<Input
|
||
placeholder="Search portfolios..."
|
||
value={searchTerm}
|
||
onChange={(e) => setSearchTerm(e.target.value)}
|
||
className="pl-10 bg-card/50 border-white/10"
|
||
/>
|
||
</div>
|
||
|
||
{/* Industry Filter */}
|
||
<Select value={selectedIndustry} onValueChange={setSelectedIndustry}>
|
||
<SelectTrigger className="bg-card/50 border-white/10">
|
||
<SelectValue placeholder="Select Industry" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
{industries.map((industry) => (
|
||
<SelectItem key={industry} value={industry}>
|
||
{industry}
|
||
</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
|
||
{/* Category Filter */}
|
||
<Select value={selectedCategory} onValueChange={setSelectedCategory}>
|
||
<SelectTrigger className="bg-card/50 border-white/10">
|
||
<SelectValue placeholder="Select Category" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
{categories.map((category) => (
|
||
<SelectItem key={category} value={category}>
|
||
{category}
|
||
</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
|
||
{/* Featured Toggle */}
|
||
<Button
|
||
variant={showFeaturedOnly ? "default" : "outline"}
|
||
onClick={() => setShowFeaturedOnly(!showFeaturedOnly)}
|
||
className="justify-center h-9"
|
||
>
|
||
<Award className="w-4 h-4 mr-2" />
|
||
Featured Only
|
||
</Button>
|
||
</div>
|
||
|
||
{/* Results Count */}
|
||
<div className="mt-6 text-center">
|
||
<p className="text-muted-foreground">
|
||
Showing {filteredCaseStudies.length} of {caseStudies.length} portfolios
|
||
</p>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Case Studies Grid */}
|
||
<section className="py-20 bg-background">
|
||
<div className="container px-6 mx-auto lg:px-8">
|
||
<div className="mx-auto max-w-7xl">
|
||
<div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
|
||
{filteredCaseStudies.map((study, index) => {
|
||
const IconComponent = study.icon;
|
||
return (
|
||
<motion.div
|
||
key={study.id}
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6, delay: index * 0.01 }}
|
||
viewport={{ once: true }}
|
||
whileHover={{ y: -8, scale: 1.02 }}
|
||
className="cursor-pointer group"
|
||
onClick={() => navigate(study.link)}
|
||
>
|
||
<Card className="h-full overflow-hidden transition-all duration-500 shadow-lg bg-card/50 backdrop-blur-md border-white/10 hover:border-accent/30 hover:shadow-2xl hover:shadow-accent/10 rounded-2xl"
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
navigate(study.link);
|
||
}}
|
||
>
|
||
<CardContent className="h-full p-0 pb-0 CardContentOverride">
|
||
{/* Image Header */}
|
||
<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"
|
||
/>
|
||
<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-white border-0 bg-accent/90">
|
||
{study.category}
|
||
</Badge>
|
||
</div>
|
||
|
||
{/* Featured Badge */}
|
||
{study.featured && (
|
||
<div className="absolute top-2 right-4">
|
||
<div className="flex items-center gap-1 px-3 py-1 text-xs font-medium text-white rounded-full bg-amber-500/90">
|
||
<Star className="w-3 h-3 fill-current" />
|
||
Featured
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Icon Overlay */}
|
||
<div className="absolute bottom-4 left-4">
|
||
<div className="flex items-center justify-center w-12 h-12 rounded-full bg-white/20 backdrop-blur-md">
|
||
<IconComponent className="w-6 h-6 text-white" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* CTA Section */}
|
||
<section className="py-20 bg-black">
|
||
<div className="container 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="max-w-4xl mx-auto text-center"
|
||
>
|
||
<h2 className="mb-6 text-3xl font-semibold text-white lg:text-4xl">
|
||
Ready to Create Your Own Success Story?
|
||
</h2>
|
||
<p className="mb-8 text-xl leading-relaxed text-gray-300">
|
||
Join the ranks of industry leaders who have transformed their businesses with our AI‑driven innovative solutions.
|
||
</p>
|
||
<div className="flex flex-col justify-center gap-4 sm:flex-row">
|
||
<Button
|
||
size="lg"
|
||
className="text-white bg-accent hover:bg-accent/90"
|
||
onClick={() => navigate("/start-a-project")}
|
||
>
|
||
Start Your Project
|
||
<ArrowUpRight className="w-4 h-4 ml-2" />
|
||
</Button>
|
||
<Button
|
||
size="lg"
|
||
variant="outline"
|
||
onClick={() => navigate("/contact-us")}
|
||
>
|
||
Schedule Consultation
|
||
<ArrowRight className="w-4 h-4 ml-2" />
|
||
</Button>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* <Footer /> */}
|
||
</div>
|
||
);
|
||
}; |