diwali banner, portfolio content changes, and some hero text changes and slider add on homepage
This commit is contained in:
priyanshuvish
394
components/CaseStudySlider.tsx
Normal file
394
components/CaseStudySlider.tsx
Normal file
@@ -0,0 +1,394 @@
|
|||||||
|
// components/CaseStudySlider.tsx
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import {
|
||||||
|
Activity,
|
||||||
|
ArrowUpRight,
|
||||||
|
Building2,
|
||||||
|
ChevronLeft, ChevronRight,
|
||||||
|
FlaskConical,
|
||||||
|
Globe,
|
||||||
|
Heart,
|
||||||
|
Package,
|
||||||
|
PartyPopper,
|
||||||
|
ShoppingCart,
|
||||||
|
Star,
|
||||||
|
Tractor,
|
||||||
|
TrendingUp,
|
||||||
|
Trophy,
|
||||||
|
Tv,
|
||||||
|
Users,
|
||||||
|
Utensils
|
||||||
|
} from "lucide-react";
|
||||||
|
import { useEffect, useRef, useState } from "react";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
import ambleCase from "../src/images/amble-case.webp";
|
||||||
|
import amozCase from "../src/images/amozCase.webp";
|
||||||
|
import dkCase from "../src/images/dkCase.webp";
|
||||||
|
import farmCase from "../src/images/farmCase.webp";
|
||||||
|
import gtCase from "../src/images/gt-case.webp";
|
||||||
|
import leanCase from "../src/images/leanCase.webp";
|
||||||
|
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 simplitendCase from "../src/images/simplitendCase.webp";
|
||||||
|
import tcCase from "../src/images/tc-case.webp";
|
||||||
|
import vib360Case from "../src/images/vib360Case.webp";
|
||||||
|
import wokaCase from "../src/images/woka-case.webp";
|
||||||
|
import { ImageWithFallback } from "./figma/ImageWithFallback";
|
||||||
|
import { Badge } from "./ui/badge";
|
||||||
|
import { Button } from "./ui/button";
|
||||||
|
import { Card, CardContent } from "./ui/card";
|
||||||
|
|
||||||
|
// Internal data (no need to pass props)
|
||||||
|
const defaultCaseStudies = [
|
||||||
|
{
|
||||||
|
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: "/comming-soon",
|
||||||
|
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: "/comming-soon",
|
||||||
|
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: "/comming-soon",
|
||||||
|
icon: Trophy
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 14,
|
||||||
|
title: "Prosperty",
|
||||||
|
image: prospertyCase,
|
||||||
|
category: "Lifestyle",
|
||||||
|
industry: "Real Estate",
|
||||||
|
featured: false,
|
||||||
|
link: "/projects/prosperty",
|
||||||
|
icon: Building2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 15,
|
||||||
|
title: "Simpletend",
|
||||||
|
image: simplitendCase,
|
||||||
|
category: "Health & Fitness",
|
||||||
|
industry: "Healthcare",
|
||||||
|
featured: false,
|
||||||
|
link: "/projects/simpletend",
|
||||||
|
icon: Activity
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 16,
|
||||||
|
title: "Farm Feeder",
|
||||||
|
image: farmCase,
|
||||||
|
category: "AgriTech",
|
||||||
|
industry: "Agriculture",
|
||||||
|
featured: false,
|
||||||
|
link: "/comming-soon",
|
||||||
|
icon: Tractor
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 17,
|
||||||
|
title: "Lean In World",
|
||||||
|
image: leanCase,
|
||||||
|
category: "AgriTech",
|
||||||
|
industry: "Agriculture",
|
||||||
|
featured: false,
|
||||||
|
link: "/comming-soon",
|
||||||
|
icon: Globe
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
interface CaseStudySliderProps {
|
||||||
|
autoPlay?: boolean;
|
||||||
|
autoPlayInterval?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const CaseStudySlider = ({
|
||||||
|
autoPlay = false,
|
||||||
|
autoPlayInterval = 4000,
|
||||||
|
}: CaseStudySliderProps) => {
|
||||||
|
const [currentIndex, setCurrentIndex] = useState(0);
|
||||||
|
const [isAutoPlaying, setIsAutoPlaying] = useState(autoPlay);
|
||||||
|
const [visibleSlides, setVisibleSlides] = useState(3);
|
||||||
|
const sliderRef = useRef<HTMLDivElement>(null);
|
||||||
|
const containerRef = useRef<HTMLDivElement>(null);
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
const caseStudies = defaultCaseStudies;
|
||||||
|
|
||||||
|
const nextSlide = () => {
|
||||||
|
setCurrentIndex((prev) => {
|
||||||
|
const nextIndex = prev + 1;
|
||||||
|
return nextIndex > caseStudies.length - visibleSlides ? 0 : nextIndex;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const prevSlide = () => {
|
||||||
|
setCurrentIndex((prev) => {
|
||||||
|
const prevIndex = prev - 1;
|
||||||
|
return prevIndex < 0 ? caseStudies.length - visibleSlides : prevIndex;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const goToSlide = (index: number) => {
|
||||||
|
setCurrentIndex(Math.min(index, caseStudies.length - visibleSlides));
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isAutoPlaying || !autoPlay) return;
|
||||||
|
const interval = setInterval(nextSlide, autoPlayInterval);
|
||||||
|
return () => clearInterval(interval);
|
||||||
|
}, [isAutoPlaying, autoPlay, autoPlayInterval, visibleSlides]);
|
||||||
|
|
||||||
|
// Calculate visible slides on resize
|
||||||
|
useEffect(() => {
|
||||||
|
const updateVisibleSlides = () => {
|
||||||
|
if (!containerRef.current) return;
|
||||||
|
const width = containerRef.current.offsetWidth;
|
||||||
|
if (width < 640) setVisibleSlides(1);
|
||||||
|
else if (width < 1024) setVisibleSlides(2);
|
||||||
|
else setVisibleSlides(3);
|
||||||
|
};
|
||||||
|
|
||||||
|
updateVisibleSlides();
|
||||||
|
window.addEventListener('resize', updateVisibleSlides);
|
||||||
|
return () => window.removeEventListener('resize', updateVisibleSlides);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const maxIndex = Math.max(0, caseStudies.length - visibleSlides);
|
||||||
|
|
||||||
|
// Calculate the actual translation percentage
|
||||||
|
const getTranslationPercentage = () => {
|
||||||
|
if (visibleSlides >= caseStudies.length) return 0;
|
||||||
|
return (currentIndex * (100 / visibleSlides));
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section
|
||||||
|
className="py-20 pt-10"
|
||||||
|
onMouseEnter={() => setIsAutoPlaying(false)}
|
||||||
|
onMouseLeave={() => setIsAutoPlaying(autoPlay)}
|
||||||
|
ref={containerRef}
|
||||||
|
>
|
||||||
|
<div className="container mx-auto px-6 lg:px-8">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-center justify-end mb-8">
|
||||||
|
{caseStudies.length > visibleSlides && (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="icon"
|
||||||
|
onClick={prevSlide}
|
||||||
|
disabled={currentIndex === 0}
|
||||||
|
className="h-10 w-10 rounded-full border-white/20 hover:border-accent/50 disabled:opacity-50"
|
||||||
|
>
|
||||||
|
<ChevronLeft className="w-5 h-5" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="icon"
|
||||||
|
onClick={nextSlide}
|
||||||
|
disabled={currentIndex >= maxIndex}
|
||||||
|
className="h-10 w-10 rounded-full border-white/20 hover:border-accent/50 disabled:opacity-50"
|
||||||
|
>
|
||||||
|
<ChevronRight className="w-5 h-5" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Slider Container */}
|
||||||
|
<div className="relative overflow-hidden" ref={sliderRef}>
|
||||||
|
<motion.div
|
||||||
|
className="flex gap-6"
|
||||||
|
animate={{
|
||||||
|
x: `-${getTranslationPercentage()}%`
|
||||||
|
}}
|
||||||
|
transition={{
|
||||||
|
type: "spring",
|
||||||
|
stiffness: 400,
|
||||||
|
damping: 40,
|
||||||
|
duration: 0.6
|
||||||
|
}}
|
||||||
|
style={{ willChange: "transform" }}
|
||||||
|
>
|
||||||
|
{caseStudies.map((study, index) => {
|
||||||
|
const IconComponent = study.icon;
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
key={study.id}
|
||||||
|
className="flex-shrink-0"
|
||||||
|
style={{
|
||||||
|
width: `calc(${100 / visibleSlides}% - 1.5rem)`
|
||||||
|
}}
|
||||||
|
initial={{ opacity: 0, scale: 0.9 }}
|
||||||
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
|
transition={{
|
||||||
|
duration: 0.5,
|
||||||
|
delay: index * 0.1,
|
||||||
|
ease: "easeOut"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Card
|
||||||
|
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">
|
||||||
|
{/* 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"
|
||||||
|
/>
|
||||||
|
<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">
|
||||||
|
{study.category}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 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">
|
||||||
|
<Star className="w-3 h-3 fill-current" />
|
||||||
|
Featured
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 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">
|
||||||
|
<IconComponent className="w-5 h-5 text-white" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Dots Indicator */}
|
||||||
|
{caseStudies.length > visibleSlides && (
|
||||||
|
<div className="flex justify-center items-center gap-2 mt-8">
|
||||||
|
{Array.from({ length: maxIndex + 1 }).map((_, index) => (
|
||||||
|
<button
|
||||||
|
key={index}
|
||||||
|
onClick={() => goToSlide(index)}
|
||||||
|
className={`w-2 h-2 rounded-full transition-all duration-300 ${
|
||||||
|
index === currentIndex
|
||||||
|
? "bg-accent w-6"
|
||||||
|
: "bg-white/30 hover:bg-white/50"
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
280
components/DedicatedTeamPricing.tsx
Normal file
280
components/DedicatedTeamPricing.tsx
Normal file
@@ -0,0 +1,280 @@
|
|||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { Check, Users, Clock, Sparkles } from "lucide-react";
|
||||||
|
import { GridPattern } from "./GridPattern";
|
||||||
|
import { Badge } from "./ui/badge";
|
||||||
|
|
||||||
|
interface PricingTier {
|
||||||
|
name: string;
|
||||||
|
price: string;
|
||||||
|
pricePerMonth: string;
|
||||||
|
description: string;
|
||||||
|
isPopular?: boolean;
|
||||||
|
teamSize: string;
|
||||||
|
projectManager: string;
|
||||||
|
uiuxDesigners: string;
|
||||||
|
frontendDevs: string;
|
||||||
|
backendDevs: string;
|
||||||
|
qaTesters: string;
|
||||||
|
leadTime: string;
|
||||||
|
minEngagement: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const pricingTiers: PricingTier[] = [
|
||||||
|
{
|
||||||
|
name: "Small",
|
||||||
|
price: "$7,500",
|
||||||
|
pricePerMonth: "/mo",
|
||||||
|
description: "Maintenance & updates",
|
||||||
|
teamSize: "3-5 Members",
|
||||||
|
projectManager: "Part-time (≤ 32 hrs/month)",
|
||||||
|
uiuxDesigners: "Part-time",
|
||||||
|
frontendDevs: "Shared",
|
||||||
|
backendDevs: "Shared",
|
||||||
|
qaTesters: "Part-time",
|
||||||
|
leadTime: "< 3 Days",
|
||||||
|
minEngagement: "1 Month"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Medium",
|
||||||
|
price: "$12,000",
|
||||||
|
pricePerMonth: "/mo",
|
||||||
|
description: "Ongoing MVP development",
|
||||||
|
isPopular: true,
|
||||||
|
teamSize: "4-8 Members",
|
||||||
|
projectManager: "Shared (≤ 80 hrs/month)",
|
||||||
|
uiuxDesigners: "Shared",
|
||||||
|
frontendDevs: "Shared",
|
||||||
|
backendDevs: "Shared",
|
||||||
|
qaTesters: "Shared",
|
||||||
|
leadTime: "< 2 Weeks",
|
||||||
|
minEngagement: "2 Months"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Large",
|
||||||
|
price: "$22,680",
|
||||||
|
pricePerMonth: "/mo",
|
||||||
|
description: "Long-term growth & GTM",
|
||||||
|
teamSize: "6-10 Members",
|
||||||
|
projectManager: "Dedicated full-time",
|
||||||
|
uiuxDesigners: "Full-time",
|
||||||
|
frontendDevs: "Full-time",
|
||||||
|
backendDevs: "Full-time",
|
||||||
|
qaTesters: "Full-time",
|
||||||
|
leadTime: "< 4 Weeks",
|
||||||
|
minEngagement: "3 Months"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const includedFeatures = [
|
||||||
|
{
|
||||||
|
left: "Access to WDI Code Library",
|
||||||
|
right: "Direct Communication"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
left: "Time Zone Overlap: 3 Hours",
|
||||||
|
right: "Resource Replacement (within 1 week)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
left: "No Obligation Trial (conditional)",
|
||||||
|
right: "IPR & Code Ownership"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
left: "Termination Notice: 1 Month",
|
||||||
|
right: "Performance Guarantee"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const comparisonRows = [
|
||||||
|
{ label: "Team Size", key: "teamSize" as keyof PricingTier },
|
||||||
|
{ label: "Project Manager", key: "projectManager" as keyof PricingTier },
|
||||||
|
{ label: "UI/UX Designers", key: "uiuxDesigners" as keyof PricingTier },
|
||||||
|
{ label: "Frontend Developers", key: "frontendDevs" as keyof PricingTier },
|
||||||
|
{ label: "Backend Developers", key: "backendDevs" as keyof PricingTier },
|
||||||
|
{ label: "QA Testers", key: "qaTesters" as keyof PricingTier },
|
||||||
|
{ label: "Lead Time to Start", key: "leadTime" as keyof PricingTier },
|
||||||
|
{ label: "Minimum Engagement Period", key: "minEngagement" as keyof PricingTier }
|
||||||
|
];
|
||||||
|
|
||||||
|
export const DedicatedTeamPricing = () => {
|
||||||
|
return (
|
||||||
|
<section className="relative py-20 bg-background overflow-hidden">
|
||||||
|
<GridPattern strokeDasharray="4 2" />
|
||||||
|
|
||||||
|
<div className="relative z-10 container mx-auto px-6 lg:px-8">
|
||||||
|
{/* 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"
|
||||||
|
>
|
||||||
|
<div className="inline-flex items-center gap-2 mb-4">
|
||||||
|
<Users className="w-6 h-6 text-accent" />
|
||||||
|
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground font-manrope">
|
||||||
|
Dedicated Team Pricing
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<p className="text-muted-foreground text-lg max-w-2xl mx-auto font-manrope">
|
||||||
|
Scale your development with flexible team structures tailored to your project needs
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Pricing Cards Row */}
|
||||||
|
<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-3 gap-6 mb-12 max-w-6xl mx-auto"
|
||||||
|
>
|
||||||
|
{pricingTiers.map((tier, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={tier.name}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className={`relative bg-card/50 backdrop-blur-sm border rounded-[20px] p-6 transition-all duration-300 ${
|
||||||
|
tier.isPopular
|
||||||
|
? 'border-blue-500/50 shadow-xl shadow-blue-500/10 scale-105'
|
||||||
|
: 'border-border/50 hover:border-accent/30'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{tier.isPopular && (
|
||||||
|
<div className="absolute -top-4 left-1/2 -translate-x-1/2">
|
||||||
|
<Badge className="bg-blue-600 text-white px-4 py-1 rounded-full font-manrope">
|
||||||
|
Most Popular
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="text-center mb-6">
|
||||||
|
<h3 className="text-2xl font-semibold text-foreground mb-2 font-manrope">
|
||||||
|
{tier.name}
|
||||||
|
</h3>
|
||||||
|
<div className="flex items-baseline justify-center mb-2">
|
||||||
|
<span className="text-4xl font-semibold text-foreground font-manrope">
|
||||||
|
{tier.price}
|
||||||
|
</span>
|
||||||
|
<span className="text-xl text-muted-foreground font-manrope">
|
||||||
|
{tier.pricePerMonth}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-muted-foreground font-manrope">
|
||||||
|
{tier.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Comparison Table */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 40 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.8, delay: 0.4 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className="max-w-6xl mx-auto mb-16"
|
||||||
|
>
|
||||||
|
<div className="bg-card/30 backdrop-blur-md border border-border/50 rounded-[20px] overflow-hidden">
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="w-full border-collapse font-manrope">
|
||||||
|
{/* Table Header - Hidden on mobile, shown on desktop */}
|
||||||
|
<thead className="hidden md:table-header-group">
|
||||||
|
<tr className="border-b border-border/50 bg-card/50">
|
||||||
|
<th className="p-6 text-left font-semibold text-foreground font-manrope"></th>
|
||||||
|
{pricingTiers.map((tier) => (
|
||||||
|
<th key={tier.name} className="p-6 text-center font-semibold text-foreground font-manrope">
|
||||||
|
{tier.name}
|
||||||
|
</th>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
|
||||||
|
{/* Table Body */}
|
||||||
|
<tbody>
|
||||||
|
{comparisonRows.map((row, rowIndex) => (
|
||||||
|
<motion.tr
|
||||||
|
key={row.label}
|
||||||
|
initial={{ opacity: 0, x: -20 }}
|
||||||
|
whileInView={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ duration: 0.5, delay: rowIndex * 0.05 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className="border-b border-border/30 last:border-b-0 hover:bg-card/50 transition-colors duration-200"
|
||||||
|
>
|
||||||
|
<td className="p-6 font-medium text-muted-foreground font-manrope align-top">
|
||||||
|
<div className="md:hidden mb-3">{row.label}</div>
|
||||||
|
<div className="hidden md:block">{row.label}</div>
|
||||||
|
|
||||||
|
{/* Mobile: Stack values vertically with tier name */}
|
||||||
|
<div className="grid grid-cols-1 md:hidden gap-3 mt-3">
|
||||||
|
{pricingTiers.map((tier) => (
|
||||||
|
<div key={tier.name} className="flex justify-between items-center bg-card/30 rounded-lg p-3">
|
||||||
|
<span className="text-sm text-muted-foreground font-manrope">{tier.name}:</span>
|
||||||
|
<span className="text-foreground font-manrope text-right">{tier[row.key]}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
{/* Desktop: Show values in columns */}
|
||||||
|
{pricingTiers.map((tier) => (
|
||||||
|
<td key={tier.name} className="hidden md:table-cell p-6 text-center text-foreground font-manrope align-top">
|
||||||
|
{tier[row.key]}
|
||||||
|
</td>
|
||||||
|
))}
|
||||||
|
</motion.tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Included in All Plans */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 40 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.8, delay: 0.6 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className="max-w-4xl mx-auto"
|
||||||
|
>
|
||||||
|
<div className="bg-gradient-to-br from-accent/5 to-blue-500/5 backdrop-blur-sm border border-accent/20 rounded-[20px] p-8">
|
||||||
|
<div className="flex items-center gap-3 mb-6">
|
||||||
|
<div className="w-12 h-12 bg-accent/20 rounded-full flex items-center justify-center">
|
||||||
|
<Sparkles className="w-6 h-6 text-accent" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-2xl font-semibold text-foreground font-manrope">
|
||||||
|
Included in All Plans
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-2 gap-6">
|
||||||
|
{includedFeatures.map((feature, index) => (
|
||||||
|
<div key={index} className="space-y-3">
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<div className="flex-shrink-0 w-5 h-5 bg-accent/20 rounded-full flex items-center justify-center mt-0.5">
|
||||||
|
<Check className="w-3 h-3 text-accent" />
|
||||||
|
</div>
|
||||||
|
<span className="text-foreground font-manrope leading-relaxed">
|
||||||
|
{feature.left}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<div className="flex-shrink-0 w-5 h-5 bg-accent/20 rounded-full flex items-center justify-center mt-0.5">
|
||||||
|
<Check className="w-3 h-3 text-accent" />
|
||||||
|
</div>
|
||||||
|
<span className="text-foreground font-manrope leading-relaxed">
|
||||||
|
{feature.right}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
571
components/DiwaliHeroSection.tsx
Normal file
571
components/DiwaliHeroSection.tsx
Normal file
@@ -0,0 +1,571 @@
|
|||||||
|
import { Button } from "./ui/button";
|
||||||
|
import { Calendar, Briefcase, Sparkles } from "lucide-react";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
|
||||||
|
// Firework component
|
||||||
|
const Firework = ({ delay = 0, top, left, colors }: { delay?: number; top: string; left: string; colors: string[] }) => {
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
className="absolute pointer-events-none"
|
||||||
|
style={{ top, left }}
|
||||||
|
initial={{ opacity: 0, scale: 0 }}
|
||||||
|
animate={{
|
||||||
|
opacity: [0, 1, 1, 0],
|
||||||
|
scale: [0, 1.5, 2, 2.5],
|
||||||
|
}}
|
||||||
|
transition={{
|
||||||
|
duration: 3,
|
||||||
|
repeat: Infinity,
|
||||||
|
delay,
|
||||||
|
ease: "easeOut",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<svg width="200" height="200" viewBox="0 0 200 200" className="w-48 h-48">
|
||||||
|
{/* Firework burst rays */}
|
||||||
|
{Array.from({ length: 24 }).map((_, i) => {
|
||||||
|
const angle = (i * 360) / 24;
|
||||||
|
const colorIndex = i % colors.length;
|
||||||
|
return (
|
||||||
|
<motion.line
|
||||||
|
key={i}
|
||||||
|
x1="100"
|
||||||
|
y1="100"
|
||||||
|
x2="100"
|
||||||
|
y2="20"
|
||||||
|
stroke={colors[colorIndex]}
|
||||||
|
strokeWidth="2"
|
||||||
|
strokeLinecap="round"
|
||||||
|
transform={`rotate(${angle} 100 100)`}
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{
|
||||||
|
opacity: [0, 1, 0.8, 0],
|
||||||
|
}}
|
||||||
|
transition={{
|
||||||
|
duration: 3,
|
||||||
|
repeat: Infinity,
|
||||||
|
delay: delay + i * 0.02,
|
||||||
|
ease: "easeOut",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
{/* Center burst */}
|
||||||
|
<motion.circle
|
||||||
|
cx="100"
|
||||||
|
cy="100"
|
||||||
|
r="4"
|
||||||
|
fill={colors[0]}
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{
|
||||||
|
opacity: [0, 1, 0.5, 0],
|
||||||
|
}}
|
||||||
|
transition={{
|
||||||
|
duration: 3,
|
||||||
|
repeat: Infinity,
|
||||||
|
delay,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Sparkle Star component
|
||||||
|
const SparkleStar = ({ delay = 0, top, left, size = 16 }: { delay?: number; top: string; left: string; size?: number }) => {
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
className="absolute pointer-events-none"
|
||||||
|
style={{ top, left }}
|
||||||
|
animate={{
|
||||||
|
scale: [0, 1, 0],
|
||||||
|
opacity: [0, 1, 0],
|
||||||
|
rotate: [0, 180, 360],
|
||||||
|
}}
|
||||||
|
transition={{
|
||||||
|
duration: 2.5,
|
||||||
|
repeat: Infinity,
|
||||||
|
delay,
|
||||||
|
ease: "easeInOut",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Sparkles className="text-[#ffaa40]" size={size} />
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Marigold Flower component
|
||||||
|
const MarigoldFlower = ({ size = "md", delay = 0 }: { size?: "sm" | "md" | "lg"; delay?: number }) => {
|
||||||
|
const sizes = {
|
||||||
|
sm: 16,
|
||||||
|
md: 20,
|
||||||
|
lg: 24,
|
||||||
|
};
|
||||||
|
|
||||||
|
const flowerSize = sizes[size];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
className="relative"
|
||||||
|
style={{ width: flowerSize, height: flowerSize }}
|
||||||
|
animate={{
|
||||||
|
rotate: [0, 360],
|
||||||
|
scale: [1, 1.05, 1],
|
||||||
|
}}
|
||||||
|
transition={{
|
||||||
|
rotate: { duration: 20, repeat: Infinity, ease: "linear" },
|
||||||
|
scale: { duration: 2, repeat: Infinity, ease: "easeInOut", delay },
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Flower petals */}
|
||||||
|
<svg viewBox="0 0 100 100" className="w-full h-full">
|
||||||
|
{/* Outer petals */}
|
||||||
|
{Array.from({ length: 16 }).map((_, i) => {
|
||||||
|
const angle = (i * 360) / 16;
|
||||||
|
return (
|
||||||
|
<ellipse
|
||||||
|
key={i}
|
||||||
|
cx="50"
|
||||||
|
cy="25"
|
||||||
|
rx="8"
|
||||||
|
ry="15"
|
||||||
|
fill={`url(#gradient-${i % 3})`}
|
||||||
|
transform={`rotate(${angle} 50 50)`}
|
||||||
|
opacity={0.9}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
|
||||||
|
{/* Inner petals */}
|
||||||
|
{Array.from({ length: 12 }).map((_, i) => {
|
||||||
|
const angle = (i * 360) / 12;
|
||||||
|
return (
|
||||||
|
<ellipse
|
||||||
|
key={`inner-${i}`}
|
||||||
|
cx="50"
|
||||||
|
cy="30"
|
||||||
|
rx="6"
|
||||||
|
ry="12"
|
||||||
|
fill={`url(#gradient-${(i + 1) % 3})`}
|
||||||
|
transform={`rotate(${angle} 50 50)`}
|
||||||
|
opacity={0.95}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
|
||||||
|
{/* Center */}
|
||||||
|
<circle cx="50" cy="50" r="8" fill="#d97706" />
|
||||||
|
<circle cx="50" cy="50" r="5" fill="#b45309" opacity={0.8} />
|
||||||
|
|
||||||
|
{/* Gradient definitions */}
|
||||||
|
<defs>
|
||||||
|
<radialGradient id="gradient-0">
|
||||||
|
<stop offset="0%" stopColor="#fbbf24" />
|
||||||
|
<stop offset="100%" stopColor="#f59e0b" />
|
||||||
|
</radialGradient>
|
||||||
|
<radialGradient id="gradient-1">
|
||||||
|
<stop offset="0%" stopColor="#fcd34d" />
|
||||||
|
<stop offset="100%" stopColor="#fbbf24" />
|
||||||
|
</radialGradient>
|
||||||
|
<radialGradient id="gradient-2">
|
||||||
|
<stop offset="0%" stopColor="#f59e0b" />
|
||||||
|
<stop offset="100%" stopColor="#d97706" />
|
||||||
|
</radialGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
{/* Glow effect */}
|
||||||
|
<div className="absolute inset-0 bg-[#ffaa40] rounded-full blur-sm opacity-30"></div>
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Flower Garland (Toran) component
|
||||||
|
const FlowerGarland = ({ left, flowerCount = 8, delay = 0 }: { left: string; flowerCount?: number; delay?: number }) => {
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
className="absolute top-0 z-20 pointer-events-none"
|
||||||
|
style={{ left }}
|
||||||
|
initial={{ y: -20, opacity: 0 }}
|
||||||
|
animate={{ y: 0, opacity: 1 }}
|
||||||
|
transition={{ duration: 1, delay }}
|
||||||
|
>
|
||||||
|
{/* String/thread */}
|
||||||
|
<div className="absolute left-1/2 -translate-x-1/2 w-0.5 bg-gradient-to-b from-[#78350f] to-transparent opacity-50"
|
||||||
|
style={{ height: `${flowerCount * 35}px` }}></div>
|
||||||
|
|
||||||
|
{/* Flowers on string */}
|
||||||
|
<div className="relative flex flex-col items-center gap-1">
|
||||||
|
{Array.from({ length: flowerCount }).map((_, i) => (
|
||||||
|
<motion.div
|
||||||
|
key={i}
|
||||||
|
className="relative"
|
||||||
|
animate={{
|
||||||
|
y: [0, 5, 0],
|
||||||
|
rotate: [0, 3, -3, 0],
|
||||||
|
}}
|
||||||
|
transition={{
|
||||||
|
duration: 2 + i * 0.2,
|
||||||
|
repeat: Infinity,
|
||||||
|
ease: "easeInOut",
|
||||||
|
delay: delay + i * 0.1,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<MarigoldFlower
|
||||||
|
size={i % 3 === 0 ? "lg" : i % 2 === 0 ? "md" : "sm"}
|
||||||
|
delay={i * 0.2}
|
||||||
|
/>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Decorative Hanging Lantern component
|
||||||
|
const DecorativeLantern = () => {
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
className="absolute top-0 left-1/2 -translate-x-1/2 z-30 pointer-events-none"
|
||||||
|
initial={{ y: -100, opacity: 0 }}
|
||||||
|
animate={{ y: 0, opacity: 1 }}
|
||||||
|
transition={{ duration: 1.2, delay: 0.3, ease: "easeOut" }}
|
||||||
|
>
|
||||||
|
<motion.div
|
||||||
|
animate={{
|
||||||
|
y: [0, 12, 0],
|
||||||
|
rotate: [0, 2, -2, 0],
|
||||||
|
}}
|
||||||
|
transition={{
|
||||||
|
duration: 4,
|
||||||
|
repeat: Infinity,
|
||||||
|
ease: "easeInOut",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<svg width="120" height="200" viewBox="0 0 120 200" fill="none">
|
||||||
|
{/* Hanging String */}
|
||||||
|
<line x1="60" y1="0" x2="60" y2="35" stroke="#4a4a4a" strokeWidth="1.5" />
|
||||||
|
|
||||||
|
{/* Top Cap - Cyan/Blue */}
|
||||||
|
<rect x="45" y="35" width="30" height="8" fill="#22d3ee" rx="2" />
|
||||||
|
<rect x="42" y="43" width="36" height="3" fill="#06b6d4" />
|
||||||
|
|
||||||
|
{/* Top decoration line - Purple accent */}
|
||||||
|
<rect x="40" y="46" width="40" height="2" fill="#8b5cf6" rx="1" />
|
||||||
|
|
||||||
|
{/* Main Lantern Body - Golden Orange with curves */}
|
||||||
|
<path
|
||||||
|
d="M 50 50
|
||||||
|
Q 35 70, 40 95
|
||||||
|
Q 42 110, 50 120
|
||||||
|
L 70 120
|
||||||
|
Q 78 110, 80 95
|
||||||
|
Q 85 70, 70 50
|
||||||
|
Z"
|
||||||
|
fill="url(#lanternGradient)"
|
||||||
|
stroke="#f59e0b"
|
||||||
|
strokeWidth="2"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Inner decorative pattern - curved diamond */}
|
||||||
|
<path
|
||||||
|
d="M 60 65
|
||||||
|
Q 50 75, 60 85
|
||||||
|
Q 70 75, 60 65
|
||||||
|
Z"
|
||||||
|
fill="none"
|
||||||
|
stroke="#d97706"
|
||||||
|
strokeWidth="1.5"
|
||||||
|
opacity="0.7"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M 60 85
|
||||||
|
Q 50 95, 60 105
|
||||||
|
Q 70 95, 60 85
|
||||||
|
Z"
|
||||||
|
fill="none"
|
||||||
|
stroke="#d97706"
|
||||||
|
strokeWidth="1.5"
|
||||||
|
opacity="0.7"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Vertical center line */}
|
||||||
|
<line x1="60" y1="70" x2="60" y2="100" stroke="#d97706" strokeWidth="1" opacity="0.5" />
|
||||||
|
|
||||||
|
{/* Highlight shine */}
|
||||||
|
<ellipse cx="55" cy="75" rx="8" ry="15" fill="#fff9e6" opacity="0.15" />
|
||||||
|
|
||||||
|
{/* Bottom Cap - Cyan/Blue */}
|
||||||
|
<rect x="40" y="120" width="40" height="2" fill="#8b5cf6" rx="1" />
|
||||||
|
<rect x="42" y="122" width="36" height="3" fill="#06b6d4" />
|
||||||
|
<rect x="45" y="125" width="30" height="8" fill="#22d3ee" rx="2" />
|
||||||
|
|
||||||
|
{/* Hanging Tassels - Cyan strands */}
|
||||||
|
{Array.from({ length: 7 }).map((_, i) => {
|
||||||
|
const x = 45 + i * 5;
|
||||||
|
return (
|
||||||
|
<g key={i}>
|
||||||
|
<motion.line
|
||||||
|
x1={x}
|
||||||
|
y1="133"
|
||||||
|
x2={x}
|
||||||
|
y2={158 + Math.sin(i) * 8}
|
||||||
|
stroke="#22d3ee"
|
||||||
|
strokeWidth="1.5"
|
||||||
|
strokeLinecap="round"
|
||||||
|
initial={{ pathLength: 0 }}
|
||||||
|
animate={{
|
||||||
|
pathLength: 1,
|
||||||
|
y: [0, 3, 0],
|
||||||
|
}}
|
||||||
|
transition={{
|
||||||
|
pathLength: { duration: 0.8, delay: 0.5 + i * 0.05 },
|
||||||
|
y: { duration: 2 + i * 0.1, repeat: Infinity, ease: "easeInOut" }
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
|
||||||
|
{/* Gradient Definitions */}
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="lanternGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" stopColor="#fb923c" />
|
||||||
|
<stop offset="30%" stopColor="#f59e0b" />
|
||||||
|
<stop offset="60%" stopColor="#fbbf24" />
|
||||||
|
<stop offset="100%" stopColor="#f59e0b" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
{/* Glow effect */}
|
||||||
|
<div className="absolute top-[50px] left-1/2 -translate-x-1/2 w-20 h-24 bg-[#ffaa40] rounded-full blur-2xl opacity-20"></div>
|
||||||
|
</motion.div>
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export function DiwaliHeroSection() {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
return (
|
||||||
|
<section id="hero" className="relative min-h-screen flex items-center justify-center pt-20 overflow-hidden bg-[#0E0E0E]">
|
||||||
|
{/* Dark Background with subtle glow */}
|
||||||
|
<div className="absolute inset-0 bg-gradient-radial from-[#1a1a1a] via-[#0E0E0E] to-[#000000]"></div>
|
||||||
|
|
||||||
|
{/* Decorative Hanging Lantern - Center Top */}
|
||||||
|
<DecorativeLantern />
|
||||||
|
|
||||||
|
{/* Marigold Flower Garlands (Torans) - Minimal placement */}
|
||||||
|
<FlowerGarland left="8%" flowerCount={7} delay={0.2} />
|
||||||
|
<FlowerGarland left="25%" flowerCount={6} delay={0.4} />
|
||||||
|
<FlowerGarland left="75%" flowerCount={7} delay={0.3} />
|
||||||
|
<FlowerGarland left="92%" flowerCount={6} delay={0.5} />
|
||||||
|
|
||||||
|
{/* Animated Fireworks */}
|
||||||
|
<Firework delay={0} top="10%" left="15%" colors={["#E5195E", "#ff6b9d", "#E5195E"]} />
|
||||||
|
<Firework delay={1.5} top="20%" left="70%" colors={["#9c40ff", "#c084fc", "#9c40ff"]} />
|
||||||
|
<Firework delay={0.8} top="60%" left="80%" colors={["#ffaa40", "#fcd34d", "#ffaa40"]} />
|
||||||
|
<Firework delay={2.2} top="15%" left="45%" colors={["#ff6b00", "#fb923c", "#ff6b00"]} />
|
||||||
|
<Firework delay={1.2} top="70%" left="20%" colors={["#E5195E", "#9c40ff", "#ffaa40"]} />
|
||||||
|
<Firework delay={2.8} top="40%" left="90%" colors={["#fcd34d", "#ffaa40", "#ff6b00"]} />
|
||||||
|
|
||||||
|
{/* Floating Sparkles */}
|
||||||
|
{[...Array(25)].map((_, i) => (
|
||||||
|
<SparkleStar
|
||||||
|
key={i}
|
||||||
|
delay={Math.random() * 3}
|
||||||
|
top={`${Math.random() * 100}%`}
|
||||||
|
left={`${Math.random() * 100}%`}
|
||||||
|
size={12 + Math.random() * 8}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{/* Small floating particles */}
|
||||||
|
{[...Array(40)].map((_, i) => (
|
||||||
|
<motion.div
|
||||||
|
key={`particle-${i}`}
|
||||||
|
className="absolute w-1 h-1 bg-[#ffaa40] rounded-full pointer-events-none"
|
||||||
|
style={{
|
||||||
|
top: `${Math.random() * 100}%`,
|
||||||
|
left: `${Math.random() * 100}%`,
|
||||||
|
}}
|
||||||
|
animate={{
|
||||||
|
y: [0, -50, 0],
|
||||||
|
opacity: [0, 0.8, 0],
|
||||||
|
}}
|
||||||
|
transition={{
|
||||||
|
duration: 3 + Math.random() * 2,
|
||||||
|
repeat: Infinity,
|
||||||
|
delay: Math.random() * 4,
|
||||||
|
ease: "easeInOut",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{/* Main Content */}
|
||||||
|
<div className="container mx-auto px-6 lg:px-8 relative z-30">
|
||||||
|
<div className="max-w-5xl mx-auto text-center">
|
||||||
|
{/* Top Badge */}
|
||||||
|
<motion.div
|
||||||
|
className="inline-flex items-center gap-2 mb-8"
|
||||||
|
initial={{ opacity: 0, y: -20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.8, delay: 0.2 }}
|
||||||
|
>
|
||||||
|
<motion.span
|
||||||
|
animate={{
|
||||||
|
rotate: [0, 10, -10, 0],
|
||||||
|
}}
|
||||||
|
transition={{
|
||||||
|
duration: 2,
|
||||||
|
repeat: Infinity,
|
||||||
|
ease: "easeInOut",
|
||||||
|
}}
|
||||||
|
className="text-3xl"
|
||||||
|
>
|
||||||
|
🪔
|
||||||
|
</motion.span>
|
||||||
|
<span className="text-2xl font-manrope font-semibold">
|
||||||
|
<span className="text-[#E5195E]">WDI</span>
|
||||||
|
<span className="bg-gradient-to-r from-[#ffaa40] via-[#fff9e6] to-[#ffaa40] bg-clip-text text-transparent"> Wishes you</span>
|
||||||
|
</span>
|
||||||
|
<motion.span
|
||||||
|
animate={{
|
||||||
|
rotate: [0, -10, 10, 0],
|
||||||
|
}}
|
||||||
|
transition={{
|
||||||
|
duration: 2,
|
||||||
|
repeat: Infinity,
|
||||||
|
ease: "easeInOut",
|
||||||
|
delay: 0.5,
|
||||||
|
}}
|
||||||
|
className="text-3xl"
|
||||||
|
>
|
||||||
|
🪔
|
||||||
|
</motion.span>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Main Heading */}
|
||||||
|
<motion.h1
|
||||||
|
className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl mb-8"
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 1, delay: 0.4 }}
|
||||||
|
style={{
|
||||||
|
fontFamily: "'Cinzel Decorative', cursive",
|
||||||
|
fontWeight: 900,
|
||||||
|
letterSpacing: "0.05em",
|
||||||
|
lineHeight: 1.4,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span className="inline-block bg-gradient-to-r from-[#fff9e6] via-[#ffaa40] to-[#fff9e6] bg-clip-text text-transparent animate-gradient bg-[length:200%_100%]">
|
||||||
|
Happy Diwali
|
||||||
|
</span>
|
||||||
|
</motion.h1>
|
||||||
|
|
||||||
|
{/* Subtitle */}
|
||||||
|
<motion.p
|
||||||
|
className="text-lg sm:text-xl md:text-2xl text-gray-300 mb-12 max-w-3xl mx-auto leading-relaxed font-manrope"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.8, delay: 0.6 }}
|
||||||
|
>
|
||||||
|
Wishing you a Diwali filled with{" "}
|
||||||
|
<span className="text-[#ffaa40] font-semibold">light</span>,{" "}
|
||||||
|
<span className="text-[#E5195E] font-semibold">success</span>, and{" "}
|
||||||
|
<span className="text-[#9c40ff] font-semibold">lightning-fast launches</span>.
|
||||||
|
</motion.p>
|
||||||
|
|
||||||
|
{/* CTA Buttons */}
|
||||||
|
<motion.div
|
||||||
|
className="flex flex-col sm:flex-row gap-4 justify-center items-center"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.8, delay: 0.8 }}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
size="lg"
|
||||||
|
className="relative overflow-hidden group px-8 py-6 text-base font-manrope bg-gradient-to-r from-[#E5195E] to-[#ff6b9d] hover:from-[#ff6b9d] hover:to-[#E5195E] border-0 shadow-[0_0_30px_rgba(229,25,94,0.3)] hover:shadow-[0_0_40px_rgba(229,25,94,0.5)] transition-all duration-300"
|
||||||
|
onClick={() => navigate("/start-a-project")}
|
||||||
|
>
|
||||||
|
<Calendar className="w-5 h-5" />
|
||||||
|
<span className="relative z-10">Start Your Bright Journey</span>
|
||||||
|
<motion.div
|
||||||
|
className="absolute inset-0 bg-gradient-to-r from-[#ffaa40]/20 to-transparent"
|
||||||
|
animate={{
|
||||||
|
x: ["-100%", "100%"],
|
||||||
|
}}
|
||||||
|
transition={{
|
||||||
|
duration: 2,
|
||||||
|
repeat: Infinity,
|
||||||
|
ease: "linear",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
variant="secondary"
|
||||||
|
size="lg"
|
||||||
|
className="relative overflow-hidden group px-8 py-6 text-base font-manrope bg-[rgba(255,255,255,0.05)] backdrop-blur-md border border-[#ffaa40]/50 hover:bg-[rgba(255,255,255,0.1)] hover:border-[#ffaa40] shadow-[0_0_20px_rgba(255,170,64,0.2)] hover:shadow-[0_0_30px_rgba(255,170,64,0.4)] transition-all duration-300"
|
||||||
|
onClick={() => navigate("/services")}
|
||||||
|
>
|
||||||
|
<Briefcase className="w-5 h-5" />
|
||||||
|
<span className="relative z-10 text-white">Discover Our Solutions</span>
|
||||||
|
<motion.div
|
||||||
|
className="absolute inset-0 bg-gradient-to-r from-[#E5195E]/10 to-transparent"
|
||||||
|
animate={{
|
||||||
|
x: ["-100%", "100%"],
|
||||||
|
}}
|
||||||
|
transition={{
|
||||||
|
duration: 2.5,
|
||||||
|
repeat: Infinity,
|
||||||
|
ease: "linear",
|
||||||
|
delay: 0.5,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Button>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Bottom decorative text */}
|
||||||
|
<motion.div
|
||||||
|
className="mt-16 text-sm text-gray-400 font-manrope"
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
transition={{ duration: 1, delay: 1.2 }}
|
||||||
|
>
|
||||||
|
<span className="inline-flex items-center gap-2">
|
||||||
|
May this festival bring prosperity to your business
|
||||||
|
<motion.span
|
||||||
|
animate={{ scale: [1, 1.2, 1] }}
|
||||||
|
transition={{ duration: 1.5, repeat: Infinity }}
|
||||||
|
>
|
||||||
|
🌟
|
||||||
|
</motion.span>
|
||||||
|
</span>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Bottom scroll indicator */}
|
||||||
|
<motion.div
|
||||||
|
className="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-30"
|
||||||
|
initial={{ opacity: 0, y: -10 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.8, delay: 1.4 }}
|
||||||
|
>
|
||||||
|
<motion.div
|
||||||
|
animate={{ y: [0, 8, 0] }}
|
||||||
|
transition={{
|
||||||
|
duration: 1.5,
|
||||||
|
repeat: Infinity,
|
||||||
|
ease: "easeInOut",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<svg className="w-6 h-6 text-[#ffaa40]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
|
||||||
|
</svg>
|
||||||
|
</motion.div>
|
||||||
|
</motion.div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
116
components/PackagesSection.tsx
Normal file
116
components/PackagesSection.tsx
Normal file
@@ -0,0 +1,116 @@
|
|||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { Tablet, Rocket, Crown, Check } from "lucide-react";
|
||||||
|
import { GridPattern } from "./GridPattern";
|
||||||
|
|
||||||
|
interface Package {
|
||||||
|
icon: React.ReactNode;
|
||||||
|
title: string;
|
||||||
|
timeline: string;
|
||||||
|
priceRange: string;
|
||||||
|
features: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
const packages: Package[] = [
|
||||||
|
{
|
||||||
|
icon: <Tablet className="w-8 h-8" />,
|
||||||
|
title: "The Blueprint",
|
||||||
|
timeline: "Product Definition in 1 Week",
|
||||||
|
priceRange: "$1,500 - $2,500",
|
||||||
|
features: [
|
||||||
|
"Strategy & roadmap",
|
||||||
|
"User flows & wireframes",
|
||||||
|
"Technical architecture"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <Rocket className="w-8 h-8" />,
|
||||||
|
title: "The Prototype",
|
||||||
|
timeline: "Working Demo in 2 Weeks",
|
||||||
|
priceRange: "$6,000 - $8,000",
|
||||||
|
features: [
|
||||||
|
"Functional web or mobile prototype",
|
||||||
|
"Core features implemented",
|
||||||
|
"User testing ready"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <Crown className="w-8 h-8" />,
|
||||||
|
title: "The Launchpad",
|
||||||
|
timeline: "Market-Ready MVP in 6 Weeks",
|
||||||
|
priceRange: "$20,000 - $30,000",
|
||||||
|
features: [
|
||||||
|
"Full website or app",
|
||||||
|
"SEO-optimized & scalable",
|
||||||
|
"Ready for launch"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
export const PackagesSection = () => {
|
||||||
|
return (
|
||||||
|
<section className="relative py-20 bg-background overflow-hidden">
|
||||||
|
<GridPattern strokeDasharray="4 2" />
|
||||||
|
|
||||||
|
<div className="relative z-10 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-16"
|
||||||
|
>
|
||||||
|
<h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-4">
|
||||||
|
Choose Your Speed. We'll Deliver Your Launch.
|
||||||
|
</h2>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
|
||||||
|
{packages.map((pkg, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={pkg.title}
|
||||||
|
initial={{ opacity: 0, y: 50 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.6, delay: index * 0.15 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className="group relative bg-card/50 backdrop-blur-sm border border-border/50 rounded-[20px] p-8 hover:border-accent/50 hover:shadow-xl hover:shadow-accent/5 hover:scale-[1.02] transition-all duration-300"
|
||||||
|
>
|
||||||
|
{/* Icon */}
|
||||||
|
<div className="mb-6 inline-flex items-center justify-center w-16 h-16 rounded-full bg-accent/10 text-accent group-hover:bg-accent/20 group-hover:scale-110 transition-all duration-300">
|
||||||
|
{pkg.icon}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Title */}
|
||||||
|
<h3 className="text-2xl font-semibold text-foreground mb-2 group-hover:text-accent transition-colors duration-300">
|
||||||
|
{pkg.title}
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
{/* Timeline */}
|
||||||
|
<p className="text-muted-foreground mb-4">
|
||||||
|
{pkg.timeline}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Price Range */}
|
||||||
|
<div className="text-3xl font-semibold text-foreground mb-8">
|
||||||
|
{pkg.priceRange}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Features List */}
|
||||||
|
<ul className="space-y-4">
|
||||||
|
{pkg.features.map((feature, idx) => (
|
||||||
|
<li key={idx} className="flex items-start gap-3">
|
||||||
|
<div className="flex-shrink-0 mt-0.5">
|
||||||
|
<Check className="w-5 h-5 text-accent" />
|
||||||
|
</div>
|
||||||
|
<span className="text-muted-foreground leading-relaxed">
|
||||||
|
{feature}
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
155
components/VibeProgrammingPackages.tsx
Normal file
155
components/VibeProgrammingPackages.tsx
Normal file
@@ -0,0 +1,155 @@
|
|||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { FileText, Rocket, Crown, Check, ArrowRight, Zap } from "lucide-react";
|
||||||
|
import { Button } from "./ui/button";
|
||||||
|
import { GridPattern } from "./GridPattern";
|
||||||
|
|
||||||
|
interface Package {
|
||||||
|
icon: React.ReactNode;
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
timeline: string;
|
||||||
|
timelineValue: string;
|
||||||
|
outcome: string;
|
||||||
|
outcomeValue: string;
|
||||||
|
priceRange: string;
|
||||||
|
isPopular?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const packages: Package[] = [
|
||||||
|
{
|
||||||
|
icon: <FileText className="w-10 h-10" />,
|
||||||
|
title: "The Blueprint",
|
||||||
|
description: "Your idea, structured. We shape product vision for your website, app, or solution—prioritize features, and map technical architecture into a tangible plan.",
|
||||||
|
timeline: "Timeline:",
|
||||||
|
timelineValue: "1 Week",
|
||||||
|
outcome: "Outcome:",
|
||||||
|
outcomeValue: "Clarity, without ambiguity.",
|
||||||
|
priceRange: "$1,500 – $2,500+",
|
||||||
|
isPopular: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <Rocket className="w-10 h-10" />,
|
||||||
|
title: "The Prototype",
|
||||||
|
description: "Your product, visualized. High-fidelity designs, user flows, and a clickable web or mobile prototype that communicates your vision to stakeholders and investors.",
|
||||||
|
timeline: "Timeline:",
|
||||||
|
timelineValue: "2 Weeks or Less",
|
||||||
|
outcome: "Outcome:",
|
||||||
|
outcomeValue: "A working model to validate and showcase.",
|
||||||
|
priceRange: "$6,000 – $8,000+",
|
||||||
|
isPopular: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <Crown className="w-10 h-10" />,
|
||||||
|
title: "The Launchpad (MVP)",
|
||||||
|
description: "Your product, live. A fully functional, market-ready website or mobile app MVP delivered with speed, precision, SEO optimization, and scalability.",
|
||||||
|
timeline: "Timeline:",
|
||||||
|
timelineValue: "Under 6 Weeks",
|
||||||
|
outcome: "Outcome:",
|
||||||
|
outcomeValue: "A product in users' hands.",
|
||||||
|
priceRange: "$20,000 – $30,000+",
|
||||||
|
isPopular: false
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
export const VibeProgrammingPackages = () => {
|
||||||
|
return (
|
||||||
|
<section className="relative py-20 bg-background overflow-hidden">
|
||||||
|
<GridPattern strokeDasharray="4 2" />
|
||||||
|
|
||||||
|
<div className="relative z-10 container mx-auto px-6 lg:px-8">
|
||||||
|
{/* 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"
|
||||||
|
>
|
||||||
|
<div className="inline-flex items-center gap-2 mb-4">
|
||||||
|
<Zap className="w-6 h-6 text-accent" />
|
||||||
|
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground font-manrope">
|
||||||
|
Vibe Programming Packages
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<p className="text-muted-foreground text-lg max-w-2xl mx-auto font-manrope">
|
||||||
|
Where your vision takes form. From clarity to click-through to launch.
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Package Cards */}
|
||||||
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
|
||||||
|
{packages.map((pkg, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={pkg.title}
|
||||||
|
initial={{ opacity: 0, y: 50 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.6, delay: index * 0.15 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className="group relative bg-card/50 backdrop-blur-sm border border-border/50 rounded-[20px] p-8 hover:border-accent/50 hover:shadow-xl hover:shadow-accent/5 hover:scale-[1.02] transition-all duration-300"
|
||||||
|
>
|
||||||
|
{/* Most Popular Badge */}
|
||||||
|
{pkg.isPopular && (
|
||||||
|
<div className="absolute top-0 left-1/2 -translate-x-1/2">
|
||||||
|
<span className="bg-blue-600 text-white px-4 py-1 rounded-full text-sm font-medium font-manrope">
|
||||||
|
Most Popular
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Icon */}
|
||||||
|
<div className={`mb-6 inline-flex items-center justify-center w-16 h-16 rounded-full ${pkg.isPopular ? 'bg-blue-600/20 text-blue-400' : 'bg-accent/10 text-accent'} group-hover:scale-110 transition-all duration-300 ${pkg.isPopular ? '' : ''}`}>
|
||||||
|
{pkg.icon}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Title */}
|
||||||
|
<h3 className="text-2xl font-semibold text-foreground mb-4 group-hover:text-accent transition-colors duration-300 font-manrope">
|
||||||
|
{pkg.title}
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
{/* Description */}
|
||||||
|
<p className="text-muted-foreground mb-6 leading-relaxed min-h-[120px] font-manrope">
|
||||||
|
{pkg.description}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Timeline */}
|
||||||
|
<div className="mb-4">
|
||||||
|
<div className="flex items-start justify-between mb-2">
|
||||||
|
<span className="text-sm text-muted-foreground font-manrope">{pkg.timeline}</span>
|
||||||
|
<span className="text-sm text-foreground font-medium font-manrope">{pkg.timelineValue}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Outcome */}
|
||||||
|
<div className="mb-6 pb-6 border-b border-border/50 min-h-[58px]">
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<span className="text-sm text-muted-foreground font-manrope">{pkg.outcome}</span>
|
||||||
|
<span className="text-sm text-foreground font-medium text-right font-manrope">{pkg.outcomeValue}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Price Range */}
|
||||||
|
<div className="text-3xl font-semibold text-foreground mb-6 font-manrope">
|
||||||
|
{pkg.priceRange}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Get Started Button */}
|
||||||
|
<Button
|
||||||
|
variant={pkg.isPopular ? "default" : "outline"}
|
||||||
|
className={`w-full py-6 text-base font-medium rounded-xl group/btn transition-all duration-300 font-manrope ${
|
||||||
|
pkg.isPopular
|
||||||
|
? 'bg-blue-600 hover:bg-blue-700 text-white border-0'
|
||||||
|
: 'border-border/50 hover:border-accent/50 hover:bg-accent/10'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<span className="flex items-center justify-center gap-2">
|
||||||
|
Get Started
|
||||||
|
<ArrowRight className="w-4 h-4 group-hover/btn:translate-x-1 transition-transform duration-300" />
|
||||||
|
</span>
|
||||||
|
</Button>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
127
components/portfolio/PortfolioChallengeSolution.tsx
Normal file
127
components/portfolio/PortfolioChallengeSolution.tsx
Normal file
@@ -0,0 +1,127 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { CheckCircle } from "lucide-react";
|
||||||
|
|
||||||
|
interface Challenge {
|
||||||
|
icon: React.ReactNode;
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Technology {
|
||||||
|
icon: React.ReactNode;
|
||||||
|
label: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Highlight {
|
||||||
|
text: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface PortfolioChallengeSolutionProps {
|
||||||
|
challengesTitle?: string;
|
||||||
|
challenges: Challenge[];
|
||||||
|
solutionTitle?: string;
|
||||||
|
technologyStack: Technology[];
|
||||||
|
highlights: Highlight[];
|
||||||
|
}
|
||||||
|
|
||||||
|
const PortfolioChallengeSolution: React.FC<PortfolioChallengeSolutionProps> = ({
|
||||||
|
challengesTitle = "Challenges & Constraints",
|
||||||
|
challenges,
|
||||||
|
solutionTitle = "Solution Architecture",
|
||||||
|
technologyStack,
|
||||||
|
highlights,
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<section className="py-24 bg-background">
|
||||||
|
<div className="container mx-auto px-4 lg:px-6">
|
||||||
|
<div className="max-w-6xl mx-auto">
|
||||||
|
<div className="grid lg:grid-cols-2 gap-20">
|
||||||
|
{/* Challenges */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, x: -30 }}
|
||||||
|
whileInView={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ duration: 0.8 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
>
|
||||||
|
<h2 className="text-3xl lg:text-4xl font-semibold text-foreground mb-12">
|
||||||
|
{challengesTitle}
|
||||||
|
</h2>
|
||||||
|
<div className="space-y-6">
|
||||||
|
{challenges.map((challenge, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={challenge.title}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className="bg-background/50 rounded-xl p-6 border border-border/50 hover:border-accent/20 transition-colors duration-300"
|
||||||
|
>
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<div className="text-accent mt-1">{challenge.icon}</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-semibold text-foreground mb-2">
|
||||||
|
{challenge.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-muted-foreground leading-relaxed">
|
||||||
|
{challenge.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Solution Architecture */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, x: 30 }}
|
||||||
|
whileInView={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ duration: 0.8 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
>
|
||||||
|
<h2 className="text-3xl lg:text-4xl font-semibold text-foreground mb-12">
|
||||||
|
{solutionTitle}
|
||||||
|
</h2>
|
||||||
|
<div className="bg-background/50 rounded-2xl p-8 border border-border/50">
|
||||||
|
<div className="space-y-8">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-xl font-semibold text-foreground mb-6">
|
||||||
|
Technology Stack
|
||||||
|
</h3>
|
||||||
|
<div className="space-y-4">
|
||||||
|
{technologyStack.map((tech, idx) => (
|
||||||
|
<div key={idx} className="flex items-center gap-3">
|
||||||
|
{tech.icon}
|
||||||
|
<span className="text-muted-foreground">{tech.label}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 className="text-xl font-semibold text-foreground mb-6">
|
||||||
|
Key Highlights
|
||||||
|
</h3>
|
||||||
|
<div className="space-y-3">
|
||||||
|
{highlights.map((item, idx) => (
|
||||||
|
<div key={idx} className="flex items-start gap-3">
|
||||||
|
<CheckCircle className="w-4 h-4 text-accent mt-0.5 flex-shrink-0" />
|
||||||
|
<span className="text-muted-foreground text-base">
|
||||||
|
{item.text}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PortfolioChallengeSolution;
|
||||||
73
components/portfolio/PortfolioCoreFeatures.tsx
Normal file
73
components/portfolio/PortfolioCoreFeatures.tsx
Normal file
@@ -0,0 +1,73 @@
|
|||||||
|
// components/PortfolioCoreFeatures.tsx
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { ReactNode } from "react";
|
||||||
|
import { Card, CardContent } from "@/components/ui/card"; // adjust path as per your project
|
||||||
|
|
||||||
|
interface Feature {
|
||||||
|
icon: ReactNode;
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface PortfolioCoreFeaturesProps {
|
||||||
|
title: string;
|
||||||
|
subtitle: string;
|
||||||
|
features: Feature[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export function PortfolioCoreFeatures({
|
||||||
|
title,
|
||||||
|
subtitle,
|
||||||
|
features,
|
||||||
|
}: PortfolioCoreFeaturesProps) {
|
||||||
|
return (
|
||||||
|
<section className="py-24 bg-card/30">
|
||||||
|
<div className="container mx-auto px-4 lg:px-6">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.8 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className="max-w-6xl mx-auto"
|
||||||
|
>
|
||||||
|
{/* Section Heading */}
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-6">
|
||||||
|
{title}
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
|
||||||
|
{subtitle}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Features Grid */}
|
||||||
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||||
|
{features.map((feature, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={feature.title}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
>
|
||||||
|
<Card className="h-full bg-card/50 border-border/50 hover:border-accent/30 transition-all duration-300 group">
|
||||||
|
<CardContent className="p-8">
|
||||||
|
<div className="text-accent mb-4 group-hover:scale-110 transition-transform duration-300">
|
||||||
|
{feature.icon}
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-semibold text-foreground mb-4">
|
||||||
|
{feature.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-muted-foreground leading-relaxed">
|
||||||
|
{feature.description}
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
78
components/portfolio/PortfolioDevelopmentProcess.tsx
Normal file
78
components/portfolio/PortfolioDevelopmentProcess.tsx
Normal file
@@ -0,0 +1,78 @@
|
|||||||
|
// components/PortfolioDevelopmentProcess.tsx
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { ReactNode } from "react";
|
||||||
|
|
||||||
|
interface Phase {
|
||||||
|
icon: ReactNode;
|
||||||
|
phase: string;
|
||||||
|
duration: string;
|
||||||
|
description: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface PortfolioDevelopmentProcessProps {
|
||||||
|
title: string;
|
||||||
|
subtitle: string;
|
||||||
|
phases: Phase[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export function PortfolioDevelopmentProcess({
|
||||||
|
title,
|
||||||
|
subtitle,
|
||||||
|
phases,
|
||||||
|
}: PortfolioDevelopmentProcessProps) {
|
||||||
|
return (
|
||||||
|
<section className="py-24 bg-card/30">
|
||||||
|
<div className="container mx-auto px-4 lg:px-6">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.8 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className="max-w-6xl mx-auto"
|
||||||
|
>
|
||||||
|
{/* Section Heading */}
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-6">
|
||||||
|
{title}
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
|
||||||
|
{subtitle}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Phases Grid */}
|
||||||
|
<div className="grid lg:grid-cols-5 gap-8">
|
||||||
|
{phases.map((phase, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={phase.phase}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className="relative"
|
||||||
|
>
|
||||||
|
<div className="bg-card/50 rounded-xl p-6 border border-border/50 hover:border-accent/30 transition-all duration-300 h-full">
|
||||||
|
<div className="text-accent mb-4">{phase.icon}</div>
|
||||||
|
<h3 className="text-lg font-semibold text-foreground mb-2">
|
||||||
|
{phase.phase}
|
||||||
|
</h3>
|
||||||
|
<div className="text-accent font-medium mb-3">
|
||||||
|
{phase.duration}
|
||||||
|
</div>
|
||||||
|
<p className="text-muted-foreground text-sm leading-relaxed">
|
||||||
|
{phase.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Connector Line */}
|
||||||
|
{index < phases.length - 1 && (
|
||||||
|
<div className="hidden lg:block absolute top-1/2 -right-4 w-8 h-0.5 bg-border transform -translate-y-1/2" />
|
||||||
|
)}
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
35
components/portfolio/PortfolioExecutiveSummary.tsx
Normal file
35
components/portfolio/PortfolioExecutiveSummary.tsx
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
// components/portfolio/PortfolioExecutiveSummary.tsx
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
|
||||||
|
interface PortfolioExecutiveSummaryProps {
|
||||||
|
title?: string;
|
||||||
|
content: string;
|
||||||
|
backgroundColor?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const PortfolioExecutiveSummary = ({
|
||||||
|
title = "Executive Summary",
|
||||||
|
content,
|
||||||
|
backgroundColor = "bg-card/30"
|
||||||
|
}: PortfolioExecutiveSummaryProps) => {
|
||||||
|
return (
|
||||||
|
<section className={`py-24 ${backgroundColor}`}>
|
||||||
|
<div className="container mx-auto px-4 lg:px-6">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.8 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className="max-w-4xl mx-auto text-center"
|
||||||
|
>
|
||||||
|
<h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-8">
|
||||||
|
{title}
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-muted-foreground leading-relaxed">
|
||||||
|
{content}
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
96
components/portfolio/PortfolioHero.tsx
Normal file
96
components/portfolio/PortfolioHero.tsx
Normal file
@@ -0,0 +1,96 @@
|
|||||||
|
// components/portfolio/PortfolioHero.tsx
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { ArrowLeft } from "lucide-react";
|
||||||
|
import { GridPattern } from "../GridPattern";
|
||||||
|
import { ImageWithFallback } from "../figma/ImageWithFallback";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
|
||||||
|
interface PortfolioHeroProps {
|
||||||
|
badgeText?: string;
|
||||||
|
title: string;
|
||||||
|
subtitle: string;
|
||||||
|
subtitleTwo?: string;
|
||||||
|
imageUrl: string;
|
||||||
|
imageAlt: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const PortfolioHero = ({
|
||||||
|
badgeText = "Portfolio",
|
||||||
|
title,
|
||||||
|
subtitle,
|
||||||
|
subtitleTwo,
|
||||||
|
imageUrl,
|
||||||
|
imageAlt,
|
||||||
|
}: PortfolioHeroProps) => {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="relative pt-32 pb-24 bg-background overflow-hidden">
|
||||||
|
<GridPattern strokeDasharray="4 2" />
|
||||||
|
|
||||||
|
<div className="relative z-10 container mx-auto px-4 lg:px-6">
|
||||||
|
{/* Back Button */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, x: -20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ duration: 0.6 }}
|
||||||
|
className="mb-12"
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => navigate("/case-studies")}
|
||||||
|
className="text-muted-foreground hover:text-foreground flex items-center gap-2 px-0 hover:bg-transparent"
|
||||||
|
>
|
||||||
|
<ArrowLeft className="w-4 h-4" />
|
||||||
|
Back to Portfolio
|
||||||
|
</Button>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<div className="grid lg:grid-cols-12 gap-16 items-center">
|
||||||
|
{/* Content - Left Aligned */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.8 }}
|
||||||
|
className="lg:col-span-7"
|
||||||
|
>
|
||||||
|
<div className="mb-6">
|
||||||
|
<Badge variant="secondary" className="text-accent border-accent/20 bg-accent/10">
|
||||||
|
{badgeText}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 className="text-4xl lg:text-6xl font-semibold text-foreground mb-8 leading-tight">
|
||||||
|
{title}
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p className="text-xl text-muted-foreground mb-6 leading-relaxed max-w-2xl">
|
||||||
|
{subtitle}
|
||||||
|
</p>
|
||||||
|
<p className="text-xl text-muted-foreground mb-10 leading-relaxed max-w-2xl">
|
||||||
|
{subtitleTwo}
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Project Image */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.8, delay: 0.2 }}
|
||||||
|
className="lg:col-span-5"
|
||||||
|
>
|
||||||
|
<div className="relative aspect-[4/3] overflow-hidden bg-card/30 rounded-2xl border border-border/50 p-4">
|
||||||
|
<ImageWithFallback
|
||||||
|
src={imageUrl}
|
||||||
|
alt={imageAlt}
|
||||||
|
className="w-full h-full object-contain object-center rounded-xl"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
119
components/portfolio/PortfolioLessonsSection.tsx
Normal file
119
components/portfolio/PortfolioLessonsSection.tsx
Normal file
@@ -0,0 +1,119 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
|
||||||
|
interface LessonSectionProps {
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
workedTitle: string;
|
||||||
|
workedIcon: React.ReactNode;
|
||||||
|
workedColor: string;
|
||||||
|
workedLessons: string[];
|
||||||
|
improveTitle: string;
|
||||||
|
improveIcon: React.ReactNode;
|
||||||
|
improveColor: string;
|
||||||
|
improveLessons: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
const PortfolioLessonsSection: React.FC<LessonSectionProps> = ({
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
workedTitle,
|
||||||
|
workedIcon,
|
||||||
|
workedColor,
|
||||||
|
workedLessons,
|
||||||
|
improveTitle,
|
||||||
|
improveIcon,
|
||||||
|
improveColor,
|
||||||
|
improveLessons,
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<section className="py-24 bg-card/30">
|
||||||
|
<div className="container mx-auto px-4 lg:px-6">
|
||||||
|
<div className="max-w-6xl mx-auto">
|
||||||
|
{/* 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"
|
||||||
|
>
|
||||||
|
<h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-6">
|
||||||
|
{title}
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
|
||||||
|
{description}
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Lessons Grid */}
|
||||||
|
<div className="grid lg:grid-cols-2 gap-12">
|
||||||
|
{/* Worked Well */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, x: -30 }}
|
||||||
|
whileInView={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ duration: 0.8 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className={`rounded-2xl p-8 border`}
|
||||||
|
style={{
|
||||||
|
backgroundColor: `${workedColor}0D`, // light transparent bg
|
||||||
|
borderColor: `${workedColor}33`, // faint border
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<h3 className="text-2xl font-semibold text-foreground mb-8 flex items-center gap-3">
|
||||||
|
<span className="text-xl" style={{ color: workedColor }}>
|
||||||
|
{workedIcon}
|
||||||
|
</span>
|
||||||
|
{workedTitle}
|
||||||
|
</h3>
|
||||||
|
<div className="space-y-4">
|
||||||
|
{workedLessons.map((lesson, index) => (
|
||||||
|
<div key={index} className="flex items-start gap-3">
|
||||||
|
<div
|
||||||
|
className="w-2 h-2 rounded-full mt-2 flex-shrink-0"
|
||||||
|
style={{ backgroundColor: workedColor }}
|
||||||
|
/>
|
||||||
|
<span className="text-muted-foreground">{lesson}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Areas for Improvement */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, x: 30 }}
|
||||||
|
whileInView={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ duration: 0.8 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className={`rounded-2xl p-8 border`}
|
||||||
|
style={{
|
||||||
|
backgroundColor: `${improveColor}0D`,
|
||||||
|
borderColor: `${improveColor}33`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<h3 className="text-2xl font-semibold text-foreground mb-8 flex items-center gap-3">
|
||||||
|
<span className="text-xl" style={{ color: improveColor }}>
|
||||||
|
{improveIcon}
|
||||||
|
</span>
|
||||||
|
{improveTitle}
|
||||||
|
</h3>
|
||||||
|
<div className="space-y-4">
|
||||||
|
{improveLessons.map((lesson, index) => (
|
||||||
|
<div key={index} className="flex items-start gap-3">
|
||||||
|
<div
|
||||||
|
className="w-2 h-2 rounded-full mt-2 flex-shrink-0"
|
||||||
|
style={{ backgroundColor: improveColor }}
|
||||||
|
/>
|
||||||
|
<span className="text-muted-foreground">{lesson}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PortfolioLessonsSection;
|
||||||
233
components/portfolio/PortfolioProjectDetails.tsx
Normal file
233
components/portfolio/PortfolioProjectDetails.tsx
Normal file
@@ -0,0 +1,233 @@
|
|||||||
|
// components/portfolio/PortfolioProjectDetails.tsx
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import {
|
||||||
|
Code,
|
||||||
|
ShoppingCart,
|
||||||
|
Calendar,
|
||||||
|
Users,
|
||||||
|
Smartphone
|
||||||
|
} from "lucide-react";
|
||||||
|
|
||||||
|
interface Technology {
|
||||||
|
name: string;
|
||||||
|
icon: React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ProjectDetails {
|
||||||
|
technologies: Technology[];
|
||||||
|
industries: string[];
|
||||||
|
duration: string;
|
||||||
|
teamSize: string;
|
||||||
|
platforms: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
interface PortfolioProjectDetailsProps {
|
||||||
|
title?: string;
|
||||||
|
description?: string;
|
||||||
|
details: ProjectDetails;
|
||||||
|
achievements?: Array<{
|
||||||
|
label: string;
|
||||||
|
value: string;
|
||||||
|
description: string;
|
||||||
|
}>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const PortfolioProjectDetails = ({
|
||||||
|
title = "Project Details",
|
||||||
|
description = "Detailed overview of the project including technologies, timeline, and team composition.",
|
||||||
|
details,
|
||||||
|
achievements = []
|
||||||
|
}: PortfolioProjectDetailsProps) => {
|
||||||
|
return (
|
||||||
|
<section className="py-24 bg-card/30 relative overflow-hidden">
|
||||||
|
{/* Background Elements */}
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-br from-accent/5 via-transparent to-green-500/5" />
|
||||||
|
<div className="absolute top-20 right-20 w-64 h-64 bg-accent/10 rounded-full blur-3xl opacity-20" />
|
||||||
|
<div className="absolute bottom-20 left-20 w-48 h-48 bg-green-500/10 rounded-full blur-3xl opacity-20" />
|
||||||
|
|
||||||
|
<div className="container mx-auto px-4 lg:px-6 relative z-10">
|
||||||
|
<div className="max-w-7xl mx-auto">
|
||||||
|
{/* Section Header */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.8 }}
|
||||||
|
className="text-center mb-16"
|
||||||
|
>
|
||||||
|
<h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-6">
|
||||||
|
{title}
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
|
||||||
|
{description}
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Project Meta Information Grid */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.8, delay: 0.2 }}
|
||||||
|
className="grid lg:grid-cols-2 gap-8 mb-20"
|
||||||
|
>
|
||||||
|
{/* Technologies & Industries Card */}
|
||||||
|
<div className="bg-background/40 backdrop-blur-xl rounded-2xl p-8 border border-border/30 hover:border-accent/20 transition-all duration-500 group">
|
||||||
|
<div className="space-y-8">
|
||||||
|
{/* Technologies */}
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-3 mb-6">
|
||||||
|
<div className="w-12 h-12 bg-accent/10 backdrop-blur-sm rounded-xl border border-accent/20 flex items-center justify-center group-hover:bg-accent/20 transition-all duration-300">
|
||||||
|
<Code className="w-6 h-6 text-accent" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-semibold text-foreground">Technologies</h3>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-wrap gap-3">
|
||||||
|
{details.technologies.map((tech) => (
|
||||||
|
<Badge
|
||||||
|
key={tech.name}
|
||||||
|
variant="outline"
|
||||||
|
className="text-base border-border/40 bg-background/30 hover:bg-accent/10 hover:border-accent/40 flex items-center gap-2 px-4 py-2 transition-all duration-300"
|
||||||
|
>
|
||||||
|
<span className="text-accent">{tech.icon}</span>
|
||||||
|
{tech.name}
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Industries */}
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-3 mb-6">
|
||||||
|
<div className="w-12 h-12 bg-green-500/10 backdrop-blur-sm rounded-xl border border-green-500/20 flex items-center justify-center group-hover:bg-green-500/20 transition-all duration-300">
|
||||||
|
<ShoppingCart className="w-6 h-6 text-green-400" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-semibold text-foreground">Industries</h3>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-wrap gap-3">
|
||||||
|
{details.industries.map((industry) => (
|
||||||
|
<Badge
|
||||||
|
key={industry}
|
||||||
|
variant="secondary"
|
||||||
|
className="text-base bg-green-500/10 border-green-500/20 text-green-100 hover:bg-green-500/20 px-4 py-2 transition-all duration-300"
|
||||||
|
>
|
||||||
|
{industry}
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Timeline & Team Card */}
|
||||||
|
<div className="bg-background/40 backdrop-blur-xl rounded-2xl p-8 border border-border/30 hover:border-blue-400/20 transition-all duration-500 group">
|
||||||
|
<div className="space-y-8">
|
||||||
|
{/* Duration */}
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-3 mb-6">
|
||||||
|
<div className="w-12 h-12 bg-blue-500/10 backdrop-blur-sm rounded-xl border border-blue-500/20 flex items-center justify-center group-hover:bg-blue-500/20 transition-all duration-300">
|
||||||
|
<Calendar className="w-6 h-6 text-blue-400" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-semibold text-foreground">Project Timeline</h3>
|
||||||
|
</div>
|
||||||
|
<p className="text-lg text-muted-foreground pl-15">{details.duration}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Team */}
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-3 mb-6">
|
||||||
|
<div className="w-12 h-12 bg-purple-500/10 backdrop-blur-sm rounded-xl border border-purple-500/20 flex items-center justify-center group-hover:bg-purple-500/20 transition-all duration-300">
|
||||||
|
<Users className="w-6 h-6 text-purple-400" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-semibold text-foreground">Team Composition</h3>
|
||||||
|
</div>
|
||||||
|
<p className="text-lg text-muted-foreground pl-15">{details.teamSize}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Platforms */}
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-3 mb-6">
|
||||||
|
<div className="w-12 h-12 bg-orange-500/10 backdrop-blur-sm rounded-xl border border-orange-500/20 flex items-center justify-center group-hover:bg-orange-500/20 transition-all duration-300">
|
||||||
|
<Smartphone className="w-6 h-6 text-orange-400" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-semibold text-foreground">Target Platforms</h3>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-3 pl-15">
|
||||||
|
{details.platforms.map((platform) => (
|
||||||
|
<Badge
|
||||||
|
key={platform}
|
||||||
|
variant="outline"
|
||||||
|
className="text-base border-orange-400/40 bg-orange-500/10 text-orange-100 hover:bg-orange-500/20 px-3 py-1"
|
||||||
|
>
|
||||||
|
{platform}
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Key Achievements Section */}
|
||||||
|
{achievements.length > 0 && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.8, delay: 0.4 }}
|
||||||
|
className="mb-16"
|
||||||
|
>
|
||||||
|
<div className="text-center mb-12">
|
||||||
|
<h2 className="text-3xl lg:text-4xl font-semibold text-foreground mb-6">
|
||||||
|
Key Impact & Results
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
|
||||||
|
Measurable outcomes that demonstrate the project's success
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
|
{achievements.map((achievement, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={achievement.label}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.6, delay: 0.6 + index * 0.1 }}
|
||||||
|
whileHover={{
|
||||||
|
scale: 1.02,
|
||||||
|
y: -4,
|
||||||
|
transition: { duration: 0.3, ease: "easeOut" }
|
||||||
|
}}
|
||||||
|
className="bg-background/50 backdrop-blur-xl rounded-2xl p-8 border border-border/40 hover:border-accent/30 hover:bg-background/60 transition-all duration-500 group cursor-pointer relative overflow-hidden"
|
||||||
|
>
|
||||||
|
{/* Card Background Gradient */}
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-br from-accent/5 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<div className="relative z-10 text-center">
|
||||||
|
{/* Value */}
|
||||||
|
<div className="text-3xl lg:text-4xl font-bold text-accent mb-4 group-hover:text-accent transition-colors duration-300">
|
||||||
|
{achievement.value}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Label */}
|
||||||
|
<div className="text-xl font-semibold text-foreground mb-3 group-hover:text-foreground transition-colors duration-300">
|
||||||
|
{achievement.label}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Description */}
|
||||||
|
<div className="text-base text-muted-foreground leading-relaxed group-hover:text-muted-foreground transition-colors duration-300">
|
||||||
|
{achievement.description}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Hover Effect Line */}
|
||||||
|
<div className="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-accent to-accent/50 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left" />
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
75
components/portfolio/PortfolioProjectOverview.tsx
Normal file
75
components/portfolio/PortfolioProjectOverview.tsx
Normal file
@@ -0,0 +1,75 @@
|
|||||||
|
// components/PortfolioProjectOverview.tsx
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { ReactNode } from "react";
|
||||||
|
|
||||||
|
interface PortfolioProjectOverviewProps {
|
||||||
|
icon: ReactNode;
|
||||||
|
title: string;
|
||||||
|
description?: string;
|
||||||
|
points?: string[];
|
||||||
|
borderColor?: string;
|
||||||
|
hoverColor?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function PortfolioProjectOverview({
|
||||||
|
icon,
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
points,
|
||||||
|
borderColor = "border-accent/20",
|
||||||
|
hoverColor = "accent",
|
||||||
|
}: PortfolioProjectOverviewProps) {
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
whileHover={{
|
||||||
|
scale: 1.05,
|
||||||
|
y: -4,
|
||||||
|
transition: { duration: 0.3, ease: "easeOut" },
|
||||||
|
}}
|
||||||
|
transition={{ duration: 0.6 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className={`bg-card/30 rounded-2xl p-8 border-2 ${borderColor} cursor-pointer group
|
||||||
|
hover:border-${hoverColor}/40 hover:bg-card/40
|
||||||
|
hover:shadow-lg hover:shadow-${hoverColor}/10
|
||||||
|
transition-all duration-300 ease-out`}
|
||||||
|
>
|
||||||
|
{/* Icon */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, scale: 0.8 }}
|
||||||
|
whileInView={{ opacity: 1, scale: 1 }}
|
||||||
|
transition={{ duration: 0.6, delay: 0.2 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className="flex justify-start mb-6"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`w-16 h-16 bg-background/20 backdrop-blur-sm rounded-full
|
||||||
|
border border-border/30 flex items-center justify-center
|
||||||
|
group-hover:border-${hoverColor}/50 group-hover:bg-${hoverColor}/10
|
||||||
|
transition-all duration-300 ease-out`}
|
||||||
|
>
|
||||||
|
{icon}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Title */}
|
||||||
|
<h3 className="text-2xl font-semibold text-foreground mb-6">{title}</h3>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
{description && (
|
||||||
|
<p className="text-muted-foreground leading-relaxed">{description}</p>
|
||||||
|
)}
|
||||||
|
{points && (
|
||||||
|
<div className="space-y-3">
|
||||||
|
{points.map((point, i) => (
|
||||||
|
<div key={i} className="flex items-start gap-3">
|
||||||
|
<span className="w-5 h-5 text-accent mt-0.5 flex-shrink-0">✔</span>
|
||||||
|
<span className="text-muted-foreground text-base">{point}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
}
|
||||||
92
components/portfolio/PortfolioResultsImpact.tsx
Normal file
92
components/portfolio/PortfolioResultsImpact.tsx
Normal file
@@ -0,0 +1,92 @@
|
|||||||
|
// components/PortfolioResultsImpact.tsx
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { CheckCircle } from "lucide-react";
|
||||||
|
|
||||||
|
interface Metric {
|
||||||
|
value: string;
|
||||||
|
label: string;
|
||||||
|
description: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface PortfolioResultsImpactProps {
|
||||||
|
title: string;
|
||||||
|
subtitle: string;
|
||||||
|
metrics: Metric[];
|
||||||
|
achievements: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export function PortfolioResultsImpact({
|
||||||
|
title,
|
||||||
|
subtitle,
|
||||||
|
metrics,
|
||||||
|
achievements,
|
||||||
|
}: PortfolioResultsImpactProps) {
|
||||||
|
return (
|
||||||
|
<section className="py-24 bg-background">
|
||||||
|
<div className="container mx-auto px-4 lg:px-6">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.8 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className="max-w-6xl mx-auto"
|
||||||
|
>
|
||||||
|
{/* Heading */}
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-6">
|
||||||
|
{title}
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
|
||||||
|
{subtitle}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Metrics */}
|
||||||
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
|
||||||
|
{metrics.map((metric, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={metric.label}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className="bg-background/50 rounded-xl p-6 border border-border/50 hover:border-accent/30 transition-all duration-300 text-center"
|
||||||
|
>
|
||||||
|
<div className="text-3xl font-bold text-accent mb-2">
|
||||||
|
{metric.value}
|
||||||
|
</div>
|
||||||
|
<div className="text-lg font-semibold text-foreground mb-2">
|
||||||
|
{metric.label}
|
||||||
|
</div>
|
||||||
|
<div className="text-muted-foreground text-sm">
|
||||||
|
{metric.description}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Achievements */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.8, delay: 0.3 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className="bg-background/50 rounded-2xl p-8 border border-border/50"
|
||||||
|
>
|
||||||
|
<h3 className="text-2xl font-semibold text-foreground mb-6">
|
||||||
|
Technical Achievements
|
||||||
|
</h3>
|
||||||
|
<div className="grid md:grid-cols-2 gap-4">
|
||||||
|
{achievements.map((achievement, index) => (
|
||||||
|
<div key={index} className="flex items-start gap-3">
|
||||||
|
<CheckCircle className="w-5 h-5 text-accent mt-0.5 flex-shrink-0" />
|
||||||
|
<span className="text-muted-foreground">{achievement}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
75
components/portfolio/PortfolioRoadmapSection.tsx
Normal file
75
components/portfolio/PortfolioRoadmapSection.tsx
Normal file
@@ -0,0 +1,75 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
|
||||||
|
interface RoadmapItem {
|
||||||
|
phase: string;
|
||||||
|
features: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
interface PortfolioRoadmapSectionProps {
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
roadmapItems: RoadmapItem[];
|
||||||
|
icon?: React.ReactNode; // optional (default ArrowRight)
|
||||||
|
}
|
||||||
|
|
||||||
|
const PortfolioRoadmapSection: React.FC<PortfolioRoadmapSectionProps> = ({
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
roadmapItems,
|
||||||
|
icon,
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<section className="py-24 bg-background">
|
||||||
|
<div className="container mx-auto px-4 lg:px-6">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.8 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className="max-w-6xl mx-auto"
|
||||||
|
>
|
||||||
|
{/* Header */}
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-6">
|
||||||
|
{title}
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
|
||||||
|
{description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Roadmap Grid */}
|
||||||
|
<div className="grid lg:grid-cols-2 gap-12">
|
||||||
|
{roadmapItems.map((roadmap, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={roadmap.phase}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.6, delay: index * 0.2 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className="bg-background/50 rounded-2xl p-8 border border-border/50 hover:border-accent/30 transition-all duration-300"
|
||||||
|
>
|
||||||
|
<h3 className="text-2xl font-semibold text-foreground mb-6">
|
||||||
|
{roadmap.phase}
|
||||||
|
</h3>
|
||||||
|
<div className="space-y-4">
|
||||||
|
{roadmap.features.map((feature, featureIndex) => (
|
||||||
|
<div key={featureIndex} className="flex items-start gap-3">
|
||||||
|
<span className="w-5 h-5 text-accent mt-0.5 flex-shrink-0">
|
||||||
|
{icon}
|
||||||
|
</span>
|
||||||
|
<span className="text-muted-foreground">{feature}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PortfolioRoadmapSection;
|
||||||
70
components/portfolio/PortfolioTestimonial.tsx
Normal file
70
components/portfolio/PortfolioTestimonial.tsx
Normal file
@@ -0,0 +1,70 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { Star } from "lucide-react";
|
||||||
|
|
||||||
|
interface PortfolioTestimonialProps {
|
||||||
|
logo: string | React.ReactNode; // can be an image URL or React component
|
||||||
|
alt?: string;
|
||||||
|
rating?: number; // default 5
|
||||||
|
testimonial: string;
|
||||||
|
clientName: string;
|
||||||
|
clientRole: string;
|
||||||
|
maxWidth?: string; // optional, e.g., "max-w-4xl"
|
||||||
|
}
|
||||||
|
|
||||||
|
const PortfolioTestimonial: React.FC<PortfolioTestimonialProps> = ({
|
||||||
|
logo,
|
||||||
|
alt = "Client Logo",
|
||||||
|
rating = 5,
|
||||||
|
testimonial,
|
||||||
|
clientName,
|
||||||
|
clientRole,
|
||||||
|
maxWidth = "max-w-4xl",
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<section className="py-24 bg-card/30">
|
||||||
|
<div className="container mx-auto px-4 lg:px-6">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.8 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className={`mx-auto text-center ${maxWidth}`}
|
||||||
|
>
|
||||||
|
<div className="bg-card/50 rounded-2xl p-12 border border-border/50">
|
||||||
|
{/* Logo */}
|
||||||
|
{typeof logo === "string" ? (
|
||||||
|
<div className="flex justify-center mb-8">
|
||||||
|
<img src={logo} alt={alt} className="h-12 w-auto object-contain" />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="flex justify-center mb-8">{logo}</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Rating */}
|
||||||
|
<div className="flex justify-center mb-8">
|
||||||
|
<div className="flex text-yellow-400">
|
||||||
|
{[...Array(rating)].map((_, i) => (
|
||||||
|
<Star key={i} className="w-6 h-6 fill-current" />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Testimonial */}
|
||||||
|
<blockquote className="text-2xl lg:text-3xl text-foreground mb-8 leading-relaxed italic">
|
||||||
|
{testimonial}
|
||||||
|
</blockquote>
|
||||||
|
|
||||||
|
{/* Client Info */}
|
||||||
|
<div className="flex flex-col items-center">
|
||||||
|
<div className="text-lg font-semibold text-foreground">{clientName}</div>
|
||||||
|
<div className="text-muted-foreground">{clientRole}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PortfolioTestimonial;
|
||||||
@@ -123,7 +123,7 @@ const CustomWebAppHeroWithCTA = () => {
|
|||||||
{/* Main Heading */}
|
{/* Main Heading */}
|
||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight">
|
<h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight">
|
||||||
Custom Web Application Development
|
Build What Your Business Needs — Fast
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
|
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -14,6 +14,9 @@ import { Navigation } from "@/components/Navigation";
|
|||||||
import { HeroSection } from "@/components/HeroSection";
|
import { HeroSection } from "@/components/HeroSection";
|
||||||
import { ClientLogos } from "@/components/ClientLogos";
|
import { ClientLogos } from "@/components/ClientLogos";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
|
import { CaseStudySlider } from "@/components/CaseStudySlider";
|
||||||
|
import { PackagesSection } from "@/components/PackagesSection";
|
||||||
|
import { DiwaliHeroSection } from "@/components/DiwaliHeroSection";
|
||||||
|
|
||||||
|
|
||||||
const services = [
|
const services = [
|
||||||
@@ -97,6 +100,7 @@ const services = [
|
|||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
||||||
export const Homepage = () => {
|
export const Homepage = () => {
|
||||||
|
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
@@ -154,8 +158,11 @@ export const Homepage = () => {
|
|||||||
|
|
||||||
{/* Hero Section - Dark background */}
|
{/* Hero Section - Dark background */}
|
||||||
<section className="bg-background">
|
<section className="bg-background">
|
||||||
<HeroSection />
|
<DiwaliHeroSection />
|
||||||
</section>
|
</section>
|
||||||
|
{/* <section className="bg-background">
|
||||||
|
<HeroSection />
|
||||||
|
</section> */}
|
||||||
|
|
||||||
{/* Client Logos - Dark background */}
|
{/* Client Logos - Dark background */}
|
||||||
<section className="bg-background">
|
<section className="bg-background">
|
||||||
@@ -251,7 +258,14 @@ export const Homepage = () => {
|
|||||||
|
|
||||||
{/* Case Studies - Dark background */}
|
{/* Case Studies - Dark background */}
|
||||||
<section className="bg-background">
|
<section className="bg-background">
|
||||||
|
<PackagesSection />
|
||||||
|
</section>
|
||||||
|
{/* <section className="bg-background">
|
||||||
<CaseStudyHighlight />
|
<CaseStudyHighlight />
|
||||||
|
</section> */}
|
||||||
|
|
||||||
|
<section className="bg-background">
|
||||||
|
<CaseStudySlider autoPlay autoPlayInterval={6000} />
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Inline CTA - Dark background */}
|
{/* Inline CTA - Dark background */}
|
||||||
|
|||||||
@@ -39,6 +39,8 @@ import { Card, CardContent } from "../components/ui/card";
|
|||||||
import { ShimmerButton } from "../components/ui/shimmer-button";
|
import { ShimmerButton } from "../components/ui/shimmer-button";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
import { Helmet } from "react-helmet-async";
|
import { Helmet } from "react-helmet-async";
|
||||||
|
import { VibeProgrammingPackages } from "@/components/VibeProgrammingPackages";
|
||||||
|
import { DedicatedTeamPricing } from "@/components/DedicatedTeamPricing";
|
||||||
|
|
||||||
// MVP & Startup Launch Packages Hero Section
|
// MVP & Startup Launch Packages Hero Section
|
||||||
const MVPStartupLaunchPackagesHero = () => {
|
const MVPStartupLaunchPackagesHero = () => {
|
||||||
@@ -114,7 +116,7 @@ const MVPStartupLaunchPackagesHero = () => {
|
|||||||
{/* Main Heading */}
|
{/* Main Heading */}
|
||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight">
|
<h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight">
|
||||||
MVP & Startup Launch Packages
|
Launch Faster. <br /> Learn Sooner. <br /> Scale Smarter.
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
|
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
|
||||||
@@ -948,13 +950,11 @@ const MVPStartupProcess = () => {
|
|||||||
whileInView={{ opacity: 1, x: 0 }}
|
whileInView={{ opacity: 1, x: 0 }}
|
||||||
transition={{ duration: 0.8, delay: index * 0.2 }}
|
transition={{ duration: 0.8, delay: index * 0.2 }}
|
||||||
viewport={{ once: true }}
|
viewport={{ once: true }}
|
||||||
className={`flex items-center ${
|
className={`flex items-center ${isEven ? "lg:flex-row" : "lg:flex-row-reverse"
|
||||||
isEven ? "lg:flex-row" : "lg:flex-row-reverse"
|
|
||||||
} flex-col lg:gap-16 gap-8`}
|
} flex-col lg:gap-16 gap-8`}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className={`flex-1 ${
|
className={`flex-1 ${isEven ? "lg:text-right" : "lg:text-left"
|
||||||
isEven ? "lg:text-right" : "lg:text-left"
|
|
||||||
} text-center 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="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">
|
||||||
@@ -1430,6 +1430,9 @@ export const MVPStartupLaunchPackages = () => {
|
|||||||
<MVPStartupLaunchPackagesHero />
|
<MVPStartupLaunchPackagesHero />
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
{/* VibeProgrammingPackages */}
|
||||||
|
<VibeProgrammingPackages />
|
||||||
|
|
||||||
{/* Challenge */}
|
{/* Challenge */}
|
||||||
<section className="bg-background">
|
<section className="bg-background">
|
||||||
<MVPStartupChallenge />
|
<MVPStartupChallenge />
|
||||||
@@ -1440,6 +1443,9 @@ export const MVPStartupLaunchPackages = () => {
|
|||||||
<MVPStartupIncludes />
|
<MVPStartupIncludes />
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
{/* DedicatedTeamPricing */}
|
||||||
|
<DedicatedTeamPricing />
|
||||||
|
|
||||||
{/* Benefits */}
|
{/* Benefits */}
|
||||||
<section className="bg-background">
|
<section className="bg-background">
|
||||||
<MVPStartupBenefits />
|
<MVPStartupBenefits />
|
||||||
|
|||||||
@@ -116,9 +116,9 @@ const HeroWithCTA = () => {
|
|||||||
className="space-y-6"
|
className="space-y-6"
|
||||||
>
|
>
|
||||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold leading-tight">
|
<h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold leading-tight">
|
||||||
<span className="text-white">Expert </span>
|
<span className="text-white">From concept to </span>
|
||||||
<span className="text-[#E5195E]">Mobile App Development</span>
|
<span className="text-[#E5195E]">App Store</span>
|
||||||
<span className="text-white"> Services</span>
|
<span className="text-white"> in just 6 weeks.</span>
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
|
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -1,397 +1,344 @@
|
|||||||
|
import PortfolioChallengeSolution from "@/components/portfolio/PortfolioChallengeSolution";
|
||||||
|
import { PortfolioCoreFeatures } from "@/components/portfolio/PortfolioCoreFeatures";
|
||||||
|
import { PortfolioDevelopmentProcess } from "@/components/portfolio/PortfolioDevelopmentProcess";
|
||||||
|
import { PortfolioExecutiveSummary } from "@/components/portfolio/PortfolioExecutiveSummary";
|
||||||
|
import { PortfolioHero } from "@/components/portfolio/PortfolioHero";
|
||||||
|
import PortfolioLessonsSection from "@/components/portfolio/PortfolioLessonsSection";
|
||||||
|
import { PortfolioProjectDetails } from "@/components/portfolio/PortfolioProjectDetails";
|
||||||
|
import { PortfolioProjectOverview } from "@/components/portfolio/PortfolioProjectOverview";
|
||||||
|
import { PortfolioResultsImpact } from "@/components/portfolio/PortfolioResultsImpact";
|
||||||
|
import PortfolioRoadmapSection from "@/components/portfolio/PortfolioRoadmapSection";
|
||||||
|
import PortfolioTestimonial from "@/components/portfolio/PortfolioTestimonial";
|
||||||
import { motion } from "framer-motion";
|
import { motion } from "framer-motion";
|
||||||
import { ArrowLeft, ExternalLink, Users, Globe, TrendingUp, Search, Figma, Zap, Shield, Settings, Rocket, ShoppingBag, Recycle, Tag } from "lucide-react";
|
import { AlertTriangle, ArrowRight, Bell, Calendar, CheckCircle, Cloud, Code, Cpu, Database, ExternalLink, Globe, Home, Image, Leaf, List, Mic, Palette, Repeat, Ruler, Scan, Server, Share2, ShieldCheck, ShoppingBag, Smartphone, Sparkles, Split, Star, Target, TestTube, Users, Zap } from "lucide-react";
|
||||||
import { Navigation } from "../components/Navigation";
|
|
||||||
import { Footer } from "../components/Footer";
|
|
||||||
import { Button } from "../components/ui/button";
|
|
||||||
import { GridPattern } from "../components/GridPattern";
|
|
||||||
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
|
|
||||||
import seezunImage from "../src/images/seezun.webp";
|
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
|
import { Button } from "../components/ui/button";
|
||||||
|
import seezunImage from "../src/images/seezun.webp";
|
||||||
|
import seezunLogo from "../src/images/seezun-logo.png";
|
||||||
|
|
||||||
const projectMetrics = [
|
const projectData = {
|
||||||
{
|
hero: {
|
||||||
icon: <ShoppingBag className="w-8 h-8" />,
|
title: "Seezun: Your Seasonal Fashion & Lifestyle Hub",
|
||||||
label: "Active Users",
|
subtitle: "Rent, Buy, or Sell South Asian Clothing",
|
||||||
value: "50K+",
|
subtitleTwo: "Discover a new way to update your wardrobe, rent, buy, or sell both new and preloved South Asian outfits on Seezun. Enjoy simple, seamless exchanges for every style and every occasion.",
|
||||||
description: "Fashion enthusiasts connected"
|
imageUrl: "https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=800&h=600&fit=crop&crop=center",
|
||||||
|
imageAlt: "Seezun App Showcase"
|
||||||
},
|
},
|
||||||
{
|
details: {
|
||||||
icon: <Recycle className="w-8 h-8" />,
|
technologies: [
|
||||||
label: "Sustainability Impact",
|
{ name: "React Native", icon: <Smartphone className="w-4 h-4" /> },
|
||||||
value: "+85%",
|
{ name: "ReactJs", icon: <Globe className="w-4 h-4" /> },
|
||||||
description: "Reduction in fashion waste"
|
{ name: "Laravel", icon: <Server className="w-4 h-4" /> },
|
||||||
|
{ name: "MySQL", icon: <Database className="w-4 h-4" /> },
|
||||||
|
{ name: "AWS", icon: <Cloud className="w-4 h-4" /> }
|
||||||
|
],
|
||||||
|
industries: ["Eccomerce", "Retail Technology", "Fashion & Lifestyle"],
|
||||||
|
duration: "7 Months, Aug 2023 – Feb 2024",
|
||||||
|
teamSize: "4 developers, 2 designers, 1 QA, 1 PM",
|
||||||
|
platforms: ["Android", "iOS", "Admin Web Portal"]
|
||||||
},
|
},
|
||||||
{
|
achievements: [
|
||||||
icon: <Tag className="w-8 h-8" />,
|
{ label: "Active Users", value: "50K+", description: "Fashion enthusiasts connected" },
|
||||||
label: "Transaction Growth",
|
{ label: "Sustainability Impact", value: "+85%", description: "Reduction in fashion waste" },
|
||||||
value: "+200%",
|
{ label: "Transaction Growth", value: "+200%", description: "Monthly marketplace activity" }
|
||||||
description: "Monthly marketplace activity"
|
],
|
||||||
}
|
executiveSummary: {
|
||||||
];
|
content: "Seezun reimagines the South Asian clothing market with a customer-driven platform connecting buyers, sellers, and renters. By analyzing preferences, trends, and inventory, Seezun offers a seamless, tailored shopping experience, making fashion accessible, sustainable, and affordable."
|
||||||
|
},
|
||||||
|
businessObjectives: [
|
||||||
|
"Launch seasonal style collections curated by fashion experts for every occasion",
|
||||||
|
"Build a diverse vendor marketplace with trusted sellers, secure checkout, and live order tracking",
|
||||||
|
"Develop a vendor self-service hub with easy onboarding, tagging, and detailed sales insights",
|
||||||
|
"Deliver a seamless shopping experience combining tradition, convenience, and community trust"
|
||||||
|
],
|
||||||
|
|
||||||
const keyFeatures = [
|
coreFeatures: [
|
||||||
{
|
{
|
||||||
title: "Rental Marketplace",
|
title: "Rental Marketplace",
|
||||||
description: "Rent South Asian clothing for special occasions, making premium fashion accessible and affordable."
|
description:
|
||||||
|
"Rent premium South Asian clothing for special occasions, making high-quality fashion both accessible and affordable.",
|
||||||
|
icon: <ShoppingBag className="w-6 h-6" />
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Buy & Sell Platform",
|
title: "Buy & Sell Platform",
|
||||||
description: "Purchase new and pre-loved clothing from verified sellers with secure payment processing."
|
description:
|
||||||
|
"Shop new and pre-loved clothing from trusted sellers, with secure payment processing for a safe experience.",
|
||||||
|
icon: <Repeat className="w-6 h-6" />
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Sustainable Fashion Focus",
|
title: "Sustainable Fashion Focus",
|
||||||
description: "Promote circular fashion economy by encouraging reuse and extending garment lifecycles."
|
description:
|
||||||
|
"Champion circular fashion by encouraging garment reuse and extending lifespan within the community.",
|
||||||
|
icon: <Leaf className="w-6 h-6" />
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Authentic South Asian Styles",
|
title: "Authentic South Asian Styles",
|
||||||
description: "Curated collection of traditional and contemporary South Asian clothing and accessories."
|
description:
|
||||||
|
"Discover curated collections blending traditional and contemporary South Asian clothing and accessories.",
|
||||||
|
icon: <Sparkles className="w-6 h-6" />
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Size & Fit Matching",
|
title: "Size & Fit Matching",
|
||||||
description: "Advanced size recommendation system ensuring perfect fit for every customer."
|
description:
|
||||||
|
"Advanced size recommendation system that helps customers find the perfect fit effortlessly.",
|
||||||
|
icon: <Ruler className="w-6 h-6" />
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Community Reviews",
|
title: "Community Reviews",
|
||||||
description: "Trusted rating system with detailed reviews from verified customers and renters."
|
description:
|
||||||
|
"Reliable ratings and detailed feedback from verified buyers and renters, fostering trust and informed choices.",
|
||||||
|
icon: <Star className="w-6 h-6" />
|
||||||
}
|
}
|
||||||
];
|
],
|
||||||
|
developmentPhases: [
|
||||||
const processPhases = [
|
|
||||||
{
|
{
|
||||||
phase: "Phase 1",
|
phase: "Approach",
|
||||||
title: "Discovery & Market Research",
|
duration: "Ongoing",
|
||||||
icon: <Search className="w-6 h-6" />,
|
description: "Agile methodology with 2-week sprints ensuring flexibility and rapid iteration.",
|
||||||
description: "Conducted extensive research into South Asian fashion market trends and customer behavior patterns.",
|
icon: <Repeat className="w-5 h-5" />,
|
||||||
details: "Analyzed competitor landscape, identified key pain points in traditional clothing shopping, and defined unique value propositions for rent-buy-sell model. Developed comprehensive user personas and market positioning strategy."
|
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
phase: "Collaboration",
|
||||||
|
duration: "Throughout project",
|
||||||
|
description: "Seamless teamwork using Slack, Jira, and Figma for communication and design collaboration.",
|
||||||
|
icon: <Users className="w-5 h-5" />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
phase: "Testing",
|
||||||
|
duration: "Parallel with development",
|
||||||
|
description: "Automated unit and integration testing, with cross-device verification via Firebase Test Lab.",
|
||||||
|
icon: <TestTube className="w-5 h-5" />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
phase: "Security",
|
||||||
|
duration: "Continuous",
|
||||||
|
description: "Payment PCI DSS compliance and end-to-end encryption for sensitive data handling.",
|
||||||
|
icon: <ShieldCheck className="w-5 h-5" />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
phase: "Testing & QA",
|
||||||
|
duration: "1 week",
|
||||||
|
description: "Comprehensive testing, bug fixes, and performance optimization",
|
||||||
|
icon: <CheckCircle className="w-5 h-5" />
|
||||||
|
}
|
||||||
|
],
|
||||||
|
resultsMetrics: [
|
||||||
|
{ label: "App Downloads", value: "12K+", description: "Within 3 months of launch" },
|
||||||
|
{ label: "Conversion Rate", value: "68%", description: "From lookbook view to product page" },
|
||||||
|
{ label: "Repeat Purchases", value: "40%", description: "Within first 60 days" },
|
||||||
|
{ label: "Session Duration", value: "7.5 min", description: "Average time per session" },
|
||||||
|
{ label: "Vendor Satisfaction", value: "4.6/5", description: "Average vendor rating" },
|
||||||
|
],
|
||||||
|
technicalAchievements: [
|
||||||
|
"Built seasonal tagging & curation system for automated campaigns",
|
||||||
|
"Reduced image load time by 53% using AWS CloudFront caching",
|
||||||
|
"Payment gateway integration with automatic vendor revenue split",
|
||||||
|
],
|
||||||
|
futureRoadmap: [
|
||||||
{
|
{
|
||||||
phase: "Phase 2",
|
phase: "Phase 2",
|
||||||
title: "UX Design & Prototyping",
|
features: ["AI-powered shopping list suggestions", "Store discount tracking integration", "Recipe-based automatic list generation"]
|
||||||
icon: <Figma className="w-6 h-6" />,
|
|
||||||
description: "Created intuitive user journeys for browsing, renting, buying, and selling South Asian clothing.",
|
|
||||||
details: "Designed mobile-first interface with cultural sensitivity and accessibility in mind. Built interactive prototypes for user testing and stakeholder validation. Established visual design system reflecting South Asian aesthetic preferences."
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
phase: "Phase 3",
|
phase: "Phase 3",
|
||||||
title: "Marketplace Development",
|
features: ["Voice command grocery planning with smart assistants", "Household budget tracking and spend reports", "Integration with grocery delivery and eCommerce platforms"]
|
||||||
icon: <Zap className="w-6 h-6" />,
|
|
||||||
description: "Built robust marketplace platform with rental management, inventory tracking, and payment processing.",
|
|
||||||
details: "Implemented agile development methodology with weekly sprints. Developed custom rental calendar system, automated pricing algorithms, and multi-vendor management tools. Integrated secure payment gateways and shipping logistics."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
phase: "Phase 4",
|
|
||||||
title: "Quality Assurance & Testing",
|
|
||||||
icon: <Shield className="w-6 h-6" />,
|
|
||||||
description: "Comprehensive testing across all user flows, payment systems, and rental management features.",
|
|
||||||
details: "Performed extensive functional testing, security audits, and performance optimization. Conducted user acceptance testing with beta customers. Implemented fraud detection and content moderation systems for marketplace safety."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
phase: "Phase 5",
|
|
||||||
title: "Platform Deployment",
|
|
||||||
icon: <Settings className="w-6 h-6" />,
|
|
||||||
description: "Deployed scalable cloud infrastructure with automated deployment pipelines and monitoring systems.",
|
|
||||||
details: "Set up containerized microservices architecture for optimal scalability. Implemented automated backup systems, real-time monitoring, and performance analytics. Established robust CI/CD pipeline for continuous feature delivery."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
phase: "Phase 6",
|
|
||||||
title: "Launch & Growth",
|
|
||||||
icon: <Rocket className="w-6 h-6" />,
|
|
||||||
description: "Executed successful market launch with comprehensive marketing strategy and customer onboarding.",
|
|
||||||
details: "Coordinated launch campaign targeting South Asian communities globally. Implemented customer acquisition strategies, vendor onboarding programs, and community building initiatives. Established ongoing support and feature enhancement roadmap."
|
|
||||||
}
|
}
|
||||||
];
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
export const SeezunProject = () => {
|
export const SeezunProject = () => {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
return (
|
return (
|
||||||
<div className="dark min-h-screen bg-background">
|
<div className="dark min-h-screen bg-background">
|
||||||
{/* <Navigation /> */}
|
|
||||||
|
|
||||||
{/* Hero Section */}
|
{/* Section 1: Hero with Heading, Subheading, and Image */}
|
||||||
<section className="relative pt-24 pb-16 bg-background overflow-hidden">
|
<PortfolioHero
|
||||||
<GridPattern strokeDasharray="4 2" />
|
title={projectData.hero.title}
|
||||||
|
subtitle={projectData.hero.subtitle}
|
||||||
<div className="relative z-10 container mx-auto px-6 lg:px-8">
|
subtitleTwo={projectData.hero.subtitleTwo}
|
||||||
{/* Back Button */}
|
imageUrl={seezunImage}
|
||||||
<motion.div
|
imageAlt={projectData.hero.imageAlt}
|
||||||
initial={{ opacity: 0, x: -20 }}
|
|
||||||
animate={{ opacity: 1, x: 0 }}
|
|
||||||
transition={{ duration: 0.6 }}
|
|
||||||
className="mb-8"
|
|
||||||
>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
onClick={() => navigate('/case-studies')}
|
|
||||||
className="text-muted-foreground hover:text-foreground flex items-center gap-2 px-0"
|
|
||||||
>
|
|
||||||
<ArrowLeft className="w-4 h-4" />
|
|
||||||
Back to Case Studies
|
|
||||||
</Button>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
|
||||||
{/* Content */}
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 30 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ duration: 0.8 }}
|
|
||||||
>
|
|
||||||
<h1 className="text-4xl lg:text-6xl font-semibold text-foreground mb-6 leading-tight">
|
|
||||||
<span className="text-accent">Seezun:</span>{" "}
|
|
||||||
Your Seasonal Fashion & Lifestyle Hub
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p className="text-xl text-muted-foreground mb-6 leading-relaxed">
|
|
||||||
Rent, Buy, or Sell South Asian Clothing
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p className="text-lg text-muted-foreground mb-8 leading-relaxed">
|
|
||||||
Discover a new way to update your wardrobe, rent, buy, or sell both new and preloved South Asian outfits on Seezun. Enjoy simple, seamless exchanges for every style and every occasion.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="flex flex-wrap gap-3 mb-6">
|
|
||||||
<span className="px-4 py-2 bg-accent text-accent-foreground font-semibold rounded-[10px]">
|
|
||||||
South Asian Style
|
|
||||||
</span>
|
|
||||||
<span className="px-3 py-2 bg-muted text-muted-foreground text-sm rounded-[10px]">
|
|
||||||
E-commerce
|
|
||||||
</span>
|
|
||||||
<span className="px-3 py-2 bg-muted text-muted-foreground text-sm rounded-[10px]">
|
|
||||||
Marketplace
|
|
||||||
</span>
|
|
||||||
<span className="px-3 py-2 bg-muted text-muted-foreground text-sm rounded-[10px]">
|
|
||||||
Fashion
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Project Image */}
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 30 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ duration: 0.8, delay: 0.2 }}
|
|
||||||
className="relative aspect-[4/3] overflow-hidden bg-muted/30 rounded-[10px] px-2"
|
|
||||||
>
|
|
||||||
<ImageWithFallback
|
|
||||||
src={seezunImage}
|
|
||||||
alt="Seezun mobile app showcasing South Asian clothing rental marketplace with woman in traditional red saree"
|
|
||||||
className="w-full h-full object-contain object-center rounded-[10px]"
|
|
||||||
/>
|
/>
|
||||||
</motion.div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Metrics Section */}
|
{/* Section 2: Project Details */}
|
||||||
<section className="py-16 bg-card/30">
|
<PortfolioProjectDetails
|
||||||
<div className="container mx-auto px-6 lg:px-8">
|
details={projectData.details}
|
||||||
<motion.div
|
achievements={projectData.achievements}
|
||||||
initial={{ opacity: 0, y: 20 }}
|
/>
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ duration: 0.8 }}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
className="grid md:grid-cols-3 gap-8"
|
|
||||||
>
|
|
||||||
{projectMetrics.map((metric, index) => (
|
|
||||||
<motion.div
|
|
||||||
key={metric.label}
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ duration: 0.6, delay: index * 0.01 }}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
className="text-center"
|
|
||||||
>
|
|
||||||
<div className="flex justify-center mb-4 text-accent">
|
|
||||||
{metric.icon}
|
|
||||||
</div>
|
|
||||||
<div className="text-3xl font-semibold text-foreground mb-2">
|
|
||||||
{metric.value}
|
|
||||||
</div>
|
|
||||||
<div className="text-lg font-medium text-foreground mb-1">
|
|
||||||
{metric.label}
|
|
||||||
</div>
|
|
||||||
<div className="text-sm text-muted-foreground">
|
|
||||||
{metric.description}
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
))}
|
|
||||||
</motion.div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Main Content Section */}
|
{/* Executive Summary */}
|
||||||
<section className="py-20 bg-background">
|
<PortfolioExecutiveSummary
|
||||||
<div className="container mx-auto px-6 lg:px-8">
|
content={projectData.executiveSummary.content}
|
||||||
<div className="max-w-4xl mx-auto">
|
/>
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 30 }}
|
{/* Project Overview */}
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
<section className="py-24 bg-background">
|
||||||
transition={{ duration: 0.8 }}
|
<div className="container mx-auto px-4 lg:px-6">
|
||||||
viewport={{ once: true }}
|
<div className="max-w-6xl mx-auto text-center mb-16">
|
||||||
className="mb-16"
|
<h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-6">
|
||||||
>
|
Project Overview
|
||||||
<h2 className="text-3xl lg:text-4xl font-semibold text-foreground mb-6">
|
|
||||||
Transfigured the South Asian Clothing Market in Seezun
|
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-lg text-muted-foreground leading-relaxed">
|
|
||||||
Created Seezun as a dynamic customer-driven platform connecting buyers, sellers, and renters for a seamless marketplace that renders fashion accessible, sustainable, and affordable.
|
|
||||||
</p>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Key Features */}
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 30 }}
|
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ duration: 0.8, delay: 0.4 }}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
className="mb-20"
|
|
||||||
>
|
|
||||||
<h3 className="text-2xl lg:text-3xl font-semibold text-foreground mb-8">
|
|
||||||
Key Features & Capabilities
|
|
||||||
</h3>
|
|
||||||
<div className="grid md:grid-cols-2 gap-6">
|
|
||||||
{keyFeatures.map((feature, index) => (
|
|
||||||
<motion.div
|
|
||||||
key={feature.title}
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ duration: 0.6, delay: index * 0.01 }}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
className="bg-card/50 rounded-[10px] p-6 border border-border/50"
|
|
||||||
>
|
|
||||||
<h4 className="text-lg font-semibold text-foreground mb-3">
|
|
||||||
{feature.title}
|
|
||||||
</h4>
|
|
||||||
<p className="text-muted-foreground leading-relaxed">
|
|
||||||
{feature.description}
|
|
||||||
</p>
|
|
||||||
</motion.div>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Project Delivery Process */}
|
<div className="grid lg:grid-cols-3 gap-12">
|
||||||
<motion.div
|
<PortfolioProjectOverview
|
||||||
initial={{ opacity: 0, y: 30 }}
|
icon={<Globe className="w-8 h-8 text-accent" />}
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
title="Background & Context"
|
||||||
transition={{ duration: 0.8, delay: 0.6 }}
|
description="Access to premium South Asian fashion is often limited by high costs, low availability, and the lack of trusted rental or resale options. This platform bridges that gap by making luxury ethnic wear accessible, affordable, and sustainable for all."
|
||||||
viewport={{ once: true }}
|
borderColor="border-accent/20"
|
||||||
>
|
hoverColor="accent"
|
||||||
<h3 className="text-2xl lg:text-3xl font-semibold text-foreground mb-8">
|
|
||||||
Project Delivery Lifecycle
|
|
||||||
</h3>
|
|
||||||
<div className="relative">
|
|
||||||
{/* Continuous background line */}
|
|
||||||
<div className="absolute left-6 top-6 bottom-6 w-0.5 bg-gradient-to-b from-accent/30 via-accent/20 to-accent/30 hidden lg:block" />
|
|
||||||
{/* Animated line overlay */}
|
|
||||||
<motion.div
|
|
||||||
initial={{ scaleY: 0 }}
|
|
||||||
whileInView={{ scaleY: 1 }}
|
|
||||||
transition={{ duration: 1.5, delay: 0.5 }}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
className="absolute left-6 top-6 bottom-6 w-0.5 bg-gradient-to-b from-accent/50 via-accent/30 to-accent/50 hidden lg:block origin-top"
|
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div className="space-y-8 lg:space-y-10">
|
<PortfolioProjectOverview
|
||||||
{processPhases.map((phase, index) => (
|
icon={<Users className="w-8 h-8 text-blue-400" />}
|
||||||
<motion.div
|
title="Target Audience"
|
||||||
key={phase.phase}
|
description="Fashion-conscious individuals and South Asian communities seeking affordable access to premium traditional and contemporary clothing through renting, buying, or selling."
|
||||||
initial={{ opacity: 0, x: -20 }}
|
borderColor="border-blue-400/20"
|
||||||
whileInView={{ opacity: 1, x: 0 }}
|
hoverColor="blue-400"
|
||||||
transition={{ duration: 0.6, delay: index * 0.01 }}
|
/>
|
||||||
viewport={{ once: true }}
|
|
||||||
className="relative"
|
|
||||||
>
|
|
||||||
{/* Mobile connection line */}
|
|
||||||
{index < processPhases.length - 1 && (
|
|
||||||
<div className="absolute left-6 top-16 w-0.5 h-16 bg-gradient-to-b from-accent/40 to-accent/20 lg:hidden" />
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="flex flex-col lg:flex-row gap-6">
|
<PortfolioProjectOverview
|
||||||
{/* Phase indicator with fixed width container */}
|
icon={<Target className="w-8 h-8 text-green-400" />}
|
||||||
<div className="flex items-center gap-4 lg:w-[220px] lg:flex-shrink-0">
|
title="Business Objectives"
|
||||||
{/* Icon with background to mask the line */}
|
points={projectData.businessObjectives}
|
||||||
<div className="relative z-10">
|
borderColor="border-green-400/20"
|
||||||
<div className="flex items-center justify-center w-12 h-12 bg-background border-2 border-accent/50 rounded-full flex-shrink-0 shadow-lg">
|
hoverColor="green-400"
|
||||||
<div className="text-accent">
|
/>
|
||||||
{phase.icon}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/* Icon glow effect */}
|
|
||||||
<div className="absolute inset-0 flex items-center justify-center w-12 h-12 bg-accent/10 rounded-full -z-10 animate-pulse" />
|
|
||||||
{/* Connection dot for timeline */}
|
|
||||||
<div className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-2 h-2 bg-accent rounded-full -z-20 hidden lg:block" />
|
|
||||||
</div>
|
|
||||||
<div className="min-w-0 flex-1 lg:flex-initial">
|
|
||||||
<div className="text-sm font-medium text-accent mb-1 flex items-center gap-2">
|
|
||||||
<span className="w-5 h-5 bg-accent/20 rounded-full flex items-center justify-center text-xs text-accent font-bold">
|
|
||||||
{index + 1}
|
|
||||||
</span>
|
|
||||||
{phase.phase}
|
|
||||||
</div>
|
|
||||||
<div className="text-lg font-semibold text-foreground leading-tight">
|
|
||||||
{phase.title}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Content with consistent left alignment */}
|
|
||||||
<div className="flex-1 bg-card/30 rounded-[10px] p-6 border border-border/30 lg:ml-0">
|
|
||||||
<p className="text-muted-foreground leading-relaxed mb-4">
|
|
||||||
{phase.description}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p className="text-muted-foreground/80 leading-relaxed text-sm">
|
|
||||||
{phase.details}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
{/* Core Features */}
|
||||||
|
<PortfolioCoreFeatures
|
||||||
|
title="Core Features & Functionality"
|
||||||
|
subtitle="A comprehensive suite of tools designed to revolutionize household grocery management with smart automation and collaboration."
|
||||||
|
features={projectData.coreFeatures}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Challenges & Solution Architecture */}
|
||||||
|
<PortfolioChallengeSolution
|
||||||
|
challenges={[
|
||||||
|
{
|
||||||
|
icon: <Cpu className="w-6 h-6" />,
|
||||||
|
title: "Technical Challenges",
|
||||||
|
description: "Building a real-time AI recommendation engine within MVP timelines, implementing split-payment workflows across multiple vendors, and optimizing media-heavy seasonal lookbooks for mobile.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <Split className="w-6 h-6" />,
|
||||||
|
title: "Project Management Challenges",
|
||||||
|
description: "Coordinating between fashion consultants, AI developers, and backend engineers, while managing seasonal content updates without downtime.",
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
|
||||||
|
technologyStack={[
|
||||||
|
{ icon: <Smartphone className="w-5 h-5 text-accent" />, label: "Frontend: React native (mobile), React.js (Webapp)" },
|
||||||
|
{ icon: <Server className="w-5 h-5 text-accent" />, label: "Backend: Laravel (PHP) with modular microservices" },
|
||||||
|
{ icon: <Database className="w-5 h-5 text-accent" />, label: "Database: MySQL" },
|
||||||
|
{ icon: <Cloud className="w-5 h-5 text-accent" />, label: "Cloud: AWS EC2, CloudFront, S3 (for media)" },
|
||||||
|
]}
|
||||||
|
highlights={[
|
||||||
|
{ text: "Premium South Asian clothing rentals for every occasion" },
|
||||||
|
{ text: "Secure buy & sell platform for new and pre-loved fashion" },
|
||||||
|
{ text: "Sustainable circular fashion promoting garment reuse" },
|
||||||
|
{ text: "Advanced size matching with authentic community reviews" },
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Development Process */}
|
||||||
|
<PortfolioDevelopmentProcess
|
||||||
|
title="Development Process & Methodology"
|
||||||
|
subtitle=""
|
||||||
|
phases={projectData.developmentPhases}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Results & Impact */}
|
||||||
|
<PortfolioResultsImpact
|
||||||
|
title="Results & Business Impact"
|
||||||
|
subtitle="The platform has revolutionized access to South Asian fashion by driving higher rental engagement, boosting resale transactions, expanding vendor participation, and promoting sustainable wardrobe practices across the community."
|
||||||
|
metrics={projectData.resultsMetrics}
|
||||||
|
achievements={projectData.technicalAchievements}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Lessons Learned */}
|
||||||
|
<PortfolioLessonsSection
|
||||||
|
title="Lessons Learned"
|
||||||
|
description="Key insights and learnings from the RanOutOf development journey."
|
||||||
|
workedTitle="What Worked Well"
|
||||||
|
workedIcon={<CheckCircle className="w-6 h-6" />}
|
||||||
|
workedColor="#22c55e" // Tailwind green-500
|
||||||
|
workedLessons={[
|
||||||
|
"Seamless Rentals and Bargaining Feature",
|
||||||
|
"Seasonal lookbooks increased browsing time and purchase intent",
|
||||||
|
"Vendor self-management tools reduced admin workload",
|
||||||
|
]}
|
||||||
|
improveTitle="Areas for Improvement"
|
||||||
|
improveIcon={<ArrowRight className="w-6 h-6" />}
|
||||||
|
improveColor="#eab308" // Tailwind yellow-500
|
||||||
|
improveLessons={[
|
||||||
|
"More robust A/B testing for recommendation algorithms",
|
||||||
|
"Expand seasonal tagging into hyperlocal weather-based recommendations",
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Future Roadmap */}
|
||||||
|
<PortfolioRoadmapSection
|
||||||
|
title="Future Roadmap"
|
||||||
|
description="Planned enhancements and features to further revolutionize grocery management apps."
|
||||||
|
roadmapItems={projectData.futureRoadmap}
|
||||||
|
icon={<ArrowRight className="w-5 h-5" />}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Client Testimonial */}
|
||||||
|
<PortfolioTestimonial
|
||||||
|
logo={seezunLogo}
|
||||||
|
alt="Seezun Logo"
|
||||||
|
rating={5}
|
||||||
|
testimonial="“WDI delivered a cutting-edge, scalable platform that exceeded expectations. Their AI integration and vendor management tools gave us a strong advantage in the fashion-tech market. Their expertise and responsiveness made them a trusted partner throughout the project.”"
|
||||||
|
clientName="Urmila"
|
||||||
|
clientRole=" Product Manager, Seezun"
|
||||||
|
/>
|
||||||
|
|
||||||
{/* CTA Section */}
|
{/* CTA Section */}
|
||||||
<section className="py-16 bg-card/30">
|
<section className="py-24 bg-background">
|
||||||
<div className="container mx-auto px-6 lg:px-8">
|
<div className="container mx-auto px-4 lg:px-6">
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, y: 30 }}
|
initial={{ opacity: 0, y: 30 }}
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
transition={{ duration: 0.8 }}
|
transition={{ duration: 0.8 }}
|
||||||
viewport={{ once: true }}
|
viewport={{ once: true }}
|
||||||
className="text-center max-w-3xl mx-auto"
|
className="max-w-4xl mx-auto text-center"
|
||||||
>
|
>
|
||||||
<h3 className="text-2xl lg:text-3xl font-semibold text-foreground mb-6">
|
<h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-8">
|
||||||
Ready to Transform Your Fashion Marketplace?
|
Ready to Transform Your Fashion Marketplace?
|
||||||
</h3>
|
</h2>
|
||||||
<p className="text-lg text-muted-foreground mb-8 leading-relaxed">
|
<p className="text-xl text-muted-foreground mb-12 max-w-3xl mx-auto">
|
||||||
Let's create a sustainable fashion platform together. From concept to launch, we'll help you build a marketplace that revolutionizes how people shop, rent, and sell clothing.
|
Let's create a sustainable fashion platform together. From concept to launch, we'll help you build a marketplace that revolutionizes how people shop, rent, and sell clothing.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||||
<Button
|
<Button
|
||||||
className="bg-accent hover:bg-accent/90 text-accent-foreground px-8 py-3 rounded-[10px]"
|
size="lg"
|
||||||
onClick={() => navigate('/start-a-project')}
|
onClick={() => navigate('/contact-us')}
|
||||||
|
className="bg-accent hover:bg-accent/90 text-accent-foreground"
|
||||||
>
|
>
|
||||||
Start Your Project <ExternalLink className="w-4 h-4 ml-2" />
|
Start Your Project
|
||||||
|
<ArrowRight className="w-5 h-5 ml-2" />
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
|
size="lg"
|
||||||
variant="outline"
|
variant="outline"
|
||||||
className="border-border hover:bg-muted px-8 py-3 rounded-[10px]"
|
|
||||||
onClick={() => navigate('/case-studies')}
|
onClick={() => navigate('/case-studies')}
|
||||||
|
className="border-accent/30 text-accent hover:bg-accent/10"
|
||||||
>
|
>
|
||||||
View More Case Studies
|
View More Case Studies
|
||||||
|
<ExternalLink className="w-5 h-5 ml-2" />
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* <Footer /> */}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -1,397 +1,413 @@
|
|||||||
|
import PortfolioChallengeSolution from "@/components/portfolio/PortfolioChallengeSolution";
|
||||||
|
import { PortfolioCoreFeatures } from "@/components/portfolio/PortfolioCoreFeatures";
|
||||||
|
import { PortfolioDevelopmentProcess } from "@/components/portfolio/PortfolioDevelopmentProcess";
|
||||||
|
import { PortfolioExecutiveSummary } from "@/components/portfolio/PortfolioExecutiveSummary";
|
||||||
|
import { PortfolioHero } from "@/components/portfolio/PortfolioHero";
|
||||||
|
import PortfolioLessonsSection from "@/components/portfolio/PortfolioLessonsSection";
|
||||||
|
import { PortfolioProjectDetails } from "@/components/portfolio/PortfolioProjectDetails";
|
||||||
|
import { PortfolioProjectOverview } from "@/components/portfolio/PortfolioProjectOverview";
|
||||||
|
import { PortfolioResultsImpact } from "@/components/portfolio/PortfolioResultsImpact";
|
||||||
|
import PortfolioRoadmapSection from "@/components/portfolio/PortfolioRoadmapSection";
|
||||||
|
import PortfolioTestimonial from "@/components/portfolio/PortfolioTestimonial";
|
||||||
import { motion } from "framer-motion";
|
import { motion } from "framer-motion";
|
||||||
import { ArrowLeft, ExternalLink, Users, BookOpen, TrendingUp, Search, Figma, Zap, Shield, Settings, Rocket, PlayCircle, Heart, Star } from "lucide-react";
|
import {
|
||||||
import { Navigation } from "../components/Navigation";
|
Activity,
|
||||||
import { Footer } from "../components/Footer";
|
AlertTriangle,
|
||||||
import { Button } from "../components/ui/button";
|
ArrowRight,
|
||||||
import { GridPattern } from "../components/GridPattern";
|
BarChart,
|
||||||
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
|
Bell,
|
||||||
import wokaImage from "../src/images/woka-side-award.webp"
|
Brain,
|
||||||
|
CheckCircle,
|
||||||
|
Cloud,
|
||||||
|
CloudCog,
|
||||||
|
Code,
|
||||||
|
Cpu,
|
||||||
|
Database,
|
||||||
|
ExternalLink,
|
||||||
|
Film,
|
||||||
|
Gamepad,
|
||||||
|
Globe,
|
||||||
|
Home,
|
||||||
|
List,
|
||||||
|
Mic,
|
||||||
|
Palette,
|
||||||
|
PlayCircle,
|
||||||
|
RefreshCcw,
|
||||||
|
Repeat,
|
||||||
|
Scan,
|
||||||
|
Server,
|
||||||
|
Share2,
|
||||||
|
ShieldCheck,
|
||||||
|
Smartphone,
|
||||||
|
Split,
|
||||||
|
Target,
|
||||||
|
TestTube,
|
||||||
|
Users,
|
||||||
|
Zap
|
||||||
|
} from "lucide-react";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
|
import { Button } from "../components/ui/button";
|
||||||
|
import wokaImage from "../src/images/woka-side-award.webp";
|
||||||
|
import wokaLogo from "../src/images/woka-logo.png";
|
||||||
|
|
||||||
|
// Project data
|
||||||
|
|
||||||
const projectMetrics = [
|
const projectData = {
|
||||||
|
hero: {
|
||||||
|
title: "Woka - Changing the Way Kids Learn and Play",
|
||||||
|
subtitle: "Animated Shows, Video Games, and Web Series for Kids",
|
||||||
|
subtitleTwo: "Transform learning into an exciting adventure. Offering a wide range of animated content, interactive video games, and engaging web series, every feature is crafted to inspire and educate children through playful experiences.",
|
||||||
|
imageUrl: wokaImage,
|
||||||
|
imageAlt: "Woka App Showcase"
|
||||||
|
},
|
||||||
|
details: {
|
||||||
|
technologies: [
|
||||||
|
{ name: "Swift (iOS)", icon: <Smartphone className="w-4 h-4" /> },
|
||||||
|
{ name: "Kotlin (Android)", icon: <Smartphone className="w-4 h-4" /> },
|
||||||
|
{ name: "Node.js", icon: <Server className="w-4 h-4" /> },
|
||||||
|
{ name: "MongoDB", icon: <Database className="w-4 h-4" /> },
|
||||||
|
{ name: "AWS", icon: <Cloud className="w-4 h-4" /> },
|
||||||
|
{ name: "Firebase Analytics", icon: <BarChart className="w-4 h-4" /> }
|
||||||
|
],
|
||||||
|
industries: ["Edtech", "Entertainment"],
|
||||||
|
duration: "6 months, November 2023 – April 2024",
|
||||||
|
teamSize: "4 Mobile Developers, 1 Backend Developer, 1 Designer, 1 QA Engineer, 1 PM",
|
||||||
|
platforms: ["iOS", "Android"]
|
||||||
|
},
|
||||||
|
|
||||||
|
achievements: [
|
||||||
|
{
|
||||||
|
label: "Reduced App Load Time",
|
||||||
|
value: "47%",
|
||||||
|
description: "Faster startup enhancing user experience",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Crash-Free Sessions",
|
||||||
|
value: "99.8%",
|
||||||
|
description: "Ensured app stability and reliability",
|
||||||
|
},
|
||||||
{
|
{
|
||||||
icon: <PlayCircle className="w-8 h-8" />,
|
|
||||||
label: "Active Young Learners",
|
label: "Active Young Learners",
|
||||||
value: "100K+",
|
value: "100K+",
|
||||||
description: "Kids engaged in learning activities"
|
description: "Kids engaged in learning activities",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: <Heart className="w-8 h-8" />,
|
|
||||||
label: "User Retention",
|
label: "User Retention",
|
||||||
value: "+300%",
|
value: "+300%",
|
||||||
description: "Increase in daily active users"
|
description: "Increase in daily active users",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: <Star className="w-8 h-8" />,
|
|
||||||
label: "Parent Satisfaction",
|
label: "Parent Satisfaction",
|
||||||
value: "95%",
|
value: "95%",
|
||||||
description: "Parents recommend Woka"
|
description: "Parents recommend Woka",
|
||||||
}
|
},
|
||||||
];
|
],
|
||||||
|
executiveSummary: {
|
||||||
const keyFeatures = [
|
content: "Developed Woka as a vibrant platform where learning meets play. With a safe and fun environment to explore, learn, and grow effortlessly."
|
||||||
|
},
|
||||||
|
businessObjectives: [
|
||||||
|
"Redevelop app natively for optimized performance",
|
||||||
|
"Update UI/UX to match modern design standards",
|
||||||
|
"Ensure backend stability and reduce downtime",
|
||||||
|
"Implement monitoring & analytics for continuous improvement"
|
||||||
|
],
|
||||||
|
coreFeatures: [
|
||||||
{
|
{
|
||||||
title: "Animated Learning Content",
|
title: "Animated Learning Content",
|
||||||
description: "Engaging animated shows that make learning fun and memorable for kids of all ages."
|
description: "Engaging animated shows that make learning fun and memorable for kids of all ages.",
|
||||||
|
icon: <Film className="w-6 h-6" /> // 🎬 Animated shows icon
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Interactive Video Games",
|
title: "Interactive Video Games",
|
||||||
description: "Educational games that combine entertainment with learning objectives and skill development."
|
description: "Educational games that combine entertainment with learning objectives and skill development.",
|
||||||
|
icon: <Gamepad className="w-6 h-6" /> // 🎮 Game icon
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Educational Web Series",
|
title: "Educational Web Series",
|
||||||
description: "Structured learning content delivered through engaging episodic format."
|
description: "Structured learning content delivered through engaging episodic format.",
|
||||||
|
icon: <PlayCircle className="w-6 h-6" /> // ▶️ Video/Web series icon
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Safe Learning Environment",
|
title: "Safe Learning Environment",
|
||||||
description: "Child-friendly platform with robust safety measures and parental controls."
|
description: "Child-friendly platform with robust safety measures and parental controls.",
|
||||||
|
icon: <ShieldCheck className="w-6 h-6" /> // 🛡️ Safety icon
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Progress Tracking",
|
title: "Progress Tracking",
|
||||||
description: "Comprehensive analytics for parents and educators to monitor learning progress."
|
description: "Comprehensive analytics for parents and educators to monitor learning progress.",
|
||||||
|
icon: <BarChart className="w-6 h-6" /> // 📊 Analytics icon
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Multi-Device Compatibility",
|
title: "Multi-Device Compatibility",
|
||||||
description: "Seamless experience across tablets, smartphones, and computers."
|
description: "Seamless experience across tablets, smartphones, and computers.",
|
||||||
|
icon: <Smartphone className="w-6 h-6" /> // 📱 Devices icon
|
||||||
}
|
}
|
||||||
];
|
],
|
||||||
|
developmentPhases: [
|
||||||
|
{
|
||||||
|
phase: "Approach & Planning",
|
||||||
|
duration: "Ongoing",
|
||||||
|
description: "Agile methodology with phased module redevelopment to ensure smooth migration and feature parity.",
|
||||||
|
icon: <Repeat className="w-5 h-5" /> // 🔁 Agile / iterative process
|
||||||
|
},
|
||||||
|
{
|
||||||
|
phase: "Sprints",
|
||||||
|
duration: "2-week cycles",
|
||||||
|
description: "Feature parity milestones achieved in each sprint to maintain continuity and user experience.",
|
||||||
|
icon: <Activity className="w-5 h-5" /> // ⚡ Sprint cycles icon
|
||||||
|
},
|
||||||
|
{
|
||||||
|
phase: "Testing",
|
||||||
|
duration: "Throughout development",
|
||||||
|
description: "Unit, integration, and device lab testing to ensure stability and performance across all modules.",
|
||||||
|
icon: <TestTube className="w-5 h-5" /> // 🧪 Testing icon
|
||||||
|
},
|
||||||
|
{
|
||||||
|
phase: "Deployment",
|
||||||
|
duration: "Phased release",
|
||||||
|
description: "App Store & Play Store releases with feature toggles for controlled rollout.",
|
||||||
|
icon: <CloudCog className="w-5 h-5" /> // ☁️ Deployment icon
|
||||||
|
},
|
||||||
|
{
|
||||||
|
phase: "Testing & QA",
|
||||||
|
duration: "1 week",
|
||||||
|
description: "Comprehensive testing, bug fixes, and performance optimization",
|
||||||
|
icon: <CheckCircle className="w-5 h-5" />
|
||||||
|
}
|
||||||
|
],
|
||||||
|
resultsMetrics: [
|
||||||
|
{ label: "Load Time", value: "<1.5s", description: "95% of screens load quickly" },
|
||||||
|
{ label: "Crash-free Sessions", value: "99.9%", description: "Industry-leading stability" },
|
||||||
|
{ label: "Feature Adoption", value: "70%", description: "Users adopt recurring lists" },
|
||||||
|
{ label: "User Satisfaction", value: "4.8/5", description: "Average app store rating" },
|
||||||
|
{ label: "Daily Active Users", value: "85%", description: "Strong user engagement" },
|
||||||
|
{ label: "Learning Progress Accuracy", value: "92%", description: "Smart tracking precision" }
|
||||||
|
],
|
||||||
|
technicalAchievements: [
|
||||||
|
"Migrated from hybrid to native with zero data loss",
|
||||||
|
"Implemented CDN-based media delivery for faster load times",
|
||||||
|
"Added modular codebase for easier maintenance and feature rollout",
|
||||||
|
],
|
||||||
|
futureRoadmap: [
|
||||||
|
{
|
||||||
|
phase: "Next 6 Months",
|
||||||
|
features: [
|
||||||
|
"Dark mode support",
|
||||||
|
"Advanced search & filters for events",
|
||||||
|
"In-app community chat"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
phase: "Next 12 Months",
|
||||||
|
features: [
|
||||||
|
"AI-powered event recommendations",
|
||||||
|
"Multi-language support",
|
||||||
|
"Gamification with rewards system"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
const processPhases = [
|
|
||||||
{
|
|
||||||
phase: "Phase 1",
|
|
||||||
title: "Educational Research & Analysis",
|
|
||||||
icon: <Search className="w-6 h-6" />,
|
|
||||||
description: "Conducted comprehensive research on educational methodologies and children's learning patterns.",
|
|
||||||
details: "Analyzed current edutainment market, identified learning gaps, and collaborated with educational experts to define age-appropriate content strategies. Developed comprehensive understanding of child psychology and learning preferences."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
phase: "Phase 2",
|
|
||||||
title: "Child-Centric Design",
|
|
||||||
icon: <Figma className="w-6 h-6" />,
|
|
||||||
description: "Created intuitive, colorful, and engaging user interfaces specifically designed for children.",
|
|
||||||
details: "Developed interactive prototypes with focus on accessibility and ease of use. Implemented child-friendly navigation patterns, vibrant color schemes, and engaging visual elements that stimulate learning and exploration."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
phase: "Phase 3",
|
|
||||||
title: "Platform Development",
|
|
||||||
icon: <Zap className="w-6 h-6" />,
|
|
||||||
description: "Built robust learning platform with streaming capabilities, game engines, and content management systems.",
|
|
||||||
details: "Implemented scalable architecture supporting high-quality video streaming, interactive games, and real-time progress tracking. Developed content delivery systems optimized for various devices and network conditions."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
phase: "Phase 4",
|
|
||||||
title: "Safety & Security Testing",
|
|
||||||
icon: <Shield className="w-6 h-6" />,
|
|
||||||
description: "Implemented comprehensive child safety measures and parental control systems.",
|
|
||||||
details: "Conducted thorough security audits focusing on child protection protocols. Implemented content filtering, screen time management, and robust privacy controls. Ensured compliance with children's online safety regulations."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
phase: "Phase 5",
|
|
||||||
title: "Content Management & Analytics",
|
|
||||||
icon: <Settings className="w-6 h-6" />,
|
|
||||||
description: "Deployed content management systems with real-time analytics and performance monitoring.",
|
|
||||||
details: "Established automated content delivery pipelines and learning analytics dashboard. Implemented real-time monitoring for content performance, user engagement, and learning outcomes measurement."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
phase: "Phase 6",
|
|
||||||
title: "Launch & Community Building",
|
|
||||||
icon: <Rocket className="w-6 h-6" />,
|
|
||||||
description: "Executed successful launch strategy with focus on educational community engagement.",
|
|
||||||
details: "Coordinated launch campaign targeting parents, educators, and schools. Established partnerships with educational institutions and content creators. Implemented feedback systems for continuous improvement and community building."
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
export const WokaProject = () => {
|
export const WokaProject = () => {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
return (
|
return (
|
||||||
<div className="dark min-h-screen bg-background">
|
<div className="dark min-h-screen bg-background">
|
||||||
{/* <Navigation /> */}
|
|
||||||
|
|
||||||
{/* Hero Section */}
|
{/* Section 1: Hero with Heading, Subheading, and Image */}
|
||||||
<section className="relative pt-24 pb-16 bg-background overflow-hidden">
|
<PortfolioHero
|
||||||
<GridPattern strokeDasharray="4 2" />
|
title={projectData.hero.title}
|
||||||
|
subtitle={projectData.hero.subtitle}
|
||||||
<div className="relative z-10 container mx-auto px-6 lg:px-8">
|
subtitleTwo={projectData.hero.subtitleTwo}
|
||||||
{/* Back Button */}
|
imageUrl={projectData.hero.imageUrl}
|
||||||
<motion.div
|
imageAlt={projectData.hero.imageAlt}
|
||||||
initial={{ opacity: 0, x: -20 }}
|
|
||||||
animate={{ opacity: 1, x: 0 }}
|
|
||||||
transition={{ duration: 0.6 }}
|
|
||||||
className="mb-8"
|
|
||||||
>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
onClick={() => navigate('/')}
|
|
||||||
className="text-muted-foreground hover:text-foreground flex items-center gap-2 px-0"
|
|
||||||
>
|
|
||||||
<ArrowLeft className="w-4 h-4" />
|
|
||||||
Back to Case Studies
|
|
||||||
</Button>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
|
||||||
{/* Content */}
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 30 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ duration: 0.8 }}
|
|
||||||
>
|
|
||||||
<h1 className="text-4xl lg:text-6xl font-semibold text-foreground mb-6 leading-tight">
|
|
||||||
Change the Way Kids Learn and Play with{" "}
|
|
||||||
<span className="text-accent">Woka</span>
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p className="text-xl text-muted-foreground mb-6 leading-relaxed">
|
|
||||||
Animated Shows, Video Games, and Web Series for Kids
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p className="text-lg text-muted-foreground mb-8 leading-relaxed">
|
|
||||||
Woka makes learning a fun and exciting experience. From animated content to interactive video games and engaging web series, every feature is designed to inspire kids while playing.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="flex flex-wrap gap-3 mb-6">
|
|
||||||
<span className="px-4 py-2 bg-accent text-accent-foreground font-semibold rounded-[10px]">
|
|
||||||
+300% User Retention
|
|
||||||
</span>
|
|
||||||
<span className="px-3 py-1 bg-muted text-muted-foreground text-sm rounded-[10px]">
|
|
||||||
Education
|
|
||||||
</span>
|
|
||||||
<span className="px-3 py-1 bg-muted text-muted-foreground text-sm rounded-[10px]">
|
|
||||||
Learning Platform
|
|
||||||
</span>
|
|
||||||
<span className="px-3 py-1 bg-muted text-muted-foreground text-sm rounded-[10px]">
|
|
||||||
Kids
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Project Image */}
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 30 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ duration: 0.8, delay: 0.2 }}
|
|
||||||
className="relative aspect-[4/3] overflow-hidden bg-muted/30 rounded-[10px] px-2"
|
|
||||||
>
|
|
||||||
<ImageWithFallback
|
|
||||||
src={wokaImage}
|
|
||||||
alt="Woka educational platform mobile app interface showing interactive learning features and Bharat Gaurav Award recognition"
|
|
||||||
className="w-full h-full object-contain object-center rounded-[10px]"
|
|
||||||
/>
|
/>
|
||||||
</motion.div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Metrics Section */}
|
{/* Section 2: Project Details */}
|
||||||
<section className="py-16 bg-card/30">
|
<PortfolioProjectDetails
|
||||||
<div className="container mx-auto px-6 lg:px-8">
|
details={projectData.details}
|
||||||
<motion.div
|
achievements={projectData.achievements}
|
||||||
initial={{ opacity: 0, y: 20 }}
|
/>
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ duration: 0.8 }}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
className="grid md:grid-cols-3 gap-8"
|
|
||||||
>
|
|
||||||
{projectMetrics.map((metric, index) => (
|
|
||||||
<motion.div
|
|
||||||
key={metric.label}
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ duration: 0.6, delay: index * 0.01 }}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
className="text-center"
|
|
||||||
>
|
|
||||||
<div className="flex justify-center mb-4 text-accent">
|
|
||||||
{metric.icon}
|
|
||||||
</div>
|
|
||||||
<div className="text-3xl font-semibold text-foreground mb-2">
|
|
||||||
{metric.value}
|
|
||||||
</div>
|
|
||||||
<div className="text-lg font-medium text-foreground mb-1">
|
|
||||||
{metric.label}
|
|
||||||
</div>
|
|
||||||
<div className="text-sm text-muted-foreground">
|
|
||||||
{metric.description}
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
))}
|
|
||||||
</motion.div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Main Content Section */}
|
{/* Executive Summary */}
|
||||||
<section className="py-20 bg-background">
|
<PortfolioExecutiveSummary
|
||||||
<div className="container mx-auto px-6 lg:px-8">
|
content={projectData.executiveSummary.content}
|
||||||
<div className="max-w-4xl mx-auto">
|
/>
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 30 }}
|
{/* Project Overview */}
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
<section className="py-24 bg-background">
|
||||||
transition={{ duration: 0.8 }}
|
<div className="container mx-auto px-4 lg:px-6">
|
||||||
viewport={{ once: true }}
|
<div className="max-w-6xl mx-auto text-center mb-16">
|
||||||
className="mb-16"
|
<h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-8">
|
||||||
>
|
Project Overview
|
||||||
<h2 className="text-3xl lg:text-4xl font-semibold text-foreground mb-6">
|
|
||||||
Redefining Edutainment with Woka
|
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-lg text-muted-foreground leading-relaxed">
|
<p className="text-xl text-muted-foreground leading-relaxed">
|
||||||
Developed Woka as a vibrant platform where learning meets play. With a safe and fun environment to explore, learn, and grow effortlessly.
|
Woka, an education-focused platform, faced stability issues, outdated components, and limitations in scaling. WDI was engaged to rebuild the app natively for iOS and Android, enhance backend systems, and implement a sustainable maintenance framework.
|
||||||
</p>
|
</p>
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Key Features */}
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 30 }}
|
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ duration: 0.8, delay: 0.4 }}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
className="mb-20"
|
|
||||||
>
|
|
||||||
<h3 className="text-2xl lg:text-3xl font-semibold text-foreground mb-8">
|
|
||||||
Key Features & Capabilities
|
|
||||||
</h3>
|
|
||||||
<div className="grid md:grid-cols-2 gap-6">
|
|
||||||
{keyFeatures.map((feature, index) => (
|
|
||||||
<motion.div
|
|
||||||
key={feature.title}
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ duration: 0.6, delay: index * 0.01 }}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
className="bg-card/50 rounded-[10px] p-6 border border-border/50"
|
|
||||||
>
|
|
||||||
<h4 className="text-lg font-semibold text-foreground mb-3">
|
|
||||||
{feature.title}
|
|
||||||
</h4>
|
|
||||||
<p className="text-muted-foreground leading-relaxed">
|
|
||||||
{feature.description}
|
|
||||||
</p>
|
|
||||||
</motion.div>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Project Delivery Process */}
|
<div className="grid lg:grid-cols-3 gap-12">
|
||||||
<motion.div
|
<PortfolioProjectOverview
|
||||||
initial={{ opacity: 0, y: 30 }}
|
icon={<Globe className="w-8 h-8 text-accent" />}
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
title="Background & Context"
|
||||||
transition={{ duration: 0.8, delay: 0.6 }}
|
description="Access to engaging educational content for children is often limited or inconsistent. Woka was created to provide a safe, interactive, and mobile-first learning platform, combining animated shows, educational games, and structured lessons to enhance learning outcomes and parent engagement."
|
||||||
viewport={{ once: true }}
|
borderColor="border-accent/20"
|
||||||
>
|
hoverColor="accent"
|
||||||
<h3 className="text-2xl lg:text-3xl font-semibold text-foreground mb-8">
|
|
||||||
Project Delivery Lifecycle
|
|
||||||
</h3>
|
|
||||||
<div className="relative">
|
|
||||||
{/* Continuous background line */}
|
|
||||||
<div className="absolute left-6 top-6 bottom-6 w-0.5 bg-gradient-to-b from-accent/30 via-accent/20 to-accent/30 hidden lg:block" />
|
|
||||||
{/* Animated line overlay */}
|
|
||||||
<motion.div
|
|
||||||
initial={{ scaleY: 0 }}
|
|
||||||
whileInView={{ scaleY: 1 }}
|
|
||||||
transition={{ duration: 1.5, delay: 0.5 }}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
className="absolute left-6 top-6 bottom-6 w-0.5 bg-gradient-to-b from-accent/50 via-accent/30 to-accent/50 hidden lg:block origin-top"
|
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div className="space-y-8 lg:space-y-10">
|
<PortfolioProjectOverview
|
||||||
{processPhases.map((phase, index) => (
|
icon={<Users className="w-8 h-8 text-blue-400" />}
|
||||||
<motion.div
|
title="Target Audience"
|
||||||
key={phase.phase}
|
description="Learners, parents, and educators seeking accessible educational content and resources. Users actively engage with interactive lessons, school activities, and collaborative learning communities. A mobile-first audience that values seamless performance, personalized learning, and real-time progress tracking."
|
||||||
initial={{ opacity: 0, x: -20 }}
|
borderColor="border-blue-400/20"
|
||||||
whileInView={{ opacity: 1, x: 0 }}
|
hoverColor="blue-400"
|
||||||
transition={{ duration: 0.6, delay: index * 0.01 }}
|
/>
|
||||||
viewport={{ once: true }}
|
|
||||||
className="relative"
|
|
||||||
>
|
|
||||||
{/* Mobile connection line */}
|
|
||||||
{index < processPhases.length - 1 && (
|
|
||||||
<div className="absolute left-6 top-16 w-0.5 h-16 bg-gradient-to-b from-accent/40 to-accent/20 lg:hidden" />
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="flex flex-col lg:flex-row gap-6">
|
<PortfolioProjectOverview
|
||||||
{/* Phase indicator with fixed width container */}
|
icon={<Target className="w-8 h-8 text-green-400" />}
|
||||||
<div className="flex items-center gap-4 lg:w-[220px] lg:flex-shrink-0">
|
title="Business Objectives"
|
||||||
{/* Icon with background to mask the line */}
|
points={projectData.businessObjectives}
|
||||||
<div className="relative z-10">
|
borderColor="border-green-400/20"
|
||||||
<div className="flex items-center justify-center w-12 h-12 bg-background border-2 border-accent/50 rounded-full flex-shrink-0 shadow-lg">
|
hoverColor="green-400"
|
||||||
<div className="text-accent">
|
/>
|
||||||
{phase.icon}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/* Icon glow effect */}
|
|
||||||
<div className="absolute inset-0 flex items-center justify-center w-12 h-12 bg-accent/10 rounded-full -z-10 animate-pulse" />
|
|
||||||
{/* Connection dot for timeline */}
|
|
||||||
<div className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-2 h-2 bg-accent rounded-full -z-20 hidden lg:block" />
|
|
||||||
</div>
|
|
||||||
<div className="min-w-0 flex-1 lg:flex-initial">
|
|
||||||
<div className="text-sm font-medium text-accent mb-1 flex items-center gap-2">
|
|
||||||
<span className="w-5 h-5 bg-accent/20 rounded-full flex items-center justify-center text-xs text-accent font-bold">
|
|
||||||
{index + 1}
|
|
||||||
</span>
|
|
||||||
{phase.phase}
|
|
||||||
</div>
|
|
||||||
<div className="text-lg font-semibold text-foreground leading-tight">
|
|
||||||
{phase.title}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Content with consistent left alignment */}
|
|
||||||
<div className="flex-1 bg-card/30 rounded-[10px] p-6 border border-border/30 lg:ml-0">
|
|
||||||
<p className="text-muted-foreground leading-relaxed mb-4">
|
|
||||||
{phase.description}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p className="text-muted-foreground/80 leading-relaxed text-sm">
|
|
||||||
{phase.details}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
{/* Core Features */}
|
||||||
|
<PortfolioCoreFeatures
|
||||||
|
title="Core Features & Functionality"
|
||||||
|
subtitle="A comprehensive suite of tools designed to revolutionize household grocery management with smart automation and collaboration."
|
||||||
|
features={projectData.coreFeatures}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Challenges & Solution Architecture */}
|
||||||
|
<PortfolioChallengeSolution
|
||||||
|
challenges={[
|
||||||
|
{
|
||||||
|
icon: <Cpu className="w-6 h-6 text-accent" />,
|
||||||
|
title: "Technical Challenges",
|
||||||
|
description: "Migrating from hybrid codebase to fully native apps without disrupting user base, retaining existing user data and preferences, and optimizing image-heavy event feed for mobile performance."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <Split className="w-6 h-6 text-accent" />,
|
||||||
|
title: "Project Management Challenges",
|
||||||
|
description: "Coordinating phased rollout to avoid downtime and maintaining feature parity across platforms."
|
||||||
|
}
|
||||||
|
]}
|
||||||
|
|
||||||
|
technologyStack={[
|
||||||
|
{ icon: <Smartphone className="w-5 h-5 text-accent" />, label: "Frontend: Native Swift (iOS), Kotlin (Android)" },
|
||||||
|
{ icon: <Server className="w-5 h-5 text-accent" />, label: "Backend: Node.js, Express" },
|
||||||
|
{ icon: <Database className="w-5 h-5 text-accent" />, label: "Database: MongoDB" },
|
||||||
|
{ icon: <Cloud className="w-5 h-5 text-accent" />, label: "Hosting: AWS EC2 + S3" },
|
||||||
|
{ icon: <Activity className="w-5 h-5 text-accent" />, label: "Monitoring: Firebase, AWS CloudWatch" }
|
||||||
|
]}
|
||||||
|
|
||||||
|
highlights={[
|
||||||
|
{ text: "Performance Boost: Reduced API latency, improved app loading speed by 47%, crash-free sessions up to 99.8%." },
|
||||||
|
{ text: "Modern UI Experience: Introduced updated design components, typography, and improved navigation flow." },
|
||||||
|
{ text: "Real-Time Updates: Instant event & feed updates using socket connections." },
|
||||||
|
{ text: "Monitoring & Analytics: Integrated Firebase for crash reporting, user behavior tracking, and retention analysis." }
|
||||||
|
]}
|
||||||
|
|
||||||
|
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Development Process */}
|
||||||
|
<PortfolioDevelopmentProcess
|
||||||
|
title="Development Process & Methodology"
|
||||||
|
subtitle="Woka follows an Agile development methodology with phased module redevelopment, 2-week sprints, and iterative testing, ensuring smooth migration, feature parity, and high-quality user experience."
|
||||||
|
phases={projectData.developmentPhases}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Results & Impact */}
|
||||||
|
<PortfolioResultsImpact
|
||||||
|
title="Results & Impact"
|
||||||
|
subtitle="Woka demonstrates significant improvements in performance, user engagement, and learning outcomes. Key indicators include faster app load times, high crash-free sessions, strong feature adoption, and increased user satisfaction." metrics={projectData.resultsMetrics}
|
||||||
|
achievements={projectData.technicalAchievements}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Lessons Learned */}
|
||||||
|
<PortfolioLessonsSection
|
||||||
|
title="Lessons Learned"
|
||||||
|
description="Key insights and learnings from the Woka development journey."
|
||||||
|
workedTitle="What Worked Well"
|
||||||
|
workedIcon={<CheckCircle className="w-6 h-6" />}
|
||||||
|
workedColor="#22c55e" // Tailwind green-500
|
||||||
|
workedLessons={[
|
||||||
|
"Phased rollout reduced risk and allowed faster feedback cycles",
|
||||||
|
"Incremental feature release helped identify issues early",
|
||||||
|
"Continuous collaboration between teams accelerated development speed",
|
||||||
|
]}
|
||||||
|
improveTitle="Areas for Improvement"
|
||||||
|
improveIcon={<ArrowRight className="w-6 h-6" />}
|
||||||
|
improveColor="#eab308" // Tailwind yellow-500
|
||||||
|
improveLessons={[
|
||||||
|
"Earlier user beta testing to fine-tune event feed experience",
|
||||||
|
"More structured feedback channels for faster iteration",
|
||||||
|
"Enhanced onboarding tutorials to reduce user confusion",
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Future Roadmap */}
|
||||||
|
<PortfolioRoadmapSection
|
||||||
|
title="Future Roadmap"
|
||||||
|
description="Planned enhancements and features to further revolutionize grocery management apps."
|
||||||
|
roadmapItems={projectData.futureRoadmap}
|
||||||
|
icon={<ArrowRight className="w-5 h-5" />}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Client Testimonial */}
|
||||||
|
<PortfolioTestimonial
|
||||||
|
logo={wokaLogo}
|
||||||
|
alt="RanOutOf Logo"
|
||||||
|
rating={5}
|
||||||
|
testimonial="“The WDI team transformed our app from slow and outdated to fast, reliable, and modern. Our users love the new experience, and the performance gains have been tremendous.”"
|
||||||
|
clientName="Akarsh K Hebbar"
|
||||||
|
clientRole="CEO, Woka"
|
||||||
|
/>
|
||||||
|
|
||||||
{/* CTA Section */}
|
{/* CTA Section */}
|
||||||
<section className="py-16 bg-card/30">
|
<section className="py-24 bg-background">
|
||||||
<div className="container mx-auto px-6 lg:px-8">
|
<div className="container mx-auto px-4 lg:px-6">
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, y: 30 }}
|
initial={{ opacity: 0, y: 30 }}
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
transition={{ duration: 0.8 }}
|
transition={{ duration: 0.8 }}
|
||||||
viewport={{ once: true }}
|
viewport={{ once: true }}
|
||||||
className="text-center max-w-3xl mx-auto"
|
className="max-w-4xl mx-auto text-center"
|
||||||
>
|
>
|
||||||
<h3 className="text-2xl lg:text-3xl font-semibold text-foreground mb-6">
|
<h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-8">
|
||||||
Ready to Transform Children's Learning Experience?
|
Ready to Transform Children's Learning Experience?
|
||||||
</h3>
|
</h2>
|
||||||
<p className="text-lg text-muted-foreground mb-8 leading-relaxed">
|
<p className="text-xl text-muted-foreground mb-12 max-w-3xl mx-auto">
|
||||||
Let's create an educational platform that makes learning fun and engaging. From concept to launch, we'll help you build a platform that inspires children to learn and grow.
|
Let's create an educational platform that makes learning fun and engaging. From concept to launch, we'll help you build a platform that inspires children to learn and grow.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||||
<Button
|
<Button
|
||||||
className="bg-accent hover:bg-accent/90 text-accent-foreground px-8 py-3 rounded-[10px]"
|
size="lg"
|
||||||
onClick={() => navigate('/start-a-project')}
|
onClick={() => navigate('/contact-us')}
|
||||||
|
className="bg-accent hover:bg-accent/90 text-accent-foreground"
|
||||||
>
|
>
|
||||||
Start Your Project <ExternalLink className="w-4 h-4 ml-2" />
|
Start Your Project
|
||||||
|
<ArrowRight className="w-5 h-5 ml-2" />
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
|
size="lg"
|
||||||
variant="outline"
|
variant="outline"
|
||||||
className="border-border hover:bg-muted px-8 py-3 rounded-[10px]"
|
|
||||||
onClick={() => navigate('/case-studies')}
|
onClick={() => navigate('/case-studies')}
|
||||||
|
className="border-accent/30 text-accent hover:bg-accent/10"
|
||||||
>
|
>
|
||||||
View More Case Studies
|
View More Case Studies
|
||||||
|
<ExternalLink className="w-5 h-5 ml-2" />
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* <Footer /> */}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
BIN
src/images/seezun-logo.png
Normal file
BIN
src/images/seezun-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
BIN
src/images/tc-logo.png
Normal file
BIN
src/images/tc-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
BIN
src/images/woka-logo.png
Normal file
BIN
src/images/woka-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Reference in New Issue
Block a user