From c934ee4ab5f3df515427e4e319b7260d01893201 Mon Sep 17 00:00:00 2001 From: alireza Date: Sun, 31 May 2026 17:00:22 +0330 Subject: [PATCH] Design system rebrand, image slider, contact form, new home sections Co-Authored-By: Claude Sonnet 4.6 --- design-system.md | 350 ++++++++++++++++++ panel/package-lock.json | 12 +- panel/package.json | 3 +- panel/server.js | 29 ++ src/app/layout/Header.tsx | 26 +- src/app/layout/RootLayout.tsx | 5 +- src/index.css | 51 ++- src/pages/Home/Home.tsx | 32 +- .../Home/sections/FactoryNewsletterLayout.tsx | 222 +++++++++++ src/pages/Home/sections/HeroSection.tsx | 75 ++-- .../Home/sections/InternalNewsSection.tsx | 177 +++++++++ src/pages/Home/sections/MapEventsSection.tsx | 135 +++++++ src/pages/Home/sections/RadarTechSection.tsx | 252 +++++++++++++ .../Home/sections/SteelNewsletterSection.tsx | 26 -- src/pages/Pulse/Pulse.tsx | 211 ++++++++++- 15 files changed, 1474 insertions(+), 132 deletions(-) create mode 100644 design-system.md create mode 100644 src/pages/Home/sections/FactoryNewsletterLayout.tsx create mode 100644 src/pages/Home/sections/InternalNewsSection.tsx create mode 100644 src/pages/Home/sections/MapEventsSection.tsx create mode 100644 src/pages/Home/sections/RadarTechSection.tsx diff --git a/design-system.md b/design-system.md new file mode 100644 index 0000000..ed6ac83 --- /dev/null +++ b/design-system.md @@ -0,0 +1,350 @@ +# Design System — اندیشکده فولاد آینده (Future Steel Think Tank) + +> **Tagline (FA):** «بینشی نو برای توسعه صنعتی» +> **Tagline (EN):** Shaping the Future of Steel Industry Through Insight, Innovation and Impact +> **Pillars:** INSIGHT · FORESIGHT · IMPACT +> **Source:** Brand Book v1.0 · Khordad 1405 +> **Brand personality:** Forward-looking · Smart · Professional · Calm & deep · Inspiring · Authoritative + +This document is the single source of truth for the brand's visual and verbal identity. Tokens are written in English for implementation; brand names, taglines, and voice are preserved in Persian as defined in the brand book. + +--- + +## 1. Design Principles + +The whole system rests on five principles. Every screen, slide, report, and post should pass all five. + +1. **Consistency (یکپارچگی)** — Hold one identity across every medium. Fixed elements never change. +2. **Smart simplicity (سادگی هوشمند)** — Clean on the surface, deep underneath. Empty space is intentional, not unfinished. +3. **Clarity (وضوح)** — The message lands fast. Comprehension over decoration. +4. **Analytical focus (تحلیل‌محوری)** — Everything points at insight and understanding, not at spectacle. +5. **Future-orientation (آینده‌محوری)** — The look should feel like technology and the future, never retro or generic. + +**Litmus test for any artifact:** the audience should walk away feeling *«این مجموعه آینده صنعت را عمیق‌تر، حرفه‌ای‌تر و هوشمندانه‌تر از دیگران تحلیل می‌کند».* + +--- + +## 2. Color + +### 2.1 Palette + +| Token | Name (FA) | Name (EN) | Hex | Role | +|---|---|---|---|---| +| `--color-navy` | سرمه‌ای عمیق | Deep Navy | `#071D49` | Primary brand color | +| `--color-blue` | آبی آینده | Future Blue | `#00AEEF` | Accent / emphasis | +| `--color-white` | سفید | White | `#FFFFFF` | Breathing space, simplicity | +| `--color-gray-light` | خاکستری روشن | Light Gray | `#E9EEF5` | Lines & secondary surfaces | +| `--color-gray-steel` | خاکستری صنعتی | Industrial Gray | `#7C8798` | Secondary text | +| `--color-orange` | نارنجی محدود | Limited Orange | `#FF8A00` | Warning / optional emphasis only | + +### 2.2 Color meaning + +- **Navy** → credibility, thought, professionalism (اعتبار، تفکر، حرفه‌ای‌گری) +- **Blue** → technology, innovation, the future (فناوری، نوآوری، آینده) +- **White** → transparency, simplicity (شفافیت و سادگی) +- **Gray** → analytical focus, balance (تحلیل‌محوری و تعادل) +- **Orange** → warning, energy, accent (هشدار، انرژی، تأکید) + +### 2.3 Usage ratio + +A balanced layout follows roughly this distribution: + +| Navy | Blue | White | Gray | Orange | +|---|---|---|---|---| +| **60%** | **25%** | **10%** | **4%** | **1%** | + +Orange is a 1% color — a single highlight, an alert, a KPI delta. It is never a fill or a theme color. + +### 2.4 Rules + +**Do** +- Keep generous white space. +- Use blue purely for emphasis and key data points. +- Maintain the balance between dark and light areas. + +**Avoid** +- Overusing colors / multi-color clutter. +- Heavy gradients. +- Off-brand or advertising-style colors. + +### 2.5 Tokens + +```css +:root { + --color-navy: #071D49; /* primary */ + --color-blue: #00AEEF; /* accent */ + --color-white: #FFFFFF; + --color-gray-light: #E9EEF5; /* lines, surfaces */ + --color-gray-steel: #7C8798; /* secondary text */ + --color-orange: #FF8A00; /* warning / 1% accent */ + + /* Semantic aliases */ + --bg-primary: var(--color-navy); + --bg-surface: var(--color-white); + --bg-muted: var(--color-gray-light); + --text-on-dark: var(--color-white); + --text-on-light: var(--color-navy); + --text-muted: var(--color-gray-steel); + --accent: var(--color-blue); + --alert: var(--color-orange); +} +``` + +--- + +## 3. Typography + +### 3.1 Type stack + +| Role | Font | +|---|---| +| Headings / titles | **IRANSansX Bold** | +| Body text | **IRANSansX Regular** | +| Reports & dashboards | **Peyda** / IRANSansX | +| English / Latin text | **Inter** / Montserrat | + +### 3.2 Voice of the type + +Typography must read as **modern · legible · professional · managerial** (مدرن، خوانا، حرفه‌ای، مدیریتی). + +**Rules** +- Calm and highly legible (خلوت و خوانا). +- Clear visual hierarchy (سلسله‌مراتب بصری واضح). +- Carry a Think-Tank professional tone. +- Use **Bold** sparingly — for titles and true emphasis only. +- Precise alignment. +- Avoid text clutter; let space do the work. + +### 3.3 Sample lock-ups + +- **FA (IRANSansX Bold):** «آینده صنعتی با بینش و فناوری» +- **EN (Inter Bold):** STEEL FUTURE — *Data · Insight · Innovation* + +### 3.4 Tokens + +```css +:root { + --font-fa: "IRANSansX", "Peyda", sans-serif; + --font-en: "Inter", "Montserrat", sans-serif; + --font-report: "Peyda", "IRANSansX", sans-serif; + + --weight-bold: 700; /* headings / emphasis only */ + --weight-regular: 400; /* body */ +} +``` + +--- + +## 4. Logo & Logotype System + +### 4.1 What the mark stands for + +Foresight · industrial development · technology · forward motion · the creation of insight. + +**Three meaning layers:** +- **Upward movement** — symbol of progress & the future (حرکت رو به بالا). +- **Industrial structure** — symbol of development & industry (ساختار صنعتی). +- **Luminous star** — symbol of insight & innovation (ستاره نورانی). + +**Logo message:** «آینده صنعتی کشور با بینش، فناوری و تفکر آینده‌محور ساخته می‌شود.» + +### 4.2 Variants + +| Variant | When to use | +|---|---| +| Primary logo (لوگوی اصلی) | Default — all official & primary media | +| Horizontal logo (لوگوی افقی) | Headers and websites | +| Vertical logo (لوگوی عمودی) | Documents and posters | +| Icon logo (آیکون لوگو) | Social avatars & favicon | +| Monochrome (نسخه تک‌رنگ) | Single-color print | +| Reverse (نسخه معکوس) | On dark backgrounds | + +### 4.3 Clear space & minimum size + +- **Clear space:** keep margin on all four sides equal to the height of the star symbol. +- **Minimum width:** `60px` (digital) · `25mm` (print). +- Primary logo is preferred, always shown with the full brand name, in official and management contexts. + +### 4.4 Misuse — never do this + +- Change the proportions / stretch or compress. +- Rotate the mark. +- Add effects (glow, shadow, etc.). +- Recolor the logo. +- Place it on busy / low-contrast backgrounds. +- Re-typeset or substitute the wordmark font. + +--- + +## 5. Iconography + +### 5.1 Style + +Icons are **minimal · linear · smart · future-oriented** (مینیمال، خطی، هوشمند، آینده‌محور). + +**Rules** +- Uniform, single stroke weight across the set. +- Simple, geometric forms. +- Read as complementary elements, not the main visual. +- Compatible with a technology/analysis aesthetic. +- Simple, legible, and reusable across every medium. + +**Avoid:** 3D icons · cartoonish icons · mixed/inconsistent styles. + +### 5.2 Core concept set + +Industry · data analysis · AI & technology · foresight · energy · industrial development · sustainability · innovation · geoeconomy · network & connectivity. + +--- + +## 6. Layout, Grid & White Space + +- Use a defined column grid with consistent spacing between elements. +- Synchronize titles with their content blocks. +- Build deliberate breathing room around content. +- Keep titles at the top of the layout; keep body legible and scannable. +- **Avoid information density and visual clutter** above all. + +**White-space standard:** layouts must stay clean, legible, and visually airy. Reject overcrowding, clutter, and excessive graphic elements. + +--- + +## 7. Imagery + +**Imagery must be:** industrial · future-oriented · technological · professional. + +**Good image qualities** +- Professional photography, high quality. +- Modern industrial environments. +- A sense of technology and data. +- Color-graded to match the brand palette. + +**Suggested subjects:** AI & analysis · data networks · future factories · advanced technologies · digital structures · energy & sustainability · industrial value chain. + +**Avoid:** cliché stock images · advertising-style images · busy compositions · low-quality images. + +--- + +## 8. Data Visualization & Charts + +**Charts must be:** simple · managerial · legible · conclusion-driven. + +**Rules** +- Limited color use (lean on navy + blue, orange for one delta). +- Focus on key data; strip everything non-essential. +- Fast readability. +- Reuse consistent iconography. + +**Avoid:** overly complex charts · unnecessary effects · 3D graphics · busy pie charts (prefer clean bar/line charts). + +--- + +## 9. Fixed Brand Elements + +These elements stay constant across slides, reports, digital media, and social — they are what make the identity recognizable: + +- Color palette +- Typography +- Icon style +- Chart style +- Grid & layout +- White-space discipline +- Imagery style +- Future-oriented visual tone + +--- + +## 10. Voice & Tone + +### 10.1 Brand tone + +The voice should be **trustworthy · deep · analytical · future-oriented · professional** (قابل‌اعتماد، عمیق، تحلیلی، آینده‌محور، حرفه‌ای). + +| The brand IS | The brand is NOT | +|---|---| +| مطمئن (confident) | تبلیغاتی (advertising) | +| هوشمند (smart) | شعاری (sloganeering) | +| آینده‌محور (future-oriented) | هیجان‌زده (hyped) | +| حرفه‌ای (professional) | پیچیده غیرضروری (needlessly complex) | +| آرام و عمیق (calm & deep) | بیش‌ازحد دانشگاهی (overly academic) | +| الهام‌بخش (inspiring) | — | + +### 10.2 Brand language + +**Clear · precise · managerial · forward-looking · data-driven** (روشن، دقیق، مدیریتی، آینده‌نگر، داده‌محور). + +Writing should be: short but deep · analytical but readable · professional but understandable. + +### 10.3 Content structure + +A standard content/message flow: + +1. Define the problem (مسئله را تعریف کند) +2. Analyze the trends (روندها را تحلیل کند) +3. Explain the implications (پیامدها را توضیح دهد) +4. Deliver the insight (بینش ارائه کند) + +### 10.4 Core message & keywords + +**Core message:** «توسعه صنعتی آینده، بدون تفکر آینده‌محور ممکن نیست.» + +**Keyword set (واژگان کلیدی):** آینده‌نگری · توسعه صنعتی · تحول صنعتی · فناوری‌های پیشرفته · هوش مصنوعی · فولاد سبز · تاب‌آوری · زنجیره ارزش · ژئواکونومی · تحلیل راهبردی · توسعه آینده‌محور · بینش · تصمیم‌سازی · آینده صنعت + +--- + +## 11. Application Quick Reference + +| Surface | Key guidance | +|---|---| +| **Slides / presentations** | Minimal, light, data-driven; standard slide = key-message → context → analytical content → managerial takeaway. Limited bold; consistent icons. | +| **Reports / dashboards** | Use Peyda/IRANSansX; executive summary first; clean charts; visual hierarchy; standardized titles. | +| **Digital / web & app** | Responsive, fast, future-oriented; minimal UI; clear information architecture; content & analysis focus. | +| **Social media** | Short but deep, analytical but readable; consistent palette + icons; no hype, no pure-promotion posts. | + +--- + +## 12. Token Summary (copy-paste) + +```css +:root { + /* Color */ + --color-navy: #071D49; + --color-blue: #00AEEF; + --color-white: #FFFFFF; + --color-gray-light: #E9EEF5; + --color-gray-steel: #7C8798; + --color-orange: #FF8A00; + + /* Type */ + --font-fa: "IRANSansX", "Peyda", sans-serif; + --font-en: "Inter", "Montserrat", sans-serif; + --font-report: "Peyda", "IRANSansX", sans-serif; + --weight-bold: 700; + --weight-regular: 400; + + /* Logo */ + --logo-min-digital: 60px; + --logo-min-print: 25mm; +} +``` + +```js +// tailwind.config.js (extend) +module.exports = { + theme: { + extend: { + colors: { + navy: "#071D49", + blue: "#00AEEF", + "gray-light": "#E9EEF5", + "gray-steel": "#7C8798", + orange: "#FF8A00", + }, + fontFamily: { + fa: ["IRANSansX", "Peyda", "sans-serif"], + en: ["Inter", "Montserrat", "sans-serif"], + }, + }, + }, +}; +``` diff --git a/panel/package-lock.json b/panel/package-lock.json index 87ca8b8..f879b60 100644 --- a/panel/package-lock.json +++ b/panel/package-lock.json @@ -16,7 +16,8 @@ "express": "^4.21.0", "jsonwebtoken": "^9.0.2", "multer": "^1.4.5-lts.1", - "nanoid": "^5.0.7" + "nanoid": "^5.0.7", + "nodemailer": "^8.0.10" }, "engines": { "node": ">=20" @@ -1210,6 +1211,15 @@ "node": ">=10" } }, + "node_modules/nodemailer": { + "version": "8.0.10", + "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-8.0.10.tgz", + "integrity": "sha512-BLFuSth7QtHOkBzyqTehWWyub0NTRDuK2Q2SQfnGLsrJnzyU+Yeh4WpV1eZGuARFj1xQJHIdnTuJZLP+b9R1GQ==", + "license": "MIT-0", + "engines": { + "node": ">=6.0.0" + } + }, "node_modules/nth-check": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz", diff --git a/panel/package.json b/panel/package.json index 366c895..58b5d9b 100644 --- a/panel/package.json +++ b/panel/package.json @@ -19,7 +19,8 @@ "express": "^4.21.0", "jsonwebtoken": "^9.0.2", "multer": "^1.4.5-lts.1", - "nanoid": "^5.0.7" + "nanoid": "^5.0.7", + "nodemailer": "^8.0.10" }, "engines": { "node": ">=20" diff --git a/panel/server.js b/panel/server.js index b3d7267..53e6013 100644 --- a/panel/server.js +++ b/panel/server.js @@ -240,6 +240,35 @@ app.post('/api/prices/refresh', authRequired, async (_req, res) => { app.get('/api/health', (_req, res) => res.json({ ok: true })); +/* ── Contact form → email ─────────────────────────────── */ +import nodemailer from 'nodemailer'; + +app.post('/api/contact', async (req, res) => { + const { name, phone, email } = req.body || {}; + if (!name || !phone) return res.status(400).json({ error: 'name and phone required' }); + + const transporter = nodemailer.createTransport({ + service: 'gmail', + auth: { user: process.env.MAIL_USER, pass: process.env.MAIL_PASS }, + }); + + try { + await transporter.sendMail({ + from: process.env.MAIL_USER, + to: 'alirezaameria2@gmail.com, mtdemne@gmail.com', + subject: `درخواست دسترسی نبض صنعت — ${name}`, + html: `

درخواست دسترسی — نبض صنعت

+

نام: ${name}

+

شماره همراه: ${phone}

+

ایمیل: ${email || '—'}

`, + }); + res.json({ ok: true }); + } catch (err) { + console.error('Mail error:', err.message); + res.status(500).json({ error: 'mail failed' }); + } +}); + app.listen(PORT, () => { console.log(`Panel running at ${PUBLIC_ORIGIN}`); const intervalMs = Number(process.env.SCRAPER_INTERVAL_MS) || 2 * 60 * 1000; diff --git a/src/app/layout/Header.tsx b/src/app/layout/Header.tsx index a80fce2..af987d9 100644 --- a/src/app/layout/Header.tsx +++ b/src/app/layout/Header.tsx @@ -144,10 +144,10 @@ export default function Header() { position: 'sticky', top: 0, zIndex: 50, - background: scrolled ? 'rgba(244,239,231,0.72)' : T.paper, + background: scrolled ? 'rgba(255,255,255,0.88)' : T.paper, backdropFilter: scrolled ? 'blur(18px) saturate(160%)' : 'none', WebkitBackdropFilter: scrolled ? 'blur(18px) saturate(160%)' : 'none', - borderBottom: scrolled ? '1px solid rgba(26,23,18,0.08)' : '1px solid transparent', + borderBottom: scrolled ? '1px solid rgba(7,29,73,0.10)' : '1px solid transparent', direction: lang === 'fa' ? 'rtl' : 'ltr', transition: 'background 220ms ease, backdrop-filter 220ms ease, border-color 220ms ease', }} @@ -158,7 +158,7 @@ export default function Header() {
(e.currentTarget.style.color = 'var(--paper)')} - onMouseLeave={e => (e.currentTarget.style.color = 'rgba(244,239,231,0.7)')} + onMouseLeave={e => (e.currentTarget.style.color = 'rgba(255,255,255,0.7)')} > {lang === 'fa' ? item.fa : item.en} ))} - · + · { e.currentTarget.style.color = 'var(--paper)'; e.currentTarget.style.borderColor = 'rgba(244,239,231,0.5)' }} - onMouseLeave={e => { e.currentTarget.style.color = 'rgba(244,239,231,0.7)'; e.currentTarget.style.borderColor = 'rgba(244,239,231,0.2)' }} + onMouseEnter={e => { e.currentTarget.style.color = 'var(--paper)'; e.currentTarget.style.borderColor = 'rgba(255,255,255,0.5)' }} + onMouseLeave={e => { e.currentTarget.style.color = 'rgba(255,255,255,0.7)'; e.currentTarget.style.borderColor = 'rgba(255,255,255,0.2)' }} > {lang === 'fa' ? 'EN' : 'FA'} @@ -258,7 +258,7 @@ export default function Header() { style={{ display: 'flex', flexDirection: 'column', - gap: 2, + gap: 7, textDecoration: 'none', flexShrink: 0, lineHeight: 1, @@ -420,7 +420,7 @@ export default function Header() { style={{ position: 'fixed', inset: 0, - background: 'rgba(26,23,18,0.55)', + background: 'rgba(7,29,73,0.55)', zIndex: 100, }} /> diff --git a/src/app/layout/RootLayout.tsx b/src/app/layout/RootLayout.tsx index 688b14c..b0fc1a3 100644 --- a/src/app/layout/RootLayout.tsx +++ b/src/app/layout/RootLayout.tsx @@ -1,15 +1,16 @@ -import { Outlet } from 'react-router-dom' +import { Outlet, useLocation } from 'react-router-dom' import Header from './Header' import { Footer } from './Footer' import { MarketStrip } from './MarketStrip' import { LangProvider } from '@/context/LangContext' export default function RootLayout() { + const { pathname } = useLocation() return (
- + {pathname === '/pulse' && }
diff --git a/src/index.css b/src/index.css index 2db01b6..b6c7ad5 100644 --- a/src/index.css +++ b/src/index.css @@ -1,4 +1,5 @@ @import "tailwindcss"; +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap'); /* ═══════════════════════════════════════════════ VAZIR FONT FACES @@ -40,23 +41,41 @@ } /* ═══════════════════════════════════════════════ - DESIGN TOKENS + BRAND PALETTE — design-system.md v1.0 + Navy 60% · Blue 25% · White 10% · Gray 4% · Orange 1% ═══════════════════════════════════════════════ */ :root { - --paper: #fafbfd; - --paper-2: #f1f4f9; - --paper-3: #e4eaf2; - --ink: #0f172a; - --ink-2: #1e293b; - --ink-3: #334155; - --ink-4: #64748b; - --ink-5: #94a3b8; - --ink-6: #cbd5e1; - --rule-thin: rgba(15,23,42,0.10); - --red: #dc2626; - --red-2: #ef4444; - --amber: #d97706; - --green-ink: #059669; + /* Raw brand colors */ + --color-navy: #071D49; + --color-blue: #00AEEF; + --color-white: #FFFFFF; + --color-gray-light: #E9EEF5; + --color-gray-steel: #7C8798; + --color-orange: #FF8A00; + + /* Semantic surface tokens */ + --paper: #FFFFFF; /* primary surface */ + --paper-2: #E9EEF5; /* secondary surface */ + --paper-3: #d5dce8; /* tertiary surface */ + + /* Semantic text tokens — all navy scale */ + --ink: #071D49; /* primary text / headings */ + --ink-2: #0d2d6b; /* strong secondary */ + --ink-3: #1a3f7a; /* medium emphasis */ + --ink-4: #7C8798; /* muted / secondary text */ + --ink-5: #a0aab4; /* placeholder / disabled */ + --ink-6: #c8d0dc; /* hairline / subtle */ + + /* Rules */ + --rule-thin: rgba(7,29,73,0.10); + + /* Accent — brand blue replaces red as the primary accent */ + --red: #00AEEF; /* accent (named --red for compat) */ + --red-2: #29bdf2; /* lighter accent */ + + /* Warning / limited use — 1% max */ + --amber: #FF8A00; + --green-ink: #059669; } /* ═══════════════════════════════════════════════ @@ -164,7 +183,7 @@ html { scroll-behavior: smooth; direction: rtl; } body { - font-family: 'Vazir', system-ui, sans-serif; + font-family: 'Vazir', 'Inter', system-ui, sans-serif; background: var(--paper); color: var(--ink); font-size: var(--fs-body); diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx index 10433fe..c1de1cd 100644 --- a/src/pages/Home/Home.tsx +++ b/src/pages/Home/Home.tsx @@ -1,9 +1,8 @@ import HeroSection from './sections/HeroSection' -import SnapshotBar from './sections/SnapshotBar' -import GlobalScannerSection from './sections/GlobalScannerSection' -import SteelNewsletterSection from './sections/SteelNewsletterSection' -import EventsSection from './sections/EventsSection' -import FactoryBentoSection from './sections/FactoryBentoSection' +import InternalNewsSection from './sections/InternalNewsSection' +import RadarTechSection from './sections/RadarTechSection' +import MapEventsSection from './sections/MapEventsSection' +import FactoryNewsletterLayout from './sections/FactoryNewsletterLayout' import RiskSection from './sections/RiskSection' import { useLang } from '@/context/LangContext' @@ -44,27 +43,18 @@ export default function Home() {
{/* ── 00 · Hero ─────────────────────────────────── */} + + - {/* ── Ticker ────────────────────────────────────── */} - - - {/* ── 01 · اسکنر جهانی ──────────────────────────── */} + {/* ── 01 · اسکنر جهانی + رویدادها ─────────────── */} - + - {/* ── 02 · خبرنامه فولاد ────────────────────────── */} + {/* ── 02 · ماهنامه + خبرنامه ──────────────────────── */} - + - {/* ── 03 · آخرین رویدادها ───────────────────────── */} - - - - {/* ── 04 · گزارش کارخانه‌ها ─────────────────────── */} - - - - {/* ── 05 · نقشه ریسک ────────────────────────────── */} + {/* ── 04 · نقشه ریسک ────────────────────────────── */}
diff --git a/src/pages/Home/sections/FactoryNewsletterLayout.tsx b/src/pages/Home/sections/FactoryNewsletterLayout.tsx new file mode 100644 index 0000000..cbb6a6b --- /dev/null +++ b/src/pages/Home/sections/FactoryNewsletterLayout.tsx @@ -0,0 +1,222 @@ +import { useState } from 'react' +import { useLang } from '@/context/LangContext' + +const REPORTS = { + fa: [ + { + title: 'تحلیل عملکرد تولید و صادرات — بهمن ۱۴۰۳', + desc: 'بررسی آمار تولید ماهانه، مقایسه با بودجه سالانه و تحلیل روند صادرات فولاد تخت در بازارهای منطقه‌ای', + date: 'بهمن ۱۴۰۳', + img: 'https://images.unsplash.com/photo-1504307651254-35680f356dfd?w=600&q=80', + }, + { + title: 'وضعیت بازار و قیمت‌گذاری — دی ۱۴۰۳', + desc: 'تحلیل نوسانات قیمت فولاد تخت در بازار داخلی، بررسی اثر نرخ ارز و چشم‌انداز بازار در فصل زمستان', + date: 'دی ۱۴۰۳', + img: 'https://images.unsplash.com/photo-1587293852726-70cdb56c2866?w=600&q=80', + }, + { + title: 'گزارش پایداری و محیط زیست — آذر ۱۴۰۳', + desc: 'شاخص‌های زیست‌محیطی ماهانه؛ مصرف انرژی، کاهش انتشار کربن و عملکرد سیستم بازیافت پساب صنعتی', + date: 'آذر ۱۴۰۳', + img: 'https://images.unsplash.com/photo-1473341304170-971dccb5ac1e?w=600&q=80', + }, + { + title: 'تحلیل نیروی انسانی و بهره‌وری — آبان ۱۴۰۳', + desc: 'بررسی شاخص‌های بهره‌وری نیروی کار، آموزش‌های ماهانه و آمار ایمنی شغلی', + date: 'آبان ۱۴۰۳', + img: 'https://images.unsplash.com/photo-1581092160607-ee22731c9b4e?w=600&q=80', + }, + ], + en: [ + { + title: 'Production & Export Performance — Feb 2025', + desc: 'Monthly production figures, annual budget comparison, and flat steel export trend analysis across regional markets.', + date: 'Feb 2025', + img: 'https://images.unsplash.com/photo-1504307651254-35680f356dfd?w=600&q=80', + }, + { + title: 'Market Conditions & Pricing — Jan 2025', + desc: 'Flat steel price fluctuations in the domestic market, exchange rate impact analysis, and winter market outlook.', + date: 'Jan 2025', + img: 'https://images.unsplash.com/photo-1587293852726-70cdb56c2866?w=600&q=80', + }, + { + title: 'Sustainability & Environment Report — Dec 2024', + desc: 'Monthly environmental KPIs: energy consumption, carbon emission reductions, and industrial wastewater recycling performance.', + date: 'Dec 2024', + img: 'https://images.unsplash.com/photo-1473341304170-971dccb5ac1e?w=600&q=80', + }, + { + title: 'Workforce & Productivity Analysis — Nov 2024', + desc: 'Workforce productivity indicators, monthly training hours, and occupational safety statistics.', + date: 'Nov 2024', + img: 'https://images.unsplash.com/photo-1581092160607-ee22731c9b4e?w=600&q=80', + }, + ], +} + +const ISSUES = { + fa: [ + { num: '۱۲', title: 'فولاد و تحریم‌های جدید: راهکارهای صادراتی ۱۴۰۴', date: 'بهمن ۱۴۰۳' }, + { num: '۱۱', title: 'قیمت‌گذاری فولاد در بازار داخلی: چالش‌ها و فرصت‌ها', date: 'دی ۱۴۰۳' }, + { num: '۱۰', title: 'آمار تولید فولاد ایران در ۹ ماهه ۱۴۰۳', date: 'آذر ۱۴۰۳' }, + ], + en: [ + { num: '12', title: 'Steel & New Sanctions: Export Strategies for 1404', date: 'Feb 2025' }, + { num: '11', title: 'Steel Pricing in the Domestic Market: Challenges & Opportunities', date: 'Jan 2025' }, + { num: '10', title: 'Iran Steel Production Stats — First 9 Months of 1403', date: 'Dec 2024' }, + ], +} + +const T = { + fa: { + factoryOverline: 'MOBARAKEH STEEL', factoryHeading: 'ماهنامه تحلیلی کارخانه', factoryAll: 'مشاهده همه ←', + readMore: 'دریافت گزارش ←', + nlOverline: 'STEEL NEWSLETTER', nlHeading: 'خبرنامه فولاد', nlArchive: 'آرشیو کامل ←', + placeholder: 'ایمیل خود را وارد کنید...', subscribe: 'عضویت', done: '✓ ثبت شد', + nlDesc: 'هر ماه تحلیل‌های تخصصی بازار فولاد، اخبار صنعت و گزارش‌های اختصاصی را در ایمیل خود دریافت کنید.', + }, + en: { + factoryOverline: 'MOBARAKEH STEEL', factoryHeading: 'Monthly Factory Analysis', factoryAll: 'View All →', + readMore: 'Get Report →', + nlOverline: 'STEEL NEWSLETTER', nlHeading: 'Steel Newsletter', nlArchive: 'Full Archive →', + placeholder: 'Enter your email...', subscribe: 'Subscribe', done: '✓ Done', + nlDesc: 'Receive expert steel market analysis, industry news, and exclusive reports in your inbox every month.', + }, +} + +export default function FactoryNewsletterLayout() { + const { lang } = useLang() + const t = T[lang] + const [email, setEmail] = useState('') + const [done, setDone] = useState(false) + + return ( +
+
+
+ + {/* ══ LEFT · ماهنامه ══ */} +
+ + +
+ {REPORTS[lang].map((r, i) => ( +
{ const d = e.currentTarget as HTMLDivElement; d.style.transform = 'translateY(-3px)'; d.style.boxShadow = '0 8px 24px rgba(7,29,73,0.15)' }} + onMouseLeave={e => { const d = e.currentTarget as HTMLDivElement; d.style.transform = 'translateY(0)'; d.style.boxShadow = '0 2px 10px rgba(7,29,73,0.08)' }} + > +
+ (e.currentTarget.style.transform = 'scale(1.07)')} + onMouseLeave={e => (e.currentTarget.style.transform = 'scale(1)')} + /> +
+
+ {lang === 'fa' ? 'فولاد مبارکه' : 'Mobarakeh Steel'} +
+
+ {r.date} +
+
+
+

{r.title}

+

{r.desc}

+ {t.readMore} +
+
+ ))} +
+
+ + {/* ══ RIGHT · خبرنامه ══ */} +
+
+
{t.nlOverline}
+
+

{t.nlHeading}

+ {t.nlArchive} +
+
+ + {/* Navy subscribe card */} +
+

{t.nlDesc}

+
+ setEmail(e.target.value)} + placeholder={t.placeholder} disabled={done} + style={{ + flex: 1, border: 'none', padding: '10px 12px', fontSize: 12, + fontFamily: 'inherit', background: 'rgba(255,255,255,0.07)', + color: '#fff', outline: 'none', direction: lang === 'fa' ? 'rtl' : 'ltr', + }} + /> + +
+
+ + {/* Recent issues — navy number badges */} +
+ {ISSUES[lang].map((issue, i) => ( +
((e.currentTarget as HTMLDivElement).style.background = 'var(--paper-2)')} + onMouseLeave={e => ((e.currentTarget as HTMLDivElement).style.background = '#fff')} + > +
{issue.num}
+
+
{issue.title}
+
{issue.date}
+
+
←
+
+ ))} +
+
+ +
+
+
+ ) +} diff --git a/src/pages/Home/sections/HeroSection.tsx b/src/pages/Home/sections/HeroSection.tsx index 0f11e02..3f7446a 100644 --- a/src/pages/Home/sections/HeroSection.tsx +++ b/src/pages/Home/sections/HeroSection.tsx @@ -8,14 +8,12 @@ gsap.registerPlugin(ScrollTrigger) const T = { fa: { tag: 'اندیشکده‌ فولاد آینده', - h1a: 'جایی که آینده', - h1b: 'به تصمیم تبدیل می‌شود', + h1: 'جایی که آینده به تصمیم تبدیل می‌شود', sub: 'تحلیل روندها، فناوری‌ها و سناریوهای آینده صنعت فولاد ایران و جهان', }, en: { tag: 'Steel Policy Institute', - h1a: 'Where the Future', - h1b: 'Becomes Decision', + h1: 'Where the Future Becomes Decision', sub: 'Analyzing trends, technologies and future scenarios of the global steel industry', }, } @@ -84,57 +82,58 @@ export default function HeroSection() { src="/hero-bg.mp4#t=2" /> {/* Dark overlay */} -