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;