initial commit
This commit is contained in:
94
src/components/Footer/Footer.module.scss
Normal file
94
src/components/Footer/Footer.module.scss
Normal file
@@ -0,0 +1,94 @@
|
||||
/* Footer.module.scss */
|
||||
|
||||
.footer {
|
||||
background-color: #f9f9f9;
|
||||
padding: 40px 20px;
|
||||
font-family: Arial, sans-serif;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: #4b5563;
|
||||
padding-left: 2.5rem;
|
||||
padding-right: 2.5rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 2rem;
|
||||
margin-top: auto;
|
||||
@media screen and (max-width: 1023px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1366px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 0.75rem 0 0.75rem;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
display: none;
|
||||
@media screen and (min-width: 1024px) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.logo {
|
||||
width: 10rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.marketSection,
|
||||
.contactSection,
|
||||
.appsSection {
|
||||
flex: 1;
|
||||
margin: 10px;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul li {
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
a{
|
||||
color: #4b5563;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.appLinks {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.appLogo {
|
||||
width: 120px;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.appLogo:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 1.5rem;
|
||||
|
||||
p {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
}
|
||||
101
src/components/Footer/FooterBar.module.scss
Normal file
101
src/components/Footer/FooterBar.module.scss
Normal file
@@ -0,0 +1,101 @@
|
||||
.navbar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
border-top: 1px solid #e5e7eb;
|
||||
background-color: #fff;
|
||||
z-index: 9;
|
||||
@media screen and (min-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
// padding: 0 1rem;
|
||||
@media screen and (max-width: 425px) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.navItems {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.5rem 0 0 0;
|
||||
}
|
||||
|
||||
.navItem {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
padding-bottom: 8px;
|
||||
|
||||
&:hover .icon {
|
||||
color: #aaaaaa;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-bottom: 3px solid #888888;
|
||||
.label {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.icon {
|
||||
color: #888888;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.iconWrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.icon {
|
||||
color: #000000;
|
||||
transition: color 0.2s ease;
|
||||
svg {
|
||||
@media screen and (max-width: 425px) {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
@media screen and (max-width: 375px) {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: -8px;
|
||||
background-color: #888888;
|
||||
color: white;
|
||||
font-size: 0.75rem;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-top: 0.25rem;
|
||||
font-size: 12px;
|
||||
color: #000;
|
||||
font-weight: 600;
|
||||
@media screen and (max-width: 425px) {
|
||||
font-size: 11px;
|
||||
}
|
||||
@media screen and (max-width: 375px) {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
55
src/components/Footer/FooterMobile.jsx
Normal file
55
src/components/Footer/FooterMobile.jsx
Normal file
@@ -0,0 +1,55 @@
|
||||
import React from "react";
|
||||
import { Home, ShoppingBag, ShoppingCart, Heart, User } from "lucide-react";
|
||||
import { Link, useLocation } from "react-router-dom";
|
||||
import styles from "./FooterBar.module.scss";
|
||||
import { useGetCartQuery } from "../../app/api/cartApi"; // Sepet API
|
||||
import { useGetFavoritesQuery } from "../../app/api/favoritesApi"; // Favori API
|
||||
import { useTranslation } from "react-i18next";
|
||||
const FooterBar = () => {
|
||||
const location = useLocation();
|
||||
|
||||
const { t } = useTranslation();
|
||||
const { data: cartData } = useGetCartQuery();
|
||||
const { data: favoriteData } = useGetFavoritesQuery();
|
||||
|
||||
|
||||
|
||||
const cartCount =
|
||||
cartData?.data?.reduce((total, item) => {
|
||||
return total + (parseInt(item.product_quantity, 10) || 0);
|
||||
}, 0) || 0;
|
||||
|
||||
const favoriteCount = favoriteData?.length || 0;
|
||||
|
||||
const navItems = [
|
||||
{ id: 1, icon: <Home />, label: t("navbar.home"), count: 0, path: "/" },
|
||||
{ id: 2, icon: <ShoppingBag />, label: t("navbar.brands"), count: 0, path: "/brands" },
|
||||
{ id: 3, icon: <ShoppingCart />, label: t("navbar.cart"), count: cartCount, path: "/cart" },
|
||||
{ id: 4, icon: <Heart />, label: t("wishtList.likedProducts"), count: favoriteCount, path: "/wishlist" },
|
||||
{ id: 5, icon: <User />, label: t("profile.profile"), count: 0, path: "/profile" },
|
||||
];
|
||||
|
||||
return (
|
||||
<footer className={styles.navbar}>
|
||||
<div className={styles.container}>
|
||||
<div className={styles.navItems}>
|
||||
{navItems.map((item) => (
|
||||
<Link
|
||||
key={item.id}
|
||||
to={item.path}
|
||||
className={`${styles.navItem} ${location.pathname === item.path ? styles.active : ""}`}
|
||||
>
|
||||
<div className={styles.iconWrapper}>
|
||||
<div className={styles.icon}>{item.icon}</div>
|
||||
{item.count > 0 && <div className={styles.badge}>{item.count}</div>}
|
||||
</div>
|
||||
<span className={styles.label}>{item.label}</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
export default FooterBar;
|
||||
107
src/components/Footer/index.jsx
Normal file
107
src/components/Footer/index.jsx
Normal file
@@ -0,0 +1,107 @@
|
||||
import styles from "./Footer.module.scss";
|
||||
import playstore from "../../assets/playstore.png";
|
||||
import appstore from "../../assets/appstore.png";
|
||||
import apk from "../../assets/apk.png";
|
||||
|
||||
import FooterBar from "./FooterMobile";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Link } from "react-router-dom";
|
||||
import { LogoWithText } from "../Icons";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
const Footer = () => {
|
||||
const navigate = useNavigate();
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<>
|
||||
<footer className={styles.footer}>
|
||||
<div className={styles.container}>
|
||||
<div className={styles.logo} onClick={() => navigate("/")}>
|
||||
<LogoWithText />
|
||||
</div>
|
||||
<div style={{ display: "flex" }}>
|
||||
<div className={styles.marketSection}>
|
||||
<h3> {t("footer.market")}</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<Link to="/about-us">{t("footer.about")}</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/delivery-and-payment">
|
||||
{t("footer.delivery_and_payment_procedure")}
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={"/contactus"}>{t("footer.contact")}</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={"/privacy-policy"}>
|
||||
{t("footer.TermsofUseandPrivacyPolicy")}
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className={styles.contactSection}>
|
||||
<h3>{t("footer.contactUs")}</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="tel:+99360122213">
|
||||
{t("checkout.telephone")}: +993 60 12-22-13
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://imo.im"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Imo: +993 65 95-00-91
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="mailto:mm.marketplace.tm@gmail.com">
|
||||
E-mail: mm.marketplace.tm@gmail.com
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.instagram.com/mm.com.tm"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Instagram: mm.com.tm
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className={styles.appsSection}>
|
||||
<h3>{t("footer.mobile_applications")}</h3>
|
||||
<div className={styles.appLinks}>
|
||||
<div style={{ display: "flex", gap: "10px" }}>
|
||||
<img
|
||||
src={playstore}
|
||||
alt="Google Play"
|
||||
className={styles.appLogo}
|
||||
/>
|
||||
<img
|
||||
src={appstore}
|
||||
alt="App Store"
|
||||
className={styles.appLogo}
|
||||
/>
|
||||
</div>
|
||||
<img src={apk} alt="Download APK" className={styles.appLogo} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.bottom}>
|
||||
<p> © 2019-2025 mm.com.tm {t("footer.copyright")}</p>
|
||||
</div>
|
||||
</footer>
|
||||
<FooterBar />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
Reference in New Issue
Block a user