Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Fixes]: Corrected the UI and Navbar and Horizontal problems #233

Merged
merged 1 commit into from
Jun 2, 2024
Merged

[Fixes]: Corrected the UI and Navbar and Horizontal problems #233

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 50 additions & 8 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion src/Components/DarkModeToggle.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const DarkModeToggle = () => {
return (
<button
onClick={() => setDarkMode(!darkMode)}
className="py-2 px-4 text-gray-800 dark:text-gray-200 rounded-full transition-all duration-300 ease-in-out"
className="py-2 px-4 text-gray-800 dark:text-gray-200 rounded-full transition-all ease-in-out hover:scale-110 duration-300"
>
{darkMode ? (
<HiOutlineSun className="h-5 w-5 mr-1" />
Expand Down
18 changes: 9 additions & 9 deletions src/Components/Navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,19 @@ const Navbar = () => {
const { getListQuantity } = useContext(SavedContext);

return (
<div className="flex items-center justify-around bg-white dark:bg-gray-800 shadow-md top-0 left-0 w-screen">
<div className="flex items-center justify-around bg-white dark:bg-gray-800 shadow-md top-0 left-0 w-full sticky z-20 font-[Helvetica]">
<div className="text-orange-400 font-bold text-2xl mx-5 text-center">
<h2 className="cursor-pointer">
<Link to="/">Shopy</Link>
</h2>
</div>

<div className="flex items-center space-x-4 text-black dark:text-white">
<Link to="/" className="hover:text-orange-400 dark:hover:text-orange-300">
<div className="flex gap-5 items-center space-x-4 text-black dark:text-white font-semibold">
<Link to="/" className="hover:text-orange-400 dark:hover:text-orange-300 transition-all ease-in-out hover:scale-110 duration-300">
Home
</Link>
<div className="relative z-20">
<span className="hover:text-orange-400 dark:hover:text-orange-300 cursor-pointer">
<span className="hover:text-orange-400 dark:hover:text-orange-300 cursor-pointer transition-all ease-in-out hover:scale-110 duration-300">
Products
</span>
<ul className="absolute hidden bg-white dark:bg-gray-800 border rounded-md shadow-md z-10 text-black dark:text-white">
Expand All @@ -38,10 +38,10 @@ const Navbar = () => {
</li>
</ul>
</div>
<Link to="/about" className="hover:text-orange-400 dark:hover:text-orange-300">
<Link to="/about" className="hover:text-orange-400 dark:hover:text-orange-300 transition-all ease-in-out hover:scale-110 duration-300">
About Us
</Link>
<Link to="/contact" className="hover:text-orange-400 dark:hover:text-orange-300">
<Link to="/contact" className="hover:text-orange-400 dark:hover:text-orange-300 transition-all ease-in-out hover:scale-110 duration-300">
Contact
</Link>
<style jsx>{`
Expand All @@ -58,15 +58,15 @@ const Navbar = () => {
</Link>
</button>
<Link to="/cart">
<img src={Cart} alt="cart" className="w-6 h-6 cursor-pointer filter dark:invert" />
<img src={Cart} alt="cart" className="w-6 h-6 cursor-pointer filter dark:invert transition-all ease-in-out hover:scale-110 duration-300" />
</Link>
<div className="relative -top-2 right-[10px] bg-orange-400 rounded-full w-4 h-4 text-xs text-white text-center pointer-events-none">
{getCartQuantity()}
</div>
<Link to="/wishlist">
<img src={Wishlist} alt="wishlist" className="w-6 h-6 cursor-pointer filter dark:invert" />
<img src={Wishlist} alt="wishlist" className="w-6 h-6 cursor-pointer filter dark:invert transition-all ease-in-out hover:scale-110 duration-300" />
</Link>
<div className="relative -top-2 right-[10px] bg-orange-400 rounded-full w-4 h-4 text-xs text-white text-center pointer-events-none">
<div className="relative -top-2 right-[10px] bg-orange-400 rounded-full w-4 transition-all ease-in-out hover:scale-110 duration-300 h-4 text-xs text-white text-center pointer-events-none">
{getListQuantity()}
</div>
<DarkModeToggle />
Expand Down
32 changes: 16 additions & 16 deletions src/Components/Newsletter.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,58 +6,58 @@ import whatsappIcon from "../assets/whatsapp_icon.png";
const NewsletterSection = () => {
return (
<>
<div className="bg-gradient-to-b from-purple-100 to-white dark:from-purple-900 dark:to-gray-800 py-12 flex items-center justify-between">
<div className="bg-gradient-to-b from-purple-100 to-white dark:from-purple-900 dark:to-gray-800 py-16 flex items-center justify-between font-[Helvetica] px-6">
<div>
<h2 className="text-4xl font-bold text-orange-400 ml-5">Shopy</h2>
<p className="text-gray-400 dark:text-gray-200 ml-5">
<h2 className="text-4xl font-bold text-orange-400">Shopy</h2>
<p className="text-gray-400 dark:text-gray-200">
Connecting people through fashion.
</p>
</div>

<div className="max-w-2xl text-center mb-3">
<div className="max-w-2xl text-center">
<h2 className="text-3xl font-bold mb-2 dark:text-white">
Subscribe to Our Newsletter
</h2>
<p className="text-gray-600 dark:text-gray-300 mb-2">
Get updates on the latest collections, promotions, and more.
</p>
<div className="flex justify-center mb-4">
<div className="flex justify-center">
<input
type="email"
placeholder="Your email address"
className="w-1/2 border p-2 rounded-l-full focus:outline-none dark:bg-gray-700 dark:text-white"
className="w-1/2 border px-4 py-2 rounded-l-full focus:outline-none dark:bg-gray-700 dark:text-white"
/>
<button className="bg-black dark:bg-gray-900 text-white px-6 hover:bg-blue-600 focus:outline-none rounded-r-full">
<button className="bg-black dark:bg-gray-900 text-white px-4 hover:bg-blue-600 focus:outline-none rounded-r-full">
Subscribe
</button>
</div>
</div>

<div className="flex items-center justify-center space-x-4 mb-4">
<p className="dark:text-white">Follow us on</p>
<img src={instaIcon} alt="Instagram" className="filter dark:invert" />
<img src={whatsappIcon} alt="WhatsApp" className="filter dark:invert" />
<img src={pintesterIcon} alt="Pinterest" className="filter dark:invert" />
<img src={instaIcon} alt="Instagram" className="filter dark:invert cursor-pointer transition-all hover:scale-110 ease-in-out duration-300" />
<img src={whatsappIcon} alt="WhatsApp" className="filter dark:invert cursor-pointer transition-all hover:scale-110 ease-in-out duration-300" />
<img src={pintesterIcon} alt="Pinterest" className="filter dark:invert cursor-pointer transition-all hover:scale-110 ease-in-out duration-300" />
</div>
</div>

<div className="flex items-center justify-center space-x-10 justify-evenly dark:text-white">
<button className="hover:bg-orange-400 hover:text-white focus:outline-none">
<div className="flex items-center space-x-10 justify-evenly dark:text-white">
<button className="hover:bg-orange-400 hover:text-white transition-all duration-300 ease-in-out focus:outline-none hover:rounded-full px-3 font-semibold">
<a href="#" className="block p-2">
Home
</a>
</button>
<button className="hover:bg-orange-400 hover:text-white focus:outline-none">
<button className="hover:bg-orange-400 hover:text-white transition-all duration-300 ease-in-out focus:outline-none hover:rounded-full px-3 font-semibold">
<a href="#" className="block p-2">
Products
</a>
</button>
<button className="hover:bg-orange-400 hover:text-white focus:outline-none">
<button className="hover:bg-orange-400 hover:text-white transition-all duration-300 ease-in-out focus:outline-none hover:rounded-full px-3 font-semibold">
<a href="#" className="block p-2">
About Us
</a>
</button>
<button className="hover:bg-orange-400 hover:text-white focus:outline-none">
<button className="hover:bg-orange-400 hover:text-white transition-all duration-300 ease-in-out focus:outline-none hover:rounded-full px-3 font-semibold">
<a href="#" className="block p-2">
Contact
</a>
Expand All @@ -67,7 +67,7 @@ const NewsletterSection = () => {
<hr className="border-black dark:border-gray-600" />

<div>
<p className="text-sm text-black dark:text-white ml-5 mt-2 text-center">
<p className="text-sm text-black dark:text-white pb-6 text-center">
&copy; {new Date().getFullYear()} Shopy. All rights reserved.
</p>
</div>
Expand Down