Skip to content

Commit

Permalink
Fixed responsiveness of home page
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sowdarjya
Sowdarjya committed Jan 2, 2025
1 parent 9f86258 commit c41ba7b
Showing 1 changed file with 102 additions and 71 deletions.
173 changes: 102 additions & 71 deletions src/Pages/Home.js
View file
Original file line number Diff line number Diff line change
@@ -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`
Expand All @@ -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;
}
Expand All @@ -60,56 +62,51 @@ 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;
}
`;

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;
Expand Down Expand Up @@ -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`
Expand All @@ -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;
}
`;

Expand All @@ -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 {
Expand All @@ -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% {
Expand All @@ -222,7 +224,7 @@ function Home() {
useEffect(() => {
const features = featuresRef.current.children;
const specialties = specialtyRef.current.children;

gsap.fromTo(
features,
{ y: 50, opacity: 0 },
Expand All @@ -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",
},
}
);
Expand All @@ -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",
},
}
);
Expand All @@ -276,34 +278,63 @@ function Home() {
Where every cup tells a story and every sip is an adventure in flavor
</Subtitle>
<Link to="/shop">
<StyledButton primary>Start Your Coffee Journey</StyledButton>
<StyledButton primary className="px-4 py-3 text-3xl">
Start Your Coffee Journey
</StyledButton>
</Link>
<ScrollIndicator>↓</ScrollIndicator>
</HeroSection>
<FeaturesSection ref={featuresRef}>
<FeaturesSection
ref={featuresRef}
className="grid md:grid-cols-3 sm:grid-cols-2 gap-4 grid-cols-1"
>
<FeatureCard>
<FeatureIcon src="https://img.freepik.com/free-photo/side-view-fresh-coffee-beans-falling-out-black-basket-red-background_141793-27586.jpg?t=st=1727759694~exp=1727763294~hmac=661c2c2b8c561df98b21f74effb9bb02a0875b0584c062f076bceafa5d6f7eda&w=1380" alt="Quality Beans" />
<FeatureIcon
src="https://img.freepik.com/free-photo/side-view-fresh-coffee-beans-falling-out-black-basket-red-background_141793-27586.jpg?t=st=1727759694~exp=1727763294~hmac=661c2c2b8c561df98b21f74effb9bb02a0875b0584c062f076bceafa5d6f7eda&w=1380"
alt="Quality Beans"
/>
<FeatureTitle>Premium Beans</FeatureTitle>
<FeatureDescription>We source the finest coffee beans from around the world.</FeatureDescription>
<FeatureDescription>
We source the finest coffee beans from around the world.
</FeatureDescription>
</FeatureCard>
<FeatureCard>
<FeatureIcon src="https://img.freepik.com/free-vector/people-making-different-coffee-methods_23-2148659306.jpg?t=st=1727760094~exp=1727763694~hmac=1308757b9658b2965de4fa54acb3d847813ef088426f2fb78a05d8cb0be1b993&w=826" alt="Expert Baristas" />
<FeatureIcon
src="https://img.freepik.com/free-vector/people-making-different-coffee-methods_23-2148659306.jpg?t=st=1727760094~exp=1727763694~hmac=1308757b9658b2965de4fa54acb3d847813ef088426f2fb78a05d8cb0be1b993&w=826"
alt="Expert Baristas"
/>
<FeatureTitle>Expert Baristas</FeatureTitle>
<FeatureDescription>Our skilled baristas craft each cup to perfection.</FeatureDescription>
<FeatureDescription>
Our skilled baristas craft each cup to perfection.
</FeatureDescription>
</FeatureCard>
<FeatureCard>
<FeatureIcon src="https://img.freepik.com/free-photo/modern-coffee-shop-with-comfortable-chairs-elegant-decor-relaxing-ambiance-generated-by-artificial-intelligence_188544-150832.jpg?t=st=1727760180~exp=1727763780~hmac=5b12fc3782c57d5c5a04bcd60e2d275f3c18e52b87d6939948612e1cd4a76d68&w=1380" alt="Cozy Ambiance" />
<FeatureIcon
src="https://img.freepik.com/free-photo/modern-coffee-shop-with-comfortable-chairs-elegant-decor-relaxing-ambiance-generated-by-artificial-intelligence_188544-150832.jpg?t=st=1727760180~exp=1727763780~hmac=5b12fc3782c57d5c5a04bcd60e2d275f3c18e52b87d6939948612e1cd4a76d68&w=1380"
alt="Cozy Ambiance"
/>
<FeatureTitle>Cozy Ambiance</FeatureTitle>
<FeatureDescription>Enjoy your coffee in our warm and inviting atmosphere.</FeatureDescription>
<FeatureDescription>
Enjoy your coffee in our warm and inviting atmosphere.
</FeatureDescription>
</FeatureCard>
</FeaturesSection>
<SpecialtySection ref={specialtyRef}>
<SpecialtyImage src="https://img.freepik.com/free-photo/brown-coffee-beans-seed_74190-6651.jpg?ga=GA1.1.1542821208.1727756299&semt=ais_hybrid " alt="Specialty Coffee 1" />
<SpecialtyImage src="https://img.freepik.com/free-photo/coffee-machine-making-perfect-cup-coffee_23-2151699675.jpg?ga=GA1.1.1542821208.1727756299&semt=ais_hybrid" alt="Specialty Coffee 2" />
<SpecialtyImage src="https://img.freepik.com/free-photo/coffee-cup-with-beans_23-2148453628.jpg?t=st=1727760337~exp=1727763937~hmac=c326eb236a78a478ea9d9703e1bdbb8b390dcc71cefb24d78ca7a85bcb1c1cc5&w=740" alt="Specialty Coffee 3" />
<SpecialtyImage
src="https://img.freepik.com/free-photo/brown-coffee-beans-seed_74190-6651.jpg?ga=GA1.1.1542821208.1727756299&semt=ais_hybrid "
alt="Specialty Coffee 1"
/>
<SpecialtyImage
src="https://img.freepik.com/free-photo/coffee-machine-making-perfect-cup-coffee_23-2151699675.jpg?ga=GA1.1.1542821208.1727756299&semt=ais_hybrid"
alt="Specialty Coffee 2"
/>
<SpecialtyImage
src="https://img.freepik.com/free-photo/coffee-cup-with-beans_23-2148453628.jpg?t=st=1727760337~exp=1727763937~hmac=c326eb236a78a478ea9d9703e1bdbb8b390dcc71cefb24d78ca7a85bcb1c1cc5&w=740"
alt="Specialty Coffee 3"
/>
</SpecialtySection>
</HomeContainer>
);
}

export default Home;
export default Home;

0 comments on commit c41ba7b

Please sign in to comment.