Skip to content

Commit fe35801

Browse files
Alexandrbig1Alexandrbig1
committed
fix: update top footer and bottom fotter components
1 parent 4142d44 commit fe35801

8 files changed

Lines changed: 352 additions & 50 deletions

File tree

src/components/Footer/TopFooter.jsx renamed to src/components/BottomFooter/BottomFooter.jsx

Lines changed: 54 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export default function TopFooter() {
1+
export default function BottomFooter() {
22
// Payment logos. Replace or add entries as needed. (You provided the Amazon CDN URL.)
33
const paymentLogos = [
44
{
@@ -47,7 +47,11 @@ export default function TopFooter() {
4747
<footer className="bg-[#071827] text-neutral-200">
4848
{/* Top disclaimer bar */}
4949
<div className="max-w-7xl mx-auto px-6 py-6 text-center text-sm text-neutral-200/90">
50-
<p className="max-w-4xl mx-auto">**The Food and Drug Administration has not evaluated these statements. This product is not meant to diagnose, treat, cure, or prevent any illness.</p>
50+
<p className="max-w-4l mx-auto">
51+
**The Food and Drug Administration has not evaluated these statements.
52+
This product is not meant to diagnose, treat, cure, or prevent any
53+
illness.
54+
</p>
5155
</div>
5256

5357
{/* Bottom footer area */}
@@ -56,37 +60,62 @@ export default function TopFooter() {
5660
{/* Left block: copyright + powered by + links */}
5761
<div className="flex-1">
5862
<div className="mb-6">
59-
<p className="text-xl md:text-xl leading-tight font-bold">© 2025 <span className="font-black">Core<span className="text-red-500">X</span> Nutrition</span></p>
60-
<p className="mt-2 text-base md:text-lg text-neutral-300">Powered by: Open Code Chicago</p>
63+
<p className="text-xl md:text-xl leading-tight font-bold">
64+
© 2025{' '}
65+
<span className="font-black">
66+
Core<span className="text-red-500">X</span> Nutrition
67+
</span>
68+
</p>
69+
{/* Replace p with a link that uses the animated underline */}
70+
Powered by:{' '}
71+
<span className="font-semibold">
72+
<a
73+
href="https://opencodechicago.org"
74+
target="_blank"
75+
rel="noopener noreferrer"
76+
className="link-underline-inverse mt-2 inline-block text-base md:text-lg text-neutral-300"
77+
>
78+
Open Code Chicago
79+
</a>
80+
</span>
6181
</div>
6282

6383
<div className="flex flex-wrap gap-6 text-base text-neutral-300">
64-
<a href="/return-policy" className="hover:underline">Refund policy</a>
65-
<a href="/privacy-policy" className="hover:underline">Privacy policy</a>
66-
<a href="/terms-of-service" className="hover:underline">Terms of service</a>
67-
<a href="/shipping-policy" className="hover:underline">Shipping policy</a>
84+
<a href="/return-policy" className="link-underline text-sm">
85+
Refund policy
86+
</a>
87+
<a href="/privacy-policy" className="link-underline text-sm">
88+
Privacy policy
89+
</a>
90+
<a href="/terms-of-service" className="link-underline text-sm">
91+
Terms of service
92+
</a>
93+
<a href="/shipping-policy" className="link-underline text-sm">
94+
Shipping policy
95+
</a>
6896
</div>
6997
</div>
7098

7199
{/* Right block: payment icons */}
72100
<div className="flex items-center justify-end gap-4">
73-
{paymentLogos.length > 0 && paymentLogos.map((logo) => (
74-
<a
75-
key={logo.name}
76-
href={logo.href}
77-
target="_blank"
78-
rel="noopener noreferrer"
79-
aria-label={logo.name}
80-
className="inline-flex items-center"
81-
>
82-
<img
83-
src={logo.src}
84-
alt={logo.name}
85-
className="h-10 w-auto object-contain bg-white rounded-sm p-1"
86-
loading="lazy"
87-
/>
88-
</a>
89-
))}
101+
{paymentLogos.length > 0 &&
102+
paymentLogos.map((logo) => (
103+
<a
104+
key={logo.name}
105+
href={logo.href}
106+
target="_blank"
107+
rel="noopener noreferrer"
108+
aria-label={logo.name}
109+
className="inline-flex items-center"
110+
>
111+
<img
112+
src={logo.src}
113+
alt={logo.name}
114+
className="h-6 w-auto object-contain bg-white rounded-sm p-1"
115+
loading="lazy"
116+
/>
117+
</a>
118+
))}
90119
</div>
91120
</div>
92121
</div>

‎src/components/BottomFooter/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from "./BottomFooter";

‎src/components/GarageSaleBanner.jsx‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
1-
import React from 'react'
2-
import garageSaleImage from '../assets/garagesale/garagesale-banner.webp'
3-
import './GarageSaleBanner.css'
1+
import React from 'react';
2+
import garageSaleImage from '../assets/garagesale/garagesale-banner.webp';
3+
import './GarageSaleBanner.css';
44

55
const GarageSaleBanner = () => {
6-
return (
7-
<div className='garage-sale-banner w-full mt-24'>
8-
<img className='w-full h-full object-cover' src={garageSaleImage} alt="Garage Sale promotional banner" loading="lazy" />
9-
</div>
10-
)
11-
}
6+
return (
7+
<div className="garage-sale-banner w-full mt-24">
8+
<img
9+
className="w-full h-full object-cover"
10+
src={garageSaleImage}
11+
alt="Garage Sale promotional banner"
12+
loading="lazy"
13+
/>
14+
</div>
15+
);
16+
};
1217

13-
export default GarageSaleBanner
18+
export default GarageSaleBanner;

‎src/components/TopFooter/TopFooter.jsx‎

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
import { useState } from 'react';
2+
import { ArrowRight } from 'lucide-react';
3+
import { Link } from 'react-router';
4+
import { toast } from 'react-toastify';
5+
6+
const customerCare = [
7+
{ name: 'My Account', href: '/login' },
8+
{ name: 'My Orders', href: '/login' },
9+
{ name: 'Email Support', href: 'mailto:info@opencodechicago.org' },
10+
{ name: 'Call Support', href: 'tel:+13125551234' },
11+
];
12+
13+
const information = [
14+
{ name: 'Shipping Policy', href: '/shipping-policy' },
15+
{ name: 'Return Policy', href: '/return-policy' },
16+
{ name: 'Privacy Policy', href: '/privacy-policy' },
17+
{ name: 'Accessibility', href: '/accessibility' },
18+
{ name: 'Terms of Service', href: '/terms-of-service' },
19+
];
20+
21+
export default function TopFooter() {
22+
const [email, setEmail] = useState('');
23+
24+
const handleSubmit = (e) => {
25+
e.preventDefault();
26+
27+
const isValidEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim());
28+
29+
if (!isValidEmail) {
30+
toast.error('Please enter a valid email address.');
31+
return;
32+
}
33+
34+
// Simulate subscription success (e.g., API call here)
35+
console.log('Subscribed:', email);
36+
37+
// Show success toast notification
38+
toast.success(
39+
'Thank you for subscribing! Your email has been received. You’ll now get our latest deals and discounts.'
40+
);
41+
42+
setEmail('');
43+
};
44+
45+
return (
46+
<footer className="bg-neutral-900 text-neutral-200 px-6 py-12">
47+
<div className="max-w-7xl mx-auto grid gap-12 md:grid-cols-3">
48+
{/* Logo + Address */}
49+
<div>
50+
<Link
51+
to="/"
52+
className="inline-block mb-4"
53+
onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
54+
>
55+
<img
56+
src="/images/official-logo-core-x-footer.svg"
57+
alt="CoreX"
58+
className="mb-4 w-32"
59+
/>
60+
</Link>
61+
<ul className="flex space-x-2 mb-4">
62+
<li>
63+
<a
64+
href="#"
65+
target="_blank"
66+
rel="noopener noreferrer"
67+
className="text-neutral-300 transition-transform duration-300 ease-in-out"
68+
>
69+
<img
70+
src="/images/youtube_icon.png"
71+
alt="YouTube"
72+
className="w-6 h-6 hover:scale-110 transform hover:rotate-2 hover:shadow-lg"
73+
/>
74+
</a>
75+
</li>
76+
<li>
77+
<a
78+
href="#"
79+
target="_blank"
80+
rel="noopener noreferrer"
81+
className="text-neutral-300 transition-transform duration-300 ease-in-out"
82+
>
83+
<img
84+
src="/images/linkedin_icon.png"
85+
alt="LinkedIn"
86+
className="w-6 h-6 hover:scale-110 transform hover:rotate-2 hover:shadow-lg"
87+
/>
88+
</a>
89+
</li>
90+
<li>
91+
<a
92+
href="#"
93+
target="_blank"
94+
rel="noopener noreferrer"
95+
className="text-neutral-300 transition-transform duration-300 ease-in-out"
96+
>
97+
<img
98+
src="/images/x_icon.png"
99+
alt="Twitter"
100+
className="w-6 h-6 hover:scale-110 transform hover:rotate-2 hover:shadow-lg"
101+
/>
102+
</a>
103+
</li>
104+
<li>
105+
<a
106+
href="#"
107+
target="_blank"
108+
rel="noopener noreferrer"
109+
className="text-neutral-300 transition-transform duration-300 ease-in-out"
110+
>
111+
<img
112+
src="/images/facebook_icon.png"
113+
alt="Facebook"
114+
className="w-6 h-6 hover:scale-110 transform hover:rotate-2 hover:shadow-lg"
115+
/>
116+
</a>
117+
</li>
118+
</ul>
119+
<address className="hover:underline cursor-pointer not-italic text-sm leading-relaxed">
120+
1234 N Main St,
121+
<br /> Chicago, IL 60607
122+
</address>
123+
</div>
124+
125+
{/* Navigation Links */}
126+
<nav className="grid grid-cols-2 gap-8 text-sm">
127+
<div>
128+
<h3 className="font-semibold text-white mb-3">Customer Care</h3>
129+
<ul className="space-y-2">
130+
{customerCare.map((link) => (
131+
<li key={link.name}>
132+
<a
133+
href={link.href}
134+
className="text-neutral-300 link-underline transition"
135+
>
136+
{link.name}
137+
</a>
138+
</li>
139+
))}
140+
</ul>
141+
</div>
142+
<div>
143+
<h3 className="font-semibold text-white mb-3">Information</h3>
144+
<ul className="space-y-2">
145+
{information.map((link) => (
146+
<li key={link.name}>
147+
<a
148+
href={link.href}
149+
className="text-neutral-300 link-underline transition"
150+
>
151+
{link.name}
152+
</a>
153+
</li>
154+
))}
155+
</ul>
156+
</div>
157+
</nav>
158+
159+
{/* Newsletter Form */}
160+
<form onSubmit={handleSubmit} className="flex flex-col justify-center">
161+
<h3 className="text-4xl uppercase font-bold mb-4">
162+
Get our latest deals and discounts!
163+
</h3>
164+
<div className="flex bg-neutral-800 rounded-lg overflow-hidden">
165+
<input
166+
type="email"
167+
value={email}
168+
onChange={(e) => setEmail(e.target.value)}
169+
placeholder="Enter your email"
170+
className="flex-grow p-3 bg-neutral-800 text-neutral-200 placeholder-neutral-400 outline-none hover:bg-neutral-700 hover:ring-1 hover:ring-neutral-500 focus:ring-2 focus:ring-white transition duration-200 ease-in-out"
171+
required
172+
/>
173+
<button
174+
type="submit"
175+
className="p-3 rounded-full bg-white hover:bg-neutral-400 text-neutral-900 transition cursor-pointer flex items-center justify-center"
176+
aria-label="Subscribe"
177+
>
178+
<ArrowRight className="w-5 h-5 text-neutral-900" />
179+
</button>
180+
</div>
181+
<p className="mt-2 text-xs">
182+
Become a Core<span className="text-red-500">X</span> Insider!
183+
</p>
184+
</form>
185+
</div>
186+
</footer>
187+
);
188+
}

src/components/Footer/index.js renamed to src/components/TopFooter/index.js

File renamed without changes.

‎src/components/index.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,6 @@ export { default as WhyChoose } from './WhyChoose';
77
export { default as SupplementForGoalsSection } from './SupplementForGoalsSection';
88

99
export { default as MainHeader } from './Header';
10-
export { default as TopFooter } from './Footer';
11-
export { default as LinkButton } from './ui/LinkButton';
10+
export { default as TopFooter } from './TopFooter';
11+
export { default as BottomFooter } from './BottomFooter';
12+
export { default as LinkButton } from './ui/LinkButton';

0 commit comments

Comments
 (0)