Changes of custom captcha module
This commit is contained in:
priyanshuvish
@@ -32,9 +32,7 @@ import {
|
||||
Wrench,
|
||||
Zap
|
||||
} from "lucide-react";
|
||||
import { Footer } from "../components/Footer";
|
||||
import { GridPattern } from "../components/GridPattern";
|
||||
import { Navigation } from "../components/Navigation";
|
||||
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
|
||||
import { Button } from "../components/ui/button";
|
||||
import ranoutofLogo from "../src/images/ranoutof-logo.webp";
|
||||
@@ -56,14 +54,14 @@ const getTechIcon = (tech: string) => {
|
||||
"Redux": <Layers className="w-4 h-4" />,
|
||||
"PWA": <Monitor className="w-4 h-4" />
|
||||
};
|
||||
|
||||
|
||||
return techIconMap[tech] || <Wrench className="w-4 h-4" />;
|
||||
};
|
||||
|
||||
const projectDetails = {
|
||||
title: "RanOutOf – Simplify Grocery Planning with AI-Powered Lists",
|
||||
subtitle: "A voice-enabled, reminder-rich, and collaborative grocery management app designed to simplify household planning and eliminate stockouts",
|
||||
technologies: ["React Native", "Laravel", "Node.js", "MySQL", "Firebase"],
|
||||
technologies: ["React Native", "Node.js", "MySQL", "AWS"],
|
||||
industries: ["Consumer Tech", "Retail Technology", "Productivity"],
|
||||
duration: "15 weeks, October 2024 – January 2025",
|
||||
teamSize: "4 developers, 2 designers, 1 QA, 1 PM",
|
||||
@@ -71,9 +69,9 @@ const projectDetails = {
|
||||
};
|
||||
|
||||
const keyAchievements = [
|
||||
{ label: "Product Categories", value: "200+", description: "Comprehensive grocery taxonomy" },
|
||||
{ label: "List Sharing", value: "100%", description: "Real-time collaborative features" },
|
||||
{ label: "Smart Alerts", value: "24/7", description: "Inventory expiry reminders" }
|
||||
{ label: "Product Categories", value: "200+", description: "Over 25,000 items available" },
|
||||
{ label: "List Sharing", value: "100%", description: "Real-time collaboration" },
|
||||
{ label: "Smart Alerts", value: "24/7", description: "Expiry and restock reminders" }
|
||||
];
|
||||
|
||||
const businessObjectives = [
|
||||
@@ -148,7 +146,7 @@ const developmentPhases = [
|
||||
},
|
||||
{
|
||||
phase: "UI/UX Design",
|
||||
duration: "2 weeks",
|
||||
duration: "2 weeks",
|
||||
description: "User interface design, prototyping, and user experience optimization",
|
||||
icon: <Palette className="w-5 h-5" />
|
||||
},
|
||||
@@ -183,7 +181,7 @@ const resultsMetrics = [
|
||||
|
||||
const technicalAchievements = [
|
||||
"Voice recognition with 95% accuracy across multiple languages",
|
||||
"Real-time synchronization with conflict resolution algorithms",
|
||||
"Real-time synchronization with conflict resolution algorithms",
|
||||
"Smart inventory prediction based on consumption patterns",
|
||||
"Seamless barcode integration with 200+ product categories"
|
||||
];
|
||||
@@ -207,8 +205,8 @@ const futureRoadmap = [
|
||||
features: ["AI-powered shopping list suggestions", "Store discount tracking integration", "Recipe-based automatic list generation"]
|
||||
},
|
||||
{
|
||||
phase: "Phase 3",
|
||||
features: ["Voice command grocery planning with smart assistants", "Household budget tracking and spend reports", "Integration with grocery delivery services"]
|
||||
phase: "Phase 3",
|
||||
features: ["Voice command grocery planning with smart assistants", "Household budget tracking and spend reports", "Integration with grocery delivery and eCommerce platforms"]
|
||||
}
|
||||
];
|
||||
|
||||
@@ -218,11 +216,11 @@ export const RanOutOfProject = () => {
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
{/* <Navigation /> */}
|
||||
|
||||
|
||||
{/* Section 1: Hero with Heading, Subheading, and Image */}
|
||||
<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
|
||||
@@ -254,11 +252,11 @@ export const RanOutOfProject = () => {
|
||||
Case Study
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
|
||||
<h1 className="text-4xl lg:text-6xl font-semibold text-foreground mb-8 leading-tight">
|
||||
{projectDetails.title}
|
||||
</h1>
|
||||
|
||||
|
||||
<p className="text-xl text-muted-foreground mb-10 leading-relaxed max-w-2xl">
|
||||
{projectDetails.subtitle}
|
||||
</p>
|
||||
@@ -289,10 +287,10 @@ export const RanOutOfProject = () => {
|
||||
<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 }}
|
||||
@@ -304,7 +302,7 @@ export const RanOutOfProject = () => {
|
||||
Project Details
|
||||
</h2>
|
||||
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
|
||||
Comprehensive overview of technologies, timeline, and key achievements that revolutionized household grocery management
|
||||
RanOutOf is a smart, AI-powered grocery management app designed for households, featuring voice input, reminders, and collaborative list sharing. This case study highlights WDI’s expertise in crafting an intuitive, family-friendly solution that simplifies grocery planning and boosts efficiency.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
@@ -328,9 +326,9 @@ export const RanOutOfProject = () => {
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{projectDetails.technologies.map((tech) => (
|
||||
<Badge
|
||||
key={tech}
|
||||
variant="outline"
|
||||
<Badge
|
||||
key={tech}
|
||||
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">{getTechIcon(tech)}</span>
|
||||
@@ -339,7 +337,7 @@ export const RanOutOfProject = () => {
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Industries */}
|
||||
<div>
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
@@ -350,9 +348,9 @@ export const RanOutOfProject = () => {
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{projectDetails.industries.map((industry) => (
|
||||
<Badge
|
||||
key={industry}
|
||||
variant="secondary"
|
||||
<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}
|
||||
@@ -376,7 +374,7 @@ export const RanOutOfProject = () => {
|
||||
</div>
|
||||
<p className="text-lg text-muted-foreground pl-15">{projectDetails.duration}</p>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Team */}
|
||||
<div>
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
@@ -398,9 +396,9 @@ export const RanOutOfProject = () => {
|
||||
</div>
|
||||
<div className="flex gap-3 pl-15">
|
||||
{projectDetails.platforms.map((platform) => (
|
||||
<Badge
|
||||
key={platform}
|
||||
variant="outline"
|
||||
<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}
|
||||
@@ -427,7 +425,7 @@ export const RanOutOfProject = () => {
|
||||
Measurable outcomes that demonstrate RanOutOf's success in transforming household grocery management
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{keyAchievements.map((achievement, index) => (
|
||||
<motion.div
|
||||
@@ -435,7 +433,7 @@ export const RanOutOfProject = () => {
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.6 + index * 0.1 }}
|
||||
whileHover={{
|
||||
whileHover={{
|
||||
scale: 1.02,
|
||||
y: -4,
|
||||
transition: { duration: 0.3, ease: "easeOut" }
|
||||
@@ -444,25 +442,25 @@ export const RanOutOfProject = () => {
|
||||
>
|
||||
{/* 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>
|
||||
@@ -487,7 +485,7 @@ export const RanOutOfProject = () => {
|
||||
Executive Summary
|
||||
</h2>
|
||||
<p className="text-xl text-muted-foreground leading-relaxed">
|
||||
RanOutOf is a mobile-first solution tailored for modern households that frequently forget or mismanage their grocery shopping. The app simplifies list-making, enables shared household planning, and manages pantry inventory using reminders, barcodes, and smart grouping features to eliminate stockouts and reduce food waste.
|
||||
RanOutOf is a mobile-first app designed to help modern households simplify grocery shopping and stay organized. The app streamlines list creation, supports collaborative household planning, and efficiently manages pantry inventory with features like reminders, barcode scanning, and smart grouping. By helping users maintain control over their groceries, RanOutOf reduces the risk of stockouts and minimizes food waste, making everyday shopping easier and more efficient.
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
@@ -508,13 +506,13 @@ export const RanOutOfProject = () => {
|
||||
Project Overview
|
||||
</h2>
|
||||
</motion.div>
|
||||
|
||||
|
||||
<div className="grid lg:grid-cols-3 gap-12">
|
||||
{/* Background & Context */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
whileHover={{
|
||||
whileHover={{
|
||||
scale: 1.05,
|
||||
y: -4,
|
||||
transition: { duration: 0.3, ease: "easeOut" }
|
||||
@@ -545,7 +543,7 @@ export const RanOutOfProject = () => {
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
whileHover={{
|
||||
whileHover={{
|
||||
scale: 1.05,
|
||||
y: -4,
|
||||
transition: { duration: 0.3, ease: "easeOut" }
|
||||
@@ -568,7 +566,7 @@ export const RanOutOfProject = () => {
|
||||
</motion.div>
|
||||
<h3 className="text-2xl font-semibold text-foreground mb-6">Target Audience</h3>
|
||||
<p className="text-muted-foreground leading-relaxed">
|
||||
Tech-savvy individuals and families (age 25–45) who want to simplify their grocery management and improve household planning through mobile convenience and collaborative features.
|
||||
Tech-savvy individuals and families (age 15–65) who want to simplify their grocery management and improve household planning through mobile convenience.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
@@ -576,7 +574,7 @@ export const RanOutOfProject = () => {
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
whileHover={{
|
||||
whileHover={{
|
||||
scale: 1.05,
|
||||
y: -4,
|
||||
transition: { duration: 0.3, ease: "easeOut" }
|
||||
@@ -630,7 +628,7 @@ export const RanOutOfProject = () => {
|
||||
A comprehensive suite of tools designed to revolutionize household grocery management with smart automation and collaboration.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{coreFeatures.map((feature, index) => (
|
||||
<motion.div
|
||||
@@ -724,7 +722,7 @@ export const RanOutOfProject = () => {
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Server className="w-5 h-5 text-accent" />
|
||||
<span className="text-muted-foreground">Backend: Laravel & Node.js</span>
|
||||
<span className="text-muted-foreground">Backend: Node.js</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Database className="w-5 h-5 text-accent" />
|
||||
@@ -732,11 +730,11 @@ export const RanOutOfProject = () => {
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Cloud className="w-5 h-5 text-accent" />
|
||||
<span className="text-muted-foreground">Cloud: Firebase Services</span>
|
||||
<span className="text-muted-foreground">Cloud: AWS</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-foreground mb-6">Key Highlights</h3>
|
||||
<div className="space-y-3">
|
||||
@@ -781,10 +779,10 @@ export const RanOutOfProject = () => {
|
||||
Development Process & Methodology
|
||||
</h2>
|
||||
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
|
||||
Agile development approach with milestone-based delivery ensuring quality and timely completion.
|
||||
RanOutOf follows an Agile development approach with milestone-based delivery. This ensures timely completion while maintaining high quality through iterative progress and continuous feedback.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="grid lg:grid-cols-5 gap-8">
|
||||
{developmentPhases.map((phase, index) => (
|
||||
<motion.div
|
||||
@@ -809,7 +807,7 @@ export const RanOutOfProject = () => {
|
||||
{phase.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Connector Line */}
|
||||
{index < developmentPhases.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" />
|
||||
@@ -836,10 +834,10 @@ export const RanOutOfProject = () => {
|
||||
Results & Impact
|
||||
</h2>
|
||||
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
|
||||
Comprehensive performance metrics demonstrating RanOutOf's success in transforming household grocery management.
|
||||
RanOutOf delivers comprehensive performance metrics showcasing its success in transforming household grocery management. Key indicators include improved inventory accuracy, reduced stockouts, increased shared list usage, and measurable reductions in food waste, demonstrating real value to users.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
|
||||
{resultsMetrics.map((metric, index) => (
|
||||
<motion.div
|
||||
@@ -969,10 +967,10 @@ export const RanOutOfProject = () => {
|
||||
Future Roadmap
|
||||
</h2>
|
||||
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
|
||||
Planned enhancements and features to further revolutionize grocery management.
|
||||
Planned enhancements and features to further revolutionize grocery management apps.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="grid lg:grid-cols-2 gap-12">
|
||||
{futureRoadmap.map((roadmap, index) => (
|
||||
<motion.div
|
||||
@@ -1019,7 +1017,7 @@ export const RanOutOfProject = () => {
|
||||
className="h-12 w-auto object-contain"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="flex justify-center mb-8">
|
||||
<div className="flex text-yellow-400">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
@@ -1027,11 +1025,11 @@ export const RanOutOfProject = () => {
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<blockquote className="text-2xl lg:text-3xl text-foreground mb-8 leading-relaxed italic">
|
||||
"WDI delivered a clean, powerful solution that has made grocery planning easier than ever. The list templates, reminders, and inventory alerts are game-changers for our users."
|
||||
</blockquote>
|
||||
|
||||
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="text-lg font-semibold text-foreground">
|
||||
Rishabh Jain
|
||||
@@ -1061,7 +1059,7 @@ export const RanOutOfProject = () => {
|
||||
<p className="text-xl text-muted-foreground mb-12 max-w-3xl mx-auto">
|
||||
Partner with WDI to design solutions that streamline daily life with precision tech and intuitive design.
|
||||
</p>
|
||||
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button
|
||||
size="lg"
|
||||
|
||||
Reference in New Issue
Block a user