Skip to content

Commit 3311705

Browse files
naheel0naheel0
authored
Merge pull request #15 from BeyteFlow/features/about
update about page
2 parents cdce204 + c86201d commit 3311705

8 files changed

Lines changed: 305 additions & 275 deletions

File tree

‎src/features/about/About.tsx‎

Lines changed: 20 additions & 275 deletions
Original file line numberDiff line numberDiff line change
@@ -1,276 +1,22 @@
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"
3-
4-
function About() {
1+
import { Link } from "react-router-dom";
2+
import { ChevronRight } from "lucide-react";
3+
import AboutHero from "./components/AboutHero";
4+
import ModelGrid from "./components/ModelGrid";
5+
import AboutStory from "./components/AboutStory";
6+
import CoreFeatures from "./components/CoreFeatures";
7+
import FeatureGrid from "./components/FeatureGrid";
8+
import BrandPromise from "./components/BrandPromise";
9+
import Testimonials from "./components/Testimonials";
10+
function AboutContent() {
511
return (
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>
12+
<div className="bg-white font-sans selection:bg-blue-100">
13+
<AboutHero />
14+
<ModelGrid />
15+
<AboutStory />
16+
<CoreFeatures />
17+
<FeatureGrid />
18+
<BrandPromise />
19+
<Testimonials />
27420

27521
<section className="py-24 px-4 bg-slate-900 text-white">
27622
<div className="max-w-4xl mx-auto text-center">
@@ -298,7 +44,6 @@ function About() {
29844
</div>
29945
</section>
30046
</div>
301-
)
47+
);
30248
}
303-
304-
export default About
49+
export default AboutContent;

‎src/features/about/components/AboutHero.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { Link } from "react-router-dom";
2+
import { ChevronRight } from "lucide-react";
3+
const AboutHero = () => (
4+
<section className="relative h-175 flex items-center overflow-hidden bg-black">
5+
<video
6+
autoPlay loop muted playsInline
7+
className="absolute inset-0 w-full h-full object-cover opacity-50"
8+
>
9+
<source
10+
src="https://pikkme.com/cdn/shop/videos/c/vp/8bd6813624eb4be19540154a990ac332/8bd6813624eb4be19540154a990ac332.HD-720p-4.5Mbps-39202667.mp4?v=0"
11+
type="video/mp4"
12+
/>
13+
</video>
14+
<div className="absolute inset-0 bg-linear-to-br from-gray-900 via-black to-gray-800 opacity-10"></div>
15+
16+
<div className="relative z-10 max-w-7xl mx-auto px-4 w-full text-center">
17+
<h1 className="text-6xl md:text-8xl font-semibold mb-6 text-white tracking-tight">
18+
Crafted for iPhone
19+
</h1>
20+
<p className="text-2xl md:text-3xl text-gray-300 mb-12 font-light max-w-3xl mx-auto">
21+
Premium protection designed exclusively for your iPhone.
22+
Where innovation meets elegance.
23+
</p>
24+
<Link
25+
to="/products"
26+
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"
27+
>
28+
Shop iPhone Cases
29+
<ChevronRight size={20} />
30+
</Link>
31+
</div>
32+
</section>
33+
);
34+
export default AboutHero;

0 commit comments

Comments
 (0)