Skip to content

Commit 892e6a1

Browse files
Alexandrbig1Alexandrbig1
committed
fix: update styles improvements and project structure
1 parent 78b8599 commit 892e6a1

16 files changed

Lines changed: 51 additions & 48 deletions

File tree

‎package-lock.json‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@
6565
"@reduxjs/toolkit": "^2.9.0",
6666
"axios": "^1.13.0",
6767
"framer-motion": "^12.23.24",
68+
"lodash.debounce": "^4.0.8",
6869
"lucide-react": "^0.548.0",
6970
"radix-ui": "^1.4.3",
7071
"react": "^19.2.0",

‎src/components/BestOfCoreX/BestOfCoreX.jsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ export default function BestOfCoreX() {
9898
}
9999

100100
return (
101-
<section className="px-10 w-full max-w-7xl mx-auto flex flex-col gap-[40px]">
101+
<section className="px-5 md:px-0 w-full max-w-7xl mx-auto flex flex-col gap-[40px]">
102102
{/* Header */}
103103
<h2 className="bg-[#F7FAFF] text-[32px] lg:text-[48px] uppercase section-title">
104104
<span className="text-[#000]">BEST </span>
@@ -111,12 +111,12 @@ export default function BestOfCoreX() {
111111
{/* Tabs + Navigation in same row */}
112112
<div className="flex flex-wrap justify-between items-center sm:gap-4">
113113
{/* Tabs: horizontally scrollable on mobile, hidden scrollbar */}
114-
<div className="tabs-scroll-container px-4 sm:mx-0 sm:px-0 overflow-x-auto whitespace-nowrap snap-x snap-mandatory sm:overflow-visible">
114+
<div className="tabs-scroll-container sm:mx-0 sm:px-0 overflow-x-auto whitespace-nowrap snap-x snap-mandatory sm:overflow-visible flex gap-3">
115115
{tabs.map((tab) => (
116116
<button
117117
key={tab.id}
118118
onClick={() => setActiveTab(tab.id)}
119-
className={`inline-block mr-3 last:mr-0 snap-start px-5 py-2 rounded-lg font-semibold uppercase tracking-wide transition-all duration-300
119+
className={`px-4 md:px-5 py-2 md:py-3 rounded-lg uppercase text-[12px] md:text-[16px] cursor-pointer tracking-wide transition-all duration-300
120120
${
121121
activeTab === tab.id
122122
? 'bg-[#171717] text-white'
@@ -134,7 +134,7 @@ export default function BestOfCoreX() {
134134
<button
135135
onClick={prevSlide}
136136
disabled={!canGoPrev}
137-
className="flex h-10 w-10 items-center justify-center rounded-full border border-gray-300 text-gray-500 hover:bg-gray-100
137+
className="flex h-10 w-10 items-center justify-center rounded-full border border-gray-300 text-gray-500 hover:bg-gray-100 cursor-pointer
138138
disabled:cursor-not-allowed disabled:opacity-40 transition-all duration-200"
139139
aria-label="Previous"
140140
>
@@ -144,7 +144,7 @@ export default function BestOfCoreX() {
144144
<button
145145
onClick={nextSlide}
146146
disabled={!canGoNext}
147-
className="flex h-10 w-10 items-center justify-center rounded-full border border-gray-300 text-gray-500 hover:bg-gray-100
147+
className="flex h-10 w-10 items-center justify-center rounded-full border border-gray-300 text-gray-500 hover:bg-gray-100 cursor-pointer
148148
disabled:cursor-not-allowed disabled:opacity-40 transition-all duration-200"
149149
aria-label="Next"
150150
>

‎src/components/BottomFooter/BottomFooter.jsx‎

Lines changed: 26 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
export default function BottomFooter() {
2-
const paymentLogos = [];
1+
import { FaRegCopyright } from 'react-icons/fa6';
32

3+
export default function BottomFooter() {
44
return (
5-
<footer className="bg-[#071827] text-neutral-200">
5+
<footer className="bg-[#071827] text-neutral-200 ">
66
{/* Top disclaimer bar */}
7-
<div className="max-w-7xl mx-auto px-6 py-6 text-center text-sm text-neutral-200/90">
7+
<div className="max-w-7xl mx-auto px-5 md:px-0 py-6 text-center text-sm text-neutral-200/90">
88
<p className="max-w-4l mx-auto">
99
**The Food and Drug Administration has not evaluated these statements.
1010
This product is not meant to diagnose, treat, cure, or prevent any
@@ -13,13 +13,13 @@ export default function BottomFooter() {
1313
</div>
1414

1515
{/* Bottom footer area */}
16-
<div className="max-w-7xl mx-auto px-6 py-12 border-t border-neutral-800">
17-
<div className="flex flex-col md:flex-row md:items-start md:justify-between gap-10">
16+
<div className="max-w-7xl mx-auto px-5 md:px-0 py-12 border-t border-neutral-800">
17+
<div className="flex flex-col md:flex-row items-center md:items-start md:justify-between">
1818
{/* Left block: copyright + powered by + links */}
1919
<div className="flex-1">
20-
<div className="mb-6">
21-
<p className="text-xl md:text-xl leading-tight font-bold">
22-
© 2025{' '}
20+
<div className="mb-6 self-center">
21+
<p className="text-xl md:text-xl leading-tight font-bold flex items-center gap-2">
22+
<FaRegCopyright /> {new Date().getFullYear()}{' '}
2323
<span className="font-black">
2424
Core<span className="text-red-500">X</span> Nutrition
2525
</span>
@@ -38,34 +38,33 @@ export default function BottomFooter() {
3838
</span>
3939
</div>
4040

41-
<div className="flex flex-wrap gap-6 text-base text-neutral-300">
42-
<a href="/return-policy" className="link-underline text-sm">
41+
<div className="flex flex-wrap align-center gap-4 text-base text-neutral-300">
42+
<a
43+
href="/return-policy"
44+
className="link-underline text-[12px] md:text-sm"
45+
>
4346
Refund policy
4447
</a>
45-
<a href="/privacy-policy" className="link-underline text-sm">
48+
<a
49+
href="/privacy-policy"
50+
className="link-underline text-[12px] md:text-sm"
51+
>
4652
Privacy policy
4753
</a>
48-
<a href="/terms-of-service" className="link-underline text-sm">
54+
<a
55+
href="/terms-of-service"
56+
className="link-underline text-[12px] md:text-sm"
57+
>
4958
Terms of service
5059
</a>
51-
<a href="/shipping-policy" className="link-underline text-sm">
60+
<a
61+
href="/shipping-policy"
62+
className="link-underline text-[12px] md:text-sm"
63+
>
5264
Shipping policy
5365
</a>
5466
</div>
5567
</div>
56-
57-
{/* Right block: payment icons */}
58-
<div className="flex items-center justify-end gap-4">
59-
{paymentLogos.length > 0 &&
60-
paymentLogos.map((logo) => (
61-
<img
62-
src={logo.src}
63-
alt={logo.name}
64-
className="h-6 w-auto object-contain bg-white rounded-sm p-1"
65-
loading="lazy"
66-
/>
67-
))}
68-
</div>
6968
</div>
7069
</div>
7170
</footer>

‎src/components/CollectionSection.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ const CollectionSection = () => {
6262
};
6363

6464
return (
65-
<section className="shop-by-collection">
65+
<section className="shop-by-collection ">
6666
<h2 className="section-title text-[32px] lg:text-[48px]">
6767
<span className="text-[#000]">SHOP </span>
6868
<span className="stroke-title">BY </span>

‎src/components/ReviewsSection.jsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -121,13 +121,12 @@ const ReviewsSection = () => {
121121
>
122122
<h2
123123
id="reviews"
124-
className=" text-[32px] lg:text-[48px] uppercase section-title"
124+
className=" text-[32px] lg:text-[48px] uppercase section-title px-5 md:px-0 align-center"
125125
>
126126
<span className="text-[#000]">THOUSANDS</span>
127127
<span className="stroke-title">{' '} LOVE</span>
128128
<span className="capitalize text-[#000]"> Core</span>
129129
<span className="text-red-500">X</span>
130-
<br />
131130
<span className="text-[#000]"> Nutrition</span>
132131
</h2>
133132

‎src/components/Search/SearchBox.jsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -130,8 +130,9 @@ export default function SearchBox({ onClose, isOpen }) {
130130
<div
131131
ref={boxRef}
132132
className={`fixed top-0 right-0 w-full sm:w-[40%] h-full bg-white shadow-2xl border-l border-gray-200 z-[999]
133-
transform transition-transform duration-300 ease-in-out
133+
transform-gpu will-change-transform transition-all duration-300 ease-in-out
134134
${isOpen ? 'translate-x-0' : 'translate-x-full'} flex flex-col`}
135+
aria-hidden={!isOpen}
135136
>
136137
{/* Drawer Content */}
137138
<div

‎src/components/SupplementForGoalsSection.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ export default function SupplementForGoalsSection() {
5656
<section
5757
id="goals"
5858
ref={goalsRef}
59-
className="px-10 flex flex-col gap-16"
59+
className="px-5 md:px-0 flex flex-col gap-16"
6060
aria-labelledby="goals-heading"
6161
>
6262
<h2

‎src/components/TopFooter/TopFooter.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ export default function TopFooter() {
5757
};
5858

5959
return (
60-
<footer className="bg-neutral-900 text-neutral-200 px-6 py-12">
60+
<footer className="bg-neutral-900 text-neutral-200 px-5 md:px-0 py-12">
6161
<div className="max-w-7xl mx-auto grid gap-12 md:grid-cols-3">
6262
{/* Logo + Address */}
6363
<div className="flex flex-col gap-[24px]">

‎src/components/TopHeader/TopHeader.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export default function TopHeader() {
3333
}, [messages.length]);
3434

3535
return (
36-
<header className="w-full bg-[#0D1B2A] text-white text-sm fixed top-0 left-0 right-0 z-50 h-[48px]">
36+
<div className="w-full bg-[#0D1B2A] text-white text-sm fixed top-0 left-0 right-0 z-50 h-[48px]">
3737
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative h-full">
3838
<div className="flex items-center h-full">
3939
{/* Promo Message - Centered across full viewport */}
@@ -56,6 +56,6 @@ export default function TopHeader() {
5656
</div>
5757
</div>
5858
</div>
59-
</header>
59+
</div>
6060
);
6161
}

0 commit comments

Comments
 (0)