@smbcloud / wise-landing-forge
Code Commits Issues Pulls Cloud Agent CI/CD
main
main
tsx 154 lines 7.96 KB
Raw
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;