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

Fix mobile, the image was getting cut due to h-vw90

Browse Source 
spotlight image made a bit smaller
Category slider images were HUGE
This commit is contained in:
Amritanshu Agrawal
2024-10-17 11:00:15 +05:30
parent 08442fe306
commit c14bceec09
3 changed files with 10 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,9 +14,9 @@ export default function HomePage() {
<div className='overflow-x-hidden'> <div className='overflow-x-hidden'>
<HeroSwiper /> <HeroSwiper />
{/* First Two-Column Layout */} {/* First Two-Column Layout */}
<section className='flex flex-col md:flex-row items-center bg-white h-[90vh] overflow-clip'> <section className='flex flex-col md:flex-row items-center bg-white md:h-[90vh] overflow-clip'>
{/* Left Column - Text with Header */} {/* Left Column - Text with Header */}
<div className='w-full md:w-1/2 md:h-auto'> <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-s-title font-normal text-justify font-montera'>Brand Story</h2> <h2 className='text-s-title font-normal text-justify font-montera'>Brand Story</h2>

3
src/components/category-slider.module.css
View File

@ -1,6 +1,5 @@
.productImage { .productImage {
width: 100%; /* Set the width of the image */ width: 100px; /* Set the width of the image */
height: auto;
aspect-ratio: 1; aspect-ratio: 1;
border-radius: 50%; /* Make the image circular */ border-radius: 50%; /* Make the image circular */
object-fit: cover; /* Ensure the image covers the container */ object-fit: cover; /* Ensure the image covers the container */

8
src/components/spotlight.tsx
View File

@ -13,7 +13,13 @@ export function Spotlight() {
{logos.map((logo, index) => ( {logos.map((logo, index) => (
<div key={index} className='flex flex-col items-center'> <div key={index} className='flex flex-col items-center'>
<div className='w-32 h-32 bg-white rounded-full shadow-lg flex items-center justify-center'> <div className='w-32 h-32 bg-white rounded-full shadow-lg flex items-center justify-center'>
<Image src={logo.src} alt={logo.alt} width={80} height={80} className='w-full h-auto object-contain' /> <Image
src={logo.src}
alt={logo.alt}
width={80}
height={80}
className='w-20 h-auto object-contain object-center'
/>
</div> </div>
</div> </div>
))} ))}