From 9c5d94480d8d940089911fff4240512a97267a29 Mon Sep 17 00:00:00 2001 From: deepeshahlawat Date: Sat, 1 Feb 2025 20:50:37 +0530 Subject: [PATCH] Fixed responsiveness on premium beans page --- src/Pages/PremiumBeans.js | 380 ++++++++++++++++++++++++-------------- 1 file changed, 243 insertions(+), 137 deletions(-) diff --git a/src/Pages/PremiumBeans.js b/src/Pages/PremiumBeans.js index 10eeee1..2fd208a 100644 --- a/src/Pages/PremiumBeans.js +++ b/src/Pages/PremiumBeans.js @@ -3,19 +3,24 @@ import styled, { keyframes } from 'styled-components'; const Loader = styled.div` background: linear-gradient(135deg, #FDF5E6, #FFE4B5); - height: 90vh; + height: 100vh; width: 100%; - position:relative; - + position: relative; + overflow: hidden; + @media (max-width: 768px) { + height: 1100px; +} `; - const Container = styled.div` width: 300px; height: 280px; position: absolute; top: calc(50% - 140px); left: calc(50% - 150px); + + @media (max-width: 768px) { + display: none; `; const CoffeeHeader = styled.div` @@ -26,6 +31,10 @@ const CoffeeHeader = styled.div` left: 0; background-color: brown; border-radius: 10px; + + @media (max-width: 768px) { + height: 60px; + } `; const CoffeeButton = styled.div` @@ -35,14 +44,28 @@ const CoffeeButton = styled.div` top: 25px; background-color: #282323; border-radius: 50%; + + @media (max-width: 768px) { + width: 20px; + height: 20px; + top: 20px; + } `; const CoffeeButtonOne = styled(CoffeeButton)` left: 15px; + + @media (max-width: 768px) { + left: 10px; + } `; const CoffeeButtonTwo = styled(CoffeeButton)` left: 50px; + + @media (max-width: 768px) { + left: 40px; + } `; const CoffeeDisplay = styled.div` @@ -55,6 +78,13 @@ const CoffeeDisplay = styled.div` background-color: green; border: 5px solid #43beae; box-sizing: border-box; + + @media (max-width: 768px) { + width: 40px; + height: 40px; + top: calc(50% - 20px); + left: calc(50% - 20px); + } `; const CoffeeDetails = styled.div` @@ -65,6 +95,12 @@ const CoffeeDetails = styled.div` right: 10px; background-color: #9b9091; box-shadow: -12px 0 0 #9b9091, -24px 0 0 #9b9091; + + @media (max-width: 768px) { + height: 15px; + top: 8px; + right: 8px; + } `; const CoffeeMedium = styled.div` @@ -74,6 +110,11 @@ const CoffeeMedium = styled.div` top: 80px; left: calc(50% - 45%); background-color: #dc6565; + + @media (max-width: 768px) { + height: 120px; + top: 60px; + } `; const CoffeeMediumBefore = styled.div` @@ -84,6 +125,10 @@ const CoffeeMediumBefore = styled.div` bottom: 0; left: calc(50% - 45%); border-radius: 20px 20px 0 0; + + @media (max-width: 768px) { + height: 80px; + } `; const CoffeeExit = styled.div` @@ -93,18 +138,36 @@ const CoffeeExit = styled.div` top: 0; left: calc(50% - 30px); background-color: #231f20; + + @media (max-width: 768px) { + width: 50px; + height: 15px; + left: calc(50% - 25px); + } `; const CoffeeExitBefore = styled(CoffeeExit)` height: 5px; top: 5px; left: calc(50% - 30px); + + @media (max-width: 768px) { + height: 4px; + top: 4px; + left: calc(50% - 25px); + } `; const CoffeeExitAfter = styled(CoffeeExit)` height: 5px; top: 15px; left: calc(50% - 30px); + + @media (max-width: 768px) { + height: 4px; + top: 12px; + left: calc(50% - 25px); + } `; const CoffeeArm = styled.div` @@ -114,6 +177,13 @@ const CoffeeArm = styled.div` top: 15px; right: 25px; background-color: #231f20; + + @media (max-width: 768px) { + width: 60px; + height: 15px; + top: 12px; + right: 20px; + } `; const CoffeeArmBefore = styled.div` @@ -123,6 +193,13 @@ const CoffeeArmBefore = styled.div` top: 7px; left: -15px; background-color: #9e9495; + + @media (max-width: 768px) { + width: 12px; + height: 4px; + top: 6px; + left: -12px; + } `; const CoffeeCup = styled.div` @@ -133,6 +210,12 @@ const CoffeeCup = styled.div` left: calc(50% - 40px); background-color: #fff; border-radius: 0 0 70px 70px / 0 0 110px 110px; + + @media (max-width: 768px) { + width: 60px; + height: 35px; + left: calc(50% - 30px); + } `; const CoffeeCupAfter = styled.div` @@ -143,6 +226,13 @@ const CoffeeCupAfter = styled.div` right: -13px; border: 5px solid #fff; border-radius: 50%; + + @media (max-width: 768px) { + width: 15px; + height: 15px; + top: 5px; + right: -10px; + } `; const keyframesLiquid = keyframes` @@ -162,6 +252,11 @@ const CoffeeLiquid = styled.div` left: calc(50% - 3px); background-color: #74372b; animation: ${keyframesLiquid} 4s 4s linear infinite; + + @media (max-width: 768px) { + height: 50px; + top: 40px; + } `; const keyframesSmokeOne = keyframes` @@ -191,6 +286,11 @@ const CoffeeSmokeOne = styled(CoffeeSmoke)` bottom: 50px; left: 102px; animation: ${keyframesSmokeOne} 3s 4s linear infinite; + + @media (max-width: 768px) { + bottom: 40px; + left: 80px; + } `; const CoffeeSmokeTwo = styled(CoffeeSmoke)` @@ -198,6 +298,11 @@ const CoffeeSmokeTwo = styled(CoffeeSmoke)` bottom: 70px; left: 118px; animation: ${keyframesSmokeTwo} 3s 5s linear infinite; + + @media (max-width: 768px) { + bottom: 60px; + left: 95px; + } `; const CoffeeSmokeThree = styled(CoffeeSmoke)` @@ -205,6 +310,11 @@ const CoffeeSmokeThree = styled(CoffeeSmoke)` bottom: 65px; right: 118px; animation: ${keyframesSmokeTwo} 3s 6s linear infinite; + + @media (max-width: 768px) { + bottom: 55px; + right: 95px; + } `; const CoffeeSmokeFour = styled(CoffeeSmoke)` @@ -212,6 +322,11 @@ const CoffeeSmokeFour = styled(CoffeeSmoke)` bottom: 50px; right: 102px; animation: ${keyframesSmokeOne} 3s 5s linear infinite; + + @media (max-width: 768px) { + bottom: 40px; + right: 80px; + } `; const CoffeeFooter = styled.div` @@ -222,6 +337,11 @@ const CoffeeFooter = styled.div` left: calc(50% - 47.5%); background-color: brown; border-radius: 10px; + + @media (max-width: 768px) { + height: 12px; + bottom: 20px; + } `; const CoffeeFooterAfter = styled.div` @@ -231,26 +351,46 @@ const CoffeeFooterAfter = styled.div` bottom: 0px; left: -8px; background-color: #000; + + @media (max-width: 768px) { + height: 20px; + } `; + const CoffeeTap = styled.div` width: 49px; - height: 30px; - position: absolute; - top: 20px; - left: calc(50% - 22px); - background-color: #231f20; - border-radius:0 0 10px 10px; + height: 30px; + position: absolute; + top: 20px; + left: calc(50% - 22px); + background-color: #231f20; + border-radius: 0 0 10px 10px; + + @media (max-width: 768px) { + width: 40px; + height: 25px; + top: 15px; + left: calc(50% - 20px); + } `; const CoffeeTapNozzle = styled.div` width: 10px; - height: 10px; - position: absolute; - bottom: -10px; - left: calc(50% - 7px); - background-color: #231f20; - border-radius: 0%; + height: 10px; + position: absolute; + bottom: -10px; + left: calc(50% - 7px); + background-color: #231f20; + border-radius: 0%; + + @media (max-width: 768px) { + width: 8px; + height: 8px; + bottom: -8px; + left: calc(50% - 4px); + } `; + const CardsContainer = styled.div` position: absolute; top: 50%; @@ -259,57 +399,29 @@ const CardsContainer = styled.div` display: flex; justify-content: space-between; width: 1000px; - @media (max-width: 1050px) { - margin:0; - place-items: center; - gap: 340px; - - } - - @media (max-width: 940px) { - margin:0; - place-items: center; - gap: 250px; - - } - @media (max-width: 880px) { - margin:0; - place-items: center; - top:800px; - grid-template-columns: 1fr; - - } - @media (max-width: 820px) { - margin:0; - place-items: center; - top:800px; - grid-template-columns: 1fr; - } - @media (max-width: 770px) { - margin: 0; - place-items: center; - top:800px; - grid-template-columns: 1fr; - } - @media (max-width: 600px) { - margin: 0; - place-items: center; - top:800px; - grid-template-columns: 1fr; - } - @media (max-width: 500px) { - margin:0; - place-items: center; - top:800px; - grid-template-columns: 1fr; - } - + + @media (max-width: 1050px) { + width: 90%; + gap: 20px; + } + + @media (max-width: 768px) { + flex-direction: column; + align-items: center; + gap: 20px; + top: 40%; + margin-top: 100px; + } `; const CardColumn = styled.div` display: flex; flex-direction: column; gap: 40px; + + @media (max-width: 768px) { + gap: 20px; + } `; const Card = styled.div` @@ -319,22 +431,17 @@ const Card = styled.div` flex-direction: column; justify-content: space-between; align-items: center; - // background: transparent; - @media (max-width: 880px) { - width: 480px; - } - @media (max-width: 600px) { - width: 240px; - } box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; - &:hover { - transform: scale(1.01); - } border-radius: 5%; background: #fff; padding: 10px; overflow: hidden; + + @media (max-width: 768px) { + width: 200px; + height: 240px; + } `; const CardImage = styled.div` @@ -345,28 +452,27 @@ const CardImage = styled.div` border-radius: 16px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; - // margin-bottom: 10px; + border-bottom: 1px solid #eee; - &:hover { - transform: translateY(-5px); - box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2); - transform: scale(1.05); - + @media (max-width: 768px) { + height: 150px; } - border-bottom: 1px solid #eee; `; const CardContent = styled.div` margin-top: 20px; text-align: center; font-family: "Arial", sans-serif; - // padding: 0 10px; line-height: 1.6; display: flex; flex-direction: column; justify-content: flex-start; text-align: center; flex-grow: 1; + + @media (max-width: 768px) { + margin-top: 10px; + } `; const CardTitle = styled.h3` @@ -374,16 +480,23 @@ const CardTitle = styled.h3` font-weight: bold; color: #333; margin: 0; + + @media (max-width: 768px) { + font-size: 1.2rem; + } `; const CardDescription = styled.p` font-size: 1rem; color: #666; margin: 5px 0 0; + + @media (max-width: 768px) { + font-size: 0.9rem; + } `; const LearnMoreButton = styled.button` - // align-self: flex-start; font-size: 14px; font-weight: bold; color: #fff; @@ -392,24 +505,29 @@ const LearnMoreButton = styled.button` border-radius: 8px; cursor: pointer; transition: background 0.3s ease, transform 0.2s ease; + margin-top: 5px; + padding: 10px 20px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); &:hover { - background: #2d8f8e;; + background: #2d8f8e; transform: translateY(-3px); } + &:active { transform: translateY(1px); background: #1e7c7a; } - margin-top: 5px; - // margin-bottom: 16px; - padding: 10px 20px; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); + + @media (max-width: 768px) { + font-size: 12px; + padding: 8px 16px; + } `; const BuyNowButton = styled.button` margin-top: 5px; - margin-bottom: 16px; + margin-bottom: 16px; padding: 10px 20px; font-size: 14px; font-weight: bold; @@ -430,8 +548,12 @@ const BuyNowButton = styled.button` transform: translateY(1px); background: #e84331; } -`; + @media (max-width: 768px) { + font-size: 12px; + padding: 8px 16px; + } +`; function PremiumBeans() { const beans = [ @@ -460,56 +582,11 @@ function PremiumBeans() { image: "https://images.pexels.com/photos/4109748/pexels-photo-4109748.jpeg?auto=compress&cs=tinysrgb&w=600", }, ]; + return ( - + - {/* Left cards */} - {beans.slice(0, 2).map((bean) => ( - - - - {bean.title} - {bean.description} - - - ))} - - - - - - - - - - - - - - - - - - - - - - - - - {/* Adding the tap */} - - - - - - - - - - - {/* Left cards */} {beans.slice(0, 2).map((bean) => ( @@ -520,8 +597,8 @@ function PremiumBeans() { ))} - - + + {beans.slice(2).map((bean) => ( @@ -534,8 +611,37 @@ function PremiumBeans() { ))} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); } -export default PremiumBeans; +export default PremiumBeans; \ No newline at end of file