+
- if (!collections || !region) {
- return null
- }
+ {/* Контент поверх видео */}
+ ([])
+ const [index, setIndex] = useState(null)
+ const sliderRef = useRef(null)
+ const dragStartX = useRef(null)
+ const dragOffsetX = useRef(0)
+ const isMobile = typeof window !== 'undefined' && window.innerWidth < 640
+
+ useEffect(() => {
+ const context = require.context(
+ '../../../../public/gallery',
+ false,
+ /\.(jpe?g|png|webp)$/i
+ )
+ const paths = context.keys().map((key) => `/gallery/${key.replace('./', '')}`)
+ setImages(paths)
+ }, [])
+
+ const close = () => setIndex(null)
+
+ const next = useCallback(() => {
+ if (index !== null) setIndex((prev) => (prev! + 1) % images.length)
+ }, [index, images])
+
+ const prev = useCallback(() => {
+ if (index !== null) setIndex((prev) => (prev! - 1 + images.length) % images.length)
+ }, [index, images])
+
+ useEffect(() => {
+ const handleKey = (e: KeyboardEvent) => {
+ if (index === null) return
+ if (e.key === "ArrowRight") next()
+ if (e.key === "ArrowLeft") prev()
+ if (e.key === "Escape") close()
+ }
+ window.addEventListener("keydown", handleKey)
+ return () => window.removeEventListener("keydown", handleKey)
+ }, [index, next, prev])
+
+ const handleTouchStart = (e: React.TouchEvent) => {
+ if (!isMobile) return
+ dragStartX.current = e.touches[0].clientX
+ dragOffsetX.current = 0
+ }
+
+ const handleTouchMove = (e: React.TouchEvent) => {
+ if (!isMobile || dragStartX.current === null || !sliderRef.current) return
+ const currentX = e.touches[0].clientX
+ dragOffsetX.current = currentX - dragStartX.current
+ sliderRef.current.style.transition = 'none'
+ sliderRef.current.style.transform = `translateX(${dragOffsetX.current}px)`
+ }
+
+ const handleTouchEnd = () => {
+ if (!isMobile || !sliderRef.current) return
+ const threshold = 80
+
+ if (dragOffsetX.current < -threshold) {
+ sliderRef.current.style.transition = 'transform 0.2s ease'
+ sliderRef.current.style.transform = 'translateX(-100vw)'
+ requestAnimationFrame(() => {
+ setTimeout(() => {
+ next()
+ if (sliderRef.current) {
+ sliderRef.current.style.transition = 'none'
+ sliderRef.current.style.transform = 'translateX(100vw)'
+ requestAnimationFrame(() => {
+ if (sliderRef.current) {
+ sliderRef.current.style.transition = 'transform 0.2s ease'
+ sliderRef.current.style.transform = 'translateX(0)'
+ }
+ })
+ }
+ }, 50)
+ })
+ } else if (dragOffsetX.current > threshold) {
+ sliderRef.current.style.transition = 'transform 0.2s ease'
+ sliderRef.current.style.transform = 'translateX(100vw)'
+ requestAnimationFrame(() => {
+ setTimeout(() => {
+ prev()
+ if (sliderRef.current) {
+ sliderRef.current.style.transition = 'none'
+ sliderRef.current.style.transform = 'translateX(-100vw)'
+ requestAnimationFrame(() => {
+ if (sliderRef.current) {
+ sliderRef.current.style.transition = 'transform 0.2s ease'
+ sliderRef.current.style.transform = 'translateX(0)'
+ }
+ })
+ }
+ }, 50)
+ })
+ } else {
+ sliderRef.current.style.transition = 'transform 0.2s ease'
+ sliderRef.current.style.transform = 'translateX(0)'
+ }
+
+ dragStartX.current = null
+ dragOffsetX.current = 0
+ }
+
+ return (
+ {props.children}
+
+ {/* Пре-загрузка шрифта для корректного рендеринга */}
+
+
+
+
+
+ GMORKL STORE
+
+
+
+ {/* 👇 убрали лишние стили и отступы у main */}
+ {children}
+
)
diff --git a/storefront/src/app/page.tsx.bak b/storefront/src/app/page.tsx.bak
new file mode 100644
index 000000000..be7eb6443
--- /dev/null
+++ b/storefront/src/app/page.tsx.bak
@@ -0,0 +1,42 @@
+import { getCollectionsWithProducts } from "@lib/data/collections"
+import { getRegion } from "@lib/data/regions"
+import FeaturedProducts from "@modules/home/components/featured-products"
+
+export default async function Home({
+ params: { countryCode },
+}: {
+ params: { countryCode: string }
+}) {
+ const collections = await getCollectionsWithProducts(countryCode)
+ const region = await getRegion(countryCode)
+
+ if (!collections || !region) {
+ return null
+ }
+
+ return (
+
@@ -84,9 +77,6 @@ async function getCountryCode(
}
}
-/**
- * Middleware to handle region selection and onboarding status.
- */
export async function middleware(request: NextRequest) {
const searchParams = request.nextUrl.searchParams
const isOnboarding = searchParams.get("onboarding") === "true"
@@ -96,49 +86,44 @@ export async function middleware(request: NextRequest) {
const cartIdCookie = request.cookies.get("_medusa_cart_id")
const regionMap = await getRegionMap()
-
const countryCode = regionMap && (await getCountryCode(request, regionMap))
+ const pathnameParts = request.nextUrl.pathname.split("/")
const urlHasCountryCode =
- countryCode && request.nextUrl.pathname.split("/")[1].includes(countryCode)
+ countryCode && pathnameParts.length > 1 && pathnameParts[1] === countryCode
+
+ const isRootPath = request.nextUrl.pathname === "/" || request.nextUrl.pathname === ""
- // check if one of the country codes is in the url
+ // 👉 Не редиректим, если находимся на главной
if (
- urlHasCountryCode &&
+ (!isRootPath && urlHasCountryCode) &&
(!isOnboarding || onboardingCookie) &&
(!cartId || cartIdCookie)
) {
return NextResponse.next()
}
- const redirectPath =
- request.nextUrl.pathname === "/" ? "" : request.nextUrl.pathname
-
- const queryString = request.nextUrl.search ? request.nextUrl.search : ""
-
let redirectUrl = request.nextUrl.href
- let response = NextResponse.redirect(redirectUrl, 307)
-
- // If no country code is set, we redirect to the relevant region.
- if (!urlHasCountryCode && countryCode) {
- redirectUrl = `${request.nextUrl.origin}/${countryCode}${redirectPath}${queryString}`
- response = NextResponse.redirect(`${redirectUrl}`, 307)
+ if (isRootPath && countryCode) {
+ redirectUrl = `${request.nextUrl.origin}/${countryCode}`
+ return NextResponse.redirect(redirectUrl, 307)
}
- // If a cart_id is in the params, we set it as a cookie and redirect to the address step.
if (cartId && !checkoutStep) {
redirectUrl = `${redirectUrl}&step=address`
- response = NextResponse.redirect(`${redirectUrl}`, 307)
+ const response = NextResponse.redirect(redirectUrl, 307)
response.cookies.set("_medusa_cart_id", cartId, { maxAge: 60 * 60 * 24 })
+ return response
}
- // Set a cookie to indicate that we're onboarding. This is used to show the onboarding flow.
if (isOnboarding) {
+ const response = NextResponse.redirect(redirectUrl, 307)
response.cookies.set("_medusa_onboarding", "true", { maxAge: 60 * 60 * 24 })
+ return response
}
- return response
+ return NextResponse.next()
}
export const config = {
diff --git a/storefront/src/modules/gallery/components/gallery.tsx b/storefront/src/modules/gallery/components/gallery.tsx
new file mode 100644
index 000000000..8d3cb3021
--- /dev/null
+++ b/storefront/src/modules/gallery/components/gallery.tsx
@@ -0,0 +1,57 @@
+"use client"
+
+import Image from "next/image"
+import { useEffect, useState } from "react"
+
+export default function GalleryPage() {
+ const [images, setImages] = useState([])
+
+ // Статически прописываем список файлов, если не можем сделать fs.readdir
+ useEffect(() => {
+ // Можем заменить этот массив автоматически сгенерированным списком, если он появится
+ const files = [
+ "photo_2025-04-18 23.09.29.jpeg",
+ "photo_2025-04-18 23.09.34.jpeg",
+ "photo_2025-04-18 23.09.37.jpeg",
+ "photo_2025-04-18 23.09.45.jpeg",
+ "photo_2025-04-18 23.09.48.jpeg",
+ "photo_2025-04-18 23.09.51.jpeg",
+ "photo_2025-04-18 23.10.00.jpeg",
+ "photo_2025-04-18 23.10.04.jpeg",
+ "photo_2025-04-18 23.10.06.jpeg",
+ "photo_2025-04-18 23.10.13.jpeg",
+ "photo_2025-04-18 23.10.19.jpeg",
+ "photo_2025-04-18 23.10.21.jpeg",
+ "photo_2025-04-18 23.10.24.jpeg",
+ "photo_2025-04-18 23.10.27.jpeg",
+ "photo_2025-04-18 23.10.29.jpeg",
+ "photo_2025-04-18 23.10.31.jpeg",
+ "photo_2025-04-18 23.10.37.jpeg",
+ "photo_2025-04-18 23.10.41.jpeg",
+ "photo_2025-04-18 23.10.44.jpeg",
+ "photo_2025-04-18 23.10.48.jpeg",
+ ]
+ setImages(files)
+ }, [])
+
+ return (
+
+
)
}
diff --git a/storefront/src/app/[countryCode]/(main)/store/page.tsx b/storefront/src/app/[countryCode]/(main)/store/page.tsx
index 753ba05f5..e9241a05f 100644
--- a/storefront/src/app/[countryCode]/(main)/store/page.tsx
+++ b/storefront/src/app/[countryCode]/(main)/store/page.tsx
@@ -1,5 +1,4 @@
import { Metadata } from "next"
-
import { SortOptions } from "@modules/store/components/refinement-list/sort-products"
import StoreTemplate from "@modules/store/templates"
@@ -12,6 +11,8 @@ type Params = {
searchParams: {
sortBy?: SortOptions
page?: string
+ categoryId?: string
+ collectionId?: string
}
params: {
countryCode: string
@@ -19,13 +20,18 @@ type Params = {
}
export default async function StorePage({ searchParams, params }: Params) {
- const { sortBy, page } = searchParams
+ const { sortBy, page, categoryId, collectionId } = searchParams
return (
- + GMORKL SPRING COLLECTION +
- return ( - <> -
-
-
+ -
-
+
)
}
diff --git a/storefront/src/app/[countryCode]/about/page.tsx b/storefront/src/app/[countryCode]/about/page.tsx
new file mode 100644
index 000000000..4874bcc78
--- /dev/null
+++ b/storefront/src/app/[countryCode]/about/page.tsx
@@ -0,0 +1,62 @@
+import Image from "next/image"
+
+export default function AboutPage() {
+ return (
+ All Products
+
+
+ )
+}
diff --git a/storefront/src/app/[countryCode]/gallery/page.tsx b/storefront/src/app/[countryCode]/gallery/page.tsx
new file mode 100644
index 000000000..1164448d9
--- /dev/null
+++ b/storefront/src/app/[countryCode]/gallery/page.tsx
@@ -0,0 +1,179 @@
+"use client"
+
+import { useEffect, useState, useCallback, useRef } from "react"
+
+export default function GalleryPage() {
+ const [images, setImages] = useState
+
+
+
+
+
+
+ + GMORKL – Wearable Art Made in Cologne +
+ ++ GMORKL is an art project by visual artist and designer Masha Rodigina, based in Cologne, Germany. Specializing in handprinted, one-of-a-kind T-shirts and textiles, GMORKL brings together art, fashion, and activism. +
+ ++ Each item is handprinted using silkscreen techniques on Fairtrade, organic cotton. From sketches on paper to digital experiments, every GMORKL piece is born as an artwork — then transformed into wearable art. No mass production. No replicas. Just unique fashion statements with soul. +
+ ++ At GMORKL, we believe clothing should tell stories. That art should be worn. That a T-shirt can be a political message, a poetic gesture, or a symbol of independent culture. +
+ ++ In this store, you’ll also find not only a limited selection of art prints and original illustrations but also artworks made by Mascha's friends. +
+ +
+
+
+ + Why Choose GMORKL? +
+-
+
- 100% Organic & Fairtrade Cotton +
- Handprinted in Cologne’s Kolbhalle Artist Community and DingFabrik +
- Each piece is unique — no two prints are 100% identical +
- Fashion with meaning, rooted in contemporary art +
- Supports the independent art scene in Germany +
+ Whether you're looking for a meaningful gift, a statement shirt, or a collector's item, GMORKL offers art pieces that connect art, identity and democratic values. +
+ ++ • Support independent art and wear your values. +
+
+
+ )
+}
diff --git a/storefront/src/app/layout.tsx b/storefront/src/app/layout.tsx
index 6db3994cf..c38793d7b 100644
--- a/storefront/src/app/layout.tsx
+++ b/storefront/src/app/layout.tsx
@@ -1,16 +1,35 @@
+// src/app/layout.tsx
+
import { getBaseURL } from "@lib/util/env"
import { Metadata } from "next"
+import Nav from "@modules/layout/templates/nav"
+import Footer from "@modules/layout/templates/footer"
import "styles/globals.css"
export const metadata: Metadata = {
metadataBase: new URL(getBaseURL()),
}
-export default function RootLayout(props: { children: React.ReactNode }) {
+export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
-
- + GALLERY +
+ +
+ {images.map((src, i) => (
+
+
+ {index !== null && (
+ setIndex(i)}
+ >
+ 
+
+ ))}
+
+ {/* Стрелки — только на десктопе */}
+
+ )}
+
+
+
+ {/* Картинка со свайпом */}
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+ )
+}
diff --git a/storefront/src/middleware.ts b/storefront/src/middleware.ts
index 8fb3d3a9b..9281dab85 100644
--- a/storefront/src/middleware.ts
+++ b/storefront/src/middleware.ts
@@ -18,7 +18,6 @@ async function getRegionMap() {
!regionMap.keys().next().value ||
regionMapUpdated < Date.now() - 3600 * 1000
) {
- // Fetch regions from Medusa. We can't use the JS client here because middleware is running on Edge and the client needs a Node environment.
const { regions } = await fetch(`${BACKEND_URL}/store/regions`, {
headers: {
"x-publishable-api-key": PUBLISHABLE_API_KEY!,
@@ -33,7 +32,6 @@ async function getRegionMap() {
notFound()
}
- // Create a map of country codes to regions.
regions.forEach((region: HttpTypes.StoreRegion) => {
region.countries?.forEach((c) => {
regionMapCache.regionMap.set(c.iso_2 ?? "", region)
@@ -46,11 +44,6 @@ async function getRegionMap() {
return regionMapCache.regionMap
}
-/**
- * Fetches regions from Medusa and sets the region cookie.
- * @param request
- * @param response
- */
async function getCountryCode(
request: NextRequest,
regionMap: Map
+
+
+
+
+ gmorkl spring collection
+wearable art from Cologne
+
+
+ -
+
+
+ )
+}
diff --git a/storefront/src/modules/home/components/hero/index.tsx b/storefront/src/modules/home/components/hero/index.tsx
index bdc05f9df..43e38a599 100644
--- a/storefront/src/modules/home/components/hero/index.tsx
+++ b/storefront/src/modules/home/components/hero/index.tsx
@@ -1,35 +1,36 @@
-import { Github } from "@medusajs/icons"
-import { Button, Heading } from "@medusajs/ui"
+"use client"
+
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+
+export default function Home() {
+ const pathname = usePathname()
+ const countryCode = pathname.split("/")[1] || "de" // fallback на "de"
-const Hero = () => {
return (
- Gallery
+
+ {images.map((file, i) => (
+
+
+
+ ))}
+
- (null)
+
+ return (
+ <>
+
-
-
- Well done! You have successfully deployed your Medusa 2.0 store on Railway!
-
-
- Need help customizing your store?
-
-
-
+
+
+ {/* Контент поверх видео */}
+
)
}
-
-export default Hero
diff --git a/storefront/src/modules/layout/components/gallery/gallery.tsx b/storefront/src/modules/layout/components/gallery/gallery.tsx
new file mode 100644
index 000000000..dd560ef95
--- /dev/null
+++ b/storefront/src/modules/layout/components/gallery/gallery.tsx
@@ -0,0 +1,48 @@
+"use client"
+
+import Image from "next/image"
+import { useState } from "react"
+import { Dialog } from "@headlessui/react"
+
+const imageList = Array.from({ length: 20 }, (_, i) => `/gallery/${i + 1}.jpg`)
+
+const Gallery = () => {
+ const [selectedImage, setSelectedImage] = useState
+
+ GMORKL SPRING COLLECTION +
+ + -- Visit the tutorial -
- + DISCOVER WEARABLE ART FROM COLOGNE +
+ {imageList.map((src, index) => (
+
+ ))}
+
+
+
+
+ )
+}
+
+export default Gallery
diff --git a/storefront/src/modules/layout/components/side-menu/index.tsx b/storefront/src/modules/layout/components/side-menu/index.tsx
index a9827fdb2..a760b5afd 100644
--- a/storefront/src/modules/layout/components/side-menu/index.tsx
+++ b/storefront/src/modules/layout/components/side-menu/index.tsx
@@ -9,27 +9,33 @@ import LocalizedClientLink from "@modules/common/components/localized-client-lin
import CountrySelect from "../country-select"
import { HttpTypes } from "@medusajs/types"
-const SideMenuItems = {
- Home: "/",
- Store: "/store",
- Search: "/search",
- Account: "/account",
- Cart: "/cart",
-}
-
const SideMenu = ({ regions }: { regions: HttpTypes.StoreRegion[] | null }) => {
const toggleState = useToggleState()
+ const forcedRegion = regions?.find(
+ (r) => r.currency_code === "eur" && r.name.toLowerCase().includes("germany")
+ )
+
+ const sideMenuItems = [
+ { name: "Home", href: "/" },
+ { name: "Store", href: "/store" },
+ { name: "Gallery", href: "/gallery" },
+ { name: "About", href: "/about" },
+ { name: "Search", href: "/search" },
+ { name: "Account", href: "/account" },
+ { name: "Cart", href: "/cart" },
+ ]
+
return (
-
+
{({ open, close }) => (
<>
Menu
@@ -40,15 +46,15 @@ const SideMenu = ({ regions }: { regions: HttpTypes.StoreRegion[] | null }) => {
as={Fragment}
enter="transition ease-out duration-150"
enterFrom="opacity-0"
- enterTo="opacity-100 backdrop-blur-2xl"
+ enterTo="opacity-100 backdrop-blur-md"
leave="transition ease-in duration-150"
- leaveFrom="opacity-100 backdrop-blur-2xl"
+ leaveFrom="opacity-100 backdrop-blur-md"
leaveTo="opacity-0"
>
-
+
-
- {Object.entries(SideMenuItems).map(([name, href]) => {
- return (
-
-
-
- {name} - -
- )
- })}
+ {sideMenuItems.map(({ name, href }) => (
+ -
+
+ {name.toUpperCase()} + +
+ ))}
+
- © {new Date().getFullYear()} Medusa Store. All rights
- reserved.
+
+ © {new Date().getFullYear()} Gmorkl Store. All rights reserved.
diff --git a/storefront/src/modules/layout/templates/footer/index.tsx b/storefront/src/modules/layout/templates/footer/index.tsx
index 4b8f8f5bf..bbdee3dc1 100644
--- a/storefront/src/modules/layout/templates/footer/index.tsx
+++ b/storefront/src/modules/layout/templates/footer/index.tsx
@@ -11,48 +11,34 @@ export default async function Footer() {
return (
- {regions && (
+ {forcedRegion && (
{
)}
/>
-