4 changed files with 421 additions and 0 deletions
-
BINpublic/images/quickdeliver_logo.png
-
155src/pages/study_site_6/DeliveryRegions.jsx
-
46src/pages/study_site_6/DownloadApp.jsx
-
220src/pages/study_site_6/StartPage6.jsx
|
After Width: 500 | Height: 500 | Size: 26 KiB |
@ -0,0 +1,155 @@ |
|||||
|
import React from "react"; |
||||
|
import { Spacer } from "@geist-ui/core"; |
||||
|
|
||||
|
const DeliveryRegions = () => { |
||||
|
const regions = { |
||||
|
amsterdam: [ |
||||
|
{ name: "Amsterdam-Zuid", deliveryTime: "Same-day delivery" }, |
||||
|
{ name: "Amsterdam-Oost", deliveryTime: "Same-day delivery" }, |
||||
|
{ name: "Amsterdam-Noord", deliveryTime: "Same-day delivery" }, |
||||
|
], |
||||
|
nearbyCities: [ |
||||
|
{ name: "Haarlem", deliveryTime: "Next-day delivery" }, |
||||
|
{ name: "Utrecht", deliveryTime: "Next-day delivery" }, |
||||
|
{ name: "The Hague", deliveryTime: "Next-day delivery" }, |
||||
|
{ name: "Rotterdam", deliveryTime: "Next-day delivery" }, |
||||
|
], |
||||
|
international: [ |
||||
|
"🇺🇸 United States", |
||||
|
"🇨🇦 Canada", |
||||
|
"🇬🇧 United Kingdom", |
||||
|
"🇩🇪 Germany", |
||||
|
"🇫🇷 France", |
||||
|
"🇮🇹 Italy", |
||||
|
"🇪🇸 Spain", |
||||
|
"🇦🇺 Australia", |
||||
|
"🇯🇵 Japan", |
||||
|
"🇨🇳 China", |
||||
|
"🇮🇳 India", |
||||
|
"🇧🇷 Brazil", |
||||
|
"🇲🇽 Mexico", |
||||
|
"🇷🇺 Russia", |
||||
|
"🇰🇷 South Korea", |
||||
|
"🇳🇱 Netherlands", |
||||
|
"🇸🇪 Sweden", |
||||
|
"🇳🇴 Norway", |
||||
|
"🇩🇰 Denmark", |
||||
|
"🇫🇮 Finland", |
||||
|
"🇧🇪 Belgium", |
||||
|
"🇨🇭 Switzerland", |
||||
|
"🇦🇹 Austria", |
||||
|
"🇮🇪 Ireland", |
||||
|
"🇵🇹 Portugal", |
||||
|
"🇬🇷 Greece", |
||||
|
"🇵🇱 Poland", |
||||
|
"🇨🇿 Czech Republic", |
||||
|
"🇭🇺 Hungary", |
||||
|
"🇹🇷 Turkey", |
||||
|
"🇮🇱 Israel", |
||||
|
"🇿🇦 South Africa", |
||||
|
"🇳🇿 New Zealand", |
||||
|
"🇦🇷 Argentina", |
||||
|
"🇨🇱 Chile", |
||||
|
"🇨🇴 Colombia", |
||||
|
"🇵🇪 Peru", |
||||
|
"🇻🇪 Venezuela", |
||||
|
"🇪🇬 Egypt", |
||||
|
"🇸🇦 Saudi Arabia", |
||||
|
"🇦🇪 United Arab Emirates", |
||||
|
"🇶🇦 Qatar", |
||||
|
"🇰🇼 Kuwait", |
||||
|
"🇧🇭 Bahrain", |
||||
|
"🇴🇲 Oman", |
||||
|
"🇯🇴 Jordan", |
||||
|
"🇱🇧 Lebanon", |
||||
|
"🇲🇾 Malaysia", |
||||
|
"🇸🇬 Singapore", |
||||
|
"🇹🇭 Thailand", |
||||
|
"🇻🇳 Vietnam", |
||||
|
"🇵🇭 Philippines", |
||||
|
"🇮🇩 Indonesia", |
||||
|
"🇵🇰 Pakistan", |
||||
|
"🇧🇩 Bangladesh", |
||||
|
"🇱🇰 Sri Lanka", |
||||
|
"🇺🇦 Ukraine", |
||||
|
"🇷🇴 Romania", |
||||
|
"🇧🇬 Bulgaria", |
||||
|
"🇭🇷 Croatia", |
||||
|
"🇸🇮 Slovenia", |
||||
|
"🇷🇸 Serbia", |
||||
|
"🇸🇰 Slovakia", |
||||
|
"🇱🇺 Luxembourg", |
||||
|
"🇪🇪 Estonia", |
||||
|
"🇱🇻 Latvia", |
||||
|
"🇱🇹 Lithuania", |
||||
|
"🇮🇸 Iceland", |
||||
|
"🇲🇹 Malta", |
||||
|
"🇨🇾 Cyprus", |
||||
|
"🇲🇦 Morocco", |
||||
|
"🇹🇳 Tunisia", |
||||
|
"🇳🇬 Nigeria", |
||||
|
"🇰🇪 Kenya", |
||||
|
"🇬🇭 Ghana", |
||||
|
"🇨🇮 Ivory Coast", |
||||
|
"🇸🇳 Senegal", |
||||
|
"🇰🇿 Kazakhstan", |
||||
|
"🇺🇿 Uzbekistan", |
||||
|
"🇬🇪 Georgia", |
||||
|
"🇦🇲 Armenia", |
||||
|
"🇦🇿 Azerbaijan", |
||||
|
"🇧🇾 Belarus", |
||||
|
"🇲🇩 Moldova", |
||||
|
"🇧🇦 Bosnia and Herzegovina", |
||||
|
"🇦🇱 Albania", |
||||
|
"🇲🇰 Macedonia", |
||||
|
"🇲🇪 Montenegro", |
||||
|
"🇽🇰 Kosovo", |
||||
|
"🇵🇾 Paraguay", |
||||
|
"🇺🇾 Uruguay", |
||||
|
"🇧🇴 Bolivia", |
||||
|
"🇪🇨 Ecuador", |
||||
|
"🇵🇦 Panama", |
||||
|
"🇨🇷 Costa Rica", |
||||
|
"🇬🇹 Guatemala", |
||||
|
"🇭🇳 Honduras", |
||||
|
"🇸🇻 El Salvador", |
||||
|
"🇯🇲 Jamaica", |
||||
|
].map((country) => ({ |
||||
|
name: country, |
||||
|
deliveryTime: "International shipping", |
||||
|
})), |
||||
|
}; |
||||
|
|
||||
|
return ( |
||||
|
<div> |
||||
|
<h3>QuickDeliver Delivery Regions</h3> |
||||
|
<Spacer h={2} /> |
||||
|
<h4>Amsterdam Neighborhoods</h4> |
||||
|
<ul> |
||||
|
{regions.amsterdam.map((region) => ( |
||||
|
<li key={region.name}> |
||||
|
{region.name}: <i>{region.deliveryTime}</i> |
||||
|
</li> |
||||
|
))} |
||||
|
</ul> |
||||
|
<h4>Nearby Cities</h4> |
||||
|
<ul> |
||||
|
{regions.nearbyCities.map((city) => ( |
||||
|
<li key={city.name}> |
||||
|
{city.name}: <i>{city.deliveryTime}</i> |
||||
|
</li> |
||||
|
))} |
||||
|
</ul> |
||||
|
<h4>International Shipping</h4> |
||||
|
<ul> |
||||
|
{regions.international.map((country) => ( |
||||
|
<li key={country.name}> |
||||
|
{country.name}: <i>{country.deliveryTime}</i> |
||||
|
</li> |
||||
|
))} |
||||
|
</ul> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default DeliveryRegions; |
||||
@ -0,0 +1,46 @@ |
|||||
|
import React, { useState } from "react"; |
||||
|
|
||||
|
function DownloadApp() { |
||||
|
const [showReminder, setShowReminder] = useState(false); |
||||
|
|
||||
|
const handleButtonClick = () => { |
||||
|
setShowReminder(true); |
||||
|
}; |
||||
|
|
||||
|
return ( |
||||
|
<div style={{ textAlign: "center", padding: "20px" }}> |
||||
|
<h3>Download the QuickDeliver App</h3> |
||||
|
<p> |
||||
|
Experience the convenience of QuickDeliver right at your fingertips. |
||||
|
</p> |
||||
|
<div style={{ margin: "20px 0" }}> |
||||
|
<button |
||||
|
onClick={handleButtonClick} |
||||
|
style={{ margin: "10px", padding: "10px 20px", fontSize: "16px" }} |
||||
|
> |
||||
|
Download for iOS |
||||
|
</button> |
||||
|
<button |
||||
|
onClick={handleButtonClick} |
||||
|
style={{ margin: "10px", padding: "10px 20px", fontSize: "16px" }} |
||||
|
> |
||||
|
Download for Android |
||||
|
</button> |
||||
|
</div> |
||||
|
{showReminder && ( |
||||
|
<div> |
||||
|
<p style={{ fontSize: "18px", color: "red", marginTop: "20px" }}> |
||||
|
🚨 Just a friendly reminder: This is a study, and there is no actual |
||||
|
app! 🚨 |
||||
|
</p> |
||||
|
<p> |
||||
|
Thanks for participating and have fun exploring our mock-up delivery |
||||
|
service. |
||||
|
</p> |
||||
|
</div> |
||||
|
)} |
||||
|
</div> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
export default DownloadApp; |
||||
@ -0,0 +1,220 @@ |
|||||
|
import React, { useState } from "react"; |
||||
|
import { getTranslation } from "../../core/i18n/I18NHandler"; |
||||
|
import WebpageBanner from "../../components/webpage_container/WebpageBanner"; |
||||
|
import { |
||||
|
StudySite, |
||||
|
getHeatmapData, |
||||
|
} from "../../components/webpage_container/StudySite"; |
||||
|
import { pushToMouseLog, getSensorLog } from "../../core/log/SensorLogger"; |
||||
|
import { Collapse, Text, Spacer } from "@geist-ui/core"; |
||||
|
import PopupModal from "../../components/PopupModal"; |
||||
|
|
||||
|
function StartPage6({ redirectLoc }) { |
||||
|
const [modalVisible, setModalVisible] = useState(false); |
||||
|
|
||||
|
var saveMouseLog = function () { |
||||
|
pushToMouseLog(getHeatmapData()); |
||||
|
}; |
||||
|
|
||||
|
const closeModal = () => { |
||||
|
setModalVisible(false); |
||||
|
}; |
||||
|
|
||||
|
const pricingStructure = ( |
||||
|
<div> |
||||
|
<ul> |
||||
|
<li>Within Amsterdam: €7.99 for small packages.</li> |
||||
|
<li>Haarlem, Utrecht, and The Hague: €12.99 for small packages.</li> |
||||
|
<li>Insurance: Starts at €1 per €100 of coverage.</li> |
||||
|
<li>Signature confirmation: Additional €2.</li> |
||||
|
</ul> |
||||
|
<Text> |
||||
|
International shipping rates vary, with discounts available for bulk |
||||
|
shipments or regular business customers. |
||||
|
</Text> |
||||
|
</div> |
||||
|
); |
||||
|
|
||||
|
// TODO THINK IF I WANT TO JUST USE AN OVERLAY FOR OTHER DUMMY LINKS, WHICH ARENT CORRECT??? |
||||
|
// IS THAT OKAY??? |
||||
|
|
||||
|
return ( |
||||
|
<StudySite> |
||||
|
<WebpageBanner translationKey="task_6_info" /> |
||||
|
<Spacer h={1} /> |
||||
|
<img |
||||
|
src="/images/quickdeliver_logo.png" |
||||
|
width="150px" |
||||
|
alt="QuickDeliver Logo" |
||||
|
class="centeredLogo" |
||||
|
/> |
||||
|
<Text> |
||||
|
Welcome to QuickDeliver, your quickest and safest way to deliver goods |
||||
|
to anywhere in Amsterdam, the Netherlands and around the world. |
||||
|
</Text> |
||||
|
<Collapse.Group> |
||||
|
<Collapse title="Service Overview"> |
||||
|
<Text> |
||||
|
Using QuickDeliver is simple and hassle-free. Start by visiting our |
||||
|
website or downloading our app, where you can easily{" "} |
||||
|
<a href="./download_quickdeliver">create an account</a> and schedule |
||||
|
your delivery. Enter the pickup and drop-off locations, select your |
||||
|
preferred delivery speed, and choose any additional services such as |
||||
|
signature confirmation or insurance. Our system will provide an |
||||
|
instant quote, and once confirmed, a courier will be dispatched to |
||||
|
your location. You can track your package in real-time and receive |
||||
|
notifications at every stage of the delivery process. |
||||
|
</Text> |
||||
|
</Collapse> |
||||
|
<Collapse title="How it works"> |
||||
|
<Text> |
||||
|
Using QuickDeliver is simple and hassle-free. Start by visiting our |
||||
|
website or downloading our app, where you can easily{" "} |
||||
|
<a href="./download_quickdeliver">create an account</a> and schedule |
||||
|
your delivery. Enter the pickup and drop-off locations, select your |
||||
|
preferred delivery speed, and choose any additional services such as |
||||
|
signature confirmation or insurance. Our system will provide an |
||||
|
instant quote, and once confirmed, a courier will be dispatched to |
||||
|
your location. You can track your package in real-time and receive |
||||
|
notifications at every stage of the delivery process. |
||||
|
</Text> |
||||
|
</Collapse> |
||||
|
<Collapse title="Pricing"> |
||||
|
<Text> |
||||
|
At QuickDeliver, we offer competitive pricing tailored to your |
||||
|
delivery needs. Our rates are based on the package's size, weight, |
||||
|
and delivery speed. See our pricing structure for more information: |
||||
|
</Text> |
||||
|
<button |
||||
|
className="centeredLogo" |
||||
|
onClick={() => { |
||||
|
setModalVisible(true); |
||||
|
}} |
||||
|
> |
||||
|
Pricing Structure |
||||
|
</button> |
||||
|
<Text>For an exact quote, contact our customer service team.</Text> |
||||
|
<PopupModal |
||||
|
visible={modalVisible} |
||||
|
closeHandler={closeModal} |
||||
|
title="Pricing Structure" |
||||
|
content={pricingStructure} |
||||
|
/> |
||||
|
</Collapse> |
||||
|
<Collapse title="Delivery Areas"> |
||||
|
<Text> |
||||
|
QuickDeliver operates within Amsterdam and extends to surrounding |
||||
|
cities and regions. Our same-day delivery service covers all |
||||
|
neighborhoods in Amsterdam, including Amsterdam-Zuid, |
||||
|
Amsterdam-Oost, and Amsterdam-Noord. Next-day delivery is available |
||||
|
for cities like Haarlem, Utrecht, The Hague, and Rotterdam. Our |
||||
|
international shipping network covers over 100 countries worldwide. |
||||
|
We are continually expanding our service areas to reach more |
||||
|
customers. Check <a href="./delivery_regions">our website</a> for |
||||
|
the latest updates on service availability in your region. |
||||
|
</Text> |
||||
|
</Collapse> |
||||
|
<Collapse title="Package Restrictions"> |
||||
|
<Text> |
||||
|
To ensure the safety and security of all deliveries, QuickDeliver |
||||
|
has specific restrictions on certain items. We do not transport |
||||
|
hazardous materials, perishable goods, live animals, or illegal |
||||
|
substances. Additionally, packages exceeding 30 kg or dimensions |
||||
|
larger than 120 cm on any side require special arrangements. Please |
||||
|
review our detailed list of restricted items on our website or |
||||
|
contact customer support if you have questions about your package's |
||||
|
eligibility. |
||||
|
</Text> |
||||
|
</Collapse> |
||||
|
<Collapse title="Tracking"> |
||||
|
<Text> |
||||
|
Stay informed about your delivery with QuickDeliver's real-time |
||||
|
tracking feature. Once your package is picked up, you'll receive a |
||||
|
tracking number that you can use on our website or{" "} |
||||
|
<a href="./download_quickdeliver">app</a>. Track the package's |
||||
|
journey from pickup to delivery, with updates at every stage. You'll |
||||
|
receive notifications via email when the package is out for delivery |
||||
|
and when it has been successfully delivered. For additional peace of |
||||
|
mind, opt for our signature confirmation service to ensure your |
||||
|
package is received by the intended recipient. |
||||
|
</Text> |
||||
|
<Text> |
||||
|
For additional costs for signature confirmation, please to the |
||||
|
pricing structure |
||||
|
</Text> |
||||
|
<button |
||||
|
className="centeredLogo" |
||||
|
onClick={() => { |
||||
|
setModalVisible(true); |
||||
|
}} |
||||
|
> |
||||
|
Pricing Structure |
||||
|
</button> |
||||
|
<PopupModal |
||||
|
visible={modalVisible} |
||||
|
closeHandler={closeModal} |
||||
|
title="Pricing Structure" |
||||
|
content={pricingStructure} |
||||
|
/> |
||||
|
</Collapse> |
||||
|
<Collapse title="Customer Support"> |
||||
|
<Text> |
||||
|
QuickDeliver is committed to providing excellent customer service. |
||||
|
Our support team is available 24/7 to assist with any questions or |
||||
|
concerns. Whether you need help scheduling a delivery, tracking a |
||||
|
package, or resolving an issue, we're here to help. Contact us via{" "} |
||||
|
<a href="tel:999 999 999 999">phone</a>, or{" "} |
||||
|
<a href="mailto:quickdeliver@example.com">email</a>. |
||||
|
</Text> |
||||
|
</Collapse> |
||||
|
<Collapse title="Returns and Refunds"> |
||||
|
<Text> |
||||
|
We understand that sometimes things don't go as planned. |
||||
|
QuickDeliver offers a straightforward returns and refunds policy to |
||||
|
ensure customer satisfaction. If your package is damaged or lost |
||||
|
during transit, you may be eligible for a refund or replacement. |
||||
|
Contact our customer support team within 7 days of delivery to |
||||
|
initiate a claim. For packages that need to be returned to the |
||||
|
sender, we offer discounted return shipping rates. Please{" "} |
||||
|
<a |
||||
|
href={redirectLoc} |
||||
|
onClick={() => { |
||||
|
saveMouseLog(); |
||||
|
}} |
||||
|
> |
||||
|
{" "} |
||||
|
contact us |
||||
|
</a> |
||||
|
in regards to any returns and refunds. |
||||
|
</Text> |
||||
|
</Collapse> |
||||
|
<Collapse title="Business Solutions"> |
||||
|
<Text> |
||||
|
QuickDeliver provides tailored delivery solutions for businesses of |
||||
|
all sizes. Our business accounts offer benefits such as volume |
||||
|
discounts, dedicated account managers, and customizable delivery |
||||
|
options. From e-commerce shipments to important business documents, |
||||
|
we ensure your packages are delivered efficiently and |
||||
|
professionally. Sign up for a business account on our website and |
||||
|
discover how QuickDeliver can streamline your delivery needs and |
||||
|
enhance your customer experience. |
||||
|
</Text> |
||||
|
</Collapse> |
||||
|
<Collapse title="Safety and Security"> |
||||
|
<Text> |
||||
|
The safety and security of your packages are our top priority. |
||||
|
QuickDeliver employs advanced security measures, including |
||||
|
tamper-evident packaging and real-time tracking, to protect your |
||||
|
items during transit. Our couriers undergo thorough background |
||||
|
checks and training to ensure reliable and professional service. In |
||||
|
the event of an issue, our dedicated support team is available to |
||||
|
assist and resolve any concerns promptly. Trust QuickDeliver for a |
||||
|
secure and worry-free delivery experience. |
||||
|
</Text> |
||||
|
</Collapse> |
||||
|
</Collapse.Group> |
||||
|
</StudySite> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
export default StartPage6; |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue