Skip to content

Commit

Permalink
Merge pull request #191 from subodhkangale07/main
Browse files Browse the repository at this point in the history
  • Loading branch information
@MinavKaria
MinavKaria authored Nov 11, 2024
2 parents f8f8266 + 62a9885 commit 26c272b
Show file tree
Hide file tree
Showing 2 changed files with 110 additions and 98 deletions.
206 changes: 109 additions & 97 deletions client/src/components/Footer.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,107 +1,119 @@
function Footer() {
return (
<>
<div className='bg-[#f7f7f7] rounded-t-[3rem] px-[4vw] py-[4vh] mt-[5vh]'>
<div className='flex flex-row justify-center md:justify-between container mx-auto'>
import React from 'react';

const Footer = () => {
const socialLinks = [
{ icon: "/SocialMedia/Facebook.svg", alt: "Facebook" },
{ icon: "/SocialMedia/Instagram.svg", alt: "Instagram" },
{ icon: "/SocialMedia/LinkedIn.svg", alt: "LinkedIn" },
{ icon: "/SocialMedia/Twitter.svg", alt: "Twitter" },
{ icon: "/SocialMedia/YouTube.svg", alt: "YouTube" }
];

const contactInfo = [
{ icon: "/Contacts/Email.svg", text: "[email protected]", alt: "Email" },
{ icon: "/Contacts/Phone.svg", text: "1-800-9625-45274", alt: "Phone" }
];

<div className='flex flex-col gap-[1.5vh]'>
<img src='/logo.svg' className="h-[8vh] md:w-[12vw] md:h-auto"></img>
<p className="font-medium text-center md:text-left">Connoisseurs in the aloo-pyaj industry</p>
<ul className="flex flex-row gap-2 mx-auto md:mx-0">
<li>
<img
src="/SocialMedia/Facebook.svg"
className="h-[3vh] hover:scale-125 hover:brightness-150 transition-transform duration-500 ease-in-out cursor-pointer"
alt="Facebook"
/>
</li>
<li>
<img
src="/SocialMedia/Instagram.svg"
className="h-[3vh] hover:scale-125 hover:brightness-150 transition-transform duration-500 ease-in-out cursor-pointer"
alt="Instagram"
/>
</li>
<li>
<img
src="/SocialMedia/LinkedIn.svg"
className="h-[3vh] hover:scale-125 hover:brightness-150 transition-transform duration-500 ease-in-out cursor-pointer"
alt="LinkedIn"
/>
</li>
<li>
<img
src="/SocialMedia/Twitter.svg"
className="h-[3vh] hover:scale-125 hover:brightness-150 transition-transform duration-500 ease-in-out cursor-pointer"
alt="Twitter"
/>
</li>
<li>
<img
src="/SocialMedia/YouTube.svg"
className="h-[3vh] hover:scale-125 hover:brightness-150 transition-transform duration-500 ease-in-out cursor-pointer"
alt="YouTube"
/>
</li>
</ul>
return (
<footer className="bg-gray-50 mt-20">
{/* Main Footer Content */}
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
{/* Logo and Social Section */}
<div className="flex flex-col items-center md:items-start space-y-6">
<img
src="/logo.svg"
className="h-16 md:h-20 w-auto"
alt="Company Logo"
/>

<p className="text-gray-600 font-medium text-center md:text-left">
Connoisseurs in the aloo-pyaj industry
</p>

<div className="flex space-x-4">
{socialLinks.map((social) => (
<button
key={social.alt}
className="p-2 rounded-full hover:bg-gray-200 transition-all duration-300 group"
>
<img
src={social.icon}
className="h-5 w-5 group-hover:scale-110 transition-transform"
alt={social.alt}
/>
</button>
))}
</div>
</div>

<div className="hidden md:flex md:flex-row align-center items-start gap-5 my-auto">
<p className="font-bold text-[#54b22c]">Contact Us</p>
<span className="flex flex-row gap-2">
<span>
<img
src="/Contacts/Email.svg"
className="hover:scale-125 transition-transform duration-500 ease-in-out cursor-pointer"
alt="Email"
/>
</span>
<span>[email protected]</span>
</span>
<span className="flex flex-row gap-2">
<span>
<img
src="/Contacts/Phone.svg"
className="hover:scale-125 transition-transform duration-500 ease-in-out cursor-pointer"
alt="Phone"
/>
</span>
<span>1-800-9625-45274</span>
</span>
<span className="flex flex-row gap-2">
<span>
<img
src="/Contacts/Mark.svg"
className="hover:scale-125 transition-transform duration-500 ease-in-out cursor-pointer"
alt="Location"
/>
</span>
<iframe
title="Embedded Google Map"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3768.5962359850614!2d72.94319517611865!3d19.169143449040085!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7b858889942c7%3A0x2cb3f6dc0b5bb3cc!2sRatna%20Supermarket!5e0!3m2!1sen!2sin!4v1711740147095!5m2!1sen!2sin"
width="200"
height="200"
style={{ border: 0 }}
allowFullScreen=""
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
></iframe>
</span>
{/* Contact Section */}
<div className="hidden md:flex flex-col space-y-6">
<h3 className="text-green-600 font-bold text-lg">Contact Us</h3>

<div className="space-y-4">
{contactInfo.map((contact) => (
<div key={contact.alt} className="flex items-center space-x-3">
<div className="p-2 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors">
<img
src={contact.icon}
className="h-5 w-5"
alt={contact.alt}
/>
</div>
<span className="text-gray-600 hover:text-gray-900 transition-colors">
{contact.text}
</span>
</div>
))}

{/* Location Map */}
<div className="flex flex-col space-y-3">
<div className="flex items-center space-x-3">
<div className="p-2 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors">
<img
src="/Contacts/Mark.svg"
className="h-5 w-5"
alt="Location"
/>
</div>
<span className="text-gray-600">Our Location</span>
</div>
<div className="rounded-lg overflow-hidden shadow-lg">
<iframe
title="Embedded Google Map"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3768.5962359850614!2d72.94319517611865!3d19.169143449040085!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7b858889942c7%3A0x2cb3f6dc0b5bb3cc!2sRatna%20Supermarket!5e0!3m2!1sen!2sin!4v1711740147095!5m2!1sen!2sin"
className="w-full h-48"
style={{ border: 0 }}
allowFullScreen=""
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
/>
</div>
</div>
</div>
</div>
</div>
</div>

<div>
<hr className="border-[0.25vh] border-[#888888] w-[90%] mx-auto my-[4vh]"></hr>
<p className='copyrightContainer'>
<div className="flex flex-row justify-between container mx-auto">
<span>&copy; Copyright 2024 - Brutally Productions.</span>
<span className="hidden md:block">All rights reserved. For more information on our Terms and Conditions Click Here</span>
</div>
</p>
{/* Copyright Bar */}
<div className="border-t border-gray-200">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
<div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
<p className="text-sm text-gray-500">
&copy; Copyright 2024 - Brutally Productions.
</p>
<p className="text-sm text-gray-500 hidden md:block">
All rights reserved.
<button className="text-green-600 hover:text-green-700 ml-1 underline">
Click Here
</button> for Terms and Conditions
</p>
</div>
</div>
</div>
</>
</footer>
);
}
};

export default Footer;
export default Footer;
2 changes: 1 addition & 1 deletion client/src/pages/Cart.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ function Cart() {

console.log(cartItems);
return (
<div className='mt-20 mx-auto max-w-4xl p-6 bg-white rounded-lg shadow-md py-12'>
<div className='mt-[120px] mx-auto max-w-4xl p-6 bg-white rounded-lg shadow-md py-12'>
<h1 className='text-2xl md:text-3xl font-semibold mb-4'>Shopping Cart</h1>
{cartItems.length === 0 ? (
<p className='text-gray-600'>Your cart is empty.</p>
Expand Down

0 comments on commit 26c272b

Please sign in to comment.