diff --git a/app/components/MyLayout.tsx b/app/components/MyLayout.tsx index 1e7154e..51de242 100644 --- a/app/components/MyLayout.tsx +++ b/app/components/MyLayout.tsx @@ -8,6 +8,8 @@ import homeFilled from "app/assets/icons/navbar/home-filled.svg"; import profileFilled from "app/assets/icons/navbar/profile-filled.svg"; import searchFilled from "app/assets/icons/navbar/search-filled.svg"; import { Link, useLocation, useParams } from "@remix-run/react"; +import DesktopHeader from "~/components/desktop/DesktopHeader"; +import DesktopFooter from "~/components/desktop/DesktopFooter"; import { detectPage } from "~/utils/helpers"; import { useRootData } from "~/hooks/use-root-data"; import { useCartCount } from "~/requestHandler/use-cart-hooks"; @@ -25,25 +27,43 @@ import productsOutline from "~/assets/icons/navbar/products-outline.svg"; */ const MyLayout = React.memo(({ children }: { children: React.ReactNode }) => { const location = useLocation(); + // Desktop chrome is rolled out per-page. Only routes listed here get the + // full-width desktop layout; everything else keeps the current (mobile) + // experience at all widths so nothing regresses while we build the rest. + const isDesktopReady = location.pathname === "/"; + const isThread = !!location.pathname.split("threads")[1]; + return (
-
-
+ {isDesktopReady && } +
+
{children} - {location.pathname.split("threads")[1] ? ( - <> - ) : ( - - )} + {isThread ? <> : }
+ {isDesktopReady && }
); }); MyLayout.displayName = "Layout"; -const MobileBottomNavigation = () => { +const MobileBottomNavigation = ({ + hideOnDesktop = false, +}: { + hideOnDesktop?: boolean; +}) => { const { theme } = useRootData(); const location = useLocation(); const currentPage = useMemo( @@ -309,7 +329,11 @@ const MobileBottomNavigation = () => { return ( <> -
+
{navItems.map((item) => ( - {/* Grid Container - 2x2 layout */} -
- {sellers.slice(0, 4).map((seller, index) => ( +
+ {/* 2x2 on mobile, single row of 5 on desktop */} +
+ {sellers.slice(0, 5).map((seller, index) => ( {/* Background Image */} {seller.imageUrl ? ( @@ -65,6 +67,18 @@ const SellerTilesGrid = ({
)} + + {/* Desktop-only name overlay (matches the desktop design) */} + {seller.sellerName ? ( + <> +
+
+ + {seller.sellerName} + +
+ + ) : null} ))}
diff --git a/app/components/desktop/DesktopFooter.tsx b/app/components/desktop/DesktopFooter.tsx new file mode 100644 index 0000000..5019d2d --- /dev/null +++ b/app/components/desktop/DesktopFooter.tsx @@ -0,0 +1,100 @@ +import { Link } from "@remix-run/react"; +import { Instagram, Send } from "lucide-react"; +import logo from "~/assets/logo/SVG-07.svg"; + +type FooterLink = { label: string; to: string }; +type FooterCol = { heading: string; links: FooterLink[] }; + +const COLUMNS: FooterCol[] = [ + { + heading: "خرید", + links: [ + { label: "تازه‌ها", to: "/explore" }, + { label: "تخفیف‌ها", to: "/" }, + { label: "کالکشن‌ها", to: "/collections" }, + { label: "برندها", to: "/sellers" }, + ], + }, + { + heading: "ویترون", + links: [ + { label: "درباره ما", to: "/profile/about" }, + { label: "سوالات متداول", to: "/profile/faq" }, + ], + }, + { + heading: "پشتیبانی", + links: [ + { label: "راهنمای خرید", to: "/profile/faq" }, + { label: "پیگیری سفارش", to: "/profile/orders" }, + ], + }, +]; + +/** + * Desktop-only footer. Hidden below the `lg` breakpoint. + */ +const DesktopFooter = () => { + return ( +
+
+
+
+ ویترون + ویترون +
+

+ ویترین آنلاین برندهای پوشاک ایران. از بهترین فروشگاه‌ها کشف کن، دنبال + کن و خرید کن. +

+ + فروشگاه خود را بسازید + +
+ + {COLUMNS.map((col) => ( +
+

{col.heading}

+
    + {col.links.map((l) => ( +
  • + + {l.label} + +
    • + ))} +
+
+ ))} +
+ +
+ © ۱۴۰۴ ویترون — تمامی حقوق محفوظ است. + +
+
+ ); +}; + +export default DesktopFooter; diff --git a/app/components/desktop/DesktopHeader.tsx b/app/components/desktop/DesktopHeader.tsx new file mode 100644 index 0000000..c59a48d --- /dev/null +++ b/app/components/desktop/DesktopHeader.tsx @@ -0,0 +1,115 @@ +import { Link, useLocation, useNavigate } from "@remix-run/react"; +import { useState, type FormEvent } from "react"; +import { Search, Heart, ShoppingBag, User } from "lucide-react"; +import { useRootData } from "~/hooks/use-root-data"; +import { useCartCount } from "~/requestHandler/use-cart-hooks"; +import logo from "~/assets/logo/SVG-07.svg"; + +const NAV = [ + { label: "خانه", to: "/" }, + { label: "کاوش", to: "/explore" }, + { label: "برندها", to: "/sellers" }, + { label: "کالکشن‌ها", to: "/collections" }, +]; + +/** + * Desktop-only top chrome (sticky header with brand, nav, search and actions). + * Hidden below the `lg` breakpoint; the mobile experience is unchanged. + */ +const DesktopHeader = () => { + const location = useLocation(); + const navigate = useNavigate(); + const { user } = useRootData(); + const cartCount = useCartCount(); + const [q, setQ] = useState(""); + + const isActive = (to: string) => + to === "/" ? location.pathname === "/" : location.pathname.startsWith(to); + + const onSearch = (e: FormEvent) => { + e.preventDefault(); + const term = q.trim(); + if (term) navigate(`/search/${encodeURIComponent(term)}`); + }; + + return ( +
+
+ + ویترون + + ویترون + + + + + +
+ + setQ(e.target.value)} + name="q" + placeholder="جستجوی محصول، برند یا فروشگاه…" + aria-label="جستجو" + className="w-full bg-transparent outline-none text-[14.5px] text-BLACK placeholder:text-GRAY" + /> + + +
+ + + + + {cartCount > 0 && user?.access_token ? ( + + {cartCount} + + ) : null} + + + + + + + +
+
+
+ ); +}; + +export default DesktopHeader; diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx index 97987fc..9161e86 100644 --- a/app/routes/_index.tsx +++ b/app/routes/_index.tsx @@ -75,30 +75,68 @@ export default function HomePage() { return ( <>
- +
+ +
{/* Adding padding to account for fixed header */} -
- {/* Banners Section */} -
- {isLoadingBanners ? ( - - ) : ( - banner.imageUrl || "") || []} - hideIndex={true} - borderRadius={0} - /> - )} +
+ {/* Hero: mobile = full-bleed banner carousel; desktop = main + 2 promos */} +
+
+ {isLoadingBanners ? ( + + ) : ( + banner.imageUrl || "") || []} + hideIndex={true} + borderRadius={0} + /> + )} +
+ + {/* Desktop-only side promos */} +
+ +
+
+
+ + تازه رسید + +

+ کالکشن جدید +

+
+ + +
+
+
+ + فروش ویژه + +

+ تا ۵۰٪ تخفیف +

+
+ +
-
-

تخفیف‌ها

-

+

+

تخفیف‌ها

+

فرصت‌هایی محدود برای انتخاب‌های هوشمندانه

@@ -122,12 +160,12 @@ export default function HomePage() {
-
+
-

برترین فروشگاه‌ها

-

+

برترین فروشگاه‌ها

+

برگرفته از بالاترین سطح رضایت کاربران

@@ -152,11 +190,13 @@ export default function HomePage() {
-
-

کالکشن‌ها

-

مجموعه‌های منتخب از بهترین محصولات

+
+

کالکشن‌ها

+

+ مجموعه‌های منتخب از بهترین محصولات +

-
-

برای شما

-

با الهام از انتخاب‌های شما

+
+

برای شما

+

+ با الهام از انتخاب‌های شما +