tanshu/kakawa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Category slider responsive.

Browse Source 
New Typography based on:

https://www.wix.com/studio/blog/font-size
This commit is contained in:
Amritanshu Agrawal
2024-09-30 22:06:25 +05:30
parent 2519b4f740
commit 6ff0623762
12 changed files with 116 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/app/(static)/about-us/page.tsx
View File

@ -12,10 +12,10 @@ export default function AboutUsPage() {
<div className='overflow-x-hidden bg-white pt-28'> <div className='overflow-x-hidden bg-white pt-28'>
<section className='flex flex-col items-center'> <section className='flex flex-col items-center'>
{/* Left Column - Text with Header */} {/* Left Column - Text with Header */}
<div className='w-full text-8xl font-normal text-center font-montera'> <div className='w-full text-s-headline font-normal text-center font-montera'>
Welcome to the World of Mozimo Magic Welcome to the World of Mozimo Magic
</div> </div>
<div className='w-full text-xl text-justify p-12'> <div className='w-full text-s-normal text-justify p-12'>
Indulge in the Luxurious. Immerse in the Captivating. Savor the Fresh. Indulge in the Luxurious. Immerse in the Captivating. Savor the Fresh.
At Mozimo, we curate a chocolate experience that transports you to a At Mozimo, we curate a chocolate experience that transports you to a
world of opulence, captivates your senses with mesmerizing aromas and world of opulence, captivates your senses with mesmerizing aromas and
@ -48,13 +48,10 @@ export default function AboutUsPage() {
{/* Right Column - Text with Header */} {/* Right Column - Text with Header */}
<div className='w-full md:w-1/2'> <div className='w-full md:w-1/2'>
<div className='m-8 space-y-10'> <div className='m-8 space-y-10'>
<p className='text-6xl font-normal text-justify font-montera'> <p className='text-s-title font-normal text-justify font-montera'>
Our Founders Our Founders Priyanka and Amritanshu
</p> </p>
<p className='text-5xl font-normal text-justify font-montera'> <p className='text-s-normal text-justify'>
Priyanka and Amritanshu,
</p>
<p className='text-xl text-justify'>
are the proud founders of Mozimo, a bean-to-bar chocolate shop are the proud founders of Mozimo, a bean-to-bar chocolate shop
that celebrates the rich and distinctive flavors of single origin that celebrates the rich and distinctive flavors of single origin
cocoa beans. Their journey with Mozimo has been a passionate cocoa beans. Their journey with Mozimo has been a passionate
@ -68,13 +65,13 @@ export default function AboutUsPage() {
<section className='flex flex-col md:flex-row items-center'> <section className='flex flex-col md:flex-row items-center'>
<div className='w-full md:w-1/2'> <div className='w-full md:w-1/2'>
<div className='m-8 space-y-10'> <div className='m-8 space-y-10'>
<h2 className='text-6xl font-normal text-justify font-montera'> <h2 className='text-s-title font-normal text-justify font-montera'>
Capturing the essence of Capturing the essence of
</h2> </h2>
<h3 className='text-8xl font-normal text-justify font-samantha'> <h3 className='text-s-headline font-normal text-justify font-samantha'>
Italian Chocolate Italian Chocolate
</h3> </h3>
<p className='text-xl text-justify'> <p className='text-s-normal text-justify'>
With over 15 years of hospitality experience, these avid travelers With over 15 years of hospitality experience, these avid travelers
scoured the globe for the finest cocoa beans and techniques. Deep scoured the globe for the finest cocoa beans and techniques. Deep
in remote cocoa farms, they cultivated relationships with farmers in remote cocoa farms, they cultivated relationships with farmers
@ -115,7 +112,7 @@ export default function AboutUsPage() {
</div> </div>
</section> </section>
<section className='flex flex-col md:flex-col items-center'> <section className='flex flex-col md:flex-col items-center'>
<div className='flex w-full text-xl text-justify p-12'> <div className='flex w-full text-s-normal text-justify p-12'>
Under the mentorship of the master chocolatier Gabriele Rinaudo, Under the mentorship of the master chocolatier Gabriele Rinaudo,
Priyanka and Amritanshu dedicated themselves to mastering the Priyanka and Amritanshu dedicated themselves to mastering the
intricate art of chocolate making. With unwavering determination and a intricate art of chocolate making. With unwavering determination and a
@ -124,7 +121,7 @@ export default function AboutUsPage() {
the delicate techniques that transform raw beans into exquisite the delicate techniques that transform raw beans into exquisite
chocolate creations. chocolate creations.
</div> </div>
<div className='flex w-full text-xl text-justify p-12'> <div className='flex w-full text-s-normal text-justify p-12'>
In addition to their training under Gabriele Rinaudo, they embarked on In addition to their training under Gabriele Rinaudo, they embarked on
a transformative journey to Italy to further enrich their a transformative journey to Italy to further enrich their
understanding of the art of chocolate making. This immersive understanding of the art of chocolate making. This immersive
@ -141,7 +138,7 @@ export default function AboutUsPage() {
sizes='100vw' sizes='100vw'
/> />
</div> </div>
<div className='flex w-full text-xl text-justify p-12'> <div className='flex w-full text-s-normal text-justify p-12'>
Passionate about chocolate as a medium for creativity and exploration, Passionate about chocolate as a medium for creativity and exploration,
they view it not just as a confection but as a canvas for artistic they view it not just as a confection but as a canvas for artistic
expression. Constantly seeking inspiration, they push the boundaries expression. Constantly seeking inspiration, they push the boundaries

40
src/app/(static)/festival/page.tsx
View File

@ -21,12 +21,12 @@ export default function AboutUsPage() {
/> />
</div> </div>
<AnimatedText finishClass='delay-300'> <AnimatedText finishClass='delay-300'>
<h2 className='text-8xl font-normal text-justify font-samantha p-12'> <h2 className='text-s-headline font-normal text-justify font-samantha p-12'>
Sweet Moments with Mozimo Sweet Moments with Mozimo
</h2> </h2>
</AnimatedText> </AnimatedText>
<AnimatedText startClass='translate-y-8' finishClass='translate-y-0'> <AnimatedText startClass='translate-y-8' finishClass='translate-y-0'>
<div className='w-full text-xl text-justify pb-12'> <div className='w-full text-s-normal text-justify pb-12'>
“Transforming cacao beans sourced straight from the pod into rich, “Transforming cacao beans sourced straight from the pod into rich,
velvety smooth chocolate is pure magic. This is why we take great velvety smooth chocolate is pure magic. This is why we take great
pride in being called the &apos;Alchemists of the Chocolate pride in being called the &apos;Alchemists of the Chocolate
@ -51,7 +51,7 @@ export default function AboutUsPage() {
startClass='translate-y-8' startClass='translate-y-8'
finishClass='translate-y-0' finishClass='translate-y-0'
> >
<p className='text-xl text-justify'> <p className='text-s-normal text-justify'>
Our journey at Mozimo has been a passionate pursuit of creating Our journey at Mozimo has been a passionate pursuit of creating
exceptional chocolate that tantalizes the taste buds and tells exceptional chocolate that tantalizes the taste buds and tells
the unique story of each cocoa bean&apos;s origin. We traversed the unique story of each cocoa bean&apos;s origin. We traversed
@ -65,7 +65,7 @@ export default function AboutUsPage() {
startClass='translate-y-8' startClass='translate-y-8'
finishClass='translate-y-0' finishClass='translate-y-0'
> >
<p className='text-xl text-justify'> <p className='text-s-normal text-justify'>
Beholding our vision, we started the meticulous process of Beholding our vision, we started the meticulous process of
crafting rich, exquisite, delectable chocolates, ultimately crafting rich, exquisite, delectable chocolates, ultimately
perfecting the art. As we continue our journey at Mozimo, we are perfecting the art. As we continue our journey at Mozimo, we are
@ -76,11 +76,11 @@ export default function AboutUsPage() {
</div> </div>
</div> </div>
</section> </section>
<section className='flex flex-col md:flex-row items-center'> <section className='flex flex-col-reverse md:flex-row items-center'>
<div className='w-full md:w-1/2'> <div className='w-full md:w-1/2'>
<div className='m-8 space-y-5'> <div className='m-8 space-y-5'>
<AnimatedText finishClass='delay-300'> <AnimatedText finishClass='delay-300'>
<p className='text-xl font-justify uppercase'> <p className='text-s-normal font-justify uppercase'>
Aritsan Craftmanship Aritsan Craftmanship
</p> </p>
</AnimatedText> </AnimatedText>
@ -88,7 +88,7 @@ export default function AboutUsPage() {
startClass='translate-y-8' startClass='translate-y-8'
finishClass='translate-y-0' finishClass='translate-y-0'
> >
<p className='text-xl text-justify pb-12'> <p className='text-s-normal text-justify pb-12'>
We are an atelier crafting chocolate from the finest We are an atelier crafting chocolate from the finest
single-source beans. Our commitment to the art of making single-source beans. Our commitment to the art of making
chocolate ensures that each piece epitomizes supreme taste & chocolate ensures that each piece epitomizes supreme taste &
@ -96,7 +96,7 @@ export default function AboutUsPage() {
</p> </p>
</AnimatedText> </AnimatedText>
<AnimatedText finishClass='delay-300'> <AnimatedText finishClass='delay-300'>
<p className='text-xl font-justify uppercase'> <p className='text-s-normal font-justify uppercase'>
Ethics and Sustainability Ethics and Sustainability
</p> </p>
</AnimatedText> </AnimatedText>
@ -104,7 +104,7 @@ export default function AboutUsPage() {
startClass='translate-y-8' startClass='translate-y-8'
finishClass='translate-y-0' finishClass='translate-y-0'
> >
<p className='text-xl text-justify pb-12'> <p className='text-s-normal text-justify pb-12'>
We are committed to sustainability and being ethical in all that We are committed to sustainability and being ethical in all that
we do. From selecting ingredients from remote farmers to our we do. From selecting ingredients from remote farmers to our
production practices, we prioritize sustainability and ethical production practices, we prioritize sustainability and ethical
@ -112,7 +112,7 @@ export default function AboutUsPage() {
</p> </p>
</AnimatedText> </AnimatedText>
<AnimatedText finishClass='delay-300'> <AnimatedText finishClass='delay-300'>
<p className='text-xl font-justify uppercase'> <p className='text-s-normal font-justify uppercase'>
Commitment to Excellence Commitment to Excellence
</p> </p>
</AnimatedText> </AnimatedText>
@ -120,7 +120,7 @@ export default function AboutUsPage() {
startClass='translate-y-8' startClass='translate-y-8'
finishClass='translate-y-0' finishClass='translate-y-0'
> >
<p className='text-xl text-justify'> <p className='text-s-normal text-justify'>
We are inspired to create the best-quality chocolate in our We are inspired to create the best-quality chocolate in our
pursuit of excellence. This involves refining ingredients, pursuit of excellence. This involves refining ingredients,
updating processes, and continuously striving to become the best updating processes, and continuously striving to become the best
@ -142,14 +142,14 @@ export default function AboutUsPage() {
<section className='flex flex-col items-center'> <section className='flex flex-col items-center'>
<AnimatedText finishClass='delay-300'> <AnimatedText finishClass='delay-300'>
<div className='font-normal text-center p-12'> <div className='font-normal text-center p-12'>
<span className='text-6xl font-montera'>Specimens of</span>{' '} <span className='text-s-headline font-montera'>Specimens of</span>{' '}
<span className='text-8xl font-samantha'> <span className='text-s-headline font-samantha'>
Exquisite Craftsmanship Exquisite Craftsmanship
</span> </span>
</div> </div>
</AnimatedText> </AnimatedText>
<AnimatedText startClass='translate-y-8' finishClass='translate-y-0'> <AnimatedText startClass='translate-y-8' finishClass='translate-y-0'>
<div className='text-xl text-justify pb-12'> <div className='text-s-normal text-justify pb-12'>
Every creation of Mozimo&apos;s chocolate is a specimen of Every creation of Mozimo&apos;s chocolate is a specimen of
craftsmanship of the highest quality by the finest chocolatiers. craftsmanship of the highest quality by the finest chocolatiers.
</div> </div>
@ -176,16 +176,16 @@ export default function AboutUsPage() {
<section className='flex flex-col items-center'> <section className='flex flex-col items-center'>
<AnimatedText finishClass='delay-300'> <AnimatedText finishClass='delay-300'>
<p className='font-normal text-center p-12'> <p className='font-normal text-center p-12'>
<span className='text-6xl font-montera'> <span className='text-s-headline font-montera'>
Immerse yourself in the Immerse yourself in the
</span>{' '} </span>{' '}
<span className='text-8xl font-samantha'> <span className='text-s-headline font-samantha'>
Italian Chocolate Experience Italian Chocolate Experience
</span> </span>
</p> </p>
</AnimatedText> </AnimatedText>
<AnimatedText startClass='translate-y-8' finishClass='translate-y-0'> <AnimatedText startClass='translate-y-8' finishClass='translate-y-0'>
<p className='text-xl text-center pb-12'> <p className='text-s-normal text-center pb-12'>
Indulge in the authentic artistry of the Cioccolaterias of Italy Indulge in the authentic artistry of the Cioccolaterias of Italy
with handcrafted artisanal chocolates by Mozimo. with handcrafted artisanal chocolates by Mozimo.
</p> </p>
@ -196,12 +196,12 @@ export default function AboutUsPage() {
className='w-full h-auto' className='w-full h-auto'
/> />
<AnimatedText finishClass='delay-300'> <AnimatedText finishClass='delay-300'>
<p className='text-6xl text-center font-montera p-12'> <p className='text-s-headline text-center font-montera p-12'>
Experience the art of gifting this Diwali Experience the art of gifting this Diwali
</p> </p>
</AnimatedText> </AnimatedText>
<AnimatedText startClass='translate-y-8' finishClass='translate-y-0'> <AnimatedText startClass='translate-y-8' finishClass='translate-y-0'>
<p className='text-xl text-center pb-12'> <p className='text-s-normal text-center pb-12'>
It’s time to celebrate the joy of togetherness, love, and the luxury It’s time to celebrate the joy of togetherness, love, and the luxury
of Mozimo’s chocolates. This Diwali, let’s embrace the sweetness of of Mozimo’s chocolates. This Diwali, let’s embrace the sweetness of
life with our exquisite single-origin handcrafted chocolates, life with our exquisite single-origin handcrafted chocolates,
@ -209,7 +209,7 @@ export default function AboutUsPage() {
</p> </p>
</AnimatedText> </AnimatedText>
<AnimatedText startClass='translate-y-8' finishClass='translate-y-0'> <AnimatedText startClass='translate-y-8' finishClass='translate-y-0'>
<p className='text-xl text-center pb-12'> <p className='text-s-normal text-center pb-12'>
Let our handcrafted chocolates be a part of your Diwali rituals. Let our handcrafted chocolates be a part of your Diwali rituals.
Whether you’re enjoying them during family gatherings, using them as Whether you’re enjoying them during family gatherings, using them as
a centerpiece for your celebrations, or gifting them to friends or a centerpiece for your celebrations, or gifting them to friends or

20
src/app/(static)/page.tsx
View File

@ -18,7 +18,7 @@ export default function HomePage() {
<div className='w-full md:w-1/2 h-[90vh] md:h-auto'> <div className='w-full md:w-1/2 h-[90vh] md:h-auto'>
<div className='m-8 space-y-10'> <div className='m-8 space-y-10'>
<AnimatedText finishClass='delay-300'> <AnimatedText finishClass='delay-300'>
<h2 className='text-6xl font-normal text-justify font-montera'> <h2 className='text-s-title font-normal text-justify font-montera'>
Brand Story Brand Story
</h2> </h2>
</AnimatedText> </AnimatedText>
@ -26,16 +26,16 @@ export default function HomePage() {
startClass='translate-y-8' startClass='translate-y-8'
finishClass='translate-y-0' finishClass='translate-y-0'
> >
<p className='text-xl text-justify'> <p className='text-s-normal text-justify'>
Mozimo&apos;s journey is a passionate pursuit of crafting Mozimo&apos;s journey is a passionate pursuit of crafting
exceptional chocolate that celebrates the origin of each cocoa exceptional chocolate that celebrates the origin of each cocoa
bean. bean.
</p> </p>
<p className='text-xl text-justify'> <p className='text-s-normal text-justify'>
We meticulously roast, crack, winnow, and refine beans in-house, We meticulously roast, crack, winnow, and refine beans in-house,
using modern techniques to highlight their natural flavors. using modern techniques to highlight their natural flavors.
</p> </p>
<p className='text-xl text-justify'> <p className='text-s-normal text-justify'>
Each chocolate is a masterpiece, capturing the essence of cocoa Each chocolate is a masterpiece, capturing the essence of cocoa
in its purest form. in its purest form.
</p> </p>
@ -67,10 +67,10 @@ export default function HomePage() {
<div className='w-full md:w-1/2'> <div className='w-full md:w-1/2'>
<div className='m-8 space-y-10'> <div className='m-8 space-y-10'>
<AnimatedText finishClass='delay-300'> <AnimatedText finishClass='delay-300'>
<h2 className='text-6xl font-normal text-justify font-montera'> <h2 className='text-s-title font-normal text-justify font-montera'>
Discover the delicate art of our Discover the delicate art of our
</h2> </h2>
<h3 className='text-8xl font-normal text-justify font-samantha'> <h3 className='text-s-title font-normal text-justify font-samantha'>
Chocolate Tempering Chocolate Tempering
</h3> </h3>
</AnimatedText> </AnimatedText>
@ -78,7 +78,7 @@ export default function HomePage() {
startClass='translate-y-8' startClass='translate-y-8'
finishClass='translate-y-0' finishClass='translate-y-0'
> >
<p className='text-xl text-justify'> <p className='text-s-normal text-justify'>
Crafted to perfection Mozimo delivers a sublime sensory Crafted to perfection Mozimo delivers a sublime sensory
experience with every bite. Experience the epitome of indulgence experience with every bite. Experience the epitome of indulgence
with our perfectly tempered chocolate: velvety smooth, with our perfectly tempered chocolate: velvety smooth,
@ -91,7 +91,7 @@ export default function HomePage() {
</section> </section>
{/* Fourth Three-Column Layout (Collections) */} {/* Fourth Three-Column Layout (Collections) */}
<section className='flex flex-col items-center py-12 px-4 sm:px-6 lg:px-8'> <section className='flex flex-col items-center py-12 px-4 sm:px-6 lg:px-8'>
<div className='w-full text-6xl font-normal font-montera text-center py-12 px-4 sm:px-6 lg:px-8'> <div className='w-full text-s-headline font-normal font-montera text-center py-12 px-4 sm:px-6 lg:px-8'>
Our Collections Our Collections
</div> </div>
<Collections /> <Collections />
@ -100,13 +100,13 @@ export default function HomePage() {
<ChocolateCategories /> <ChocolateCategories />
{/* Sixth Layout (Instagram) */} {/* Sixth Layout (Instagram) */}
<section className='flex flex-col items-center py-12 px-4 sm:px-6 lg:px-8'> <section className='flex flex-col items-center py-12 px-4 sm:px-6 lg:px-8'>
<div className='w-full text-6xl font-normal font-montera text-center py-12 px-4 sm:px-6 lg:px-8'> <div className='w-full text-s-headline font-normal font-montera text-center py-12 px-4 sm:px-6 lg:px-8'>
Follow us on Instagram Follow us on Instagram
</div> </div>
<InstagramFeed /> <InstagramFeed />
</section> </section>
<section className='flex flex-col items-center bg-white py-12 px-4 sm:px-6 lg:px-8'> <section className='flex flex-col items-center bg-white py-12 px-4 sm:px-6 lg:px-8'>
<div className='w-full text-6xl font-normal font-montera text-center py-12 px-4 sm:px-6 lg:px-8'> <div className='w-full text-s-headline font-normal font-montera text-center py-12 px-4 sm:px-6 lg:px-8'>
In the Spotlight In the Spotlight
</div> </div>
<Spotlight /> <Spotlight />

2
src/app/(storefront)/products/[handle]/ProductDetails.tsx
View File

@ -48,7 +48,7 @@ const ProductDetails: FC<ProductDetailsProps> = ({ handle }) => {
} }
return ( return (
<div className='container mx-auto p-4'> <div className='container mx-auto pt-28'>
<h1 className='text-4xl font-bold'>{product.title}</h1> <h1 className='text-4xl font-bold'>{product.title}</h1>
<div className='flex flex-col md:flex-row gap-6 mt-4'> <div className='flex flex-col md:flex-row gap-6 mt-4'>
{/* Product Images */} {/* Product Images */}

2
src/app/(storefront)/products/page.tsx
View File

@ -13,7 +13,7 @@ export default function ProductsPage() {
if (error) return <p>Error: {error.message}</p>; if (error) return <p>Error: {error.message}</p>;
return ( return (
<div className='container mx-auto py-12'> <div className='container mx-auto py-12 pt-28'>
<h1 className='text-3xl font-bold mb-8'>Handbags Collection</h1> <h1 className='text-3xl font-bold mb-8'>Handbags Collection</h1>
<div className='grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8'> <div className='grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8'>
{products?.map((product) => ( {products?.map((product) => (

21
src/app/globals.css
View File

@ -5,6 +5,10 @@
:root { :root {
--background: #f8f6f5; --background: #f8f6f5;
--foreground: #703133; --foreground: #703133;
--normal-font: 2rem;
--title-font: 5rem;
--headline-font: 8rem;
--items-font: 10rem;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@ -14,6 +18,10 @@
} }
} }
html {
font-size: 62.5%;
}
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -21,6 +29,19 @@ body {
background-color: var(--background); background-color: var(--background);
font-family: Renner, sans-serif; font-family: Renner, sans-serif;
font-weight: 300; font-weight: 300;
font-size: var(--normal-font);
}
.text-s-normal {
font-size: var(--normal-font);
}
.text-s-title {
font-size: var(--title-font);
}
.text-s-headline {
font-size: var(--headline-font);
} }
@layer utilities { @layer utilities {

15
src/components/category-slider.module.css Normal file
View File

@ -0,0 +1,15 @@
.productImage {
width: 8rem; /* Set the width of the image */
aspect-ratio: 1;
border-radius: 50%; /* Make the image circular */
object-fit: cover; /* Ensure the image covers the container */
margin-right: 1.5rem; /* Space between image and product name */
display: inline-block;
box-shadow: .5rem .5rem 1rem rgba(0,0,0,.1);
}
@media screen and (width >= 768px) {
.productImage {
display: none;
}
}

32
src/components/category-slider.tsx
View File

@ -1,6 +1,7 @@
'use client'; 'use client';
import { useState } from 'react'; import { useState } from 'react';
import Image from 'next/image'; import Image from 'next/image';
import styles from './category-slider.module.css';
const categories = [ const categories = [
{ name: 'Bars', image: '/images/categories/bars.jpg' }, { name: 'Bars', image: '/images/categories/bars.jpg' },
@ -16,22 +17,25 @@ export function ChocolateCategories() {
return ( return (
<section className='flex flex-col md:flex-row bg-white py-12 px-4 sm:px-6 lg:px-8'> <section className='flex flex-col md:flex-row bg-white py-12 px-4 sm:px-6 lg:px-8'>
<div className='w-full md:w-1/2 bg-white h-auto'> <ul className='w-full md:w-1/2 bg-white h-auto m-8 space-y-10 text-[#5a352a] text-left'>
<ul className='m-8 space-y-10 text-[#5a352a] font-serif text-5xl justify-center text-left'> {categories.map((category) => (
{categories.map((category) => ( <li
<li key={category.name}
key={category.name} onMouseEnter={() => setCurrentImage(category.image)}
onMouseEnter={() => setCurrentImage(category.image)} className='hover:text-[#c19a6b] cursor-pointer font-montera font-normal text-s-headline'
className='hover:text-[#c19a6b] cursor-pointer font-montera font-normal text-9xl' >
> <img
{category.name} className={styles.productImage}
</li> alt={category.name}
))} src={category.image}
</ul> />
</div> <span>{category.name}</span>
</li>
))}
</ul>
{/* Right Side: Image */} {/* Right Side: Image */}
<div className='w-full md:w-1/2 h-full'> <div className={`w-full md:w-1/2 h-full hidden md:flex`}>
<Image <Image
src={currentImage} src={currentImage}
alt='Chocolate Category' alt='Chocolate Category'

4
src/components/footer.tsx
View File

@ -13,13 +13,13 @@ export function Footer() {
return ( return (
<footer className='bg-[#f8f6f5] flex flex-col md:flex-row py-12 border-t-2 border-black max-w-7xl mx-auto gap-8 px-4'> <footer className='bg-[#f8f6f5] flex flex-col md:flex-row py-12 border-t-2 border-black max-w-7xl mx-auto gap-8 px-4'>
{/* First Column: Logo and Description */} {/* First Column: Logo and Description */}
<div className='space-y-4 flex flex-col basis-1/4'> <div className='space-y-4 flex flex-col basis-1/4 flex-shrink'>
<Image <Image
src={logoPic} src={logoPic}
alt='Mozimo Logo' alt='Mozimo Logo'
width={100} width={100}
height={100} height={100}
className='w-full h-auto' className='h-full logo'
/> />
<p className='text-sm'> <p className='text-sm'>
India&apos;s Premier European style bean-to-bar chocolate experience. India&apos;s Premier European style bean-to-bar chocolate experience.

16
src/components/navbar.module.css
View File

@ -11,6 +11,8 @@
z-index: 1000; z-index: 1000;
background: hsl(0 0% 100% / .2); background: hsl(0 0% 100% / .2);
backdrop-filter: blur(1rem); backdrop-filter: blur(1rem);
font-size: 2rem;
line-height: 2.8rem;
} }
@ -21,14 +23,14 @@
bottom: 0; bottom: 0;
transform: translateX(-100%); transform: translateX(-100%);
transition: transform 350ms ease-out; transition: transform 350ms ease-out;
padding: min(30vh, 10rem) 2em; padding: min(30vh, 16rem) 2em;
} }
.mobileNavToggle { .mobileNavToggle {
position: absolute; position: absolute;
display: block; display: block;
width: 2rem; width: 3.2rem;
top: 2rem; top: 3.2rem;
left: 2rem; left: 3.2rem;
aspect-ratio: 1; aspect-ratio: 1;
z-index: 9999; z-index: 9999;
background-image: url('/icons/menu.svg'); background-image: url('/icons/menu.svg');
@ -48,14 +50,14 @@
.navBar { .navBar {
right: 0; right: 0;
flex-direction: row; flex-direction: row;
height: 5rem; height: 8rem;
border-radius:0 0 0.5rem 0.5rem; border-radius:0 0 0.8rem 0.8rem;
} }
} }
.navBar > div { .navBar > div {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--gap, 2rem); gap: var(--gap, 3.2rem);
} }
/* .navBarInitial { /* .navBarInitial {

14
src/components/navbar.tsx
View File

@ -13,6 +13,7 @@ export function Navbar() {
const prevScrollY = useRef(0); const prevScrollY = useRef(0);
const [navBarStyle, setNavBarStyle] = useState('initial'); const [navBarStyle, setNavBarStyle] = useState('initial');
const [isVisible, setIsVisible] = useState('false'); const [isVisible, setIsVisible] = useState('false');
const [isExpanded, setIsExpanded] = useState<boolean>(false);
useEffect(() => { useEffect(() => {
const handleScroll = () => { const handleScroll = () => {
const currentScrollY = window.scrollY; const currentScrollY = window.scrollY;
@ -48,28 +49,27 @@ export function Navbar() {
function toggleMenu() { function toggleMenu() {
if (isVisible === 'true') { if (isVisible === 'true') {
setIsVisible('false'); setIsVisible('false');
setIsExpanded(false);
} else { } else {
setIsVisible('true'); setIsVisible('true');
setIsExpanded(true);
} }
} }
return ( return (
<div className=''> <div>
<button <button
className={styles.mobileNavToggle} className={styles.mobileNavToggle}
aria-controls='primary-navigation' aria-controls='primary-navigation'
aria-expanded={isVisible} aria-expanded={isExpanded}
onClick={toggleMenu} onClick={toggleMenu}
> >
<span className='sr-only'>Menu</span> <span className='sr-only'>Menu</span>
</button> </button>
<nav data-visible={isVisible} className={navClasses}> <nav data-visible={isVisible} className={navClasses}>
{/* Left side */} {/* Left side */}
<div className=''> <div>
<Link <Link href='/about-us' className='font-medium hover:underline'>
href='/about-us'
className='text-sm font-medium hover:underline'
>
About Us About Us
</Link> </Link>
</div> </div>

4
src/components/our-collection.tsx
View File

@ -31,9 +31,7 @@ export function Collections() {
className='w-full h-auto object-cover' className='w-full h-auto object-cover'
/> />
<div className='p-4'> <div className='p-4'>
<h3 className='text-center text-base font-light'> <h3 className='text-center font-light'>{collection.title}</h3>
{collection.title}
</h3>
</div> </div>
</div> </div>
))} ))}