Changes
gpt-engineer-app[bot] committed
Nov 27, 2025 at 14:24 UTC
240f7f3ed9b54555990a814cd891d5f88026f65b
5 files changed
+156
src/assets/app-screenshot-home.png
Binary files /dev/null and b/src/assets/app-screenshot-home.png differ
src/assets/app-screenshot-pay.png
Binary files /dev/null and b/src/assets/app-screenshot-pay.png differ
src/assets/app-screenshot-profile.png
Binary files /dev/null and b/src/assets/app-screenshot-profile.png differ
src/components/employee/MobileAppShowcase.tsx
new
+154
@@ -0,0 +1,154 @@
1
+import { Button } from "@/components/ui/button";
2
+import { Smartphone, Download, Star, Zap, Shield, QrCode } from "lucide-react";
3
+import appScreenshotHome from "@/assets/app-screenshot-home.png";
4
+import appScreenshotPay from "@/assets/app-screenshot-pay.png";
5
+import appScreenshotProfile from "@/assets/app-screenshot-profile.png";
6
+
7
+const features = [
8
+ { icon: Zap, label: "Instant Payments", description: "Send money in seconds" },
9
+ { icon: Shield, label: "Bank-Level Security", description: "Your data is protected" },
10
+ { icon: QrCode, label: "QR Scan & Pay", description: "Easy contactless payments" },
11
+ { icon: Star, label: "Track Expenses", description: "Real-time spending insights" },
12
+];
13
+
14
+const MobileAppShowcase = () => {
15
+ return (
16
+ <section className="py-16 md:py-24 bg-gradient-to-b from-background to-muted/30 overflow-hidden">
17
+ <div className="container">
18
+ <div className="max-w-6xl mx-auto">
19
+ {/* Header */}
20
+ <div className="text-center mb-12 md:mb-16 animate-fade-up">
21
+ <div className="inline-flex items-center gap-2 px-4 py-2 bg-lime/10 rounded-full text-lime mb-6">
22
+ <Smartphone className="w-4 h-4" />
23
+ <span className="text-sm font-medium">Now Available on Mobile</span>
24
+ </div>
25
+ <h2 className="text-3xl md:text-5xl font-bold text-foreground mb-4">
26
+ Take Snac Everywhere
27
+ </h2>
28
+ <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
29
+ Manage your expenses, send money, and track your budget on the go.
30
+ Download the Snac app today and take control of your finances.
31
+ </p>
32
+ </div>
33
+
34
+ {/* Phone Mockups */}
35
+ <div className="relative flex justify-center items-end gap-4 md:gap-8 mb-12 md:mb-16">
36
+ {/* Left Phone - Pay Screen */}
37
+ <div className="relative animate-fade-up animation-delay-100 hidden sm:block">
38
+ <div className="relative w-48 md:w-56 transform -rotate-6 hover:rotate-0 transition-transform duration-500">
39
+ <div className="absolute inset-0 bg-gradient-to-br from-lime/20 to-primary/20 rounded-[2.5rem] blur-2xl" />
40
+ <div className="relative bg-navy rounded-[2.5rem] p-2 shadow-2xl">
41
+ <img
42
+ src={appScreenshotPay}
43
+ alt="Snac App Pay Screen"
44
+ className="w-full h-auto rounded-[2rem]"
45
+ />
46
+ </div>
47
+ </div>
48
+ </div>
49
+
50
+ {/* Center Phone - Home Screen (Featured) */}
51
+ <div className="relative z-10 animate-fade-up">
52
+ <div className="relative w-56 md:w-72 transform hover:scale-105 transition-transform duration-500">
53
+ <div className="absolute inset-0 bg-gradient-to-br from-lime/30 to-primary/30 rounded-[3rem] blur-3xl" />
54
+ <div className="relative bg-navy rounded-[3rem] p-2 shadow-2xl ring-4 ring-lime/20">
55
+ <img
56
+ src={appScreenshotHome}
57
+ alt="Snac App Home Screen"
58
+ className="w-full h-auto rounded-[2.5rem]"
59
+ />
60
+ </div>
61
+ {/* Floating Badge */}
62
+ <div className="absolute -top-4 -right-4 bg-lime text-navy px-3 py-1 rounded-full text-sm font-bold shadow-lg animate-bounce">
63
+ NEW
64
+ </div>
65
+ </div>
66
+ </div>
67
+
68
+ {/* Right Phone - Profile Screen */}
69
+ <div className="relative animate-fade-up animation-delay-200 hidden sm:block">
70
+ <div className="relative w-48 md:w-56 transform rotate-6 hover:rotate-0 transition-transform duration-500">
71
+ <div className="absolute inset-0 bg-gradient-to-br from-lime/20 to-primary/20 rounded-[2.5rem] blur-2xl" />
72
+ <div className="relative bg-navy rounded-[2.5rem] p-2 shadow-2xl">
73
+ <img
74
+ src={appScreenshotProfile}
75
+ alt="Snac App Profile Screen"
76
+ className="w-full h-auto rounded-[2rem]"
77
+ />
78
+ </div>
79
+ </div>
80
+ </div>
81
+ </div>
82
+
83
+ {/* Features Grid */}
84
+ <div className="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6 mb-12 animate-fade-up animation-delay-300">
85
+ {features.map((feature, index) => {
86
+ const Icon = feature.icon;
87
+ return (
88
+ <div
89
+ key={feature.label}
90
+ className="bg-card border border-border rounded-2xl p-4 md:p-6 text-center hover:border-lime/50 hover:shadow-lg transition-all duration-300"
91
+ >
92
+ <div className="w-12 h-12 bg-lime/10 rounded-xl flex items-center justify-center mx-auto mb-3">
93
+ <Icon className="w-6 h-6 text-lime" />
94
+ </div>
95
+ <h3 className="font-semibold text-foreground mb-1">{feature.label}</h3>
96
+ <p className="text-sm text-muted-foreground">{feature.description}</p>
97
+ </div>
98
+ );
99
+ })}
100
+ </div>
101
+
102
+ {/* Download Buttons */}
103
+ <div className="flex flex-col sm:flex-row items-center justify-center gap-4 animate-fade-up animation-delay-400">
104
+ <Button
105
+ size="lg"
106
+ className="bg-navy hover:bg-navy/90 text-white gap-3 h-14 px-6 rounded-xl w-full sm:w-auto"
107
+ >
108
+ <svg viewBox="0 0 24 24" className="w-7 h-7 fill-current">
109
+ <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
110
+ </svg>
111
+ <div className="text-left">
112
+ <div className="text-xs opacity-80">Download on the</div>
113
+ <div className="text-base font-semibold">App Store</div>
114
+ </div>
115
+ </Button>
116
+
117
+ <Button
118
+ size="lg"
119
+ className="bg-navy hover:bg-navy/90 text-white gap-3 h-14 px-6 rounded-xl w-full sm:w-auto"
120
+ >
121
+ <svg viewBox="0 0 24 24" className="w-7 h-7 fill-current">
122
+ <path d="M3,20.5V3.5C3,2.91 3.34,2.39 3.84,2.15L13.69,12L3.84,21.85C3.34,21.6 3,21.09 3,20.5M16.81,15.12L6.05,21.34L14.54,12.85L16.81,15.12M20.16,10.81C20.5,11.08 20.75,11.5 20.75,12C20.75,12.5 20.53,12.9 20.18,13.18L17.89,14.5L15.39,12L17.89,9.5L20.16,10.81M6.05,2.66L16.81,8.88L14.54,11.15L6.05,2.66Z"/>
123
+ </svg>
124
+ <div className="text-left">
125
+ <div className="text-xs opacity-80">GET IT ON</div>
126
+ <div className="text-base font-semibold">Google Play</div>
127
+ </div>
128
+ </Button>
129
+ </div>
130
+
131
+ {/* Social Proof */}
132
+ <div className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-6 text-center animate-fade-up animation-delay-500">
133
+ <div className="flex items-center gap-1">
134
+ {[...Array(5)].map((_, i) => (
135
+ <Star key={i} className="w-5 h-5 fill-lime text-lime" />
136
+ ))}
137
+ <span className="ml-2 text-muted-foreground">4.9 Rating</span>
138
+ </div>
139
+ <div className="hidden sm:block w-px h-6 bg-border" />
140
+ <div className="text-muted-foreground">
141
+ <span className="font-semibold text-foreground">50K+</span> Downloads
142
+ </div>
143
+ <div className="hidden sm:block w-px h-6 bg-border" />
144
+ <div className="text-muted-foreground">
145
+ <span className="font-semibold text-foreground">100+</span> Countries
146
+ </div>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ </section>
151
+ );
152
+};
153
+
154
+export default MobileAppShowcase;
src/pages/EmployeePortal.tsx
+2
@@ -3,12 +3,14 @@ import EmployeeHero from "@/components/employee/EmployeeHero";
3
import SpendingBreakdown from "@/components/employee/SpendingBreakdown";
4
import RecentTransactions from "@/components/employee/RecentTransactions";
5
import QuickActions from "@/components/employee/QuickActions";
6
+import MobileAppShowcase from "@/components/employee/MobileAppShowcase";
7
8
const EmployeePortal = () => {
9
return (
10
<div className="min-h-screen bg-background">
11
<EmployeeHeader />
12
<EmployeeHero />
13
+ <MobileAppShowcase />
14
<QuickActions />
15
<SpendingBreakdown />
16
<RecentTransactions />