Skip to content

Commit 5c9e876

Browse files
Alexandrbig1Alexandrbig1
authored
Merge pull request #114 from fudailzafar/ui/shipping-policy
UI: improved design of shipping policy #105
2 parents bb428d1 + 9bcbceb commit 5c9e876

1 file changed

Lines changed: 155 additions & 43 deletions

File tree

‎src/pages/ShippingPolicy/ShippingPage.jsx‎

Lines changed: 155 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,161 @@
1-
const ShippingPage = () => {
1+
import SEO from '../../components/SEO';
2+
3+
export default function ShippingPage() {
24
return (
3-
<div className="min-h-screen bg-gray-50 text-gray-900 font-sans">
4-
{/* ---------------- POLICY CONTENT ---------------- */}
5-
<main className="flex justify-center py-7 px-5">
6-
<div className="max-w-4xl bg-gray-50 px-5 py-7">
7-
<h1 className="text-3xl font-extrabold text-gray-900 mb-4">
8-
Shipping Policy
9-
</h1>
10-
{[
11-
{
12-
title: 'Customer Service',
13-
text: 'Thank you for visiting CoreX Nutrition. This is an open-source demo project created by Open Code Chicago. While our website is designed to simulate a real supplements store, please note that we do not process real payments or ship actual products.',
14-
},
15-
{
16-
title: 'Shipping Locations',
17-
text: 'For demonstration purposes, all orders are considered to “ship” within the United States. In reality, this site is part of a community coding project and no physical shipments are made.',
18-
},
19-
{
20-
title: 'Back Orders',
21-
text: 'In a real e-commerce scenario, back-ordered items may cause delays or refunds. On CoreX Nutrition, all items are always available for demo purposes — no real inventory or credit card transactions occur.',
22-
},
23-
{
24-
title: 'Damaged, Lost, or Stolen Merchandise',
25-
text: 'Since no physical products are shipped, there is no risk of damage, loss, or theft. This section is included only to illustrate how a real policy might look on a production store.',
26-
},
27-
{
28-
title: 'Delivery Delays',
29-
text: 'For realism, we assume orders would typically ship within 48–72 business hours and arrive within 7–12 business days. Again, this is demo content only — no real shipments will take place.',
30-
},
31-
{
32-
title: 'Disclaimer',
33-
text: '⚠️ CoreX Nutrition is a community open-source project. The site does not sell or deliver products. All content is for demonstration purposes only.',
34-
},
35-
].map((section, idx) => (
36-
<section key={idx} className="mb-5">
37-
<h2 className="text-sm font-bold uppercase border-t-2 border-gray-400 pt-3 mb-2">
38-
{section.title}
5+
<>
6+
{/* Skip link for keyboard users */}
7+
<a
8+
href="#main-content"
9+
className="sr-only focus:not-sr-only focus:absolute focus:top-0 focus:left-0 p-2 bg-blue-600 text-white z-50"
10+
>
11+
Skip to main content
12+
</a>
13+
14+
<SEO
15+
title="Shipping Policy | CoreX Nutrition"
16+
description="CoreX Nutrition's Shipping Policy for this open-source demo project. Learn about shipping locations, delivery times, and policy guidelines."
17+
keywords="Shipping Policy, CoreX Nutrition, Open Source, Delivery, E-commerce Demo"
18+
/>
19+
20+
<main
21+
id="main-content"
22+
className="min-h-screen bg-white font-inter py-12 px-4 sm:px-6 lg:px-8"
23+
role="main"
24+
aria-labelledby="shipping-policy-title"
25+
>
26+
<div className="max-w-4xl mx-auto">
27+
{/* Page Header */}
28+
<header className="mb-8">
29+
<h1
30+
id="shipping-policy-title"
31+
className="text-5xl md:text-6xl text-gray-900 mb-4"
32+
>
33+
Shipping Policy
34+
</h1>
35+
</header>
36+
<hr className="text-slate-400" />
37+
38+
{/* Main Content */}
39+
<article className="prose prose-lg max-w-none space-y-8">
40+
{/* Customer Service */}
41+
<section aria-labelledby="customer-service-section">
42+
<h2
43+
id="customer-service-section"
44+
className="text-3xl font-bold text-gray-900 mt-8 mb-8"
45+
>
46+
CUSTOMER SERVICE
47+
</h2>
48+
<p className="mb-4">
49+
Thank you for visiting CoreX Nutrition. This is an open-source
50+
demo project created by Open Code Chicago. While our website is
51+
designed to simulate a real supplements store, please note that
52+
we do not process real payments or ship actual products.
53+
</p>
54+
<p>If you have any questions about the project or contributions, please contact the team at:info@opencodechicago.org</p>
55+
</section>
56+
<hr className="text-slate-400" />
57+
58+
{/* Shipping Locations */}
59+
<section aria-labelledby="shipping-locations-section">
60+
<h2
61+
id="shipping-locations-section"
62+
className="text-3xl font-bold text-gray-900 mb-8"
63+
>
64+
SHIPPING LOCATIONS
65+
</h2>
66+
<p className="mb-4">
67+
For demonstration purposes, all orders are considered to "ship"
68+
within the United States. In reality, this site is part of a
69+
community coding project and no physical shipments are made.
70+
</p>
71+
</section>
72+
<hr className="text-slate-400" />
73+
74+
{/* Back Orders */}
75+
<section aria-labelledby="back-orders-section">
76+
<h2
77+
id="back-orders-section"
78+
className="text-3xl font-bold text-gray-900 mb-8"
79+
>
80+
BACK ORDERS
3981
</h2>
40-
<p className="text-gray-600 leading-relaxed">{section.text}</p>
82+
<p className="mb-4">
83+
In a real e-commerce scenario, back-ordered items may cause
84+
delays or refunds. On CoreX Nutrition, all items are always
85+
available for demo purposes — no real inventory or credit card
86+
transactions occur.
87+
</p>
4188
</section>
42-
))}
89+
<hr className="text-slate-400" />
90+
91+
{/* Damaged, Lost, or Stolen Merchandise */}
92+
<section aria-labelledby="damaged-merchandise-section">
93+
<h2
94+
id="damaged-merchandise-section"
95+
className="text-3xl font-bold text-gray-900 mb-8"
96+
>
97+
DAMAGED, LOST, OR STOLEN MERCHANDISE
98+
</h2>
99+
<p className="mb-4">
100+
Since no physical products are shipped, there is no risk of
101+
damage, loss, or theft. This section is included only to
102+
illustrate how a real policy might look on a production store.
103+
</p>
104+
</section>
105+
<hr className="text-slate-400" />
106+
107+
{/* Delivery Delays */}
108+
<section aria-labelledby="delivery-delays-section">
109+
<h2
110+
id="delivery-delays-section"
111+
className="text-3xl font-bold text-gray-900 mb-8"
112+
>
113+
DELIVERY DELAYS
114+
</h2>
115+
<p className="mb-4">
116+
For realism, we assume orders would typically ship within 48–72
117+
business hours and arrive within 7–12 business days. Again, this
118+
is demo content only — no real shipments will take place.
119+
</p>
120+
</section>
121+
<hr className="text-slate-400" />
122+
123+
{/* Disclaimer */}
124+
<section aria-labelledby="disclaimer-section">
125+
<h2
126+
id="disclaimer-section"
127+
className="text-3xl font-bold text-gray-900 mb-8"
128+
>
129+
DISCLAIMER
130+
</h2>
131+
<div className="flex">
132+
<div className="flex-shrink-0">
133+
<svg
134+
className="h-5 w-5 text-yellow-400"
135+
viewBox="0 0 20 20"
136+
fill="currentColor"
137+
aria-hidden="true"
138+
>
139+
<path
140+
fillRule="evenodd"
141+
d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
142+
clipRule="evenodd"
143+
/>
144+
</svg>
145+
</div>
146+
<div className="ml-3">
147+
<p>
148+
Core<span className="text-red-600">X</span> Nutrition is a
149+
community open-source project. The site does not sell or
150+
deliver products. All content is for demonstration purposes
151+
only.
152+
</p>
153+
</div>
154+
</div>
155+
</section>
156+
</article>
43157
</div>
44158
</main>
45-
</div>
159+
</>
46160
);
47-
};
48-
49-
export default ShippingPage;
161+
}

0 commit comments

Comments
 (0)