Skip to content

Commit bc1e991

Browse files
codervivek5codervivek5
authored
Merge pull request #2080 from Tanmay-Mirgal/spons
 Sponsorships page is added
2 parents e0b1643 + 126bbca commit bc1e991

File tree

2 files changed

+149
-0
lines changed

2 files changed

+149
-0
lines changed

‎src/User/pages/Sponsorships/Sponsorships.jsx

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import React from 'react';
2+
import { motion } from 'framer-motion';
3+
import 'tailwindcss/tailwind.css';
4+
5+
const Sponsorships = () => {
6+
// Sample data
7+
const causes = [
8+
{ id: 1, title: 'Education for All', description: 'Providing education resources to underprivileged children.', impact: '5000+ students educated' },
9+
{ id: 2, title: 'Clean Water Initiative', description: 'Ensuring clean and safe drinking water in rural areas.', impact: '2000+ communities served' },
10+
{ id: 3, title: 'Health and Wellness', description: 'Offering medical aid and health programs.', impact: '3000+ people benefited' }
11+
];
12+
13+
const donationOptions = [
14+
{ id: 1, amount: '$50', description: 'Basic Support' },
15+
{ id: 2, amount: '$100', description: 'Intermediate Support' },
16+
{ id: 3, amount: '$200', description: 'Premium Support' }
17+
];
18+
19+
return (
20+
<div className="min-h-screen bg-[#fff5edff] flex flex-col items-center p-4 md:p-8">
21+
<motion.div
22+
initial={{ opacity: 0, y: 30 }}
23+
animate={{ opacity: 1, y: 0 }}
24+
transition={{ duration: 1 }}
25+
className="bg-white rounded-2xl shadow-lg p-6 md:p-8 w-full max-w-5xl"
26+
>
27+
<h1 className="text-3xl md:text-4xl font-bold text-center text-blue-600 mb-6 mt-[8vh]">Support Our Causes</h1>
28+
<hr className="border-2 border-blue-500 w-3/4 md:w-1/2 mx-auto my-4 mb-6" />
29+
30+
<section className="mb-8 md:mb-12">
31+
<h2 className="text-2xl md:text-3xl font-semibold text-gray-800 mb-4 md:mb-6">Supported Causes</h2>
32+
<div className="grid gap-6 md:gap-8 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
33+
{causes.map(cause => (
34+
<motion.div
35+
key={cause.id}
36+
initial={{ scale: 0.95, opacity: 0 }}
37+
animate={{ scale: 1, opacity: 1 }}
38+
transition={{ duration: 0.5 }}
39+
className="bg-white p-4 md:p-6 rounded-xl shadow-md hover:shadow-xl transition-shadow duration-300"
40+
>
41+
<h3 className="text-xl md:text-2xl font-semibold text-blue-500">{cause.title}</h3>
42+
<p className="text-gray-700 mt-2">{cause.description}</p>
43+
<p className="text-green-600 mt-2 font-semibold">{cause.impact}</p>
44+
</motion.div>
45+
))}
46+
</div>
47+
</section>
48+
49+
<section>
50+
<h2 className="text-2xl md:text-3xl font-semibold text-gray-800 mb-4 md:mb-6">Donation Options</h2>
51+
<div className="grid gap-6 md:gap-8 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
52+
{donationOptions.map(option => (
53+
<motion.div
54+
key={option.id}
55+
initial={{ opacity: 0, y: 20 }}
56+
animate={{ opacity: 1, y: 0 }}
57+
transition={{ duration: 0.4 }}
58+
className="bg-gradient-to-r from-green-400 to-green-600 p-4 md:p-6 rounded-xl text-center text-white shadow-md hover:shadow-xl transition-shadow duration-300"
59+
>
60+
<p className="text-xl md:text-2xl font-bold">{option.amount}</p>
61+
<p className="mt-2">{option.description}</p>
62+
<button className="mt-4 bg-white text-green-600 py-2 px-4 rounded-lg font-semibold hover:bg-gray-200 transition-colors duration-300">Donate</button>
63+
</motion.div>
64+
))}
65+
</div>
66+
</section>
67+
</motion.div>
68+
</div>
69+
);
70+
};
71+
72+
export default Sponsorships;

‎src/User/pages/Warranty/Warranty.jsx

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import React from 'react';
2+
import { motion } from 'framer-motion';
3+
import 'tailwindcss/tailwind.css';
4+
5+
const WarrantyInformationPage = () => {
6+
return (
7+
<div className="min-h-screen bg-gradient-to-r from-gray-50 to-gray-200 flex flex-col items-center p-6 md:p-12">
8+
<motion.div
9+
initial={{ opacity: 0, y: 30 }}
10+
animate={{ opacity: 1, y: 0 }}
11+
transition={{ duration: 1 }}
12+
className="bg-white rounded-3xl shadow-xl p-8 md:p-12 w-full max-w-4xl"
13+
>
14+
<h1 className="text-4xl font-extrabold text-center text-blue-800 mb-6">Warranty Information</h1>
15+
<hr className='border-2 border-blue-500 w-1/2 mx-auto mb-8' />
16+
17+
<section className="mb-12">
18+
<h2 className="text-2xl md:text-3xl font-semibold text-gray-800 mb-6">Warranty Terms</h2>
19+
<p className="text-gray-700 leading-relaxed">
20+
Our products come with a comprehensive warranty to ensure your peace of mind. This warranty covers manufacturing defects and certain operational issues under normal use conditions. Please review the specific terms of the warranty provided with your product.
21+
</p>
22+
</section>
23+
24+
<section className="mb-12">
25+
<h2 className="text-2xl md:text-3xl font-semibold text-gray-800 mb-6">Coverage Details</h2>
26+
<div className="bg-gray-100 p-6 rounded-xl shadow-lg">
27+
<ul className="list-disc list-inside text-gray-700 space-y-4">
28+
<li><strong>Duration:</strong> Our standard warranty lasts for 12 months from the date of purchase.</li>
29+
<li><strong>What’s Covered:</strong> Defects in material or workmanship under normal use.</li>
30+
<li><strong>What’s Not Covered:</strong> Damage caused by misuse, unauthorized repairs, or accidents.</li>
31+
<li><strong>Extended Coverage:</strong> Optional extended warranty plans are available for purchase.</li>
32+
</ul>
33+
</div>
34+
</section>
35+
36+
<section>
37+
<h2 className="text-2xl md:text-3xl font-semibold text-gray-800 mb-6">Claims Process</h2>
38+
<div className="space-y-6">
39+
<div className="flex items-start space-x-4">
40+
<div className="w-12 h-12 bg-blue-600 text-white rounded-full flex items-center justify-center text-2xl font-bold">1</div>
41+
<div>
42+
<h3 className="text-xl font-semibold text-blue-600">Contact Us</h3>
43+
<p className="text-gray-700">Reach out to our customer service team via email or phone with your warranty claim details.</p>
44+
</div>
45+
</div>
46+
47+
<div className="flex items-start space-x-4">
48+
<div className="w-12 h-12 bg-blue-600 text-white rounded-full flex items-center justify-center text-2xl font-bold">2</div>
49+
<div>
50+
<h3 className="text-xl font-semibold text-blue-600">Provide Proof of Purchase</h3>
51+
<p className="text-gray-700">Submit a copy of your receipt or order confirmation along with the warranty claim.</p>
52+
</div>
53+
</div>
54+
55+
<div className="flex items-start space-x-4">
56+
<div className="w-12 h-12 bg-blue-600 text-white rounded-full flex items-center justify-center text-2xl font-bold">3</div>
57+
<div>
58+
<h3 className="text-xl font-semibold text-blue-600">Receive Instructions</h3>
59+
<p className="text-gray-700">Follow the instructions provided by our team to return the product or receive a replacement.</p>
60+
</div>
61+
</div>
62+
63+
<div className="flex items-start space-x-4">
64+
<div className="w-12 h-12 bg-blue-600 text-white rounded-full flex items-center justify-center text-2xl font-bold">4</div>
65+
<div>
66+
<h3 className="text-xl font-semibold text-blue-600">Resolution</h3>
67+
<p className="text-gray-700">Receive a resolution, whether it be a repair, replacement, or refund as per the warranty terms.</p>
68+
</div>
69+
</div>
70+
</div>
71+
</section>
72+
</motion.div>
73+
</div>
74+
);
75+
};
76+
77+
export default WarrantyInformationPage;

0 commit comments

Comments
 (0)