1578 lines
60 KiB
TypeScript
1578 lines
60 KiB
TypeScript
import { motion } from "framer-motion";
|
||
import {
|
||
Activity,
|
||
ArrowRight,
|
||
BarChart3,
|
||
BookOpen as BookIcon,
|
||
Brain,
|
||
Calculator,
|
||
Cloud,
|
||
CloudCog,
|
||
Code,
|
||
Coffee,
|
||
Cog,
|
||
Compass,
|
||
Database,
|
||
DollarSign,
|
||
FileText,
|
||
Film,
|
||
GitBranch,
|
||
Grid,
|
||
Headphones,
|
||
Heart,
|
||
MessageSquare,
|
||
Music,
|
||
Play,
|
||
Rocket,
|
||
Search,
|
||
Settings,
|
||
ShirtIcon,
|
||
ShoppingCart,
|
||
Table,
|
||
Tag,
|
||
Target,
|
||
TrendingUp,
|
||
UserPlus,
|
||
Users,
|
||
Zap,
|
||
} from "lucide-react";
|
||
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
|
||
import { Footer } from "../components/Footer";
|
||
import { Navigation } from "../components/Navigation";
|
||
import {
|
||
Accordion,
|
||
AccordionContent,
|
||
AccordionItem,
|
||
AccordionTrigger,
|
||
} from "../components/ui/accordion";
|
||
import { Badge } from "../components/ui/badge";
|
||
import { Button } from "../components/ui/button";
|
||
import { Card, CardContent } from "../components/ui/card";
|
||
import { ShimmerButton } from "../components/ui/shimmer-button";
|
||
import { useNavigate } from "react-router-dom";
|
||
import { Helmet } from "react-helmet-async";
|
||
import { AIStrategyTargetAudience } from "./AIStrategyConsulting";
|
||
|
||
// Personalized Recommendation Engines Hero Section
|
||
const RecommendationEnginesHeroWithCTA = () => {
|
||
const navigate = useNavigate();
|
||
return (
|
||
<section className="relative py-20 overflow-hidden bg-black">
|
||
<Helmet>
|
||
{/* Page Title and Meta Description */}
|
||
<title>Recommendation Engines | AI-Powered Personalization | WDI</title>
|
||
<meta
|
||
name="description"
|
||
content="WDI develops AI recommendation systems for hyper-personalized experiences. Improve engagement, conversion, and user satisfaction with smart engines."
|
||
/>
|
||
|
||
{/* Canonical Link */}
|
||
<link
|
||
rel="canonical"
|
||
href="https://www.wdipl.com/services/recommendation-engines"
|
||
/>
|
||
|
||
{/* Open Graph Tags (for Facebook, LinkedIn) */}
|
||
<meta
|
||
property="og:title"
|
||
content="Recommendation Engines | AI-Powered Personalization | WDI"
|
||
/>
|
||
<meta
|
||
property="og:description"
|
||
content="WDI develops AI recommendation systems for hyper-personalized experiences. Improve engagement, conversion, and user satisfaction with smart engines."
|
||
/>
|
||
<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="Recommendation Engines | AI-Powered Personalization | WDI"
|
||
/>
|
||
<meta
|
||
name="twitter:description"
|
||
content="WDI develops AI recommendation systems for hyper-personalized experiences. Improve engagement, conversion, and user satisfaction with smart engines."
|
||
/>
|
||
<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="container mx-auto px-6 lg:px-8">
|
||
<div className="grid lg:grid-cols-2 gap-16 items-center min-h-[90vh]">
|
||
<motion.div
|
||
initial={{ opacity: 0, x: -50 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
className="space-y-8"
|
||
>
|
||
{/* Main Heading */}
|
||
<div className="space-y-6">
|
||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight">
|
||
Personalized Recommendation Engines
|
||
</h1>
|
||
|
||
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
|
||
Building intelligent systems that personalize user experiences,
|
||
drive engagement, and boost conversions by suggesting relevant
|
||
products, content, and services.
|
||
</p>
|
||
</div>
|
||
|
||
{/* CTAs */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.3 }}
|
||
className="flex flex-col sm:flex-row gap-4"
|
||
>
|
||
<ShimmerButton
|
||
className="text-lg px-8 py-4"
|
||
onClick={() => navigate("/start-a-project")}
|
||
>
|
||
<div className="inline-flex items-center gap-2">
|
||
<TrendingUp className="w-5 h-5 flex-shrink-0" />
|
||
<span>Enhance User Engagement</span>
|
||
</div>
|
||
</ShimmerButton>
|
||
<Button
|
||
variant="outline"
|
||
size="lg"
|
||
className="text-lg px-8 py-4 h-auto border-gray-600 text-gray-300 hover:bg-gray-800 hover:text-white"
|
||
>
|
||
<div className="inline-flex items-center gap-2">
|
||
<Play className="w-5 h-5 flex-shrink-0" />
|
||
<span>Request a Demo</span>
|
||
</div>
|
||
</Button>
|
||
</motion.div>
|
||
</motion.div>
|
||
|
||
{/* Right side with Personalized Recommendation Visualization */}
|
||
<motion.div
|
||
initial={{ opacity: 0, x: 50 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
className="relative flex flex-col items-center"
|
||
>
|
||
{/* Product Grid with "Recommended For You" */}
|
||
<div className="relative w-full max-w-2xl mx-auto">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.4 }}
|
||
className="relative"
|
||
>
|
||
{/* Main Recommendation Dashboard */}
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0.8 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
transition={{ duration: 0.8, delay: 0.6 }}
|
||
className="relative bg-gray-900 rounded-2xl p-8 mx-auto max-w-lg shadow-2xl border border-gray-700"
|
||
>
|
||
{/* "Recommended For You" Header */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 1.0 }}
|
||
className="text-center mb-6"
|
||
>
|
||
<h3 className="text-xl font-semibold text-white mb-2">
|
||
Recommended For You
|
||
</h3>
|
||
<p className="text-gray-400 text-sm">
|
||
Based on your preferences and behavior
|
||
</p>
|
||
</motion.div>
|
||
|
||
{/* Product Grid */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 1.2 }}
|
||
className="grid grid-cols-2 gap-4 mb-6"
|
||
>
|
||
{/* Product Cards */}
|
||
{[
|
||
{
|
||
icon: ShirtIcon,
|
||
title: "Summer Jacket",
|
||
price: "$89",
|
||
match: "95%",
|
||
},
|
||
{
|
||
icon: Headphones,
|
||
title: "Wireless Headphones",
|
||
price: "$199",
|
||
match: "92%",
|
||
},
|
||
{
|
||
icon: BookIcon,
|
||
title: "Tech Guide 2024",
|
||
price: "$29",
|
||
match: "88%",
|
||
},
|
||
{
|
||
icon: Coffee,
|
||
title: "Premium Coffee",
|
||
price: "$24",
|
||
match: "85%",
|
||
},
|
||
].map((item, index) => (
|
||
<motion.div
|
||
key={index}
|
||
initial={{ opacity: 0, scale: 0.8 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
transition={{ duration: 0.5, delay: 1.4 + index * 0.1 }}
|
||
className="bg-black/50 rounded-lg p-4 border border-gray-600 hover:border-accent/30 transition-all duration-300"
|
||
>
|
||
<div className="flex flex-col items-center text-center">
|
||
<item.icon className="w-8 h-8 text-blue-400 mb-2" />
|
||
<div className="text-white text-sm font-medium mb-1">
|
||
{item.title}
|
||
</div>
|
||
<div className="text-accent text-sm font-bold mb-1">
|
||
{item.price}
|
||
</div>
|
||
<div className="text-green-400 text-xs">
|
||
{item.match} match
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
))}
|
||
</motion.div>
|
||
|
||
{/* Content Feed Section */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 1.8 }}
|
||
className="bg-black/50 rounded-lg p-4 border border-gray-700 mb-6"
|
||
>
|
||
<div className="flex items-center justify-between mb-3">
|
||
<div className="flex items-center gap-2">
|
||
<Film className="w-4 h-4 text-purple-400" />
|
||
<span className="text-purple-400 text-xs font-mono">
|
||
Content Feed
|
||
</span>
|
||
</div>
|
||
<Badge
|
||
variant="secondary"
|
||
className="bg-purple-500/20 text-purple-300 border-purple-500/30 text-xs"
|
||
>
|
||
Personalized
|
||
</Badge>
|
||
</div>
|
||
|
||
{/* Content Suggestions */}
|
||
<div className="space-y-2">
|
||
<motion.div
|
||
initial={{ opacity: 0, x: -20 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.6, delay: 2.0 }}
|
||
className="flex items-center gap-3 p-2 bg-purple-500/10 rounded-lg"
|
||
>
|
||
<Film className="w-4 h-4 text-purple-400" />
|
||
<div className="flex-1">
|
||
<div className="text-white text-xs">
|
||
Sci-Fi Thriller Movie
|
||
</div>
|
||
<div className="text-purple-300 text-xs">
|
||
94% match
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, x: -20 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.6, delay: 2.2 }}
|
||
className="flex items-center gap-3 p-2 bg-blue-500/10 rounded-lg"
|
||
>
|
||
<Music className="w-4 h-4 text-blue-400" />
|
||
<div className="flex-1">
|
||
<div className="text-white text-xs">
|
||
Electronic Playlist
|
||
</div>
|
||
<div className="text-blue-300 text-xs">91% match</div>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* Performance Metrics */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 10 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6, delay: 2.4 }}
|
||
className="grid grid-cols-2 gap-3"
|
||
>
|
||
<div className="p-3 bg-gradient-to-br from-green-500/20 to-emerald-500/20 rounded-lg border border-green-500/30">
|
||
<div className="text-green-400 text-lg font-bold">
|
||
+45%
|
||
</div>
|
||
<div className="text-white text-xs">Engagement</div>
|
||
</div>
|
||
<div className="p-3 bg-gradient-to-br from-blue-500/20 to-cyan-500/20 rounded-lg border border-blue-500/30">
|
||
<div className="text-blue-400 text-lg font-bold">
|
||
+32%
|
||
</div>
|
||
<div className="text-white text-xs">Conversions</div>
|
||
</div>
|
||
</motion.div>
|
||
</motion.div>
|
||
|
||
{/* Intertwined Arrows showing user-product connection */}
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0.8 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
transition={{ duration: 0.8, delay: 2.6 }}
|
||
className="absolute -bottom-6 -left-6 transform -rotate-12"
|
||
>
|
||
<div className="w-14 h-14 bg-gradient-to-br from-orange-500/20 to-red-500/20 rounded-full flex items-center justify-center border border-orange-500/30">
|
||
<ArrowRight className="w-6 h-6 text-orange-400" />
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* Connection Indicator */}
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ duration: 0.8, delay: 2.8 }}
|
||
className="absolute -top-8 -right-8 space-y-2"
|
||
>
|
||
<div className="flex items-center gap-2 text-cyan-400 text-sm">
|
||
<Target className="w-4 h-4" />
|
||
<span>Connected</span>
|
||
</div>
|
||
<div className="flex gap-1">
|
||
<motion.div
|
||
animate={{ opacity: [0.3, 1, 0.3] }}
|
||
transition={{ duration: 2, repeat: Infinity }}
|
||
className="w-2 h-2 bg-cyan-400 rounded-full"
|
||
></motion.div>
|
||
<motion.div
|
||
animate={{ opacity: [0.3, 1, 0.3] }}
|
||
transition={{ duration: 2, repeat: Infinity, delay: 0.5 }}
|
||
className="w-2 h-2 bg-orange-400 rounded-full"
|
||
></motion.div>
|
||
<motion.div
|
||
animate={{ opacity: [0.3, 1, 0.3] }}
|
||
transition={{ duration: 2, repeat: Infinity, delay: 1 }}
|
||
className="w-2 h-2 bg-purple-400 rounded-full"
|
||
></motion.div>
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* User-Product Connection Visual */}
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
transition={{ duration: 0.6, delay: 3.0 }}
|
||
className="absolute top-1/4 left-1/4 transform -translate-x-1/2 -translate-y-1/2"
|
||
>
|
||
<div className="w-16 h-16 bg-accent/10 backdrop-blur-sm rounded-full flex items-center justify-center shadow-xl">
|
||
<div className="text-center">
|
||
<div className="text-accent text-sm font-bold">AI</div>
|
||
<div className="text-white text-xs">Match</div>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
</motion.div>
|
||
|
||
{/* Recommendation Features */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 3.2 }}
|
||
className="flex justify-center gap-4 flex-wrap mt-8"
|
||
>
|
||
<Badge
|
||
variant="secondary"
|
||
className="bg-blue-500/20 text-blue-300 border-blue-500/30"
|
||
>
|
||
<Target className="w-3 h-3 mr-1" />
|
||
Personalized
|
||
</Badge>
|
||
<Badge
|
||
variant="secondary"
|
||
className="bg-green-500/20 text-green-300 border-green-500/30"
|
||
>
|
||
<TrendingUp className="w-3 h-3 mr-1" />
|
||
Engagement
|
||
</Badge>
|
||
<Badge
|
||
variant="secondary"
|
||
className="bg-purple-500/20 text-purple-300 border-purple-500/30"
|
||
>
|
||
<DollarSign className="w-3 h-3 mr-1" />
|
||
Conversions
|
||
</Badge>
|
||
</motion.div>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Key Benefits of Recommendation Engines
|
||
const RecommendationBenefits = () => {
|
||
const benefits = [
|
||
{
|
||
icon: DollarSign,
|
||
title: "Increased Sales/Conversions",
|
||
description:
|
||
"Presenting relevant items leads to higher purchases and improved conversion rates.",
|
||
},
|
||
{
|
||
icon: Users,
|
||
title: "Enhanced User Engagement",
|
||
description:
|
||
"Keeping users on your platform longer with tailored content and personalized experiences.",
|
||
},
|
||
{
|
||
icon: Heart,
|
||
title: "Improved Customer Satisfaction",
|
||
description:
|
||
"Making discovery effortless and enjoyable through intelligent recommendations.",
|
||
},
|
||
{
|
||
icon: TrendingUp,
|
||
title: "Higher Average Order Value (AOV)",
|
||
description:
|
||
"Suggesting complementary products that increase basket size and revenue per customer.",
|
||
},
|
||
{
|
||
icon: Search,
|
||
title: "New Product/Content Discovery",
|
||
description:
|
||
"Helping users find what they didn't know they needed through smart suggestions.",
|
||
},
|
||
];
|
||
|
||
return (
|
||
<section className="py-32">
|
||
<div className="container mx-auto px-6 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-20"
|
||
>
|
||
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
|
||
Drive Growth with Hyper-Personalization
|
||
</h2>
|
||
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
|
||
Personalized recommendation engines that deliver tailored
|
||
experiences, increase engagement, and maximize conversions across
|
||
digital touchpoints.
|
||
</p>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
viewport={{ once: true }}
|
||
className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
|
||
>
|
||
{benefits.slice(0, 3).map((benefit, index) => {
|
||
const IconComponent = benefit.icon;
|
||
return (
|
||
<motion.div
|
||
key={index}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5, delay: index * 0.01 }}
|
||
viewport={{ once: true }}
|
||
whileHover={{ y: -5 }}
|
||
className="group"
|
||
>
|
||
<Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
|
||
<CardContent className="p-8 text-center">
|
||
<div className="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
||
<IconComponent className="w-8 h-8 text-accent" />
|
||
</div>
|
||
<h3 className="text-xl font-semibold text-foreground mb-4">
|
||
{benefit.title}
|
||
</h3>
|
||
<p className="text-muted-foreground leading-relaxed">
|
||
{benefit.description}
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</motion.div>
|
||
|
||
{/* Second row with remaining benefits */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.4 }}
|
||
viewport={{ once: true }}
|
||
className="grid md:grid-cols-2 gap-8 max-w-2xl mx-auto mt-8"
|
||
>
|
||
{benefits.slice(3).map((benefit, index) => {
|
||
const IconComponent = benefit.icon;
|
||
return (
|
||
<motion.div
|
||
key={index + 3}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5, delay: (index + 3) * 0.1 }}
|
||
viewport={{ once: true }}
|
||
whileHover={{ y: -5 }}
|
||
className="group"
|
||
>
|
||
<Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
|
||
<CardContent className="p-8 text-center">
|
||
<div className="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
||
<IconComponent className="w-8 h-8 text-accent" />
|
||
</div>
|
||
<h3 className="text-xl font-semibold text-foreground mb-4">
|
||
{benefit.title}
|
||
</h3>
|
||
<p className="text-muted-foreground leading-relaxed">
|
||
{benefit.description}
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Our Recommendation Engine Development Process
|
||
const RecommendationProcess = () => {
|
||
const steps = [
|
||
{
|
||
title: "Data Collection & User Behavior Analysis",
|
||
description:
|
||
"Gathering and analyzing user interaction data, preferences, and behavioral patterns to understand recommendation requirements.",
|
||
icon: Database,
|
||
},
|
||
{
|
||
title: "Algorithm Selection (Collaborative, Content-Based, Hybrid)",
|
||
description:
|
||
"Choosing the optimal recommendation algorithms based on your data characteristics and business objectives.",
|
||
icon: Brain,
|
||
},
|
||
{
|
||
title: "Model Training & Optimization",
|
||
description:
|
||
"Training recommendation models on your data and optimizing for accuracy, performance, and relevance metrics.",
|
||
icon: Settings,
|
||
},
|
||
{
|
||
title: "API Integration & A/B Testing",
|
||
description:
|
||
"Integrating recommendation APIs with your platform and conducting A/B tests to validate performance improvements.",
|
||
icon: GitBranch,
|
||
},
|
||
{
|
||
title: "Deployment & Real-time Feedback",
|
||
description:
|
||
"Deploying the recommendation system to production with real-time feedback loops for continuous learning.",
|
||
icon: Rocket,
|
||
},
|
||
{
|
||
title: "Monitoring & Continuous Improvement",
|
||
description:
|
||
"Ongoing monitoring of recommendation quality and performance with regular model updates and optimizations.",
|
||
icon: Activity,
|
||
},
|
||
];
|
||
|
||
return (
|
||
<section className="py-32 bg-black">
|
||
<div className="container mx-auto px-6 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-20"
|
||
>
|
||
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
|
||
Our Strategic Approach to Building Your Personalized Engine
|
||
</h2>
|
||
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
|
||
A structured, data‑driven methodology to design and deploy
|
||
personalized recommendation engines that align with your business
|
||
goals and user behavior.
|
||
</p>
|
||
</motion.div>
|
||
|
||
<div className="relative">
|
||
{/* Timeline line */}
|
||
<div className="absolute left-1/2 transform -translate-x-1/2 h-full w-0.5 bg-gradient-to-b from-accent via-accent/50 to-transparent hidden lg:block"></div>
|
||
|
||
<div className="space-y-16">
|
||
{steps.map((step, index) => {
|
||
const IconComponent = step.icon;
|
||
const isEven = index % 2 === 0;
|
||
|
||
return (
|
||
<motion.div
|
||
key={index}
|
||
initial={{ opacity: 0, x: isEven ? -50 : 50 }}
|
||
whileInView={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.8, delay: index * 0.2 }}
|
||
viewport={{ once: true }}
|
||
className={`flex items-center ${
|
||
isEven ? "lg:flex-row" : "lg:flex-row-reverse"
|
||
} flex-col lg:gap-16 gap-8`}
|
||
>
|
||
<div
|
||
className={`flex-1 ${
|
||
isEven ? "lg:text-right" : "lg:text-left"
|
||
} text-center lg:text-left`}
|
||
>
|
||
<div className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
|
||
<div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
|
||
<div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
|
||
<IconComponent className="w-6 h-6 text-accent" />
|
||
</div>
|
||
<div className="text-2xl font-bold text-accent">
|
||
0{index + 1}
|
||
</div>
|
||
</div>
|
||
<h3 className="text-2xl font-semibold text-white mb-4">
|
||
{step.title}
|
||
</h3>
|
||
<p className="text-gray-300 leading-relaxed">
|
||
{step.description}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Timeline dot */}
|
||
<div className="w-4 h-4 bg-accent rounded-full border-4 border-black z-10 hidden lg:block"></div>
|
||
|
||
<div className="flex-1 hidden lg:block"></div>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Specific Recommendation Engine Services
|
||
const RecommendationServices = () => {
|
||
const services = [
|
||
{
|
||
title: "Product Recommendation Systems",
|
||
description:
|
||
'For eCommerce (e.g., "Customers who bought this also bought...").',
|
||
icon: ShoppingCart,
|
||
features: [
|
||
"Cross-selling",
|
||
"Upselling",
|
||
"Similar Products",
|
||
"Bundle Recommendations",
|
||
],
|
||
},
|
||
{
|
||
title: "Content Recommendation Systems",
|
||
description: "For media, news, and streaming platforms.",
|
||
icon: Film,
|
||
features: [
|
||
"Content Discovery",
|
||
"Personalized Feeds",
|
||
"Related Articles",
|
||
"Next Episode",
|
||
],
|
||
},
|
||
{
|
||
title: "Service & Feature Recommendations",
|
||
description: "Guiding users through complex applications.",
|
||
icon: Compass,
|
||
features: [
|
||
"Feature Discovery",
|
||
"User Onboarding",
|
||
"Progressive Disclosure",
|
||
"Usage Optimization",
|
||
],
|
||
},
|
||
{
|
||
title: "Collaborative Filtering",
|
||
description: "Based on user behavior similarity.",
|
||
icon: Users,
|
||
features: [
|
||
"User-based CF",
|
||
"Item-based CF",
|
||
"Matrix Factorization",
|
||
"Neighborhood Methods",
|
||
],
|
||
},
|
||
{
|
||
title: "Content-Based Filtering",
|
||
description: "Based on item characteristics and user preferences.",
|
||
icon: Tag,
|
||
features: [
|
||
"Feature Matching",
|
||
"Profile Building",
|
||
"Similarity Metrics",
|
||
"Preference Learning",
|
||
],
|
||
},
|
||
{
|
||
title: "Hybrid Recommendation Systems",
|
||
description: "Combining multiple approaches for optimal results.",
|
||
icon: Zap,
|
||
features: [
|
||
"Multi-algorithm",
|
||
"Weighted Hybrid",
|
||
"Switching Hybrid",
|
||
"Mixed Recommendations",
|
||
],
|
||
},
|
||
{
|
||
title: "Real-time Recommendations",
|
||
description: "Instant suggestions based on current user activity.",
|
||
icon: Activity,
|
||
features: [
|
||
"Live Processing",
|
||
"Session-based",
|
||
"Context Aware",
|
||
"Streaming Data",
|
||
],
|
||
},
|
||
{
|
||
title: "Personalized Search Results",
|
||
description: "Enhancing search relevance.",
|
||
icon: Search,
|
||
features: [
|
||
"Query Understanding",
|
||
"Ranking Personalization",
|
||
"Search Suggestions",
|
||
"Result Reordering",
|
||
],
|
||
},
|
||
];
|
||
|
||
return (
|
||
<section className="py-32">
|
||
<div className="container mx-auto px-6 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-20"
|
||
>
|
||
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
|
||
Our Specialized Recommendation Engine Solutions
|
||
</h2>
|
||
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
|
||
Tailored recommendation‑engine solutions that power AI‑powered
|
||
mobile and web applications with hyper‑personalized experiences.
|
||
</p>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
viewport={{ once: true }}
|
||
className="grid md:grid-cols-2 lg:grid-cols-4 gap-8"
|
||
>
|
||
{services.map((service, index) => {
|
||
const IconComponent = service.icon;
|
||
return (
|
||
<motion.div
|
||
key={index}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5, delay: index * 0.01 }}
|
||
viewport={{ once: true }}
|
||
whileHover={{ y: -5 }}
|
||
className="group"
|
||
>
|
||
<Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
|
||
<CardContent className="p-6">
|
||
<div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center mb-6">
|
||
<IconComponent className="w-6 h-6 text-accent" />
|
||
</div>
|
||
<h3 className="text-lg font-semibold text-foreground mb-4">
|
||
{service.title}
|
||
</h3>
|
||
<p className="text-muted-foreground leading-relaxed mb-6 text-sm">
|
||
{service.description}
|
||
</p>
|
||
<div className="space-y-2">
|
||
<h4 className="text-xs font-medium text-foreground">
|
||
Key Features:
|
||
</h4>
|
||
<div className="flex flex-wrap gap-1">
|
||
{service.features.map((feature) => (
|
||
<Badge
|
||
key={feature}
|
||
variant="secondary"
|
||
className="text-xs bg-muted/50 text-muted-foreground border-muted"
|
||
>
|
||
{feature}
|
||
</Badge>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Tech Stack (Recommendation Engine Specific)
|
||
const RecommendationTechStack = () => {
|
||
const technologies = [
|
||
{ name: "Python", icon: Code, category: "Programming", color: "blue" },
|
||
{ name: "Apache Spark", icon: Zap, category: "Big Data", color: "orange" },
|
||
{
|
||
name: "TensorFlow",
|
||
icon: Brain,
|
||
category: "Deep Learning",
|
||
color: "orange",
|
||
},
|
||
{ name: "PyTorch", icon: Brain, category: "Deep Learning", color: "red" },
|
||
{ name: "Scikit-learn", icon: Cog, category: "ML Library", color: "blue" },
|
||
{
|
||
name: "Pandas",
|
||
icon: Table,
|
||
category: "Data Processing",
|
||
color: "green",
|
||
},
|
||
{
|
||
name: "NumPy",
|
||
icon: Calculator,
|
||
category: "Numerical Computing",
|
||
color: "blue",
|
||
},
|
||
{
|
||
name: "Collaborative Filtering (ALS, SVD)",
|
||
icon: Users,
|
||
category: "Algorithm",
|
||
color: "purple",
|
||
},
|
||
{
|
||
name: "Factorization Machines",
|
||
icon: Grid,
|
||
category: "Algorithm",
|
||
color: "green",
|
||
},
|
||
{
|
||
name: "Deep Learning for Recommenders",
|
||
icon: Brain,
|
||
category: "Neural Networks",
|
||
color: "red",
|
||
},
|
||
{
|
||
name: "Apache Kafka",
|
||
icon: Activity,
|
||
category: "Real-time Data",
|
||
color: "orange",
|
||
},
|
||
{
|
||
name: "AWS Personalize",
|
||
icon: CloudCog,
|
||
category: "Cloud ML",
|
||
color: "yellow",
|
||
},
|
||
{
|
||
name: "Google Cloud Recommendations AI",
|
||
icon: Cloud,
|
||
category: "Cloud ML",
|
||
color: "blue",
|
||
},
|
||
];
|
||
|
||
return (
|
||
<section className="py-32 bg-black">
|
||
<div className="container mx-auto px-6 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-20"
|
||
>
|
||
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
|
||
Tech Stack
|
||
</h2>
|
||
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
|
||
Leveraging advanced algorithms and data pipelines for intelligent
|
||
personalization.
|
||
</p>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
viewport={{ once: true }}
|
||
className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"
|
||
>
|
||
{technologies.map((tech, index) => {
|
||
const IconComponent = tech.icon;
|
||
const colorClasses = {
|
||
blue: "bg-blue-500/20 text-blue-400 border-blue-500/30",
|
||
orange: "bg-orange-500/20 text-orange-400 border-orange-500/30",
|
||
green: "bg-green-500/20 text-green-400 border-green-500/30",
|
||
red: "bg-red-500/20 text-red-400 border-red-500/30",
|
||
purple: "bg-purple-500/20 text-purple-400 border-purple-500/30",
|
||
yellow: "bg-yellow-500/20 text-yellow-400 border-yellow-500/30",
|
||
};
|
||
|
||
return (
|
||
<motion.div
|
||
key={index}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5, delay: index * 0.01 }}
|
||
viewport={{ once: true }}
|
||
whileHover={{ y: -5, scale: 1.05 }}
|
||
className="group"
|
||
>
|
||
<Card className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl p-4 text-center">
|
||
<div
|
||
className={`w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3 ${
|
||
colorClasses[tech.color as keyof typeof colorClasses] ||
|
||
"bg-accent/20 text-accent border-accent/30"
|
||
}`}
|
||
>
|
||
<IconComponent className="w-6 h-6" />
|
||
</div>
|
||
<h4 className="font-semibold text-white text-sm mb-1">
|
||
{tech.name}
|
||
</h4>
|
||
<p className="text-xs text-gray-400">{tech.category}</p>
|
||
</Card>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Relevant Recommendation Engine Case Studies
|
||
const RecommendationCaseStudies = () => {
|
||
const caseStudies = [
|
||
{
|
||
title: "E-commerce Personalization Engine",
|
||
client: "Fashion Retailer",
|
||
description:
|
||
"Implemented hybrid recommendation system combining collaborative filtering and content-based approaches, resulting in 35% increase in conversion rates and 28% boost in average order value through personalized product suggestions.",
|
||
image:
|
||
"https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=400&h=300&fit=crop&auto=format",
|
||
results: "35% conversion increase, 28% AOV boost",
|
||
engagement: "Real-world impact through personalization",
|
||
gradient: "from-blue-500/20 to-cyan-500/20",
|
||
},
|
||
{
|
||
title: "Streaming Content Discovery",
|
||
client: "Media Platform",
|
||
description:
|
||
"Built intelligent content recommendation engine using deep learning and user behavior analytics, achieving 52% increase in user engagement and 40% improvement in content discovery rates for personalized viewing experiences.",
|
||
image:
|
||
"https://images.unsplash.com/photo-1522869635100-9f4c5e86aa37?w=400&h=300&fit=crop&auto=format",
|
||
results: "52% engagement increase, 40% discovery improvement",
|
||
engagement: "Transforming content consumption patterns",
|
||
gradient: "from-purple-500/20 to-pink-500/20",
|
||
},
|
||
{
|
||
title: "News Personalization System",
|
||
client: "Digital Publisher",
|
||
description:
|
||
"Developed real-time news recommendation platform using NLP and user preference modeling, leading to 43% increase in article engagement and 31% improvement in time spent on platform through personalized content delivery.",
|
||
image:
|
||
"https://images.unsplash.com/photo-1504711434969-e33886168f5c?w=400&h=300&fit=crop&auto=format",
|
||
results: "43% article engagement, 31% time increase",
|
||
engagement: "Driving personalized news consumption",
|
||
gradient: "from-green-500/20 to-emerald-500/20",
|
||
},
|
||
];
|
||
|
||
return (
|
||
<section className="py-32">
|
||
<div className="container mx-auto px-6 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-20"
|
||
>
|
||
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
|
||
Personalization Driving Real-World Impact
|
||
</h2>
|
||
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
|
||
Personalized recommendation engines transform user journeys,
|
||
increase engagement, and deliver measurable business growth across
|
||
AI‑powered mobile and web applications.
|
||
</p>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
viewport={{ once: true }}
|
||
className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
|
||
>
|
||
{caseStudies.map((study, index) => (
|
||
<motion.div
|
||
key={index}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5, delay: index * 0.01 }}
|
||
viewport={{ once: true }}
|
||
whileHover={{ y: -8, scale: 1.02 }}
|
||
className="group cursor-pointer"
|
||
>
|
||
<Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl overflow-hidden h-full">
|
||
<CardContent className="p-0 flex flex-col h-full">
|
||
<div className="p-8 pb-6">
|
||
<div className="flex items-start gap-4 mb-6">
|
||
<div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
|
||
<Target className="w-6 h-6 text-accent" />
|
||
</div>
|
||
<div className="flex-1">
|
||
<div className="text-xs text-muted-foreground mb-2 uppercase tracking-wider">
|
||
{study.client}
|
||
</div>
|
||
<Badge
|
||
variant="secondary"
|
||
className="text-xs bg-accent/20 text-accent border-accent/30"
|
||
>
|
||
{study.results}
|
||
</Badge>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 className="text-xl font-semibold text-foreground mb-4 leading-tight">
|
||
{study.title}
|
||
</h3>
|
||
</div>
|
||
|
||
<div className="px-8 pb-6 flex-1">
|
||
<div
|
||
className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-white/10`}
|
||
>
|
||
<ImageWithFallback
|
||
src={study.image}
|
||
alt={study.title}
|
||
className="w-full h-48 object-cover rounded-lg shadow-lg"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="px-8 pb-6">
|
||
<p className="text-muted-foreground text-sm leading-relaxed mb-4">
|
||
{study.description}
|
||
</p>
|
||
<div className="flex gap-4 text-xs text-muted-foreground">
|
||
<div className="flex items-center gap-1">
|
||
<TrendingUp className="w-3 h-3" />
|
||
{study.engagement}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="p-8 pt-0 mt-auto">
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300 h-auto py-3"
|
||
>
|
||
<span className="text-sm font-medium">
|
||
VIEW FULL CASE STUDY
|
||
</span>
|
||
<ArrowRight className="w-4 h-4" />
|
||
</Button>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
))}
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Mid-Page Lead Capture CTA
|
||
const RecommendationInlineCTA = () => {
|
||
const navigate = useNavigate();
|
||
return (
|
||
<section className="py-20 bg-black">
|
||
<div className="container mx-auto px-6 lg:px-8">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 50 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="text-center max-w-4xl mx-auto"
|
||
>
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
viewport={{ once: true }}
|
||
className="space-y-8"
|
||
>
|
||
<div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-green-500">
|
||
<div className="bg-black rounded-full px-6 py-3 flex items-center gap-2">
|
||
<Target className="w-5 h-5 text-white" />
|
||
<span className="text-white text-base font-medium">
|
||
Hyper-Personalization
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<h2 className="text-4xl lg:text-5xl font-semibold text-white leading-tight">
|
||
Ready to Deliver{" "}
|
||
<span className="text-accent">
|
||
Hyper-Personalized Experiences?
|
||
</span>
|
||
</h2>
|
||
|
||
<p className="text-xl text-gray-300 leading-relaxed max-w-2xl mx-auto">
|
||
Discover how intelligent recommendations can transform user
|
||
engagement and revenue with AI‑powered mobile and web
|
||
applications.
|
||
</p>
|
||
|
||
<ShimmerButton
|
||
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
|
||
onClick={() => navigate("/start-a-project")}
|
||
>
|
||
<div className="inline-flex items-center gap-3">
|
||
<MessageSquare className="w-6 h-6 flex-shrink-0" />
|
||
<span>Get a Free Recommendation Engine Consultation</span>
|
||
</div>
|
||
</ShimmerButton>
|
||
</motion.div>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Hire ML Engineers (Recommendation Systems)
|
||
const HireMLEngineers = () => {
|
||
const specialistTypes = [
|
||
{
|
||
title: "Recommendation Systems Engineers",
|
||
description:
|
||
"Specialists in building, optimizing, and deploying highly effective recommendation engines.",
|
||
icon: Target,
|
||
skills: [
|
||
"Algorithm Development",
|
||
"System Architecture",
|
||
"Performance Optimization",
|
||
"A/B Testing",
|
||
],
|
||
},
|
||
{
|
||
title: "Data Scientists (Recommendations)",
|
||
description:
|
||
"Data scientists focused on recommendation algorithms and user behavior analysis.",
|
||
icon: BarChart3,
|
||
skills: [
|
||
"Collaborative Filtering",
|
||
"Content-Based Systems",
|
||
"Hybrid Models",
|
||
"Behavioral Analysis",
|
||
],
|
||
},
|
||
{
|
||
title: "ML Engineers (Personalization)",
|
||
description:
|
||
"Machine learning engineers specialized in personalization and recommendation systems.",
|
||
icon: Brain,
|
||
skills: [
|
||
"Model Deployment",
|
||
"Real-time Systems",
|
||
"MLOps",
|
||
"Scalable Infrastructure",
|
||
],
|
||
},
|
||
{
|
||
title: "Big Data Engineers",
|
||
description:
|
||
"Engineers handling large-scale data processing for recommendation systems.",
|
||
icon: Database,
|
||
skills: [
|
||
"Spark/Hadoop",
|
||
"Data Pipelines",
|
||
"Stream Processing",
|
||
"Data Architecture",
|
||
],
|
||
},
|
||
];
|
||
|
||
return (
|
||
<section className="py-32">
|
||
<div className="container mx-auto px-6 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-20"
|
||
>
|
||
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
|
||
Access Expert Recommendation Systems Talent
|
||
</h2>
|
||
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
|
||
Hire data scientists and ML engineers who specialize in building,
|
||
optimizing, and deploying highly effective recommendation engines
|
||
for AI‑powered mobile and web applications.
|
||
</p>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
viewport={{ once: true }}
|
||
className="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12"
|
||
>
|
||
{specialistTypes.map((type, index) => {
|
||
const IconComponent = type.icon;
|
||
return (
|
||
<motion.div
|
||
key={index}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5, delay: index * 0.01 }}
|
||
viewport={{ once: true }}
|
||
whileHover={{ y: -5 }}
|
||
className="group"
|
||
>
|
||
<Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
|
||
<CardContent className="p-8">
|
||
<div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center mb-6">
|
||
<IconComponent className="w-6 h-6 text-accent" />
|
||
</div>
|
||
<h3 className="text-xl font-semibold text-foreground mb-4">
|
||
{type.title}
|
||
</h3>
|
||
<p className="text-muted-foreground leading-relaxed mb-6">
|
||
{type.description}
|
||
</p>
|
||
<div className="space-y-2">
|
||
<h4 className="text-sm font-medium text-foreground">
|
||
Core Skills:
|
||
</h4>
|
||
<div className="flex flex-wrap gap-2">
|
||
{type.skills.map((skill) => (
|
||
<Badge
|
||
key={skill}
|
||
variant="secondary"
|
||
className="text-xs bg-muted/50 text-muted-foreground border-muted"
|
||
>
|
||
{skill}
|
||
</Badge>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.4 }}
|
||
viewport={{ once: true }}
|
||
className="text-center space-y-6"
|
||
>
|
||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||
<ShimmerButton className="text-lg px-8 py-4">
|
||
<div className="inline-flex items-center gap-2">
|
||
<UserPlus className="w-5 h-5 flex-shrink-0" />
|
||
<span>Hire ML Engineers</span>
|
||
</div>
|
||
</ShimmerButton>
|
||
<Button
|
||
variant="outline"
|
||
size="lg"
|
||
className="text-lg px-8 py-4 h-auto border-white/20 text-muted-foreground hover:bg-muted hover:text-foreground"
|
||
>
|
||
<div className="inline-flex items-center gap-2">
|
||
<FileText className="w-5 h-5 flex-shrink-0" />
|
||
<span>Request Profiles</span>
|
||
</div>
|
||
</Button>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// FAQs (Recommendation Engine Specific)
|
||
const RecommendationFAQs = () => {
|
||
const faqs = [
|
||
{
|
||
question:
|
||
"What data is crucial for building a good recommendation engine?",
|
||
answer:
|
||
"Building effective recommendation engines requires user interaction data (clicks, views, purchases, ratings, time spent), user profiles, item/content metadata, contextual data (time, location, device), and social signals.\n\nThe most important factor is high-quality user-item interaction history, usually starting from 1,000+ users and 100+ items. External data like browsing patterns and third-party demographics can enhance performance and help with cold-start scenarios in AI-powered mobile and web applications.",
|
||
},
|
||
{
|
||
question: 'What is the "cold start problem" in recommendations?',
|
||
answer:
|
||
"The cold start problem happens when recommendation engines can’t yet deliver accurate suggestions for new users or new items due to limited or missing data.\n\nFor new users, solutions include demographic-based recommendations, popular items, onboarding questionnaires, and social-login preferences. For new items, strategies include content-based filtering, editorial recommendations, promotions, and transfer learning from similar items. Hybrid and active-learning approaches help recommendation engines stabilize quickly as data accumulates.",
|
||
},
|
||
{
|
||
question: "How do you measure the success of a recommendation engine?",
|
||
answer:
|
||
"Success for recommendation engines is measured through accuracy metrics (precision, recall, F1, RMSE), ranking quality (NDCG, MAP, MRR), business KPIs (click-through rate, conversion rate, revenue per user, average order value), and engagement metrics (time on site, pages per session, return visits).\n\nWe also track diversity, coverage, and novelty while using A/B testing to compare algorithms and validate both real-time and historical performance. Typical business outcomes include higher conversion, boosted engagement, and increased revenue in AI-powered mobile and web applications.",
|
||
},
|
||
{
|
||
question: "Can recommendation engines be integrated into any platform?",
|
||
answer:
|
||
"Yes. Recommendation engines can be integrated into virtually any platform via flexible APIs and SDKs. We provide RESTful endpoints for real-time recommendations, batch processing for offline use, webhooks for event-driven updates, and SDKs for web and mobile (JavaScript, Python, Java, iOS, Android).\n\nIntegrations work as embedded widgets for e-commerce, API calls for AI-powered mobile applications, and server-side implementations for web development stacks, scaling from small apps to enterprise-grade systems handling millions of daily recommendations.",
|
||
},
|
||
];
|
||
|
||
return (
|
||
<section className="py-32 bg-black">
|
||
<div className="container mx-auto px-6 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-20"
|
||
>
|
||
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
|
||
Frequently Asked Questions
|
||
</h2>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
viewport={{ once: true }}
|
||
className="max-w-4xl mx-auto"
|
||
>
|
||
<Accordion type="single" collapsible className="space-y-8">
|
||
{faqs.map((faq, index) => (
|
||
<AccordionItem
|
||
key={index}
|
||
value={`item-${index}`}
|
||
className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 px-10 shadow-lg"
|
||
>
|
||
<AccordionTrigger className="text-left hover:no-underline py-10 text-xl">
|
||
<span className="font-semibold text-white">
|
||
{faq.question}
|
||
</span>
|
||
</AccordionTrigger>
|
||
<AccordionContent className="text-gray-300 pb-10 text-lg leading-relaxed">
|
||
{faq.answer}
|
||
</AccordionContent>
|
||
</AccordionItem>
|
||
))}
|
||
</Accordion>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Final CTA Section
|
||
const RecommendationFinalCTA = () => {
|
||
const navigate = useNavigate();
|
||
return (
|
||
<section className="py-20 relative overflow-hidden">
|
||
<div className="container mx-auto px-6 lg:px-8 relative z-10">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 50 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="text-center max-w-4xl mx-auto"
|
||
>
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6 }}
|
||
viewport={{ once: true }}
|
||
className="mb-8"
|
||
>
|
||
<div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-green-500">
|
||
<div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
|
||
<Target className="w-5 h-5 text-foreground" />
|
||
<span className="text-foreground text-base font-medium">
|
||
Intelligent Personalization
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
|
||
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6 leading-tight">
|
||
Personalize Every Interaction,{" "}
|
||
<span className="text-accent">Drive Every Conversion</span>
|
||
</h2>
|
||
|
||
<motion.p
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.3 }}
|
||
viewport={{ once: true }}
|
||
className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
|
||
>
|
||
WDI designs and builds sophisticated recommendation engines that
|
||
captivate your audience and significantly boost engagement and
|
||
conversion metrics.
|
||
</motion.p>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.4 }}
|
||
viewport={{ once: true }}
|
||
className="space-y-8"
|
||
>
|
||
<ShimmerButton
|
||
className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
|
||
onClick={() => navigate("/start-a-project")}
|
||
>
|
||
<div className="inline-flex items-center gap-3">
|
||
<TrendingUp className="w-6 h-6 flex-shrink-0" />
|
||
<span>Boost Your Engagement Now</span>
|
||
</div>
|
||
</ShimmerButton>
|
||
|
||
<p className="text-muted-foreground text-sm">
|
||
Collaborative Filtering • Content-Based • Hybrid Systems •
|
||
Real-time Personalization
|
||
</p>
|
||
</motion.div>
|
||
</motion.div>
|
||
</div>
|
||
|
||
{/* Background Decorative Elements */}
|
||
<div className="absolute top-0 left-0 w-full h-full pointer-events-none overflow-hidden">
|
||
<div className="absolute top-20 left-20 w-60 h-60 bg-accent/5 rounded-full blur-3xl"></div>
|
||
<div className="absolute bottom-20 right-20 w-60 h-60 bg-blue-500/5 rounded-full blur-3xl"></div>
|
||
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-green-500/3 rounded-full blur-3xl"></div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Main Recommendation Engines Page
|
||
export const RecommendationEngines = () => {
|
||
return (
|
||
<div className="dark min-h-screen">
|
||
{/* <Navigation /> */}
|
||
|
||
{/* Hero Section */}
|
||
<section className="bg-black">
|
||
<RecommendationEnginesHeroWithCTA />
|
||
</section>
|
||
|
||
{/* Key Benefits */}
|
||
<section className="bg-background">
|
||
<RecommendationBenefits />
|
||
</section>
|
||
|
||
{/* Tech Stack */}
|
||
<section className="bg-card">
|
||
<RecommendationTechStack />
|
||
</section>
|
||
|
||
{/* Process */}
|
||
<section className="bg-card">
|
||
<RecommendationProcess />
|
||
</section>
|
||
|
||
{/* Services */}
|
||
<section className="bg-background">
|
||
<RecommendationServices />
|
||
</section>
|
||
|
||
{/* Target Audience */}
|
||
<section className="bg-card">
|
||
<AIStrategyTargetAudience />
|
||
</section>
|
||
|
||
{/* Case Studies */}
|
||
<section className="bg-background">
|
||
<RecommendationCaseStudies />
|
||
</section>
|
||
|
||
{/* Mid-Page CTA */}
|
||
<section className="bg-card">
|
||
<RecommendationInlineCTA />
|
||
</section>
|
||
|
||
{/* Hire Engineers */}
|
||
<section className="bg-background">
|
||
<HireMLEngineers />
|
||
</section>
|
||
|
||
{/* FAQs */}
|
||
<section className="bg-card">
|
||
<RecommendationFAQs />
|
||
</section>
|
||
|
||
{/* Final CTA */}
|
||
<section className="bg-background">
|
||
<RecommendationFinalCTA />
|
||
</section>
|
||
|
||
{/* Footer */}
|
||
<section className="bg-card">{/* <Footer /> */}</section>
|
||
</div>
|
||
);
|
||
};
|