diff --git a/CONTEXT.md b/CONTEXT.md index 43ca9d4..59d7b9b 100644 --- a/CONTEXT.md +++ b/CONTEXT.md @@ -15,15 +15,26 @@ The user asked for the homepage's structure/layout to closely match the live original (`http://ali-alemi.local:8000`, a local Meshkee web-builder preview blocked by their VPN from this environment — they instead pasted screenshots directly). Corrections made after comparing against those screenshots: -- **Header**: solid `bg-secondary` (navy) bar, not white/blurred. Logo sits first in DOM (renders on the **right** in RTL — do not add `order-*` overrides here again, that was tried and was wrong), nav links, then phone/login actions, matching the real desktop header exactly. +- **Header**: solid `bg-secondary` (navy) bar, not white/blurred. On desktop (`lg:` and up) logo sits first in DOM (renders on the **right** in RTL — do not add `order-*` overrides here again, that was tried and was wrong), nav links, then phone/cart/login actions, matching the real desktop header exactly. **Below `lg:` the header is a completely separate 3-column grid row** (hamburger right / logo centered / cart left — Farsi readers expect the hamburger on the reading-start side, not the logo-adjacent corner) rendered via its own `grid grid-cols-3 lg:hidden` block, not responsive classes bolted onto the desktop flex row — the two arrangements are different enough (centered logo vs. edge logo, hamburger only exists on mobile) that trying to share one row fighting `order-*`/`justify-*` was worse than two small dedicated blocks. See `Header.tsx`. - **Hero** (`HeroSection.tsx`): character + a large dotted ring backdrop (`public/images/hero/ring.png` — the accent dots are baked into that asset, don't draw separate circle divs), a second smaller student avatar peeking from behind the character, floating grad-cap/paper-plane/shape decorations. No CTA buttons in the hero — the original doesn't have any there. Two-column grid switches at **`md:`** (768px), not `lg:` — at `lg:` the in-between tablet/small-laptop range stacked to a single column and looked broken (large blank gap), since the image side has fixed-height containers. - **Feature cards** (`FeatureCards.tsx`): a **Swiper carousel** (prev/next arrow buttons, not pagination dots) in a two-column row — cards on the left (wide column), a "ویژگی‌های ما" heading + short paragraph + the arrow buttons in a narrow **280px right-hand column**. This grid must be `md:grid-cols-[280px_minmax(0,1fr)]` — **not** `[280px_1fr]`: a bare `1fr` track let Swiper's internal width calculation blow the column out to ~16.7M px (classic CSS Grid blowout; Swiper needs `minmax(0,1fr)` to be constrained by its parent). The Swiper's own grid-item wrapper also needs `min-w-0` directly (see the `Reveal` around it) — that's the part that matters **below** `md`, where there's no explicit `grid-template-columns` at all but the item is still a grid child with `min-width: auto` by default, so the same blowout happened on mobile too until that class was added. Any future Swiper placed inside a `grid` or `flex` container needs this same `min-w-0` treatment regardless of breakpoint. Also must NOT have negative top margin overlapping the hero — that was tried first and the user flagged it as a bug ("باید با هیرو فاصله داشته باشه"), plain `py-16 md:py-24` is correct. - **Quick-links row** ("چرا استاد علی عالمی؟", `QuickLinks.tsx`): real icon assets (`icons/play.png`, `exam.png`, `price.png`, `support.png`) in `sm:grid-cols-2 lg:grid-cols-4` — 4-in-a-row on real desktop widths, 2×2 on tablet. Ends with a "درباره ما بیشتر بدانید" CTA linking `/about-us` (that's the original frame's own link field, not invented). -- **"چرا مارا انتخاب کنید؟"** (`WhyChooseUs.tsx`): image on the **left**, text+CTA on the **right** (DOM order text-first renders right in RTL grid). Stat badges (آموزش با کیفیت / نظارت دقیق و ارزیابی عملکرد / بیش از ۱۵۰ ساعت آموزش / ۱۴,۵۰۰ نفر دانشجو+avatars) are **floating cards scattered over the image's corners** (absolute-positioned with physical `left-*`/`right-*`, not logical `start`/`end` — this composition doesn't flip with page direction), not a plain bulleted list in the text column. +- **"چرا مارا انتخاب کنید؟"** (`WhyChooseUs.tsx`): image on the **left**, text+CTA on the **right** (DOM order text-first renders right in RTL grid). Stat badges (آموزش با کیفیت / نظارت دقیق و ارزیابی عملکرد / بیش از ۱۵۰ ساعت آموزش / ۱۴,۵۰۰ نفر دانشجو+avatars) are **floating cards scattered over the image's corners** (absolute-positioned with physical `left-*`/`right-*`, not logical `start`/`end` — this composition doesn't flip with page direction), not a plain bulleted list in the text column. The two **bottom** badges must sit in mirrored corners — `۱۴,۵۰۰ نفر دانشجو` at `-bottom-6 -left-6` and `بیش از ۱۵۰ ساعت آموزش` at `-bottom-6 -right-6` — an earlier `right-1/3` on the second one drifted under the first at narrower widths (user flagged it as an overlap bug from a screenshot); symmetric corners is the fix, don't reintroduce a fractional/centered offset on either bottom badge. - **Testimonials**: multi-per-view on desktop (`breakpoints: {768:2, 1024:3}`), pagination dots (not arrows) — opposite of the feature carousel. - **Stats bar** (`StatsBar.tsx`): light/white background with **teal** numbers — not a navy full-bleed banner (that was tried first and was wrong). - Scroll-reveal entrance animation on every section via `src/components/Reveal.tsx` (fade + translateY on `IntersectionObserver`, stands in for the original's WOW.js + animate.css) — requested explicitly ("انیمیشن‌ها ... باید دقیقا شبیه سایت اصلی باشه"). - **General lesson**: any two-column `image + text` grid using a fixed-height image container should switch at `md:` not `lg:`, or verify the `lg:` in-between range doesn't leave a tall single-column stack. Applies to `WhyChooseUs.tsx`, `about/BioIntro.tsx`, `contact/ContactInfo.tsx` (already fixed) — check any *new* two-column section against this before shipping. +- **Hero second avatar** (`avatar-1.png`, the girl peeking from behind the character): positioned `top-16 end-0` (was `bottom-6 end-2`, which put almost the whole thing behind the character's body with only a sliver of hair visible) — user asked to raise it so it actually reads as a second figure. If the character illustration or its box size changes, re-check this is still clearly visible, not just technically in the DOM. +- **Feature cards** (`FeatureCards.tsx`) use `border border-ink/15 shadow-md`, not `ring-1 ring-line` — the `--color-line` token (`#ececec`) was too light to read as a border at all against the white card/white section background (flagged from a screenshot as "بوردرهاشون مشخص نیست"). If another white-on-white card ever looks edge-less, this is the fix, not a heavier shadow alone. + +## Header — logo/favicon, nav, categories (round 2 polish) + +- **Dynamic logo**: `RootLayout` (`src/app/layout.tsx`) now fetches `getFavicon()` once and passes `logoUrl`/`logoDarkUrl` down to both `Header` and `Footer` (in addition to the favicon it already used for `` icons). `Header` prefers `logoDarkUrl` (the dashboard's dark-background variant) → `logoUrl` → the bundled local `/images/logo.png`; the `brightness-0 invert` CSS filter is applied **only** when falling back to the local asset (it's the one known-teal file that needs forcing white for the navy bar — a real CMS-uploaded logo's color is unknown, don't invert it blind). `Footer` just uses `logoUrl` → local, no invert (white background, original color is correct there). Both use `unoptimized` on `next/image` when the src is a remote CMS URL, since that host isn't (and can't be, until a real tenant exists) in `next.config.ts` `images.remotePatterns`. The favicon itself was already dynamic before this round (`generateMetadata`) — this was specifically about the header/footer `` logo not following the same rule yet. +- **Active nav link + phone button styling**: active link and the phone number both render as a solid white pill (`rounded-full bg-white px-4 py-2`, dark `text-secondary`) against the navy bar, not a transparent/tinted-text treatment — this was an explicit visual ask from a screenshot annotation ("دور لینک اکتیو ... یک مستطیل سفید با ردیوس ۵۰ بذار"). `rounded-full` (Tailwind's 9999px) reads as the same fully-pill shape as a literal 50px radius at this button height, so that's the correct utility, not an arbitrary `rounded-[50px]`. Inactive links stay `text-white/80` on transparent. Applies only to the desktop nav row; the mobile dropdown panel keeps its own simpler hover-background treatment. +- **Navbar reverted to exactly 5 static items** (`NAV_LINKS` in `src/lib/site.ts`): صفحه اصلی، دوره‌های آموزشی، مقالات، درباره ما، تماس با ما — per explicit instruction, **not** محصولات/فروشگاه/نمونه‌کارها. A categories-driven dropdown for "محصولات" (`src/components/CategoriesMenu.tsx`, fetched via `getCategories({ entityType: "product" })` in the root layout) was built and then **removed again** the same session once the user clarified the nav should stay to just those 5 until real CMS content exists — `CategoriesMenu.tsx` was deleted and the `categories` fetch/prop taken back out of `layout.tsx`/`Header.tsx`. `/products`, `/store`, `/portfolios` are still real, working pages — just not linked from the header nav right now. If nav-driven category browsing is wanted again later, it needs to be rebuilt (check git history for the deleted `CategoriesMenu.tsx` rather than starting from scratch). +- **Header action buttons** (search/cart/user, right side of the desktop row): redesigned to solid `bg-primary` filled circles/pills per a reference screenshot, not outlined/ghost buttons. **Search was added then removed the same session** — the site has no search backend, so don't re-add a search icon/box to the header without an actual `/products?name=` wiring decision first. `CartButton` (`src/components/cart/CartButton.tsx`) is now always a solid primary circle with a white-on-primary badge (no more `light` prop — it was only ever used inside this navy header, the conditional was dead weight). `UserMenu` (`src/components/UserMenu.tsx`) similarly dropped its `light` prop — both the logged-out "ورود / ثبت‌نام" pill and the logged-in "{name} عزیز" trigger are solid primary pills now. +- **Mobile hamburger button bug**: the button was `flex items-center` but **not** `justify-center`, so the 3-line icon span (and the X it morphs into when open) hugged one edge of the 40×40 square instead of sitting centered — reported from a screenshot ("۳ خط منو داخل مربع نیستن" / X not centered when open). Fix was adding `justify-center` alongside the existing `justify-self-start` (that one's unrelated — it positions the *button itself* within the mobile header's 3-column grid row; `justify-center` centers the icon *inside* the button). If another icon-only square button ever looks off-center, check for this exact same missing class rather than touching the icon's own SVG/span markup. +- **Feature carousel must have all 4 real items**: `src/components/home/features-data.ts` had been trimmed to 3 during the earlier "match the real 3-visible-at-once desktop screenshot" pass, silently dropping "انتخاب زمان کلاس" (choose class time) — the original theme has 4 features, the 4th just wasn't visible in that one screenshot because the carousel only shows 3 at a time on desktop. Restored as the 2nd item (clock icon, secondary tone) so the carousel actually has something to scroll to. Icon badges in `FeatureCards.tsx` also got a nested treatment — an outer `h-16 w-16 rounded-2xl` tone-colored square containing an inner `h-10 w-10 rounded-full bg-white` circle with the icon colored to match the outer tone — per a "flaticon-style" reference screenshot; a flat single-layer colored-square-with-white-icon read as low-effort by comparison. `about/FeatureStrip.tsx` reuses the same `FEATURES` array and benefits from the same fix (was showing an awkward 3-in-a-4-col grid before). ## Scope (current) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 82560b8..3d331de 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -46,7 +46,7 @@ export default async function RootLayout({ }: Readonly<{ children: React.ReactNode; }>) { - const session = await getSession(); + const [session, brand] = await Promise.all([getSession(), safe(getFavicon(), NO_BRAND_ASSETS)]); const user = session?.user ?? null; const isAdmin = isAdminUser(user); @@ -55,9 +55,9 @@ export default async function RootLayout({ -
+
{children}
-