+
+
اندیشکده فولاد آینده
+
The Steel Futures Institute
- {/* Brand */}
-
-
- اندیشکده فولاد آینده
-
-
- The Steel Futures Institute
-
فضایی همدلانه برای اندیشیدن به فردای صنعت؛ جایی که دانش، آیندهپژوهی و نوآوری به بینشهایی برای توسعه صنعتی تبدیل میشوند.
-
- {SOCIALS.map(s => (
-
+
+
ما را در شبکههای اجتماعی دنبال کنید.
+
+ {SOCIALS.map((s) => (
+
))}
- {/* Newsletter */}
-
+ {/* ── NAV (center) ── */}
+
+
+ {/* ── CONTACT + badges + newsletter (left side in RTL) ── */}
+
+
اطلاعات تماس
+
+ {CONTACT.map((c) => (
+
+
+ {c.label}
+ {c.value}
+
+ ))}
+
+
+ {/* certification badges (placeholders — swap for real images) */}
+
+ {[0, 1, 2].map((i) => (
+
+ نشان
+
+ ))}
+
+
-
-
-
تمامی حقوق این وب سایت محفوظ و متعلق به شرکت فولاد مبارکه است.
-
- با افتخار قدرت گرفته از دیدوان؛ چشم همیشه باز مدیران
-
+ {/* copyright bar */}
+
+
+ تمامی حقوق مادی و معنوی این وبسایت برای شرکت فولاد مبارکه اصفهان محفوظ میباشد.
+ طراحی شده توسط شرکت دانشبنیان نواندیشان آتی نگار فرتاک
diff --git a/src/app/layout/Header.tsx b/src/app/layout/Header.tsx
index 2513c44..d905fd9 100644
--- a/src/app/layout/Header.tsx
+++ b/src/app/layout/Header.tsx
@@ -1,7 +1,7 @@
import React, { useState, useEffect, useRef } from 'react'
import type { CSSProperties } from 'react'
import { NavLink } from 'react-router-dom'
-import { Search, Menu, X, ChevronDown, Radar, Leaf, Globe, Cpu, BarChart3 } from 'lucide-react'
+import { Search, Menu, X, ChevronDown, Radar, Leaf, Globe, Cpu, BarChart3, Video, Mic, CalendarDays } from 'lucide-react'
import { motion, AnimatePresence } from 'framer-motion'
import { useLang } from '@/context/LangContext'
@@ -17,8 +17,10 @@ const T = {
red: 'var(--red)',
} as const
+type Section = { fa: string; en: string; to: string; Icon: React.ElementType }
+
/* ─── dropdown sections under رادار آینده ─── */
-const SECTIONS: { fa: string; en: string; to: string; Icon: React.ElementType }[] = [
+const SECTIONS: Section[] = [
{ fa: 'آیندهپژوهی و رصد هوشمند', en: 'Foresight & Intelligence', to: '/radar', Icon: Radar },
{ fa: 'پایداری و فولاد سبز', en: 'Sustainability & Green Steel', to: '/sustainability', Icon: Leaf },
{ fa: 'ژئوپلیتیک و اقتصاد جهانی', en: 'Geopolitics & Global Economy', to: '/geopolitics', Icon: Globe },
@@ -26,14 +28,22 @@ const SECTIONS: { fa: string; en: string; to: string; Icon: React.ElementType }[
{ fa: 'بازار و زنجیره فولاد', en: 'Market & Steel Chain', to: '/pulse', Icon: BarChart3 },
]
+/* ─── dropdown sections under رسانه و رویداد ─── */
+const MEDIA: Section[] = [
+ { fa: 'ویدیوکست و پادکست', en: 'Videocast & Podcast', to: '#', Icon: Video },
+ { fa: 'نشستهای تخصصی', en: 'Expert Sessions', to: '#', Icon: Mic },
+ { fa: 'رویدادها', en: 'Events', to: '#', Icon: CalendarDays },
+]
+
/* ─── top-level nav items ─── */
-const TOP_NAV: { fa: string; en: string; to?: string; dropdown?: boolean }[] = [
- { fa: 'رادار آینده', en: 'Radar', dropdown: true },
- { fa: 'تحلیلهای استراتژیک', en: 'Strategic Analysis', to: '#' },
- { fa: 'چندرسانهای', en: 'Multimedia', to: '#' },
- { fa: 'در یک نگاه', en: 'At a Glance', to: '/at-a-glance' },
- { fa: 'شبکه خبرگان', en: 'Expert Network', to: '#' },
- { fa: 'درباره ما', en: 'About', to: '#' },
+type TopNav = { fa: string; en: string; to?: string; dropdown?: 'radar' | 'media' }
+const TOP_NAV: TopNav[] = [
+ { fa: 'رادار آینده', en: 'Radar', dropdown: 'radar' },
+ { fa: 'نبض صنعت', en: 'Industry Pulse', to: '/pulse' },
+ { fa: 'رسانه و رویداد', en: 'Media & Events', dropdown: 'media' },
+ { fa: 'در یک نگاه', en: 'At a Glance', to: '/at-a-glance' },
+ { fa: 'شبکه خبرگان', en: 'Expert Network', to: '#' },
+ { fa: 'درباره ما', en: 'About', to: '#' },
]
const META_LEFT: { fa: string; en: string }[] = [
@@ -43,8 +53,8 @@ const META_LEFT: { fa: string; en: string }[] = [
{ fa: 'رسانه', en: 'Press' },
]
-/* ─── رادار آینده dropdown card ─── */
-function RadarDropdown({ lang }: { lang: 'fa' | 'en' }) {
+/* ─── generic nav dropdown card ─── */
+function NavDropdown({ lang, label, sections }: { lang: 'fa' | 'en'; label: string; sections: Section[] }) {
const [open, setOpen] = useState(false)
const ref = useRef
(null)
@@ -70,7 +80,7 @@ function RadarDropdown({ lang }: { lang: 'fa' | 'en' }) {
borderBottom: open ? `2px solid ${T.red}` : '2px solid transparent',
}}
>
- {lang === 'fa' ? 'رادار آینده' : 'Radar'}
+ {label}
@@ -92,9 +102,9 @@ function RadarDropdown({ lang }: { lang: 'fa' | 'en' }) {
direction: lang === 'fa' ? 'rtl' : 'ltr',
}}
>
- {SECTIONS.map((item, i) => (
+ {sections.map((item, i) => (
setOpen(false)}
style={({ isActive }: { isActive: boolean }): CSSProperties => ({
@@ -102,7 +112,7 @@ function RadarDropdown({ lang }: { lang: 'fa' | 'en' }) {
padding: '15px 20px', textDecoration: 'none',
color: isActive ? T.red : '#3d3d3d',
background: isActive ? 'rgba(155,28,28,0.04)' : 'transparent',
- borderBottom: i < SECTIONS.length - 1 ? '1px solid rgba(7,29,73,0.07)' : 'none',
+ borderBottom: i < sections.length - 1 ? '1px solid rgba(7,29,73,0.07)' : 'none',
transition: 'background 100ms', fontSize: 14, fontWeight: 600,
})}
onMouseEnter={e => { (e.currentTarget as HTMLElement).style.background = 'rgba(7,29,73,0.03)' }}
@@ -219,7 +229,7 @@ export default function Header() {
to="/"
style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 12, textDecoration: 'none', flexShrink: 0, lineHeight: 1 }}
>
- 
@@ -242,7 +252,7 @@ export default function Header() {
>
{TOP_NAV.map((item) =>
item.dropdown
- ?
+ ?
:
)}
diff --git a/src/components/ui/globe.tsx b/src/components/ui/globe.tsx
new file mode 100644
index 0000000..dd40fb6
--- /dev/null
+++ b/src/components/ui/globe.tsx
@@ -0,0 +1,72 @@
+import { useEffect, useRef } from 'react'
+import createGlobe from 'cobe'
+
+/* Lightweight WebGL globe (cobe) — auto-rotating, blue dotted landmasses with
+ glowing cyan markers, matching the reference. */
+export default function Globe({ size = 600 }: { size?: number }) {
+ const canvasRef = useRef(null)
+
+ useEffect(() => {
+ const canvas = canvasRef.current
+ if (!canvas) return
+
+ let phi = 0
+ let raf = 0
+ let width = canvas.offsetWidth
+ const onResize = () => { width = canvas.offsetWidth }
+ window.addEventListener('resize', onResize)
+
+ const globe = createGlobe(canvas, {
+ devicePixelRatio: 2,
+ width: width * 2,
+ height: width * 2,
+ phi: 0,
+ theta: 0.25,
+ dark: 1,
+ diffuse: 1.4,
+ mapSamples: 18000,
+ mapBrightness: 7,
+ baseColor: [0.06, 0.13, 0.4], // deep blue landmass dots
+ markerColor: [0.22, 0.68, 1], // glowing cyan/blue markers
+ glowColor: [0.18, 0.36, 0.85], // blue atmosphere glow
+ markers: [
+ { location: [35.69, 51.39], size: 0.10 }, // Tehran
+ { location: [31.23, 121.47], size: 0.09 }, // Shanghai / Dalian
+ { location: [33.31, 44.36], size: 0.06 }, // Baghdad / Basra
+ { location: [51.92, 4.47], size: 0.06 }, // Rotterdam
+ { location: [25.20, 55.27], size: 0.06 }, // Dubai
+ { location: [41.01, 28.97], size: 0.06 }, // Istanbul
+ { location: [19.07, 72.88], size: 0.07 }, // Mumbai
+ { location: [-23.55, -46.63], size: 0.07 },// São Paulo
+ { location: [55.75, 37.62], size: 0.06 }, // Moscow
+ { location: [37.56, 126.97], size: 0.06 }, // Seoul
+ { location: [-1.29, 36.82], size: 0.06 }, // Nairobi
+ { location: [40.71, -74.0], size: 0.07 }, // New York
+ ],
+ })
+
+ // cobe v2 drives the loop externally via globe.update()
+ const tick = () => {
+ phi += 0.0045
+ globe.update({ phi, width: width * 2, height: width * 2 })
+ raf = requestAnimationFrame(tick)
+ }
+ raf = requestAnimationFrame(tick)
+ requestAnimationFrame(() => { canvas.style.opacity = '1' })
+
+ return () => {
+ cancelAnimationFrame(raf)
+ globe.destroy()
+ window.removeEventListener('resize', onResize)
+ }
+ }, [])
+
+ return (
+
+
+
+ )
+}
diff --git a/src/pages/Home/sections/MapEventsSection.tsx b/src/pages/Home/sections/MapEventsSection.tsx
index c1dc7c5..41588a4 100644
--- a/src/pages/Home/sections/MapEventsSection.tsx
+++ b/src/pages/Home/sections/MapEventsSection.tsx
@@ -1,25 +1,9 @@
import { Link } from 'react-router-dom'
import { motion } from 'framer-motion'
-import WorldMap from '@/components/ui/world-map'
+import Globe from '@/components/ui/globe'
import { events } from '@/data/events'
import { useLang } from '@/context/LangContext'
-const ROUTES = [
- { start: { lat: 35.69, lng: 51.39 }, end: { lat: 33.31, lng: 44.36 } },
- { start: { lat: 35.69, lng: 51.39 }, end: { lat: 41.30, lng: 69.24 } },
- { start: { lat: 31.23, lng: 121.47 }, end: { lat: 51.92, lng: 4.47 } },
- { start: { lat: 31.23, lng: 121.47 }, end: { lat: 6.45, lng: 3.39 } },
- { start: { lat: 31.23, lng: 121.47 }, end: { lat: 1.35, lng: 103.82 } },
- { start: { lat: 55.75, lng: 37.62 }, end: { lat: 39.91, lng: 116.39 } },
- { start: { lat: 55.75, lng: 37.62 }, end: { lat: 35.69, lng: 51.39 } },
- { start: { lat: 19.07, lng: 72.88 }, end: { lat: 25.20, lng: 55.27 } },
- { start: { lat: 19.07, lng: 72.88 }, end: { lat: -4.05, lng: 39.67 } },
- { start: { lat: -23.55, lng: -46.63 }, end: { lat: 31.23, lng: 121.47 } },
- { start: { lat: 37.56, lng: 126.97 }, end: { lat: 1.35, lng: 103.82 } },
- { start: { lat: 41.01, lng: 28.97 }, end: { lat: 52.52, lng: 13.40 } },
- { start: { lat: -33.87, lng: 151.21 }, end: { lat: 31.23, lng: 121.47 } },
-]
-
const TYPE_COLOR: Record = {
conference: 'var(--ink)', exhibition: '#6b4a00',
seminar: '#1a4a2a', international: 'var(--red)',
@@ -69,7 +53,7 @@ export default function MapEventsSection() {
{t.mapSub}
-
+
diff --git a/src/pages/Home/sections/RadarTechSection.tsx b/src/pages/Home/sections/RadarTechSection.tsx
index ce6a960..52d3199 100644
--- a/src/pages/Home/sections/RadarTechSection.tsx
+++ b/src/pages/Home/sections/RadarTechSection.tsx
@@ -1,55 +1,25 @@
import { Link } from 'react-router-dom'
+import { Telescope, Scale, Database, Users, Lightbulb, type LucideIcon } from 'lucide-react'
import { useLang } from '@/context/LangContext'
import { RadarCard } from '@/pages/Radar/Radar'
import { RADAR_ITEMS } from '@/content/radar'
-/* ─── Tech data ──────────────────────────────────────── */
-const TECHS = {
+/* ─── رویکرد ما — the institute's approach (new content, not duplicated in the navbar) ─── */
+type Area = { Icon: LucideIcon; color: string; title: string; desc: string }
+const RESEARCH_AREAS: Record<'fa' | 'en', Area[]> = {
fa: [
- {
- num: '۰۱', tag: 'انرژی پاک',
- title: 'فولاد هیدروژنی (DRI-H₂)',
- desc: 'جایگزینی کک با هیدروژن سبز در کورههای احیای مستقیم؛ اولین کارخانه تجاری اروپایی در ۲۰۲۴ وارد مرحله تولید شد. ظرفیت تولید ۲.۵ میلیون تن در سال.',
- img: '/news/photo-1613665813446-82a78c468a1d.jpg',
- horizon: '۲۰۲۷–۲۰۳۰', accentColor: '#0d6b3e',
- },
- {
- num: '۰۲', tag: 'هوش مصنوعی',
- title: 'دیجیتالسازی و AI در تولید فولاد',
- desc: 'یادگیری ماشین در بهینهسازی فرآیند ذوب، کنترل کیفیت آنلاین و پیشبینی خرابی تجهیزات. کاهش ۱۵–۲۰٪ ضایعات و صرفهجویی ۸٪ در مصرف انرژی.',
- img: '/news/photo-1485827404703-89b55fcc595e.jpg',
- horizon: '۲۰۲۵–۲۰۲۸', accentColor: '#1a4a7a',
- },
- {
- num: '۰۳', tag: 'فناوری نوین',
- title: 'الکترولیز اکسید مذاب (MOE)',
- desc: 'تولید فولاد از طریق الکترولیز مستقیم اکسید آهن با برق تجدیدپذیر — بدون انتشار CO₂. MIT این فناوری را «انقلاب صنعتی بعدی» نامیده است.',
- img: '/news/photo-1451187580459-43490279c0fa.jpg',
- horizon: '۲۰۳۰–۲۰۳۵', accentColor: '#6b21a8',
- },
+ { Icon: Telescope, color: '#c9a227', title: 'آیندهنگاری علمی', desc: 'بهجای پیشبینی تکنقطهای، با سناریوپردازی و تحلیل روند، چند آیندهٔ محتمل صنعت فولاد را ترسیم میکنیم.' },
+ { Icon: Database, color: '#2471a3', title: 'تحلیل دادهمحور', desc: 'هر بینش بر پایهٔ دادههای معتبر جهانی و داخلی است، نه گمانهزنی؛ تصمیمسازی با شواهد قابلاتکا.' },
+ { Icon: Scale, color: '#1e8449', title: 'بیطرفی و استقلال', desc: 'تحلیلهای ما مستقل از منافع کوتاهمدت است؛ شفاف و بدون جانبداری از یک بازیگر خاص.' },
+ { Icon: Users, color: '#7d3c98', title: 'هماندیشی خبرگان', desc: 'شبکهای از مدیران، پژوهشگران و فعالان صنعت که دانش پراکنده را به بینش جمعی تبدیل میکند.' },
+ { Icon: Lightbulb, color: '#c0392b', title: 'از تحلیل تا اقدام', desc: 'یافتهها را به راهبردهای عملی و قابلاجرا برای رهبران صنعت ترجمه میکنیم، نه گزارشهای روی طاقچه.' },
],
en: [
- {
- num: '01', tag: 'Clean Energy',
- title: 'Hydrogen Steel (DRI-H₂)',
- desc: "Replacing coke with green hydrogen in direct reduction furnaces; Europe's first commercial plant entered production in 2024 with 2.5 million ton annual capacity.",
- img: '/news/photo-1613665813446-82a78c468a1d.jpg',
- horizon: '2027–2030', accentColor: '#0d6b3e',
- },
- {
- num: '02', tag: 'Artificial Intelligence',
- title: 'Digitalization & AI in Steel Production',
- desc: 'Machine learning for smelting optimization, online quality control, and equipment failure prediction. Cuts waste by 15–20% and energy use by 8%.',
- img: '/news/photo-1485827404703-89b55fcc595e.jpg',
- horizon: '2025–2028', accentColor: '#1a4a7a',
- },
- {
- num: '03', tag: 'Emerging Tech',
- title: 'Molten Oxide Electrolysis (MOE)',
- desc: 'Producing steel by direct electrolysis of iron oxide using renewable electricity — zero CO₂ emissions. MIT has called it "the next industrial revolution".',
- img: '/news/photo-1451187580459-43490279c0fa.jpg',
- horizon: '2030–2035', accentColor: '#6b21a8',
- },
+ { Icon: Telescope, color: '#c9a227', title: 'Scientific Foresight', desc: 'Instead of single-point prediction, we map several plausible futures of the steel industry through scenario planning.' },
+ { Icon: Database, color: '#2471a3', title: 'Data-Driven Analysis', desc: 'Every insight rests on credible global and domestic data — evidence, not guesswork.' },
+ { Icon: Scale, color: '#1e8449', title: 'Independence & Neutrality', desc: 'Our analysis is independent of short-term interests — transparent and unbiased toward any single actor.' },
+ { Icon: Users, color: '#7d3c98', title: 'Expert Collaboration', desc: 'A network of executives, researchers and practitioners turning scattered knowledge into collective insight.' },
+ { Icon: Lightbulb, color: '#c0392b', title: 'From Analysis to Action', desc: 'We translate findings into practical strategies for industry leaders — not shelf-ware reports.' },
],
}
@@ -58,26 +28,21 @@ const T = {
radarOverline: 'FUTURE RADAR', radarHeading: 'رادار آینده',
radarSub: 'سیگنالهای جهانی با اثر مستقیم بر صنعت فولاد ایران',
radarAll: 'همه سیگنالها ←',
- techOverline: 'TECH FRONTIER', techHeading: 'مرز فناوری',
- techSub: 'فناوریهای نوظهور و افق کاربرد آنها در صنعت فولاد',
- techAll: 'همه فناوریها ←',
- horizon: 'افق زمانی',
+ areasOverline: 'OUR APPROACH', areasHeading: 'رویکرد ما',
+ areasSub: 'اصول و روش کار اندیشکده فولاد آینده در تحلیل و آیندهنگاری صنعت',
},
en: {
radarOverline: 'FUTURE RADAR', radarHeading: 'Future Radar',
radarSub: 'Global signals with direct impact on Iran\'s steel industry',
radarAll: 'All Signals →',
- techOverline: 'TECH FRONTIER', techHeading: 'Tech Frontier',
- techSub: 'Emerging technologies and their application horizon in the steel industry',
- techAll: 'All Technologies →',
- horizon: 'Horizon',
+ areasOverline: 'OUR APPROACH', areasHeading: 'Our Approach',
+ areasSub: 'How the Steel Futures Institute works — its principles for analysis and foresight',
},
}
export default function RadarTechSection() {
const { lang } = useLang()
const t = T[lang]
- const techs = TECHS[lang]
return (
@@ -104,61 +69,43 @@ export default function RadarTechSection() {
{/* divider */}
- {/* ══ مرز فناوری ══ */}
+ {/* ══ حوزههای پژوهشی ══ */}
-
{t.techOverline}
-
{t.techHeading}
-
{t.techSub}
+
{t.areasOverline}
+
{t.areasHeading}
+
{t.areasSub}
-
{t.techAll}
-
- {techs.map((tech, i) => (
-
{ (e.currentTarget as HTMLDivElement).style.transform = 'translateY(-4px)'; (e.currentTarget as HTMLDivElement).style.boxShadow = '0 10px 30px rgba(0,0,0,0.12)' }}
- onMouseLeave={e => { (e.currentTarget as HTMLDivElement).style.transform = 'translateY(0)'; (e.currentTarget as HTMLDivElement).style.boxShadow = '0 2px 12px rgba(0,0,0,0.07)' }}
- >
- {/* Image */}
-
-
(e.currentTarget.style.transform = 'scale(1.06)')}
- onMouseLeave={e => (e.currentTarget.style.transform = 'scale(1)')}
- />
-
+
+ {RESEARCH_AREAS[lang].map((a, i) => {
+ const Icon = a.Icon
+ return (
+
{ const d = e.currentTarget as HTMLElement; d.style.transform = 'translateY(-4px)'; d.style.boxShadow = '0 14px 34px -18px rgba(7,29,73,0.25)' }}
+ onMouseLeave={e => { const d = e.currentTarget as HTMLElement; d.style.transform = 'translateY(0)'; d.style.boxShadow = '0 2px 12px rgba(0,0,0,0.06)' }}
+ >
- {tech.tag}
+
-
{tech.num}
-
-
- {/* Content */}
-
-
{tech.title}
-
{tech.desc}
-
-
{t.horizon}:
-
{tech.horizon}
+
-
- ))}
+ )
+ })}