Skip to content

Commit

Permalink
Merge branch 'main' of https://github.com/Mujtabaa07/coffeeShop
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mujtabaa07
Mujtabaa07 committed Jan 2, 2025
2 parents ede8127 + bff71b2 commit c84ddc7
Show file tree
Hide file tree
Showing 2 changed files with 88 additions and 52 deletions.
18 changes: 17 additions & 1 deletion src/Pages/Testimonial.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ h1{

.container{
margin-top: 5%;
margin-bottom: 20px;
}

.image-text{
Expand All @@ -28,7 +29,12 @@ h1{
border-radius: 15px;
box-shadow: 0px 2px 6px 3px rgba(0, 0, 0, 0.1);
animation: fadeInUp 1s ease-in-out; /* Added animation */

transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.image:hover {
transform: none;
}

.image-text h2{
font-size: 25px;
Expand All @@ -43,6 +49,13 @@ h1{
.single{
position: relative;
margin-bottom: 50px;

}

.single:hover {
transform: scale(1.05);
box-shadow: 0px 4px 12px 6px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease-in-out;
}

.image{
Expand All @@ -54,13 +67,16 @@ h1{
top:15px;
left:125px;
border-radius: 50%;
animation: bounceIn 1s ease-in-out; /* Added animation */
animation: bounceIn 1s ease-in-out;
}

.image img{
width: 100%;
object-fit: cover;
}
.row{
margin-bottom: 20px;
}

.carousel-indicators{
left: 0;
Expand Down
122 changes: 71 additions & 51 deletions src/componets/Navbar.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';
import { logout } from '../Store/authSlice';
import styled from 'styled-components';
import { motion, AnimatePresence } from 'framer-motion';
import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import { logout } from "../Store/authSlice";
import styled from "styled-components";
import { motion, AnimatePresence } from "framer-motion";

const NavbarContainer = styled(motion.nav)`
display: flex;
Expand All @@ -19,21 +19,21 @@ const NavbarContainer = styled(motion.nav)`
right: 0;
z-index: 1000;
transition: all 0.3s ease;
border-bottom: 2px solid #8B4513;
border-bottom: 2px solid #8b4513;
&.scrolled {
padding: 0.8rem 2rem;
background: rgba(44, 19, 11, 0.98);
}
&::before {
content: '';
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('/coffee-beans-pattern.png') repeat;
background: url("/coffee-beans-pattern.png") repeat;
opacity: 0.05;
pointer-events: none;
}
Expand All @@ -42,17 +42,17 @@ const NavbarContainer = styled(motion.nav)`
const Logo = styled(motion.div)`
font-size: 2rem;
font-weight: 700;
font-family: 'Playfair Display', serif;
font-family: "Playfair Display", serif;
a {
color: #D2691E;
color: #d2691e;
text-decoration: none;
background: linear-gradient(to right, #D2691E, #CD853F);
background: linear-gradient(to right, #d2691e, #cd853f);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transition: all 0.3s ease;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
&:hover {
opacity: 0.9;
}
Expand All @@ -71,29 +71,29 @@ const NavLinks = styled(motion.div)`

const NavLink = styled(motion.div)`
position: relative;
a {
color: #DEB887;
color: #deb887;
text-decoration: none;
font-weight: 500;
font-size: 1.1rem;
transition: all 0.3s ease;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
&:hover {
color: #FFE4B5;
color: #ffe4b5;
}
}
&::after {
content: '☕';
content: "☕";
position: absolute;
font-size: 0.8rem;
bottom: -15px;
left: 50%;
transform: translateX(-50%) scale(0);
transition: transform 0.3s ease;
color: #D2691E;
color: #d2691e;
}
&:hover::after {
Expand All @@ -104,10 +104,10 @@ const NavLink = styled(motion.div)`
const MobileMenuButton = styled(motion.button)`
display: none;
background: none;
border: 2px solid #D2691E;
border: 2px solid #d2691e;
font-size: 1.8rem;
cursor: pointer;
color: #DEB887;
color: #deb887;
padding: 0.5rem;
border-radius: 8px;
transition: all 0.3s ease;
Expand All @@ -120,7 +120,7 @@ const MobileMenuButton = styled(motion.button)`
&:hover {
background: rgba(210, 105, 30, 0.2);
color: #FFE4B5;
color: #ffe4b5;
}
`;

Expand All @@ -131,9 +131,10 @@ const MobileMenu = styled(motion.div)`
right: 0;
background: rgba(44, 19, 11, 0.98);
padding: 1rem;
z-index: 1000;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
border-radius: 0 0 15px 15px;
border: 2px solid #8B4513;
border: 2px solid #8b4513;
border-top: none;
`;

Expand All @@ -142,21 +143,21 @@ const MobileNavLink = styled(motion.div)`
border-radius: 8px;
transition: all 0.3s ease;
margin-bottom: 0.5rem;
a {
color: #DEB887;
color: #deb887;
text-decoration: none;
font-weight: 500;
display: block;
transition: all 0.3s ease;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
}
&:hover {
background: rgba(210, 105, 30, 0.2);
a {
color: #FFE4B5;
color: #ffe4b5;
transform: translateX(10px);
}
}
Expand All @@ -173,8 +174,8 @@ function Navbar() {
setScrolled(window.scrollY > 20);
};

window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll);
}, []);

const handleLogout = () => {
Expand All @@ -191,7 +192,7 @@ function Navbar() {
initial={{ y: -100 }}
animate={{ y: 0 }}
transition={{ duration: 0.5 }}
className={scrolled ? 'scrolled' : ''}
className={scrolled ? "scrolled" : ""}
>
<Logo whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
<Link to="/">MsCafe</Link>
Expand All @@ -212,7 +213,7 @@ function Navbar() {
<NavLink whileHover={{ scale: 1.05 }}>
<Link to="/contact">Contact</Link>
</NavLink>

{isLoggedIn ? (
<>
<NavLink whileHover={{ scale: 1.05 }}>
Expand All @@ -221,10 +222,10 @@ function Navbar() {
<NavLink whileHover={{ scale: 1.05 }}>
<Link to="/cart">Cart</Link>
</NavLink>
<NavLink
whileHover={{ scale: 1.05 }}
<NavLink
whileHover={{ scale: 1.05 }}
onClick={handleLogout}
style={{ cursor: 'pointer' }}
style={{ cursor: "pointer" }}
>
Logout
</NavLink>
Expand All @@ -240,7 +241,7 @@ function Navbar() {
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.9 }}
>
{isOpen ? '×' : '☰'}
{isOpen ? "×" : "☰"}
</MobileMenuButton>
</NavbarContainer>
<AnimatePresence>
Expand All @@ -252,39 +253,58 @@ function Navbar() {
transition={{ duration: 0.3 }}
>
<MobileNavLink whileHover={{ scale: 1.02 }}>
<Link to="/" onClick={toggleMenu}>Home</Link>
<Link to="/" onClick={toggleMenu}>
Home
</Link>
</MobileNavLink>
<MobileNavLink whileHover={{ scale: 1.02 }}>
<Link to="/shop" onClick={toggleMenu}>Shop</Link>
<Link to="/shop" onClick={toggleMenu}>
Shop
</Link>
</MobileNavLink>
<MobileNavLink whileHover={{ scale: 1.02 }}>
<Link to="/about" onClick={toggleMenu}>About</Link>
<Link to="/about" onClick={toggleMenu}>
About
</Link>
</MobileNavLink>
<MobileNavLink whileHover={{ scale: 1.02 }}>
<Link to="/testimonial" onClick={toggleMenu}>Testimonial</Link>
<Link to="/testimonial" onClick={toggleMenu}>
Testimonial
</Link>
</MobileNavLink>
<MobileNavLink whileHover={{ scale: 1.02 }}>
<Link to="/contact" onClick={toggleMenu}>Contact</Link>
<Link to="/contact" onClick={toggleMenu}>
Contact
</Link>
</MobileNavLink>
{isLoggedIn ? (
<>
<MobileNavLink whileHover={{ scale: 1.02 }}>
<Link to="/profile" onClick={toggleMenu}>Profile</Link>
<Link to="/profile" onClick={toggleMenu}>
Profile
</Link>
</MobileNavLink>
<MobileNavLink whileHover={{ scale: 1.02 }}>
<Link to="/cart" onClick={toggleMenu}>Cart</Link>
<Link to="/cart" onClick={toggleMenu}>
Cart
</Link>
</MobileNavLink>
<MobileNavLink
whileHover={{ scale: 1.02 }}
onClick={() => { handleLogout(); toggleMenu(); }}
style={{ cursor: 'pointer' }}
<MobileNavLink
whileHover={{ scale: 1.02 }}
onClick={() => {
handleLogout();
toggleMenu();
}}
style={{ cursor: "pointer" }}
>
Logout
</MobileNavLink>
</>
) : (
<MobileNavLink whileHover={{ scale: 1.02 }}>
<Link to="/login" onClick={toggleMenu}>Login</Link>
<Link to="/login" onClick={toggleMenu}>
Login
</Link>
</MobileNavLink>
)}
</MobileMenu>
Expand All @@ -294,4 +314,4 @@ function Navbar() {
);
}

export default Navbar;
export default Navbar;

0 comments on commit c84ddc7

Please sign in to comment.