Skip to content

Commit

Permalink
refactor: Finalized refactoring of all images on landing page
Browse files Browse the repository at this point in the history
  • Loading branch information
@25Ericcheong
25Ericcheong committed May 19, 2024
1 parent e110b57 commit 0e79f0d
Show file tree
Hide file tree
Showing 2 changed files with 150 additions and 34 deletions.
11 changes: 8 additions & 3 deletions src/components/our-mentions.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ onMounted(() => {
class="bg-creamyellowbq w-full h-full py-52 lg:py-72 px-12 sm:px-14 md:px-20 text-darkorangebq"
>
<section class="flex flex-col lg:flex-row lg:justify-between">
<div class="lg:w-1/5">
<div class="w-full lg:w-[30%]">
<h1
class="text-5xl sm:text-7xl xl:text-8xl xxl:text-10xl header-font font-extrabold pb-3"
>
Expand All @@ -86,15 +86,20 @@ onMounted(() => {
, we are proud to highlight some here
</h2>
</div>
<picture class="ml-0 lg:ml-40 w-full h-full lg:w-[50%]">
<picture class="ml-0 p-0 lg:ml-40 w-full h-full lg:w-[50%]">
<source
:srcset="
getImageUrl('bingsu-our-mentions', 'our-mentions', undefined, true)
"
type="image/webp"
/>
<source
:srcset="
getImageUrl('bingsu-our-mentions', 'our-mentions', undefined)
"
type="image/jpg"
/>
<img
class="h-full p-0"
:src="getImageUrl('bingsu-our-mentions', 'our-mentions')"
alt="A blurred background containing the owners of Binq and a tray of Bingsu on the main counter in the store"
/>
Expand Down
173 changes: 142 additions & 31 deletions src/components/product.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,29 +28,96 @@ import { getImageUrl } from "@/util/image";
best combination of flavors out there but we want to ensure each and
every single order is made to perfection for all to enjoy.
</p>
<img
class="w-full md:w-4/5 h-1/4 self-center"
:src="
getImageUrl('more-prep-bing-product-intro', 'products', 'intro')

<picture class="w-full md:w-4/5 h-1/4 self-center">
<source
:srcset="
getImageUrl(
'more-prep-bing-product-intro',
'products',
'intro',
true
)
"
type="image/webp"
/>
<source
:srcset="
getImageUrl('more-prep-bing-product-intro', 'products', 'intro')
"
type="image/jpg"
/>
<img
:src="
getImageUrl('more-prep-bing-product-intro', 'products', 'intro')
"
alt="Shaving machine used to create our special bing su at Binq"
/>
</picture>

<picture class="my-20 w-full md:w-4/5 h-1/4 xxl:my-40 self-center">
<source
:srcset="
getImageUrl('topping-product-intro', 'products', 'intro', true)
"
type="image/webp"
/>
<source
:srcset="
getImageUrl('topping-product-intro', 'products', 'intro')
"
type="image/jpg"
/>
<img
:src="getImageUrl('topping-product-intro', 'products', 'intro')"
alt="Our famous side dishes used to complement our perfect bingsu"
/>
</picture>

<picture class="w-full md:w-4/5 h-1/4 self-center">
<source
:srcset="
getImageUrl(
'binq-store-product-intro',
'products',
'intro',
true
)
"
type="image/webp"
/>
<source
:srcset="
getImageUrl('binq-store-product-intro', 'products', 'intro')
"
type="image/jpg"
/>
<img
:src="
getImageUrl('binq-store-product-intro', 'products', 'intro')
"
alt="Store front of our main branch in Damansara that reads binq binq binq"
/>
</picture>
</div>

<picture class="h-1/3 mb-32 lg:sticky lg:top-0">
<source
:srcset="
getImageUrl('bingsus-product-intro', 'products', 'intro', true)
"
alt="Shaving machine used to create our special bing su at Binq"
type="image/webp"
/>
<img
class="my-20 w-full md:w-4/5 h-1/4 xxl:my-40 self-center"
:src="getImageUrl('topping-product-intro', 'products', 'intro')"
alt="Our famous side dishes used to complement our perfect bingsu"
<source
:srcset="getImageUrl('bingsus-product-intro', 'products', 'intro')"
type="image/jpg"
/>
<img
class="w-full md:w-4/5 h-1/4 self-center"
:src="getImageUrl('binq-store-product-intro', 'products', 'intro')"
alt="Store front of our main branch in Damansara that reads binq binq binq"
class="rounded-full"
:src="getImageUrl('bingsus-product-intro', 'products', 'intro')"
alt="Consists of a variety of bingsu desserts which we have readily available"
/>
</div>
<img
:src="getImageUrl('bingsus-product-intro', 'products', 'intro')"
class="h-1/3 rounded-full mb-32 lg:sticky lg:top-0"
alt="Consists of a variety of bingsu desserts which we have readily available"
/>
</picture>
</div>
</section>
<section
Expand All @@ -68,22 +135,66 @@ import { getImageUrl } from "@/util/image";
pairings available.
</h2>
</div>
<img
class="w-full h-3/4 pt-12 self-center"
:src="getImageUrl('watermelon-topping-product', 'products', 'detail')"
alt="Watermelon topping side dish which we have available at the store"

<picture class="w-full h-3/4 pt-12 self-center">
<source
:srcset="
getImageUrl(
'watermelon-topping-product',
'products',
'detail',
true
)
"
type="image/webp"
/>
<source
:srcset="
getImageUrl('watermelon-topping-product', 'products', 'detail')
"
type="image/jpg"
/>
<img
:src="
getImageUrl('watermelon-topping-product', 'products', 'detail')
"
alt="Watermelon topping side dish which we have available at the store"
/>
</picture>

<picture class="w-full h-3/4 pt-16 self-center">
<source
:srcset="getImageUrl('topping-product', 'products', 'detail', true)"
type="image/webp"
/>
<source
:srcset="getImageUrl('topping-product', 'products', 'detail')"
type="image/jpg"
/>
<img
:src="getImageUrl('topping-product', 'products', 'detail')"
alt="Watermelon topping side dish which we have available at the store"
/>
</picture>
</div>

<picture class="w-full h-3/4 lg:w-1/2 pt-20 lg:pt-0">
<source
:srcset="
getImageUrl('bingsu-set-product', 'products', 'detail', true)
"
type="image/webp"
/>
<source
:srcset="getImageUrl('bingsu-set-product', 'products', 'detail')"
type="image/jpg"
/>
<img
class="w-full h-3/4 pt-16 self-center"
:src="getImageUrl('topping-product', 'products', 'detail')"
alt="Coated mochi topping side dish which we have available at the store"
class="rounded-full"
:src="getImageUrl('bingsu-set-product', 'products', 'detail')"
alt="Our best selling bingsu set at binq. Has 4 toppings and our best selling bingsu; Soybean flavoured bingsu"
/>
</div>
<img
class="w-full h-3/4 lg:w-1/2 rounded-full pt-20 lg:pt-0"
:src="getImageUrl('bingsu-set-product', 'products', 'detail')"
alt="Our best selling bingsu set at binq. Has 4 toppings and our best selling bingsu; Soybean flavoured bingsu"
/>
</picture>
</section>
</div>
</template>

0 comments on commit 0e79f0d

Please sign in to comment.