Skip to content

Commit

Permalink
Bapta Responsive Design Changes (#35)
Browse files Browse the repository at this point in the history 
Co-authored-by: eksno <33558637+eksno@users.noreply.github.com>
  • Loading branch information
@antopiahk @eksno
antopiahk and eksno authored Aug 1, 2023
1 parent 156f4a2 commit 002103c
Show file tree
Hide file tree
Showing 8 changed files with 105 additions and 179 deletions.
2 changes: 1 addition & 1 deletion apps/bapta/src/app.postcss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
}

.section {
@apply py-5 sm:py-10 md:py-20 px-4 sm:px-6 md:px-8 shadow-lg border-b border-secondary-light/20 dark:border-secondary-dark/20;
@apply py-5 sm:py-10 md:py-20 px-4 sm:px-6 md:px-12 shadow-lg border-b border-secondary-light/20 dark:border-secondary-dark/20;
}

input[type='date'] {
Expand Down
116 changes: 44 additions & 72 deletions apps/bapta/src/routes/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
import OutlineButton from '$lib/components/molecules/OutlineButton.svelte';
import Wildlife from '$lib/components/organisms/Wildlife.svelte';
import FaqCard from '$lib/components/molecules/FAQCard.svelte';
import { adventures } from './tour/adventures';
const animals = [
{
Expand Down Expand Up @@ -151,10 +152,10 @@
</section>

<!-- Introduction section-->
<section class="flex flex-col section space-y-12 items-center">
<section class="flex flex-col items-center space-y-12 section">
<div class="flex flex-col space-y-4 max-w-7xl">
<h1 class="display-large font-extrabold">Your Safari Experience</h1>
<h2 class="body-large mx-12 lg:mx-24">
<h1 class="font-extrabold display-large">Your Safari Experience</h1>
<h2 class="mx-12 body-large lg:mx-24">
Experience the beauty of the wild on a Bapta Safari. Witness stunning landscapes and unique
wildlife up close, while guided by experienced professionals. Discover the secrets of the
African savanna, and create unforgettable memories that will last a lifetime. Experience the
Expand All @@ -163,10 +164,10 @@
and create unforgettable memories that will last a lifetime.
</h2>
<div class="flex flex-row mx-auto">
<img src="images/logo/bapta_jeep.png" alt="" class="rounded-full p-4 h-24 w-24" />
<img src="images/logo/bapta_jeep.png" alt="" class="w-24 h-24 p-4 rounded-full" />
<div class="flex flex-col justify-center text-left">
<h3 class="body-large font-semibold">Emmanuel Baptist</h3>
<h3 class="body-medium font-light">Creator Of Bapta Safari</h3>
<h3 class="font-semibold body-large">Emmanuel Baptist</h3>
<h3 class="font-light body-medium">Creator Of Bapta Safari</h3>
</div>
</div>
</div>
Expand Down Expand Up @@ -195,24 +196,24 @@
</div> -->
<!-- <div class="mx-auto w-fit">
<OutlineButton>
<h1 class="font-bold headline-small p-4">BOOK A TRIP NOW</h1>
<h1 class="p-4 font-bold headline-small">BOOK A TRIP NOW</h1>
</OutlineButton>
</div> -->
</section>
<!-- Most popular destinations-->
<!-- <section class="flex flex-col section space-y-12 items-center">
<h1 class="font-semibold display-large p-6">Most Popular Destinations</h1>
<div class="max-w-7xl flex flex-col space-y-6">
<!-- <section class="flex flex-col items-center space-y-12 section">
<h1 class="p-6 font-semibold display-large">Most Popular Destinations</h1>
<div class="flex flex-col space-y-6 max-w-7xl">
{#each popularDestinations as destination}
<div class="flex flex-col md:flex-row shadow-lg space-x-4 rounded-lg bg-black/60 max-w-7xl">
<div class="flex flex-col space-x-4 rounded-lg shadow-lg md:flex-row bg-black/60 max-w-7xl">
<img
src={destination.img_path}
alt="Card"
class="object-cover w-full md:h-fit md:w-80 rounded-lg" />
class="object-cover w-full rounded-lg md:h-fit md:w-80" />
<div class="flex flex-col p-6 text-left">
<h1 class="display-small font-bold text-primary-dark">{destination.title}</h1>
<h1 class="font-bold display-small text-primary-dark">{destination.title}</h1>
<h1 class="headline-medium">{destination.subtitle}</h1>
<h2 class="body-large pt-4 max-w-3xl">
<h2 class="max-w-3xl pt-4 body-large">
{destination.description}
</h2>
</div>
Expand All @@ -221,69 +222,40 @@
</div>
</section> -->

<section class="flex flex-col section bg-surface-dark space-y-12 items-center">
<!--Zanzibar Holidays snippet-->
<div class="grid grid-cols-2 space-x-6 max-w-7xl">
<img
src="images/zanzibar/zanzibar_beach.jpg"
alt="zanzibar img"
class="object-cover object-center" />
<div class="flex flex-col space-y-6">
<h1 class="font-semibold display-large text-left text-primary-dark">Zanzibar Holidays</h1>
<h2 class="text-left">
Uncover the wonders of Zanzibar with our captivating holiday packages. Immerse yourself in
Stone Town's rich history, from ancient churches and mosques to remnants of slave markets.
Explore aromatic spice plantations, encounter indigenous monkeys in Jozani Forest, and
embark on the thrilling Safari Blue excursion for snorkeling, swimming, and mouthwatering
snacks. Dive into the marine paradise of Mnemba Island, spot playful dolphins, and witness
the beauty of rescued animals at Cheetah's Rock. Discover the intriguing history of Prison
Island and encounter giant tortoises. Create unforgettable memories on your Zanzibar
holiday.
</h2>
<a href="/adventures/zanzibar">
<OutlineButton>
<h1 class="font-bold title-small p-2">Learn More</h1>
</OutlineButton>
</a>
</div>
</div>
<hr class="borders border-secondary-dark/10 w-full max-w-7xl" />
<!--Kilimanjaro Climbing snippet-->
<div class="grid grid-cols-2 space-x-6 max-w-7xl">
<div class="flex flex-col space-y-6">
<h1 class="font-semibold display-large text-left text-primary-dark">Kilimanjaro Climbing</h1>
<h2 class="text-left">
Embark on an extraordinary Mount Kilimanjaro journey. Choose from seven routes: Lemosho,
Machame, Marangu, Rongai, Northern Circuit, Shira, and Umbwe. Reach the summit in just five
days with the affordable Marangu route. Merge with Machame on the seven-day Lemosho route.
Experience scenic beauty on the renowned Machame route. Discover the shortest route, Umbwe,
with breathtaking views in six days. Traverse the captivating Shira route, similar to
Lemosho. Conquer Kilimanjaro's unspoiled wilderness on the seven-day Rongai route. Descend
through Marangu gate to conclude your epic adventure. Scale new heights on this lifetime
experience.
</h2>
<a href="/adventures/kilimanjaro">
<OutlineButton>
<h1 class="font-bold title-small p-2">Learn More</h1>
</OutlineButton>
</a>
<!--Adventure Snippets-->
<section class="flex flex-col items-center space-y-12 section bg-surface-dark">
{#each adventures as { img_path, label, body, href }}
<div class="flex flex-col items-center gap-6 md:flex-row">
<img
src={img_path}
alt="img"
class="object-cover object-center w-fit md:max-w-md lg:max-w-2xl" />
<div class="flex flex-col gap-y-1">
<h1 class="font-semibold text-left headline-large text-primary-dark">
{label}
</h1>
<h2 class="max-w-lg text-left">
{body}
</h2>
<a {href} class="py-2">
<OutlineButton>
<h1 class="p-2 font-bold title-small">Learn More</h1>
</OutlineButton>
</a>
</div>
</div>
<img
src="images/kilimanjaro/trail_2.jpg"
alt="zanzibar img"
class="object-cover object-center" />
</div>
{/each}
</section>

<!--Testimonials Section-->
<section class="section">
<div class="flex flex-col card">
<div class="py-10 grid-cols-1 gap-4 card sm:grid-cols-2 lg:grid-cols-3 gap-y-4 max-w-7xl">
<div class="grid-cols-1 gap-4 py-10 card sm:grid-cols-2 lg:grid-cols-3 gap-y-4 max-w-7xl">
{#each testimonials as testimonial}
<div class="flex flex-col h-full p-6 rounded-lg bg-black/60 place-items-center">
<!--pfp-->
<img
class="p-1 rounded-full h-32 w-32 border-2 border-primary-dark m-2"
class="w-32 h-32 p-1 m-2 border-2 rounded-full border-primary-dark"
src={testimonial.img_path}
alt={testimonial.name} />
<!--text body-->
Expand All @@ -301,15 +273,15 @@
{/each}
</div>
<OutlineButton class="">
<h1 class="font-bold title-large px-6 py-4">v See More v</h1>
<h1 class="px-8 py-3 font-bold title-large">See More</h1>
</OutlineButton>
</div>
</section>

<!--About Section-->
<section class="flex flex-col section bg-black/60 space-y-12 items-center">
<section class="flex flex-col items-center space-y-12 section bg-black/60">
<div
class="max-w-5xl border border-primary-dark/50 rounded-lg shadow-2xl bg-black/50 flex flex-col space-y-6 items-center p-10">
class="flex flex-col items-center max-w-5xl p-10 space-y-6 border rounded-lg shadow-2xl border-primary-dark/50 bg-black/50">
<h1 class="font-bold text-center display-small">Bapta Safaris</h1>
<img src="favicon.png" class="rounded-full h-44" alt="logo" />
<h1 class="text-center body-large">
Expand All @@ -323,7 +295,7 @@
</h1>
<a href="/about">
<OutlineButton>
<h1 class="font-bold title-small p-2">Learn More</h1>
<h1 class="p-2 font-bold title-small">Learn More</h1>
</OutlineButton>
</a>
</div>
Expand Down Expand Up @@ -351,7 +323,7 @@
</div>
<!Normal Cards->
{:else}
<div class="border shadow-xl w-64 rounded-xl mt-44 bg-black/60">
<div class="w-64 border shadow-xl rounded-xl mt-44 bg-black/60">
<img
src={employee.img_path}
class="object-cover object-top w-full h-80 rounded-t-xl"
Expand Down
55 changes: 10 additions & 45 deletions apps/bapta/src/routes/about/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
import Header from '$lib/components/organisms/Header.svelte';
import Footer from '$lib/components/organisms/Footer.svelte';
import OutlineButton from '$lib/components/molecules/OutlineButton.svelte';
import { each } from 'svelte/internal';
</script>

<Header />
Expand All @@ -23,11 +22,11 @@
</div>

<!-- Our Mission section -->
<section class="mx-20 my-20">
<div class="">
<div class="p-12 mx-auto text-center max-w-7xl rounded-xl bg-surface-dark">
<section class="section">
<div class="my-6 mx-2">
<div class="p-6 mx-auto text-center max-w-7xl rounded-xl bg-surface-dark">
<h2 class="font-semibold display-large text-primary-dark">Our Mission</h2>
<p class="p-6 text-white body-medium">
<p class="py-3 text-white body-medium">
At Our Company, we believe in responsible tourism that respects local communities, cultures,
and environments. We are committed to sustainable development and conservation, and work
closely with local organizations and initiatives to ensure that our trips have a positive
Expand All @@ -45,13 +44,12 @@
</section>

<!-- Our Team section -->
<section class="py-20 bg-surface-variant-dark">
<div
class="grid grid-rows-2 lg:grid-cols-2 lg:grid-rows-1 lg:text-left mx-12 text-center gap-y-3">
<section class="py-12 bg-surface-variant-dark">
<div class="grid grid-cols-1 lg:grid-cols-2 lg:text-left mx-8 text-center gap-y-5">
<!--Our Team Passage and group photo. Left -->
<div class="flex flex-col lg:pr-20">
<div class="flex flex-col lg:pr-12">
<h1 class="display-large text-surface-variant-on-dark">Our Team</h1>
<p class="py-6 body-medium text-surface-variant-on-dark">
<p class="py-3 body-medium text-surface-variant-on-dark">
Bapta, founder of Bapta Safaris, is passionate about wildlife conservation. Growing up in
Tanzania, he started his own safari business to share the beauty and biodiversity of his
country while supporting local communities and he started his own safari business to share
Expand All @@ -64,9 +62,9 @@
class="object-cover w-full rounded-xl h-52 lg:h-64" />
</div>
<!--Employees Grid. Right-->
<div class="grid grid-cols-3 gap-x-3">
<div class="grid grid-cols-2 md:grid-cols-3 gap-x-3">
{#each Array(6) as employee}
<button class="relative w-44 h-44 lg:w-36 lg:h-36 bg-black card-zoom rounded-xl group">
<button class="relative w-32 h-32 lg:w-40 lg:h-40 bg-black card-zoom rounded-xl group">
<div class="card-zoom-image">
<img src="/images/safari/safari_img(29).jpeg" alt="" class="" />
</div>
Expand All @@ -79,39 +77,6 @@
</div>
</section>

<!-- Our Services section -->
<section class="my-12">
<div class="">
<div class="p-12 mx-auto text-center rounded-xl">
<h2 class="font-semibold display-large text-primary-dark py-10">Our Services</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{#each Array(3) as services}
<div class="flex flex-col rounded-lg bg-surface-dark">
<img src="images\safari\safari_img(16).jpeg" alt="" class="rounded-lg" />
<h1 class="pt-3 display-medium text-secondary-dark">Safaris</h1>
<p class="px-6 text-justify body-medium text-secondary-dark">
The company provides a wide range of services for safari trips, including:
</p>
<ul class="text-left px-8 py-4 list-disc list-inside space-y-1 text-secondary-dark">
<li>Guided safari tours</li>
<li>Camping and lodge accommodations</li>
<li>Transportation to and from destinations</li>
<li>Cultural experiences with local communities</li>
<li>Wildlife spotting and tracking</li>
<li>Meals and refreshments</li>
<li>Customizable Trip itineraries</li>
</ul>

<OutlineButton class="m-6 mx-auto">
<h1 class="p-3 headline-small">Learn More</h1>
</OutlineButton>
</div>
{/each}
</div>
</div>
</div>
</section>

<Footer />

<style>
Expand Down
15 changes: 8 additions & 7 deletions apps/bapta/src/routes/adventures/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,9 @@
},
{
name: 'Mount Meru',
description: 'Mount Meru is missing a description',
image: 'images\\destinations_map2.png',
description:
"Climbing Meru is a once-in-a-lifetime experience that requires careful preparation and planning. Our team of expert guides and porters will ensure that you have a safe and memorable climb to the top of Africa's highest peak.",
image: 'images\\kilimanjaro\\kilimanjaro.jpg',
},
{
name: 'Zanzibar',
Expand All @@ -27,19 +28,19 @@
<Header />
<div
class="flex flex-col w-full h-full shadow-lg shadow-background-dark lg:grid-cols-2 card-shadow grid-rows-2 px-10 lg:px-20 xl:px-40 py-40 justify-center place-items-center border-b border-secondary-light/40 dark:border-secondary-dark/40 bg-[url('images/serengeti_sunset.jpg')] bg-cover bg-left">
<h1 class="font-bold text-primary-dark display-medium">Our curated adventures!</h1>
<h1 class="font-bold text-primary-dark display-medium">Our Curated Adventures!</h1>

<hr class="w-40 py-4" />

<div class="grid grid-cols-1 lg:grid-cols-3 gap-5">
<div class="grid grid-cols-1 md:grid-cols-2 place-items-center lg:grid-cols-3 gap-5">
{#each adventures as adventure}
<a class="h-full" href="/adventures/{adventure.name.toLowerCase().replace(' ', '')}">
<div class="rounded-lg shadow-lg shadow-black bg-black/60">
<a class="h-full max-w-xl" href="/adventures/{adventure.name.toLowerCase().replace(' ', '')}">
<div class="rounded-lg shadow-lg shadow-black bg-black/60 h-full">
<img
src={adventure.image}
alt={adventure.name}
class="object-cover object-center w-full rounded-lg h-60" />
<div class="gap-5 p-6 card">
<div class="gap-5 p-6">
<h3 class="title-large text-primary-dark/80">{adventure.name}</h3>
<p class="p-3 body-small text-primary-dark/60">
{adventure.description}
Expand Down
Loading

0 comments on commit 002103c

Please sign in to comment.