Skip to content

Commit bbdced9

Browse files
Arun-kushwaha007Arun-kushwaha007
committed
feat: updated new features page with hero, grid, process, and use cases sections.
1 parent 85d42d1 commit bbdced9

6 files changed

Lines changed: 528 additions & 139 deletions

File tree

‎apps/web/app/features/FeatureGrid.tsx‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
'use client';
2+
3+
import { motion } from 'framer-motion';
4+
import { Zap, Users, RefreshCw, ShieldCheck, Layers, Activity, Sparkles, ArrowRight } from 'lucide-react';
5+
import { fadeUp, staggerContainer } from '../../components/home/motion-variants';
6+
import { TiltCard } from '../../components/ui/TiltCard';
7+
8+
const featureList = [
9+
{
10+
title: 'Flexible split rules',
11+
description: 'Split equally, assign exact amounts, or use percentages for total control over group costs.',
12+
icon: Zap,
13+
eyebrow: 'Dynamic Logic',
14+
color: 'from-purple-500 to-indigo-500',
15+
className: 'md:col-span-8',
16+
stats: '15+ split modes',
17+
},
18+
{
19+
title: 'Dedicated group spaces',
20+
description: 'Separate contexts for roommates, trips, and teams.',
21+
icon: Users,
22+
eyebrow: 'Isolated',
23+
color: 'from-blue-500 to-cyan-500',
24+
className: 'md:col-span-4',
25+
},
26+
{
27+
title: 'Instant balance updates',
28+
description: 'Real-time synchronization across all devices instantly.',
29+
icon: RefreshCw,
30+
eyebrow: 'Real-time',
31+
color: 'from-emerald-500 to-teal-500',
32+
className: 'md:col-span-4',
33+
},
34+
{
35+
title: 'Receipt transparency',
36+
description: 'Attach supporting evidence so the group can confirm details without searching old message threads.',
37+
icon: ShieldCheck,
38+
eyebrow: 'Trust Layer',
39+
color: 'from-amber-500 to-orange-500',
40+
className: 'md:col-span-8',
41+
stats: 'Cloud Storage',
42+
},
43+
{
44+
title: 'Smart settlements',
45+
description: 'Algorithmically minimizes multiple debts into the fewest practical payments.',
46+
icon: Layers,
47+
eyebrow: 'Smart Math',
48+
color: 'from-rose-500 to-pink-500',
49+
className: 'md:col-span-6',
50+
},
51+
{
52+
title: 'Activity audit trail',
53+
description: 'Keep a comprehensive, searchable history of what changed and when group balances moved.',
54+
icon: Activity,
55+
eyebrow: 'Audit Trail',
56+
color: 'from-violet-500 to-purple-500',
57+
className: 'md:col-span-6',
58+
},
59+
];
60+
61+
export function FeatureGrid() {
62+
return (
63+
<div className="py-4">
64+
<motion.div
65+
variants={staggerContainer}
66+
initial="hidden"
67+
whileInView="show"
68+
viewport={{ once: true, margin: '-100px' }}
69+
className="grid grid-cols-1 gap-6 md:grid-cols-12"
70+
>
71+
{featureList.map((feature, i) => (
72+
<motion.div key={feature.title} variants={fadeUp} className={feature.className}>
73+
<TiltCard>
74+
<div className="group relative flex h-full min-h-[300px] flex-col overflow-hidden rounded-[2.5rem] border border-white/5 bg-white/[0.01] p-8 transition-all hover:border-white/10 hover:bg-white/[0.04] lg:p-12">
75+
{/* Immersive Background Glow */}
76+
<div
77+
className={`absolute -right-12 -top-12 h-48 w-48 rounded-full bg-gradient-to-br ${feature.color} opacity-0 blur-3xl transition-opacity duration-700 group-hover:opacity-10`}
78+
/>
79+
80+
{/* Grid Mesh Detail (Inherited from Hero) */}
81+
<div
82+
className="absolute inset-0 -z-10 opacity-[0.02]"
83+
style={{
84+
backgroundImage: `linear-gradient(to right, rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.1) 1px, transparent 1px)`,
85+
backgroundSize: '30px 30px'
86+
}}
87+
/>
88+
89+
<div className="relative z-10 flex h-full flex-col justify-between">
90+
<div>
91+
<div className="mb-8 flex items-center justify-between">
92+
<div
93+
className={`flex h-12 w-12 items-center justify-center rounded-2xl bg-gradient-to-br ${feature.color} p-2.5 text-white shadow-xl transition-transform duration-500 group-hover:scale-110 group-hover:rotate-6`}
94+
>
95+
<feature.icon size={24} />
96+
</div>
97+
<div className="flex items-center gap-2 rounded-full border border-white/5 bg-white/5 px-3 py-1 text-[10px] font-bold uppercase tracking-widest text-zinc-500">
98+
<Sparkles size={10} className="text-white/20" />
99+
{feature.eyebrow}
100+
</div>
101+
</div>
102+
103+
<h3 className="mb-4 text-2xl font-extrabold tracking-tight text-white lg:text-3xl">
104+
{feature.title}
105+
</h3>
106+
107+
<p className="max-w-md text-base leading-relaxed text-zinc-500 transition-colors group-hover:text-zinc-400">
108+
{feature.description}
109+
</p>
110+
</div>
111+
112+
{/* High-Fidelity Stats Bar or Action Tag */}
113+
<div className="mt-12 flex items-center justify-between">
114+
{feature.stats ? (
115+
<div className="flex items-center gap-4">
116+
<div className="h-px w-8 bg-white/10" />
117+
<span className="text-[10px] font-black uppercase tracking-[0.3em] text-zinc-600 group-hover:text-purple-400/60 transition-colors">
118+
{feature.stats}
119+
</span>
120+
</div>
121+
) : (
122+
<div />
123+
)}
124+
125+
<div className="flex h-10 w-10 items-center justify-center rounded-full border border-white/5 bg-white/5 opacity-0 transition-all duration-500 group-hover:translate-x-0 group-hover:opacity-100 -translate-x-2">
126+
<ArrowRight size={16} className="text-white" />
127+
</div>
128+
</div>
129+
</div>
130+
131+
{/* Cinematic Glass Bottom Edge */}
132+
<div className={`absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r ${feature.color} opacity-0 transition-opacity duration-500 group-hover:opacity-20`} />
133+
</div>
134+
</TiltCard>
135+
</motion.div>
136+
))}
137+
</motion.div>
138+
</div>
139+
);
140+
}

‎apps/web/app/features/FeatureProcess.tsx‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
'use client';
2+
3+
import { motion } from 'framer-motion';
4+
import { ReceiptText, RefreshCw, Layers, ArrowRight, Sparkles } from 'lucide-react';
5+
import { fadeUp, staggerContainer } from '../../components/home/motion-variants';
6+
7+
const steps = [
8+
{
9+
title: 'Capture clearly',
10+
description: 'Add the amount, choose the split method, and attach receipts instantly.',
11+
icon: ReceiptText,
12+
label: 'Identify',
13+
color: 'text-purple-400',
14+
glow: 'bg-purple-500/20',
15+
},
16+
{
17+
title: 'Stay in sync',
18+
description: 'Balances update for the entire group the moment an expense is saved.',
19+
icon: RefreshCw,
20+
label: 'Synchronize',
21+
color: 'text-indigo-400',
22+
glow: 'bg-indigo-500/20',
23+
},
24+
{
25+
title: 'Close the loop',
26+
description: 'Turn a complex web of debts into a single set of simple settlements.',
27+
icon: Layers,
28+
label: 'Settle',
29+
color: 'text-emerald-400',
30+
glow: 'bg-emerald-500/20',
31+
},
32+
];
33+
34+
export function FeatureProcess() {
35+
return (
36+
<div className="relative py-4 -mt-40">
37+
{/* Background Decorative Mesh - Inherited from Hero */}
38+
<div className="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(circle_at_50%_50%,rgba(168,85,247,0.03),transparent_70%)] opacity-40" />
39+
40+
<motion.div
41+
variants={staggerContainer}
42+
initial="hidden"
43+
whileInView="show"
44+
viewport={{ once: true, margin: '-100px' }}
45+
className="grid gap-12 lg:grid-cols-3"
46+
>
47+
{steps.map((step, i) => (
48+
<motion.div key={step.title} variants={fadeUp} className="group relative rounded-[2.5rem] border border-white/5 bg-white/[0.01] p-10 transition-all hover:bg-white/[0.04]">
49+
{/* Step Connector Label */}
50+
<div className="mb-10 flex items-center gap-4">
51+
<div className="flex h-10 w-10 items-center justify-center rounded-xl border border-white/10 bg-white/5 text-xs font-black text-white shadow-xl transition-transform group-hover:scale-110">
52+
0{i + 1}
53+
</div>
54+
<div className="h-px flex-1 bg-gradient-to-r from-white/20 via-white/5 to-transparent" />
55+
<div className="flex items-center gap-2">
56+
<span className="text-[10px] font-bold uppercase tracking-[0.4em] text-zinc-600 group-hover:text-purple-400 transition-colors">
57+
{step.label}
58+
</span>
59+
<Sparkles size={8} className="text-zinc-800" />
60+
</div>
61+
</div>
62+
63+
{/* Visual Indicator with 3D Depth */}
64+
<div className="relative mb-12 inline-block">
65+
<div className="relative flex h-24 w-24 items-center justify-center rounded-[2rem] border border-white/10 bg-white/[0.03] shadow-2xl transition-transform duration-500 group-hover:scale-110 group-hover:rotate-6 group-hover:bg-white/[0.06] group-hover:shadow-purple-500/10">
66+
<step.icon size={36} className={`relative z-10 ${step.color} transition-colors group-hover:text-white`} />
67+
68+
{/* Internal Glow */}
69+
<div className={`absolute inset-4 -z-10 rounded-3xl ${step.glow} blur-2xl opacity-40 transition-opacity group-hover:opacity-100`} />
70+
</div>
71+
72+
{/* Outer Orbit Ring */}
73+
<div className="absolute -inset-4 rounded-[2.5rem] border border-white/5 opacity-0 transition-opacity duration-700 group-hover:opacity-100" />
74+
</div>
75+
76+
<h3 className="text-2xl font-extrabold tracking-tight text-white mb-4">
77+
{step.title}
78+
</h3>
79+
80+
<p className="text-base leading-relaxed text-zinc-500 transition-colors group-hover:text-zinc-400">
81+
{step.description}
82+
</p>
83+
84+
{/* Horizontal Connection Arrow (Desktop) */}
85+
{i < 2 && (
86+
<div className="absolute -right-6 top-32 hidden lg:block">
87+
<motion.div
88+
animate={{ x: [0, 8, 0] }}
89+
transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
90+
className="text-white/5 group-hover:text-white/20 transition-colors"
91+
>
92+
<ArrowRight size={24} />
93+
</motion.div>
94+
</div>
95+
)}
96+
</motion.div>
97+
))}
98+
</motion.div>
99+
</div>
100+
);
101+
}

‎apps/web/app/features/FeatureUseCases.tsx‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
'use client';
2+
3+
import { motion } from 'framer-motion';
4+
import { Plane, Home, Briefcase, Trophy, Sparkles, Building2 } from 'lucide-react';
5+
import { fadeUp, staggerContainer } from '../../components/home/motion-variants';
6+
import { GlassCard } from '../../components/ui/GlassCard';
7+
8+
const cases = [
9+
{ icon: Plane, title: 'For trips', desc: 'Track meals, rides, and shared bookings on the go.' },
10+
{ icon: Home, title: 'For roommates', desc: 'Manage rent, groceries, and shared household bills.' },
11+
{ icon: Briefcase, title: 'For teams', desc: 'Professional expense records for reimbursements.' },
12+
{ icon: Building2, title: 'For clubs', desc: 'Track dues and shared event budgets clearly.' }
13+
];
14+
15+
export function FeatureUseCases() {
16+
return (
17+
<div className="relative py-4 -mt-40">
18+
{/* Background Decorative Icons - Multi-Layered */}
19+
<div className="pointer-events-none absolute inset-0 -z-10 overflow-hidden opacity-[0.03]">
20+
<Trophy size={400} className="absolute -left-20 top-0 text-white rotate-12" />
21+
<Plane size={300} className="absolute -right-20 bottom-0 text-white -rotate-12" />
22+
</div>
23+
24+
<GlassCard className="overflow-hidden border-white/5 bg-black/40 shadow-[0_0_120px_rgba(0,0,0,0.6)]">
25+
<div className="grid gap-16 p-8 sm:p-12 lg:p-20 lg:grid-cols-[0.7fr_1.3fr] lg:items-center">
26+
<motion.div
27+
variants={staggerContainer}
28+
initial="hidden"
29+
whileInView="show"
30+
viewport={{ once: true }}
31+
className="flex flex-col items-center text-center lg:items-start lg:text-left"
32+
>
33+
<motion.div variants={fadeUp} className="mb-6">
34+
<div className="inline-flex items-center gap-3 rounded-full border border-indigo-500/20 bg-indigo-500/5 px-5 py-2 text-[0.6rem] font-black uppercase tracking-[0.3em] text-indigo-400">
35+
<Sparkles size={12} />
36+
Versatility
37+
</div>
38+
</motion.div>
39+
40+
<motion.h2
41+
variants={fadeUp}
42+
className="text-4xl font-extrabold tracking-tight text-white sm:text-5xl lg:text-6xl"
43+
>
44+
One app for every <br/>
45+
<span className="text-purple-400">group dynamic.</span>
46+
</motion.h2>
47+
48+
<motion.p
49+
variants={fadeUp}
50+
className="mt-8 max-w-xl text-lg leading-relaxed text-zinc-500 sm:text-xl"
51+
>
52+
Designed to scale from weekend getaways to professional organizational management.
53+
</motion.p>
54+
</motion.div>
55+
56+
<div className="grid gap-4 sm:grid-cols-2">
57+
{cases.map((item, idx) => (
58+
<motion.div
59+
key={idx}
60+
initial={{ opacity: 0, y: 20 }}
61+
whileInView={{ opacity: 1, y: 0 }}
62+
viewport={{ once: true }}
63+
transition={{ delay: idx * 0.1, duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
64+
className="group relative flex flex-col items-center rounded-[2rem] border border-white/5 bg-white/[0.01] p-8 text-center transition-all duration-500 hover:border-purple-500/20 hover:bg-white/[0.04] lg:items-start lg:text-left"
65+
>
66+
{/* 3D Icon Container */}
67+
<div className="mb-6 flex h-14 w-14 items-center justify-center rounded-xl bg-white/[0.03] text-zinc-500 shadow-inner transition-all duration-500 group-hover:scale-110 group-hover:bg-purple-500/10 group-hover:text-purple-400">
68+
<item.icon size={28} />
69+
</div>
70+
71+
<h3 className="mb-2 text-xl font-bold tracking-tight text-white transition-colors group-hover:text-purple-100">
72+
{item.title}
73+
</h3>
74+
75+
<p className="text-sm leading-relaxed text-zinc-500 transition-colors group-hover:text-zinc-400">
76+
{item.desc}
77+
</p>
78+
79+
{/* Perspective Detail */}
80+
<div className="absolute top-4 right-4 text-white/5 opacity-0 transition-opacity group-hover:opacity-100">
81+
<Sparkles size={14} />
82+
</div>
83+
</motion.div>
84+
))}
85+
</div>
86+
</div>
87+
</GlassCard>
88+
</div>
89+
);
90+
}

0 commit comments

Comments
 (0)