Skip to content

Commit 4751d0e

Browse files
ansifmkansifmk
committed
about page
1 parent 03c017c commit 4751d0e

1 file changed

Lines changed: 297 additions & 1 deletion

File tree

‎src/features/about/About.tsx‎

Lines changed: 297 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,303 @@
1+
import { Link } from "react-router-dom"
2+
import { Smartphone, Shield, Sparkles, Award, ChevronRight, Check, Zap, Camera, Palette, Radio, Volume2, Hand, Droplets, Leaf, Star } from "lucide-react"
13

24
function About() {
35
return (
4-
<div>About</div>
6+
<div className="bg-white">
7+
<section className="relative h-[700px] flex items-center overflow-hidden bg-black">
8+
<video
9+
autoPlay
10+
loop
11+
muted
12+
playsInline
13+
className="absolute inset-0 w-full h-full object-cover opacity-50"
14+
>
15+
<source
16+
src="https://pikkme.com/cdn/shop/videos/c/vp/8bd6813624eb4be19540154a990ac332/8bd6813624eb4be19540154a990ac332.HD-720p-4.5Mbps-39202667.mp4?v=0"
17+
type="video/mp4"
18+
/>
19+
</video>
20+
21+
<div className="absolute inset-0 bg-gradient-to-br from-gray-900 via-black to-gray-800 opacity-10"></div>
22+
23+
<div className="relative z-10 max-w-7xl mx-auto px-4 w-full text-center">
24+
<h1 className="text-6xl md:text-8xl font-semibold mb-6 text-white tracking-tight">
25+
Crafted for iPhone
26+
</h1>
27+
<p className="text-2xl md:text-3xl text-gray-300 mb-12 font-light max-w-3xl mx-auto">
28+
Premium protection designed exclusively for your iPhone.
29+
Where innovation meets elegance.
30+
</p>
31+
<Link
32+
to="/products"
33+
className="inline-flex items-center gap-2 bg-white text-black px-10 py-4 rounded-full font-medium hover:bg-gray-100 transition-all"
34+
>
35+
Shop iPhone Cases
36+
<ChevronRight size={20} />
37+
</Link>
38+
</div>
39+
</section>
40+
41+
<section className="py-20 px-4 bg-gray-50">
42+
<div className="max-w-7xl mx-auto text-center">
43+
<h2 className="text-4xl md:text-5xl font-semibold mb-4 text-gray-900">
44+
Perfect Fit for Every iPhone
45+
</h2>
46+
<p className="text-xl text-gray-600 mb-16 max-w-3xl mx-auto">
47+
From the latest iPhone 16 Pro Max to classic models, we've got you covered
48+
</p>
49+
50+
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
51+
{[
52+
"iPhone 16 Pro Max",
53+
"iPhone 16 Pro",
54+
"iPhone 16 Plus",
55+
"iPhone 16",
56+
"iPhone 15 Pro Max",
57+
"iPhone 15 Pro",
58+
"iPhone 15 Plus",
59+
"iPhone 15",
60+
"iPhone 14 Pro Max",
61+
"iPhone 14 Pro",
62+
"iPhone 14 Plus",
63+
"iPhone 14"
64+
].map((model, index) => (
65+
<div key={index} className="bg-white p-6 rounded-2xl shadow-sm hover:shadow-md transition-shadow border border-gray-100">
66+
<Smartphone className="text-blue-600 mx-auto mb-3" size={32} />
67+
<div className="text-sm font-medium text-gray-900">{model}</div>
68+
</div>
69+
))}
70+
</div>
71+
</div>
72+
</section>
73+
74+
<section className="py-20 px-4">
75+
<div className="max-w-7xl mx-auto">
76+
<div className="grid md:grid-cols-2 gap-16 items-center">
77+
<div className="relative h-[500px] rounded-3xl overflow-hidden shadow-2xl order-2 md:order-1">
78+
<div className="w-120 h-full bg-gradient-to-br from-slate-800 to-slate-900 flex items-center justify-center">
79+
<Smartphone className="text-white opacity-30" size={150} />
80+
<img src="https://store.storeimages.cdn-apple.com/1/as-images.apple.com/is/MGFF4_AV3?wid=1144&hei=1144&fmt=jpeg&qlt=90&.v=Y01nUlJVNy9ZdHZDc1p5K2d3UndCRlZya2lKWlJmUEwrYndWOTJiVWJWQUYwVmtIbGRkS25RMVpBRlo0bk5DUUV4N25mN091OHlyTTc3bnpLWHlnN1E" alt="iPhone Cases" className="w-full h-full object-cover" />
81+
</div>
82+
</div>
83+
84+
<div className="order-1 md:order-2">
85+
<div className="inline-block bg-blue-100 px-4 py-2 rounded-full mb-6">
86+
<span className="text-blue-700 font-semibold text-sm">OUR STORY</span>
87+
</div>
88+
<h2 className="text-4xl md:text-5xl font-semibold mb-6 text-gray-900 leading-tight">
89+
Protecting iPhones Since 2014
90+
</h2>
91+
<div className="space-y-4 text-lg text-gray-700 leading-relaxed">
92+
<p>
93+
We started with a simple mission: create the perfect iPhone case. One that protects
94+
without adding bulk, showcases Apple's beautiful design, and feels premium in your hand.
95+
</p>
96+
<p>
97+
Today, we're trusted by over 500,000 iPhone users worldwide. Our cases combine
98+
military-grade protection with sleek aesthetics that complement your iPhone's design language.
99+
</p>
100+
<p className="font-semibold text-gray-900">
101+
Every case is precision-engineered for your specific iPhone model, ensuring perfect
102+
alignment with buttons, cameras, and wireless charging.
103+
</p>
104+
</div>
105+
106+
<div className="flex gap-8 mt-8">
107+
{[
108+
{ number: "500K+", label: "iPhone Users" },
109+
{ number: "4.9★", label: "App Store Rating" },
110+
{ number: "10+", label: "Years" }
111+
].map((stat, index) => (
112+
<div key={index}>
113+
<div className="text-3xl font-bold text-blue-600 mb-1">{stat.number}</div>
114+
<div className="text-sm text-gray-600">{stat.label}</div>
115+
</div>
116+
))}
117+
</div>
118+
</div>
119+
</div>
120+
</div>
121+
</section>
122+
123+
<section className="py-20 px-4 bg-gradient-to-b from-white to-gray-50">
124+
<div className="max-w-7xl mx-auto">
125+
<div className="text-center mb-16">
126+
<h2 className="text-4xl md:text-5xl font-semibold mb-4 text-gray-900">
127+
Designed for iPhone, Built to Last
128+
</h2>
129+
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
130+
Premium materials and precision engineering that honor Apple's design philosophy
131+
</p>
132+
</div>
133+
134+
<div className="grid md:grid-cols-3 gap-8">
135+
{[
136+
{
137+
icon: <Shield size={36} />,
138+
title: "MagSafe Compatible",
139+
description: "Perfectly aligned magnets work seamlessly with all MagSafe accessories and wireless chargers. Snap on, charge up, no compromises.",
140+
color: "from-blue-500 to-blue-600"
141+
},
142+
{
143+
icon: <Sparkles size={36} />,
144+
title: "Premium Materials",
145+
description: "Aircraft-grade aluminum buttons, anti-yellowing polycarbonate, and soft-touch silicone. Materials worthy of your iPhone.",
146+
color: "from-purple-500 to-purple-600"
147+
},
148+
{
149+
icon: <Award size={36} />,
150+
title: "Military Drop Protection",
151+
description: "12ft drop tested and MIL-STD-810G certified. Advanced air cushion technology protects your iPhone from life's accidents.",
152+
color: "from-indigo-500 to-indigo-600"
153+
}
154+
].map((feature, index) => (
155+
<div key={index} className="bg-white rounded-3xl p-8 shadow-lg hover:shadow-xl transition-all">
156+
<div className={`inline-flex p-4 rounded-2xl bg-gradient-to-br ${feature.color} text-white mb-6`}>
157+
{feature.icon}
158+
</div>
159+
<h3 className="text-2xl font-semibold mb-4 text-gray-900">{feature.title}</h3>
160+
<p className="text-gray-600 leading-relaxed">{feature.description}</p>
161+
</div>
162+
))}
163+
</div>
164+
</div>
165+
</section>
166+
167+
<section className="py-20 px-4">
168+
<div className="max-w-7xl mx-auto">
169+
<h2 className="text-4xl font-semibold mb-16 text-center text-gray-900">
170+
Everything Your iPhone Case Should Be
171+
</h2>
172+
173+
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
174+
{[
175+
{ icon: Zap, title: "Wireless Charging", desc: "Works with MagSafe & Qi chargers", color: "text-blue-600" },
176+
{ icon: Camera, title: "Camera Protection", desc: "Raised bezels protect your lenses", color: "text-purple-600" },
177+
{ icon: Palette, title: "Premium Finish", desc: "Scratch-resistant coating", color: "text-indigo-600" },
178+
{ icon: Radio, title: "MagSafe Ready", desc: "Built-in magnetic ring", color: "text-blue-600" },
179+
{ icon: Volume2, title: "Crystal Clear Audio", desc: "Precision-cut speaker holes", color: "text-purple-600" },
180+
{ icon: Hand, title: "Grip & Comfort", desc: "Non-slip textured sides", color: "text-indigo-600" },
181+
{ icon: Droplets, title: "Color Options", desc: "Match your iPhone style", color: "text-blue-600" },
182+
{ icon: Leaf, title: "Eco-Friendly", desc: "Recyclable packaging", color: "text-green-600" }
183+
].map((item, index) => (
184+
<div key={index} className="bg-gray-50 rounded-2xl p-6 hover:bg-white hover:shadow-lg transition-all border border-gray-100">
185+
<item.icon className={`${item.color} mb-4`} size={32} />
186+
<h3 className="font-semibold text-gray-900 mb-2">{item.title}</h3>
187+
<p className="text-sm text-gray-600">{item.desc}</p>
188+
</div>
189+
))}
190+
</div>
191+
</div>
192+
</section>
193+
194+
<section className="py-20 px-4 bg-slate-900 text-white">
195+
<div className="max-w-7xl mx-auto">
196+
<div className="grid md:grid-cols-2 gap-16 items-center">
197+
<div>
198+
<h2 className="text-4xl md:text-5xl font-semibold mb-6 leading-tight">
199+
The iPhone Case Promise
200+
</h2>
201+
<div className="space-y-6">
202+
{[
203+
"Precision-cut for your exact iPhone model",
204+
"100% MagSafe and wireless charging compatible",
205+
"Military-grade drop protection tested",
206+
"Premium materials that won't yellow or fade",
207+
"Lifetime warranty against defects",
208+
"Free returns within 30 days"
209+
].map((promise, index) => (
210+
<div key={index} className="flex items-start gap-4">
211+
<Check className="text-blue-400 flex-shrink-0 mt-1" size={24} />
212+
<span className="text-lg text-gray-300">{promise}</span>
213+
</div>
214+
))}
215+
</div>
216+
</div>
217+
218+
<div className="relative h-[400px] rounded-3xl overflow-hidden">
219+
<div className="w-full h-full bg-gradient-to-br from-blue-600 to-purple-600 flex items-center justify-center">
220+
<Shield className="text-white opacity-40" size={140} />
221+
<img src="https://cdn.thewirecutter.com/wp-content/media/2024/10/BEST-IPHONE-16-CASES-2048px-4833-2x1-1.jpg?width=2048&quality=75&crop=2:1&auto=webp" alt="Quality" className="w-full h-full object-cover" />
222+
</div>
223+
</div>
224+
</div>
225+
</div>
226+
</section>
227+
228+
<section className="py-20 px-4 bg-gray-50">
229+
<div className="max-w-7xl mx-auto">
230+
<div className="text-center mb-16">
231+
<h2 className="text-4xl md:text-5xl font-semibold mb-4 text-gray-900">
232+
Loved by iPhone Users
233+
</h2>
234+
<p className="text-xl text-gray-600">Join thousands of satisfied customers</p>
235+
</div>
236+
237+
<div className="grid md:grid-cols-3 gap-8">
238+
{[
239+
{
240+
review: "Finally, a case that doesn't hide my iPhone's beautiful design. The MagSafe works flawlessly and it's survived multiple drops!",
241+
name: "Sarah M.",
242+
model: "iPhone 15 Pro Max",
243+
rating: 5
244+
},
245+
{
246+
review: "Best case I've owned. The camera protection is excellent and wireless charging works perfectly. Worth every penny.",
247+
name: "Michael C.",
248+
model: "iPhone 16 Pro",
249+
rating: 5
250+
},
251+
{
252+
review: "Sleek, protective, and the buttons feel amazing. This is what an iPhone case should be. Highly recommend!",
253+
name: "Emily R.",
254+
model: "iPhone 15",
255+
rating: 5
256+
}
257+
].map((testimonial, index) => (
258+
<div key={index} className="bg-white rounded-3xl p-8 shadow-lg">
259+
<div className="flex gap-1 mb-4">
260+
{[...Array(testimonial.rating)].map((_, i) => (
261+
<Star key={i} className="text-yellow-400 fill-yellow-400" size={20} />
262+
))}
263+
</div>
264+
<p className="text-gray-700 mb-6 text-lg leading-relaxed">"{testimonial.review}"</p>
265+
<div className="border-t border-gray-100 pt-4">
266+
<div className="font-semibold text-gray-900">{testimonial.name}</div>
267+
<div className="text-sm text-gray-600">{testimonial.model} Owner</div>
268+
</div>
269+
</div>
270+
))}
271+
</div>
272+
</div>
273+
</section>
274+
275+
<section className="py-24 px-4 bg-slate-900 text-white">
276+
<div className="max-w-4xl mx-auto text-center">
277+
<h2 className="text-5xl md:text-6xl font-semibold mb-8 leading-tight">
278+
Ready to Protect Your iPhone?
279+
</h2>
280+
<p className="text-2xl mb-12 text-blue-100">
281+
Shop our collection of premium iPhone cases designed for every model
282+
</p>
283+
<div className="flex flex-col sm:flex-row gap-6 justify-center">
284+
<Link
285+
to="/products"
286+
className="inline-flex items-center justify-center gap-2 bg-white text-blue-600 px-10 py-4 rounded-full font-semibold text-lg hover:bg-blue-50 transition-all shadow-xl"
287+
>
288+
Shop iPhone Cases
289+
<ChevronRight size={22} />
290+
</Link>
291+
<Link
292+
to="/contact"
293+
className="inline-flex items-center justify-center gap-2 bg-transparent border-2 border-white text-white px-10 py-4 rounded-full font-semibold text-lg hover:bg-white/10 transition-all"
294+
>
295+
Contact Us
296+
</Link>
297+
</div>
298+
</div>
299+
</section>
300+
</div>
5301
)
6302
}
7303

0 commit comments

Comments
 (0)