Rebrand colors: gold #c9a227->#CD9E53, navy #071d49->#032340 site-wide Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> @
This commit is contained in:
parent
1f3099f6db
commit
d483ed791b
|
|
@ -13,7 +13,7 @@ function FooterCurve() {
|
||||||
{/* white (page) above, navy below, with a smooth dip on the LEFT side */}
|
{/* white (page) above, navy below, with a smooth dip on the LEFT side */}
|
||||||
<path
|
<path
|
||||||
d="M0,0 L132,0 C192,0 206,52 240,52 C274,52 288,0 348,0 L1440,0 L1440,64 L0,64 Z"
|
d="M0,0 L132,0 C192,0 206,52 240,52 C274,52 288,0 348,0 L1440,0 L1440,64 L0,64 Z"
|
||||||
fill="#071d49"
|
fill="#032340"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
{/* scroll-to-top button sitting in the dip (left side) */}
|
{/* scroll-to-top button sitting in the dip (left side) */}
|
||||||
|
|
@ -23,12 +23,12 @@ function FooterCurve() {
|
||||||
style={{
|
style={{
|
||||||
position: 'absolute', top: 8, left: '16.7%', transform: 'translateX(-50%)',
|
position: 'absolute', top: 8, left: '16.7%', transform: 'translateX(-50%)',
|
||||||
width: 40, height: 40, borderRadius: '50%', cursor: 'pointer',
|
width: 40, height: 40, borderRadius: '50%', cursor: 'pointer',
|
||||||
background: '#071d49', border: '2px solid rgba(255,255,255,0.25)',
|
background: '#032340', border: '2px solid rgba(255,255,255,0.25)',
|
||||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||||
transition: 'transform 180ms, background 180ms',
|
transition: 'transform 180ms, background 180ms',
|
||||||
}}
|
}}
|
||||||
onMouseEnter={(e) => { (e.currentTarget as HTMLElement).style.transform = 'translateX(-50%) translateY(-3px)'; (e.currentTarget as HTMLElement).style.background = '#c9a227' }}
|
onMouseEnter={(e) => { (e.currentTarget as HTMLElement).style.transform = 'translateX(-50%) translateY(-3px)'; (e.currentTarget as HTMLElement).style.background = '#CD9E53' }}
|
||||||
onMouseLeave={(e) => { (e.currentTarget as HTMLElement).style.transform = 'translateX(-50%)'; (e.currentTarget as HTMLElement).style.background = '#071d49' }}
|
onMouseLeave={(e) => { (e.currentTarget as HTMLElement).style.transform = 'translateX(-50%)'; (e.currentTarget as HTMLElement).style.background = '#032340' }}
|
||||||
>
|
>
|
||||||
<ChevronsUp size={20} color="#fff" strokeWidth={2.5} />
|
<ChevronsUp size={20} color="#fff" strokeWidth={2.5} />
|
||||||
</button>
|
</button>
|
||||||
|
|
@ -36,8 +36,8 @@ function FooterCurve() {
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
const NAVY = '#071d49'
|
const NAVY = '#032340'
|
||||||
const GOLD = '#c9a227'
|
const GOLD = '#CD9E53'
|
||||||
|
|
||||||
/* round social buttons (gold filled, like the screenshot) */
|
/* round social buttons (gold filled, like the screenshot) */
|
||||||
const SOCIALS = [
|
const SOCIALS = [
|
||||||
|
|
|
||||||
|
|
@ -11,8 +11,8 @@ type Arc = {
|
||||||
arcAlt: number; color: string
|
arcAlt: number; color: string
|
||||||
}
|
}
|
||||||
|
|
||||||
const NAVY = '#071d49'
|
const NAVY = '#032340'
|
||||||
const COLORS = ['#22ade0', '#3b82f6', '#c9a227']
|
const COLORS = ['#22ade0', '#3b82f6', '#CD9E53']
|
||||||
|
|
||||||
/* steel-trade arcs centred on Tehran/Shanghai */
|
/* steel-trade arcs centred on Tehran/Shanghai */
|
||||||
const ARCS: Arc[] = [
|
const ARCS: Arc[] = [
|
||||||
|
|
|
||||||
|
|
@ -24,7 +24,7 @@ export type Integration = {
|
||||||
/* Global steel data sources & exchanges, scattered across a 6×5 grid.
|
/* Global steel data sources & exchanges, scattered across a 6×5 grid.
|
||||||
Empty cells stay as faint placeholders for the "constellation" look. */
|
Empty cells stay as faint placeholders for the "constellation" look. */
|
||||||
export const INTEGRATIONS: Integration[] = [
|
export const INTEGRATIONS: Integration[] = [
|
||||||
{ id: 'lme', name: 'London Metal Exchange', icon: 'exchange', accent: '#c9a227', col: 6, row: 1 },
|
{ id: 'lme', name: 'London Metal Exchange', icon: 'exchange', accent: '#CD9E53', col: 6, row: 1 },
|
||||||
{ id: 'shfe', name: 'Shanghai Futures Exchange', icon: 'trending', accent: '#c0392b', col: 4, row: 2 },
|
{ id: 'shfe', name: 'Shanghai Futures Exchange', icon: 'trending', accent: '#c0392b', col: 4, row: 2 },
|
||||||
{ id: 'platts', name: 'S&P Global Platts', icon: 'chart', accent: '#2471a3', col: 6, row: 2 },
|
{ id: 'platts', name: 'S&P Global Platts', icon: 'chart', accent: '#2471a3', col: 6, row: 2 },
|
||||||
{ id: 'reuters', name: 'Reuters', icon: 'newspaper', accent: '#e67e22', col: 3, row: 3 },
|
{ id: 'reuters', name: 'Reuters', icon: 'newspaper', accent: '#e67e22', col: 3, row: 3 },
|
||||||
|
|
|
||||||
|
|
@ -46,7 +46,7 @@
|
||||||
═══════════════════════════════════════════════ */
|
═══════════════════════════════════════════════ */
|
||||||
:root {
|
:root {
|
||||||
/* Raw brand colors */
|
/* Raw brand colors */
|
||||||
--color-navy: #071D49;
|
--color-navy: #032340;
|
||||||
--color-blue: #00AEEF;
|
--color-blue: #00AEEF;
|
||||||
--color-white: #FFFFFF;
|
--color-white: #FFFFFF;
|
||||||
--color-gray-light: #E9EEF5;
|
--color-gray-light: #E9EEF5;
|
||||||
|
|
@ -59,7 +59,7 @@
|
||||||
--paper-3: #d5dce8; /* tertiary surface */
|
--paper-3: #d5dce8; /* tertiary surface */
|
||||||
|
|
||||||
/* Semantic text tokens — all navy scale */
|
/* Semantic text tokens — all navy scale */
|
||||||
--ink: #071D49; /* primary text / headings */
|
--ink: #032340; /* primary text / headings */
|
||||||
--ink-2: #0d2d6b; /* strong secondary */
|
--ink-2: #0d2d6b; /* strong secondary */
|
||||||
--ink-3: #1a3f7a; /* medium emphasis */
|
--ink-3: #1a3f7a; /* medium emphasis */
|
||||||
--ink-4: #7C8798; /* muted / secondary text */
|
--ink-4: #7C8798; /* muted / secondary text */
|
||||||
|
|
|
||||||
|
|
@ -8,14 +8,14 @@ export default function AtAGlance() {
|
||||||
return (
|
return (
|
||||||
<div dir={isFa ? 'rtl' : 'ltr'} style={{ background: '#faf7f4', minHeight: '100vh' }}>
|
<div dir={isFa ? 'rtl' : 'ltr'} style={{ background: '#faf7f4', minHeight: '100vh' }}>
|
||||||
{/* page header */}
|
{/* page header */}
|
||||||
<div style={{ background: '#071d49', padding: '64px 0 56px' }}>
|
<div style={{ background: '#032340', padding: '64px 0 56px' }}>
|
||||||
<div className="max-w-7xl mx-auto px-12 max-md:px-5">
|
<div className="max-w-7xl mx-auto px-12 max-md:px-5">
|
||||||
<div style={{ display: 'flex', alignItems: 'stretch', justifyContent: 'flex-start' }}>
|
<div style={{ display: 'flex', alignItems: 'stretch', justifyContent: 'flex-start' }}>
|
||||||
<div style={{
|
<div style={{
|
||||||
[isFa ? 'borderRight' : 'borderLeft']: '4px solid #c9a227',
|
[isFa ? 'borderRight' : 'borderLeft']: '4px solid #CD9E53',
|
||||||
[isFa ? 'paddingRight' : 'paddingLeft']: 18,
|
[isFa ? 'paddingRight' : 'paddingLeft']: 18,
|
||||||
} as React.CSSProperties}>
|
} as React.CSSProperties}>
|
||||||
<div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '3px', color: '#c9a227', marginBottom: 8 }}>
|
<div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '3px', color: '#CD9E53', marginBottom: 8 }}>
|
||||||
AT A GLANCE
|
AT A GLANCE
|
||||||
</div>
|
</div>
|
||||||
<h1 style={{ fontSize: 'clamp(28px, 3vw, 44px)', fontWeight: 900, color: '#fff', letterSpacing: '-0.5px', margin: 0 }}>
|
<h1 style={{ fontSize: 'clamp(28px, 3vw, 44px)', fontWeight: 900, color: '#fff', letterSpacing: '-0.5px', margin: 0 }}>
|
||||||
|
|
|
||||||
|
|
@ -2,8 +2,8 @@ import { useState } from 'react'
|
||||||
import { AnimatePresence, motion } from 'framer-motion'
|
import { AnimatePresence, motion } from 'framer-motion'
|
||||||
import { useLang } from '@/context/LangContext'
|
import { useLang } from '@/context/LangContext'
|
||||||
|
|
||||||
const NAVY = '#071d49'
|
const NAVY = '#032340'
|
||||||
const GOLD = '#c9a227'
|
const GOLD = '#CD9E53'
|
||||||
|
|
||||||
type Glance = {
|
type Glance = {
|
||||||
source: string
|
source: string
|
||||||
|
|
|
||||||
|
|
@ -3,8 +3,8 @@ import { ArrowLeft } from 'lucide-react'
|
||||||
import { useLang } from '@/context/LangContext'
|
import { useLang } from '@/context/LangContext'
|
||||||
import { FACTORY_REPORTS, FACTORY_REPORTS_META, type FactoryReport, type ScrollDir } from '@/content/factoryReports'
|
import { FACTORY_REPORTS, FACTORY_REPORTS_META, type FactoryReport, type ScrollDir } from '@/content/factoryReports'
|
||||||
|
|
||||||
const NAVY = '#071d49'
|
const NAVY = '#032340'
|
||||||
const GOLD = '#c9a227'
|
const GOLD = '#CD9E53'
|
||||||
const EASE = [0.22, 1, 0.36, 1] as const
|
const EASE = [0.22, 1, 0.36, 1] as const
|
||||||
|
|
||||||
/* native ScrollAnimation — slides child in from a direction when it enters view */
|
/* native ScrollAnimation — slides child in from a direction when it enters view */
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@ import { useLang } from '@/context/LangContext'
|
||||||
|
|
||||||
gsap.registerPlugin(ScrollTrigger)
|
gsap.registerPlugin(ScrollTrigger)
|
||||||
|
|
||||||
const NAVY = '#071d49'
|
const NAVY = '#032340'
|
||||||
const PAPER = '#faf7f4' // cream background revealed under the de-zoom
|
const PAPER = '#faf7f4' // cream background revealed under the de-zoom
|
||||||
|
|
||||||
const HERO = {
|
const HERO = {
|
||||||
|
|
|
||||||
|
|
@ -7,8 +7,8 @@ import { Link } from 'react-router-dom'
|
||||||
import { useLang } from '@/context/LangContext'
|
import { useLang } from '@/context/LangContext'
|
||||||
import { INTEGRATIONS, INTEGRATIONS_META, type IntegrationIcon } from '@/content/integrations'
|
import { INTEGRATIONS, INTEGRATIONS_META, type IntegrationIcon } from '@/content/integrations'
|
||||||
|
|
||||||
const NAVY = '#071d49'
|
const NAVY = '#032340'
|
||||||
const GOLD = '#c9a227'
|
const GOLD = '#CD9E53'
|
||||||
const COLS = 6
|
const COLS = 6
|
||||||
const ROWS = 5
|
const ROWS = 5
|
||||||
const EASE = [0.22, 1, 0.36, 1] as const
|
const EASE = [0.22, 1, 0.36, 1] as const
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import { useLang } from '@/context/LangContext'
|
import { useLang } from '@/context/LangContext'
|
||||||
|
|
||||||
const NAVY = '#071d49'
|
const NAVY = '#032340'
|
||||||
const GOLD = '#c9a227'
|
const GOLD = '#CD9E53'
|
||||||
|
|
||||||
/* خبرنامه فولاد — recent issue titles, scrolled as a continuous marquee. */
|
/* خبرنامه فولاد — recent issue titles, scrolled as a continuous marquee. */
|
||||||
const ISSUES = {
|
const ISSUES = {
|
||||||
|
|
|
||||||
|
|
@ -8,14 +8,14 @@ import { RADAR_ITEMS } from '@/content/radar'
|
||||||
type Area = { Icon: LucideIcon; color: string; title: string; desc: string }
|
type Area = { Icon: LucideIcon; color: string; title: string; desc: string }
|
||||||
const RESEARCH_AREAS: Record<'fa' | 'en', Area[]> = {
|
const RESEARCH_AREAS: Record<'fa' | 'en', Area[]> = {
|
||||||
fa: [
|
fa: [
|
||||||
{ Icon: Telescope, color: '#c9a227', title: 'آیندهنگاری علمی', desc: 'بهجای پیشبینی تکنقطهای، با سناریوپردازی و تحلیل روند، چند آیندهٔ محتمل صنعت فولاد را ترسیم میکنیم.' },
|
{ Icon: Telescope, color: '#CD9E53', title: 'آیندهنگاری علمی', desc: 'بهجای پیشبینی تکنقطهای، با سناریوپردازی و تحلیل روند، چند آیندهٔ محتمل صنعت فولاد را ترسیم میکنیم.' },
|
||||||
{ Icon: Database, color: '#2471a3', title: 'تحلیل دادهمحور', desc: 'هر بینش بر پایهٔ دادههای معتبر جهانی و داخلی است، نه گمانهزنی؛ تصمیمسازی با شواهد قابلاتکا.' },
|
{ Icon: Database, color: '#2471a3', title: 'تحلیل دادهمحور', desc: 'هر بینش بر پایهٔ دادههای معتبر جهانی و داخلی است، نه گمانهزنی؛ تصمیمسازی با شواهد قابلاتکا.' },
|
||||||
{ Icon: Scale, color: '#1e8449', title: 'بیطرفی و استقلال', desc: 'تحلیلهای ما مستقل از منافع کوتاهمدت است؛ شفاف و بدون جانبداری از یک بازیگر خاص.' },
|
{ Icon: Scale, color: '#1e8449', title: 'بیطرفی و استقلال', desc: 'تحلیلهای ما مستقل از منافع کوتاهمدت است؛ شفاف و بدون جانبداری از یک بازیگر خاص.' },
|
||||||
{ Icon: Users, color: '#7d3c98', title: 'هماندیشی خبرگان', desc: 'شبکهای از مدیران، پژوهشگران و فعالان صنعت که دانش پراکنده را به بینش جمعی تبدیل میکند.' },
|
{ Icon: Users, color: '#7d3c98', title: 'هماندیشی خبرگان', desc: 'شبکهای از مدیران، پژوهشگران و فعالان صنعت که دانش پراکنده را به بینش جمعی تبدیل میکند.' },
|
||||||
{ Icon: Lightbulb, color: '#c0392b', title: 'از تحلیل تا اقدام', desc: 'یافتهها را به راهبردهای عملی و قابلاجرا برای رهبران صنعت ترجمه میکنیم، نه گزارشهای روی طاقچه.' },
|
{ Icon: Lightbulb, color: '#c0392b', title: 'از تحلیل تا اقدام', desc: 'یافتهها را به راهبردهای عملی و قابلاجرا برای رهبران صنعت ترجمه میکنیم، نه گزارشهای روی طاقچه.' },
|
||||||
],
|
],
|
||||||
en: [
|
en: [
|
||||||
{ 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: Telescope, color: '#CD9E53', 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: 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: 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: Users, color: '#7d3c98', title: 'Expert Collaboration', desc: 'A network of executives, researchers and practitioners turning scattered knowledge into collective insight.' },
|
||||||
|
|
|
||||||
|
|
@ -2,8 +2,8 @@ import { useRef, useState } from 'react'
|
||||||
import { motion, AnimatePresence, useScroll, useMotionValueEvent } from 'framer-motion'
|
import { motion, AnimatePresence, useScroll, useMotionValueEvent } from 'framer-motion'
|
||||||
import { useLang } from '@/context/LangContext'
|
import { useLang } from '@/context/LangContext'
|
||||||
|
|
||||||
const NAVY = '#071d49'
|
const NAVY = '#032340'
|
||||||
const GOLD = '#c9a227'
|
const GOLD = '#CD9E53'
|
||||||
const EASE = [0.22, 1, 0.36, 1] as const
|
const EASE = [0.22, 1, 0.36, 1] as const
|
||||||
|
|
||||||
type Feat = {
|
type Feat = {
|
||||||
|
|
|
||||||
|
|
@ -4,8 +4,8 @@ import { BarChart3, Cpu, Mountain, Globe, Zap, ChevronLeft, ChevronRight } from
|
||||||
import { useLang } from '@/context/LangContext'
|
import { useLang } from '@/context/LangContext'
|
||||||
import { RADAR_ITEMS, type RadarItem, type RadarCategory } from '@/content/radar'
|
import { RADAR_ITEMS, type RadarItem, type RadarCategory } from '@/content/radar'
|
||||||
|
|
||||||
const NAVY = '#071d49'
|
const NAVY = '#032340'
|
||||||
const GOLD = '#c9a227'
|
const GOLD = '#CD9E53'
|
||||||
const PER_PAGE = 8
|
const PER_PAGE = 8
|
||||||
|
|
||||||
const CATEGORY_ICON: Record<RadarCategory, typeof BarChart3> = {
|
const CATEGORY_ICON: Record<RadarCategory, typeof BarChart3> = {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue