From c41ba7b3b6990b9b00fb38e25e5e05c25f286204 Mon Sep 17 00:00:00 2001 From: Sowdarjya Date: Thu, 2 Jan 2025 09:18:25 +0530 Subject: [PATCH] Fixed responsiveness of home page --- src/Pages/Home.js | 173 +++++++++++++++++++++++++++------------------- 1 file changed, 102 insertions(+), 71 deletions(-) diff --git a/src/Pages/Home.js b/src/Pages/Home.js index 5064dd9..37cbcde 100644 --- a/src/Pages/Home.js +++ b/src/Pages/Home.js @@ -1,19 +1,20 @@ -import React, { useEffect, useRef } from 'react'; -import { Link } from 'react-router-dom'; -import { gsap } from 'gsap'; -import { ScrollTrigger } from 'gsap/ScrollTrigger'; -import styled from 'styled-components'; -import { motion } from 'framer-motion'; -import Button from '../componets/Button'; -import './Home.css'; +import React, { useEffect, useRef } from "react"; +import { Link } from "react-router-dom"; +import { gsap } from "gsap"; +import { ScrollTrigger } from "gsap/ScrollTrigger"; +import styled from "styled-components"; +import { motion } from "framer-motion"; +import Button from "../componets/Button"; +import "./Home.css"; gsap.registerPlugin(ScrollTrigger); const HomeContainer = styled.div` padding: 0; max-width: 100%; - background-color: #FDF5E6; - color: #2C130B; + background-color: #fdf5e6; + color: #2c130b; + overflow-x: hidden; `; const HeroSection = styled.section` @@ -25,33 +26,34 @@ const HeroSection = styled.section` height: 100vh; width: 100vw; background-image: linear-gradient( - rgba(44, 19, 11, 0.7), - rgba(44, 19, 11, 0.7) - ), url('https://cdn.pixabay.com/photo/2024/03/22/18/30/ai-generated-8650286_1280.png'); + rgba(44, 19, 11, 0.7), + rgba(44, 19, 11, 0.7) + ), + url("https://cdn.pixabay.com/photo/2024/03/22/18/30/ai-generated-8650286_1280.png"); background-size: cover; background-position: center; background-attachment: fixed; - color: #FFE4B5; + color: #ffe4b5; position: relative; - + &::after { - content: ''; + content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 100px; - background: linear-gradient(to top, #FDF5E6, transparent); + background: linear-gradient(to top, #fdf5e6, transparent); } `; const Title = styled(motion.h1)` font-size: 5rem; margin-bottom: 1.5rem; - text-shadow: 2px 2px 4px rgba(0,0,0,0.5); - font-family: 'Playfair Display', serif; - color: #FFE4B5; - + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); + font-family: "Playfair Display", serif; + color: #ffe4b5; + @media (max-width: 768px) { font-size: 3rem; } @@ -60,12 +62,12 @@ const Title = styled(motion.h1)` const Subtitle = styled(motion.p)` font-size: 1.8rem; margin-bottom: 2.5rem; - text-shadow: 1px 1px 2px rgba(0,0,0,0.5); - font-family: 'Poppins', sans-serif; - color: #DEB887; + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); + font-family: "Poppins", sans-serif; + color: #deb887; max-width: 600px; line-height: 1.4; - + @media (max-width: 768px) { font-size: 1.4rem; padding: 0 20px; @@ -73,43 +75,38 @@ const Subtitle = styled(motion.p)` `; const StyledButton = styled(Button)` - background: #D2691E; - color: #FFE4B5; - padding: 1rem 2.5rem; - font-size: 1.2rem; + background: #d2691e; + color: #ffe4b5; border-radius: 30px; - border: 2px solid #8B4513; + border: 2px solid #8b4513; transition: all 0.3s ease; - font-family: 'Poppins', sans-serif; + font-family: "Poppins", sans-serif; text-transform: uppercase; letter-spacing: 1px; - + &:hover { - background: #8B4513; + background: #8b4513; transform: translateY(-3px); box-shadow: 0 5px 15px rgba(139, 69, 19, 0.3); } `; const FeaturesSection = styled.section` - display: grid; - grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); - gap: 3rem; padding: 6rem 4rem; - background: linear-gradient(135deg, #FDF5E6, #FFE4B5); + background: linear-gradient(135deg, #fdf5e6, #ffe4b5); position: relative; overflow: visible; &::before { - content: '☕'; + content: "☕"; position: absolute; top: -30px; left: 50%; transform: translateX(-50%); font-size: 3rem; - color: #8B4513; + color: #8b4513; } - + @media (max-width: 768px) { padding: 4rem 2rem; gap: 2rem; @@ -144,15 +141,15 @@ const FeatureIcon = styled.img` const FeatureTitle = styled.h3` font-size: 1.8rem; margin-bottom: 1rem; - color: #8B4513; - font-family: 'Playfair Display', serif; + color: #8b4513; + font-family: "Playfair Display", serif; `; const FeatureDescription = styled.p` font-size: 1.1rem; - color: #6B4423; + color: #6b4423; line-height: 1.6; - font-family: 'Poppins', sans-serif; + font-family: "Poppins", sans-serif; `; const SpecialtySection = styled.section` @@ -161,18 +158,19 @@ const SpecialtySection = styled.section` justify-content: center; align-items: center; padding: 6rem 2rem; - background: #2C130B; + background: #2c130b; position: relative; - + &::before { - content: 'Our Specialties'; + content: "Our Specialties"; position: absolute; top: 2rem; left: 50%; transform: translateX(-50%); font-size: 2.5rem; - color: #FFE4B5; - font-family: 'Playfair Display', serif; + color: #ffe4b5; + font-family: "Playfair Display", serif; + text-wrap: nowrap; } `; @@ -183,7 +181,7 @@ const SpecialtyImage = styled(motion.img)` border-radius: 20px; margin: 1.5rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); - border: 3px solid #8B4513; + border: 3px solid #8b4513; transition: all 0.4s ease; &:hover { @@ -197,13 +195,17 @@ const ScrollIndicator = styled(motion.div)` bottom: 40px; left: 50%; transform: translateX(-50%); - color: #FFE4B5; + color: #ffe4b5; font-size: 2rem; cursor: pointer; animation: bounce 2s infinite; @keyframes bounce { - 0%, 20%, 50%, 80%, 100% { + 0%, + 20%, + 50%, + 80%, + 100% { transform: translateY(0) translateX(-50%); } 40% { @@ -222,7 +224,7 @@ function Home() { useEffect(() => { const features = featuresRef.current.children; const specialties = specialtyRef.current.children; - + gsap.fromTo( features, { y: 50, opacity: 0 }, @@ -231,11 +233,11 @@ function Home() { opacity: 1, stagger: 0.2, duration: 1, - ease: 'power3.out', + ease: "power3.out", scrollTrigger: { trigger: featuresRef.current, - start: 'top bottom-=100', - toggleActions: 'play none none reverse', + start: "top bottom-=100", + toggleActions: "play none none reverse", }, } ); @@ -248,11 +250,11 @@ function Home() { opacity: 1, stagger: 0.2, duration: 1, - ease: 'back.out(1.7)', + ease: "back.out(1.7)", scrollTrigger: { trigger: specialtyRef.current, - start: 'top bottom-=100', - toggleActions: 'play none none reverse', + start: "top bottom-=100", + toggleActions: "play none none reverse", }, } ); @@ -276,34 +278,63 @@ function Home() { Where every cup tells a story and every sip is an adventure in flavor - Start Your Coffee Journey + + Start Your Coffee Journey + ↓ - + - + Premium Beans - We source the finest coffee beans from around the world. + + We source the finest coffee beans from around the world. + - + Expert Baristas - Our skilled baristas craft each cup to perfection. + + Our skilled baristas craft each cup to perfection. + - + Cozy Ambiance - Enjoy your coffee in our warm and inviting atmosphere. + + Enjoy your coffee in our warm and inviting atmosphere. + - - - + + + ); } -export default Home; \ No newline at end of file +export default Home;