diff --git a/DESIGN_SYSTEM.md b/DESIGN_SYSTEM.md index cf43d47..077e152 100644 --- a/DESIGN_SYSTEM.md +++ b/DESIGN_SYSTEM.md @@ -85,8 +85,8 @@ This is a professional, corporate website for a Swiss Bitcoin think tank. The de ```css /* The signature gradient - light blue-gray to bright blue */ ---gradient-blue-start: #abc2cc; /* Light blue-gray */ ---gradient-blue-end: #00abfb; /* Bright cyan-blue */ +--gradient-blue-start: #25b7ff; /* Light blue-gray */ +--gradient-blue-end: #129bda; /* Bright cyan-blue */ /* Opacity variants for different contexts */ --gradient-blue-opacity-subtle: 0.08; /* Very light backgrounds */ @@ -100,12 +100,12 @@ This is a professional, corporate website for a Swiss Bitcoin think tank. The de ```css /* Full gradient - for buttons, accents */ .swiss-blue-gradient { - background: linear-gradient(to right, #abc2cc 0%, #00abfb 100%); + background: linear-gradient(to right, #25b7ff 0%, #129bda 100%); } /* Gradient text - for headings, links */ .swiss-blue-gradient-text { - background: linear-gradient(to right, #abc2cc 0%, #00abfb 100%); + background: linear-gradient(to right, #25b7ff 0%, #129bda 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; @@ -119,7 +119,7 @@ This is a professional, corporate website for a Swiss Bitcoin think tank. The de /* Accent bar (used as section dividers) */ .swiss-blue-gradient-accent { - background: linear-gradient(to right, #abc2cc 0%, #00abfb 100%); + background: linear-gradient(to right, #25b7ff 0%, #129bda 100%); height: 3px; width: 60px; border-radius: 2px; @@ -413,7 +413,7 @@ rounded-2xl: 1rem; /* 16px - cards */ **Primary Button (CTA - Blue Gradient)** ```css .btn-primary { - background: linear-gradient(to right, #abc2cc 0%, #00abfb 100%); + background: linear-gradient(to right, #25b7ff 0%, #129bda 100%); color: white; font-weight: 500; padding: 0.75rem 2rem; /* h-11 px-8 for lg size */ @@ -537,7 +537,7 @@ padding: 0 2rem; /* px-8 */ left: 0; right: 0; height: 2px; - background: linear-gradient(to right, #abc2cc 0%, #00abfb 100%); + background: linear-gradient(to right, #25b7ff 0%, #129bda 100%); opacity: 0; transition: opacity 300ms ease-in-out; } @@ -561,7 +561,7 @@ padding: 0 2rem; /* px-8 */ } /* Text inside uses gradient */ .pill-hero-text { - background: linear-gradient(to right, #abc2cc 0%, #00abfb 100%); + background: linear-gradient(to right, #25b7ff 0%, #129bda 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; @@ -585,7 +585,7 @@ padding: 0 2rem; /* px-8 */ } /* Text uses gradient */ .badge-tag-blue span { - background: linear-gradient(to right, #abc2cc 0%, #00abfb 100%); + background: linear-gradient(to right, #25b7ff 0%, #129bda 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; diff --git a/src/app/globals.css b/src/app/globals.css index 0ddadec..e07cad8 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -36,7 +36,7 @@ --input: 214.3 31.8% 91.4%; --ring: 222.2 84% 4.9%; --radius: 0.5rem; - + /* ============================================ BRAND COLORS - SWISS BITCOIN INSTITUTE ============================================ */ @@ -44,36 +44,39 @@ --primary-brand: 25 95% 53%; --primary-brand-hover: 25 95% 48%; --primary-brand-light: 25 95% 75%; - + /* Bitcoin Orange */ --bitcoin-orange: 25 95% 53%; --bitcoin-orange-hover: 25 95% 48%; --bitcoin-orange-light: 25 95% 75%; - + /* Swiss Blue - Primary Brand Color */ --swiss-blue: 210 100% 50%; --swiss-blue-hover: 210 100% 45%; --swiss-blue-light: 210 100% 75%; - + /* Swiss Red */ --swiss-red: 0 84% 50%; --swiss-red-hover: 0 84% 45%; --swiss-red-light: 0 84% 75%; - + /* ============================================ GRADIENT COLORS - CENTRALIZED ============================================ Update these hex values to change gradients site-wide ============================================ */ - --gradient-blue-start: #abc2cc; /* Light blue-gray */ - --gradient-blue-end: #00abfb; /* Bright blue */ - + --gradient-blue-start: #25b7ff; + /* Subtle blue shift */ + --gradient-blue-end: #129bda; + /* Refined blue */ + /* Gradient opacity variants */ --gradient-blue-opacity-subtle: 0.08; --gradient-blue-opacity-light: 0.15; --gradient-blue-opacity-medium: 0.25; - --gradient-blue-opacity-hero: 0.03; /* Very light for hero backgrounds */ - + --gradient-blue-opacity-hero: 0.03; + /* Very light for hero backgrounds */ + /* ============================================ GRAY SCALE ============================================ */ @@ -87,18 +90,25 @@ --gray-700: 0 0% 25%; --gray-800: 0 0% 15%; --gray-900: 0 0% 9%; - + /* ============================================ SPACING & LAYOUT ============================================ */ - --section-padding-y: 4rem; /* Base: 64px */ - --section-padding-y-md: 5rem; /* Medium: 80px */ - --section-padding-y-lg: 6rem; /* Large: 96px */ - --hero-padding-y: 6rem; /* Hero: 96px */ - --hero-padding-y-md: 8rem; /* Hero MD: 128px */ - --hero-padding-y-lg: 10rem; /* Hero LG: 160px */ - --container-max-width: 80rem; /* 1280px */ - + --section-padding-y: 4rem; + /* Base: 64px */ + --section-padding-y-md: 5rem; + /* Medium: 80px */ + --section-padding-y-lg: 6rem; + /* Large: 96px */ + --hero-padding-y: 6rem; + /* Hero: 96px */ + --hero-padding-y-md: 8rem; + /* Hero MD: 128px */ + --hero-padding-y-lg: 10rem; + /* Hero LG: 160px */ + --container-max-width: 80rem; + /* 1280px */ + /* ============================================ TYPOGRAPHY ============================================ */ @@ -107,18 +117,20 @@ --letter-spacing-normal: -0.01em; --line-height-relaxed: 1.75; --line-height-tight: 1.25; - + /* ============================================ TRANSITIONS & ANIMATIONS ============================================ */ --transition-base: 200ms ease-in-out; --transition-smooth: 300ms ease-in-out; --transition-slow: 500ms ease-in-out; - + /* Hover effects */ - --hover-scale: 1.05; /* Logo/button hover scale */ - --hover-scale-subtle: 1.02; /* Subtle hover scale */ - + --hover-scale: 1.05; + /* Logo/button hover scale */ + --hover-scale-subtle: 1.02; + /* Subtle hover scale */ + /* ============================================ SHADOWS & EFFECTS ============================================ */ @@ -129,7 +141,7 @@ --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); --shadow-gradient-glow: 0 0 20px rgba(0, 171, 251, 0.15); --shadow-gradient-glow-hover: 0 0 30px rgba(0, 171, 251, 0.25); - + /* ============================================ SIDEBAR (if needed) ============================================ */ @@ -157,7 +169,7 @@ --muted-foreground: 215 20.2% 65.1%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; - + /* Brand colors - adjusted for dark mode */ --swiss-blue: 210 100% 60%; --swiss-blue-hover: 210 100% 65%; @@ -173,66 +185,76 @@ * { @apply border-border; } - + body { @apply bg-background text-foreground font-normal; font-family: var(--font-family-base); } - + /* Typography hierarchy - SEO optimized */ h1 { @apply font-bold; letter-spacing: var(--letter-spacing-tight); } - - h2, h3, h4, h5, h6 { + + h2, + h3, + h4, + h5, + h6 { @apply font-semibold; } - - strong, b { + + strong, + b { @apply font-semibold; } - + /* Semantic HTML improvements for SEO */ - h1, h2, h3, h4, h5, h6 { + h1, + h2, + h3, + h4, + h5, + h6 { @apply text-gray-900; } - + /* Article content readability */ .article-content { font-size: 100%; } - + .article-content p { margin-bottom: 1.5em; line-height: var(--line-height-relaxed); } - + .article-content h2 { margin-top: 2.5em; margin-bottom: 1em; } - + .article-content h3 { margin-top: 2em; margin-bottom: 0.875em; } - + .article-content ul, .article-content ol { margin-bottom: 1.5em; } - + .article-content li { margin-bottom: 0.5em; } - + /* Glossary styles */ .glossary-term { position: relative; z-index: 1; } - + .glossary-tooltip { z-index: 9999 !important; } @@ -242,6 +264,7 @@ COMPONENT CLASSES - SWISS DESIGN SYSTEM ============================================ */ @layer components { + /* ============================================ LAYOUT COMPONENTS ============================================ */ @@ -249,70 +272,70 @@ padding-top: var(--hero-padding-y); padding-bottom: var(--hero-padding-y); } - + @media (min-width: 768px) { .swiss-hero { padding-top: var(--hero-padding-y-md); padding-bottom: var(--hero-padding-y-md); } } - + @media (min-width: 1024px) { .swiss-hero { padding-top: var(--hero-padding-y-lg); padding-bottom: var(--hero-padding-y-lg); } } - + .swiss-section { padding-top: calc(var(--section-padding-y) * 0.85); padding-bottom: var(--section-padding-y); } - + @media (min-width: 768px) { .swiss-section { padding-top: calc(var(--section-padding-y-md) * 0.85); padding-bottom: var(--section-padding-y-md); } } - + @media (min-width: 1024px) { .swiss-section { padding-top: calc(var(--section-padding-y-lg) * 0.85); padding-bottom: var(--section-padding-y-lg); } } - + /* Reduce spacing for first section after hero */ - .swiss-hero + .swiss-section { + .swiss-hero+.swiss-section { padding-top: calc(var(--section-padding-y) * 0.85); } - + @media (min-width: 768px) { - .swiss-hero + .swiss-section { + .swiss-hero+.swiss-section { padding-top: calc(var(--section-padding-y-md) * 0.85); } } - + @media (min-width: 1024px) { - .swiss-hero + .swiss-section { + .swiss-hero+.swiss-section { padding-top: calc(var(--section-padding-y-lg) * 0.85); } } - + .swiss-section-sm { @apply py-8 md:py-12; } - + .swiss-grid { @apply container mx-auto px-4 sm:px-6 lg:px-8; max-width: var(--container-max-width); } - + .swiss-gradient { @apply bg-gradient-to-b from-gray-50 to-white; } - + /* ============================================ GRADIENT SYSTEM - CENTRALIZED ============================================ @@ -321,7 +344,7 @@ .swiss-blue-gradient { background: linear-gradient(to right, var(--gradient-blue-start) 0%, var(--gradient-blue-end) 100%); } - + .swiss-blue-gradient-text { background: linear-gradient(to right, var(--gradient-blue-start) 0%, var(--gradient-blue-end) 100%); -webkit-background-clip: text; @@ -329,66 +352,58 @@ -webkit-text-fill-color: transparent; color: transparent; } - + .swiss-blue-gradient-hover:hover { background: linear-gradient(to right, var(--gradient-blue-start) 0%, var(--gradient-blue-end) 100%); filter: brightness(0.95); } - + .swiss-blue-gradient-subtle { - background: linear-gradient( - 135deg, - color-mix(in srgb, var(--gradient-blue-start) var(--gradient-blue-opacity-subtle), transparent), - color-mix(in srgb, var(--gradient-blue-end) var(--gradient-blue-opacity-subtle), transparent) - ); + background: linear-gradient(135deg, + color-mix(in srgb, var(--gradient-blue-start) var(--gradient-blue-opacity-subtle), transparent), + color-mix(in srgb, var(--gradient-blue-end) var(--gradient-blue-opacity-subtle), transparent)); } - + /* Very light gradient for hero backgrounds (replaces orange) */ .swiss-blue-gradient-hero { - background: linear-gradient( - 135deg, - color-mix(in srgb, var(--gradient-blue-start) var(--gradient-blue-opacity-hero), transparent), - transparent, - color-mix(in srgb, var(--gradient-blue-end) var(--gradient-blue-opacity-hero), transparent) - ); - } - + background: linear-gradient(135deg, + color-mix(in srgb, var(--gradient-blue-start) var(--gradient-blue-opacity-hero), transparent), + transparent, + color-mix(in srgb, var(--gradient-blue-end) var(--gradient-blue-opacity-hero), transparent)); + } + /* Fallback for browsers that don't support color-mix */ @supports not (color-mix(in srgb, white, transparent)) { .swiss-blue-gradient-subtle { - background: linear-gradient( - 135deg, - rgba(171, 194, 204, var(--gradient-blue-opacity-subtle)), - rgba(0, 171, 251, var(--gradient-blue-opacity-subtle)) - ); + background: linear-gradient(135deg, + rgba(171, 194, 204, var(--gradient-blue-opacity-subtle)), + rgba(0, 171, 251, var(--gradient-blue-opacity-subtle))); } - + .swiss-blue-gradient-hero { - background: linear-gradient( - 135deg, - rgba(171, 194, 204, var(--gradient-blue-opacity-hero)), - transparent, - rgba(0, 171, 251, var(--gradient-blue-opacity-hero)) - ); + background: linear-gradient(135deg, + rgba(171, 194, 204, var(--gradient-blue-opacity-hero)), + transparent, + rgba(0, 171, 251, var(--gradient-blue-opacity-hero))); } } - + .swiss-blue-gradient-accent { background: linear-gradient(to right, var(--gradient-blue-start) 0%, var(--gradient-blue-end) 100%); height: 3px; width: 60px; border-radius: 2px; } - + .swiss-blue-gradient-glow { box-shadow: var(--shadow-gradient-glow); transition: box-shadow var(--transition-smooth); } - + .swiss-blue-gradient-glow:hover { box-shadow: var(--shadow-gradient-glow-hover); } - + /* Group hover support for gradient text */ .group:hover .swiss-blue-gradient-text-hover { background: linear-gradient(to right, var(--gradient-blue-start) 0%, var(--gradient-blue-end) 100%); @@ -397,44 +412,44 @@ -webkit-text-fill-color: transparent; color: transparent; } - + /* Simple hover color fallback */ .hover-gradient-blue:hover { color: var(--gradient-blue-end); } - + /* ============================================ BUTTON HOVER EFFECTS (Logo-style scale) ============================================ */ .btn-hover-scale { transition: transform var(--transition-smooth); } - + .btn-hover-scale:hover { transform: scale(var(--hover-scale)); } - + .btn-hover-scale-subtle { transition: transform var(--transition-smooth); } - + .btn-hover-scale-subtle:hover { transform: scale(var(--hover-scale-subtle)); } - + /* Apply to all buttons with gradient */ .swiss-blue-gradient.btn-hover-scale, button.swiss-blue-gradient, a.swiss-blue-gradient { transition: transform var(--transition-smooth), box-shadow var(--transition-smooth); } - + .swiss-blue-gradient.btn-hover-scale:hover, button.swiss-blue-gradient:hover, a.swiss-blue-gradient:hover { transform: scale(var(--hover-scale)); } - + /* ============================================ PILL/BADGE COMPONENTS ============================================ */ @@ -442,34 +457,34 @@ .pill-hero { @apply inline-flex items-center px-4 py-2 rounded-full bg-swiss-blue/10 text-sm font-medium; } - + .pill-hero-text { @apply swiss-blue-gradient-text; } - + /* Tag Pill - Smaller, no emoji, for categories/tags */ .pill-tag { @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium; } - + /* Blue variant for tags */ .pill-tag-blue { @apply bg-swiss-blue/10 swiss-blue-gradient-text border-0; } - + .pill-tag-blue:hover { @apply bg-swiss-blue/20; } - + /* Gray variant for tags */ .pill-tag-gray { @apply bg-gray-100 text-gray-700 border-0; } - + .pill-tag-gray:hover { @apply bg-gray-200; } - + /* ============================================ LINK STYLES (Research Briefs Style) ============================================ */ @@ -478,12 +493,12 @@ text-decoration-thickness: 1px; transition: color var(--transition-base); } - + .link-research:hover { @apply swiss-blue-gradient-text; text-decoration-color: currentColor; } - + /* ============================================ FORM ELEMENTS ============================================ */ @@ -494,13 +509,13 @@ --ring-color: hsl(var(--swiss-blue)); border-color: hsl(var(--swiss-blue)); } - + input:focus-visible:focus-visible, textarea:focus-visible:focus-visible, select:focus-visible:focus-visible { ring-color: hsl(var(--swiss-blue)); } - + /* ============================================ CARD COMPONENTS ============================================ */ @@ -509,69 +524,65 @@ @apply bg-white rounded-2xl p-8 shadow-lg border border-gray-100; transition: box-shadow var(--transition-smooth), border-color var(--transition-smooth); } - + .card-general:hover { @apply shadow-xl border-swiss-blue/30; } - + /* Glossary Card - Compact, for term lists */ .card-glossary { @apply bg-white rounded-xl p-6 shadow-sm border border-gray-200; transition: box-shadow var(--transition-base), border-color var(--transition-base); } - + .card-glossary:hover { @apply shadow-md border-swiss-blue/30; } - + /* CTA Card - For call-to-action sections */ .card-cta { @apply bg-gradient-to-br from-white to-gray-50 rounded-2xl p-8 shadow-lg border border-gray-100; transition: box-shadow var(--transition-smooth); } - + .card-cta:hover { @apply shadow-2xl; } - + /* CTA Section Background - Subtle blue gradient */ .cta-section-bg { - background: linear-gradient( - 135deg, - color-mix(in srgb, var(--gradient-blue-start) 8%, #1f2937), - color-mix(in srgb, var(--gradient-blue-end) 12%, #1f2937), - color-mix(in srgb, var(--gradient-blue-start) 8%, #1f2937) - ); - } - + background: linear-gradient(135deg, + color-mix(in srgb, var(--gradient-blue-start) 8%, #1f2937), + color-mix(in srgb, var(--gradient-blue-end) 12%, #1f2937), + color-mix(in srgb, var(--gradient-blue-start) 8%, #1f2937)); + } + /* Fallback for browsers that don't support color-mix */ @supports not (color-mix(in srgb, white, transparent)) { .cta-section-bg { - background: linear-gradient( - 135deg, - rgba(171, 194, 204, 0.08), - rgba(0, 171, 251, 0.12), - rgba(171, 194, 204, 0.08) - ); + background: linear-gradient(135deg, + rgba(171, 194, 204, 0.08), + rgba(0, 171, 251, 0.12), + rgba(171, 194, 204, 0.08)); } } - + /* Research Card - For article/research highlights */ .card-research { @apply bg-white rounded-2xl p-4 sm:p-8 shadow-lg border border-gray-100; transition: box-shadow var(--transition-smooth); } - + .card-research:hover { @apply shadow-2xl; } - + /* Card with gradient hover accent */ .card-gradient-hover { position: relative; overflow: hidden; } - + .card-gradient-hover::before { content: ''; position: absolute; @@ -583,11 +594,11 @@ opacity: 0; transition: opacity var(--transition-smooth); } - + .card-gradient-hover:hover::before { opacity: 1; } - + /* ============================================ TYPOGRAPHY COMPONENTS ============================================ */ @@ -596,94 +607,114 @@ font-family: var(--font-family-base); letter-spacing: var(--letter-spacing-normal); } - + .swiss-prose h1 { @apply text-2xl font-semibold text-gray-900 mb-4 mt-8 leading-tight; letter-spacing: var(--letter-spacing-tight); } - + .swiss-prose h2 { @apply text-xl font-semibold text-gray-900 mb-3 mt-6 leading-tight; letter-spacing: var(--letter-spacing-tight); } - + .swiss-prose h3 { @apply text-lg font-medium text-gray-800 mb-3 mt-5 leading-tight; } - + .swiss-prose h4 { @apply text-base font-medium text-gray-800 mb-2 mt-4 leading-tight; } - + .swiss-prose p { @apply text-gray-700 mb-4 leading-relaxed; } - + .swiss-prose strong { @apply text-gray-900 font-semibold; } - + .swiss-prose em { @apply text-gray-600 italic; } - + .swiss-prose-lg { @apply text-lg leading-relaxed text-gray-700; } - + /* ============================================ TYPOGRAPHY - HEADINGS (Hero Section Blueprint) ============================================ */ h1 { @apply text-gray-900; - font-size: clamp(2rem, 5vw, 3rem); /* Responsive: 32px to 48px */ - font-weight: 700; /* Bold */ - line-height: 1.2; /* Tight */ + font-size: clamp(2rem, 5vw, 3rem); + /* Responsive: 32px to 48px */ + font-weight: 700; + /* Bold */ + line-height: 1.2; + /* Tight */ letter-spacing: var(--letter-spacing-tight); - margin-bottom: 2rem; /* mb-8 */ + margin-bottom: 2rem; + /* mb-8 */ } - + h2 { @apply text-gray-900; - font-size: clamp(1.75rem, 4vw, 2.5rem); /* Responsive: 28px to 40px */ - font-weight: 600; /* Semibold */ - line-height: 1.25; /* Tight */ + font-size: clamp(1.75rem, 4vw, 2.5rem); + /* Responsive: 28px to 40px */ + font-weight: 600; + /* Semibold */ + line-height: 1.25; + /* Tight */ letter-spacing: var(--letter-spacing-tight); - margin-bottom: 2rem; /* mb-8 */ + margin-bottom: 2rem; + /* mb-8 */ } - + h3 { @apply text-gray-900; - font-size: clamp(1.5rem, 3vw, 2rem); /* Responsive: 24px to 32px */ - font-weight: 600; /* Semibold */ + font-size: clamp(1.5rem, 3vw, 2rem); + /* Responsive: 24px to 32px */ + font-weight: 600; + /* Semibold */ line-height: 1.3; letter-spacing: var(--letter-spacing-normal); - margin-bottom: 1.5rem; /* mb-6 */ + margin-bottom: 1.5rem; + /* mb-6 */ } - + h4 { @apply text-gray-900; - font-size: clamp(1.25rem, 2.5vw, 1.5rem); /* Responsive: 20px to 24px */ - font-weight: 600; /* Semibold */ + font-size: clamp(1.25rem, 2.5vw, 1.5rem); + /* Responsive: 20px to 24px */ + font-weight: 600; + /* Semibold */ line-height: 1.4; letter-spacing: var(--letter-spacing-normal); - margin-bottom: 1rem; /* mb-4 */ + margin-bottom: 1rem; + /* mb-4 */ } - + h5 { @apply text-gray-800; - font-size: clamp(1.125rem, 2vw, 1.25rem); /* Responsive: 18px to 20px */ - font-weight: 600; /* Semibold */ + font-size: clamp(1.125rem, 2vw, 1.25rem); + /* Responsive: 18px to 20px */ + font-weight: 600; + /* Semibold */ line-height: 1.5; - margin-bottom: 0.75rem; /* mb-3 */ + margin-bottom: 0.75rem; + /* mb-3 */ } - + h6 { @apply text-gray-700; - font-size: clamp(1rem, 1.5vw, 1.125rem); /* Responsive: 16px to 18px */ - font-weight: 600; /* Semibold */ + font-size: clamp(1rem, 1.5vw, 1.125rem); + /* Responsive: 16px to 18px */ + font-weight: 600; + /* Semibold */ line-height: 1.5; - margin-bottom: 0.5rem; /* mb-2 */ + margin-bottom: 0.5rem; + /* mb-2 */ } } @@ -691,16 +722,17 @@ UTILITY CLASSES ============================================ */ @layer utilities { + /* Transition utilities */ .transition-base { transition: all var(--transition-base); } - + .transition-smooth { transition: all var(--transition-smooth); } - + .transition-slow { transition: all var(--transition-slow); } -} +} \ No newline at end of file diff --git a/src/components/articles/ArticleCard.tsx b/src/components/articles/ArticleCard.tsx index 6eac766..6ae96a7 100644 --- a/src/components/articles/ArticleCard.tsx +++ b/src/components/articles/ArticleCard.tsx @@ -11,7 +11,7 @@ interface ArticleCardProps { const ArticleCard = ({ article, author }: ArticleCardProps) => { const headerImage = article.headerImage ? `/sbi-research-headers/${article.headerImage}` : null; - + return (
@@ -23,15 +23,15 @@ const ArticleCard = ({ article, author }: ArticleCardProps) => { fill className="object-cover transition-transform duration-300 group-hover:scale-105" /> -
+
)}
- - + + Block {article.blockHeight}
@@ -46,15 +46,15 @@ const ArticleCard = ({ article, author }: ArticleCardProps) => { {article.readTime}
- +

{article.title}

- +

{article.excerpt}

- +
{article.tags.map((tag) => ( @@ -62,7 +62,7 @@ const ArticleCard = ({ article, author }: ArticleCardProps) => { ))}
- +
@@ -70,7 +70,7 @@ const ArticleCard = ({ article, author }: ArticleCardProps) => { {author?.name || article.author}
- +
Read Full Report →
diff --git a/src/components/articles/ArticleContent.tsx b/src/components/articles/ArticleContent.tsx index 064fb96..c52dfcd 100644 --- a/src/components/articles/ArticleContent.tsx +++ b/src/components/articles/ArticleContent.tsx @@ -15,7 +15,7 @@ interface ArticleContentProps { const ArticleContent = ({ article, author }: ArticleContentProps) => { const headerImage = article.headerImage ? `/sbi-research-headers/${article.headerImage}` : null; - + return (
{/* Article Header Image */} @@ -28,10 +28,10 @@ const ArticleContent = ({ article, author }: ArticleContentProps) => { className="object-cover" priority /> -
+
)} - + {/* Article Header */}
@@ -41,15 +41,15 @@ const ArticleContent = ({ article, author }: ArticleContentProps) => { ))}
- +

{article.title}

- +
{article.id}
- - + + Block {article.blockHeight}
@@ -76,10 +76,10 @@ const ArticleContent = ({ article, author }: ArticleContentProps) => { const teamMemberSlug = articleToTeamSlugMap[article.author] || article.author; const teamMember = getTeamMemberBySlug(teamMemberSlug, 'fellow'); // Prefer fellow if exists const isFellow = teamMember?.category === 'fellow'; - + if (isFellow) { return ( - @@ -91,15 +91,15 @@ const ArticleContent = ({ article, author }: ArticleContentProps) => { })()}
- +

{article.excerpt}

- + {/* Table of Contents */} - + {/* Article Content with Glossary */}
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index f8433f7..779997a 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -217,7 +217,7 @@ const Home = () => { fill className="object-cover transition-transform duration-300 group-hover:scale-105" /> -
+
)}
diff --git a/tailwind.config.ts b/tailwind.config.ts index f0aa286..9d444ee 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -58,8 +58,8 @@ export default { }, // Gradient colors (for use in Tailwind classes) 'gradient-blue': { - start: '#abc2cc', - end: '#00abfb', + start: '#25b7ff', + end: '#129bda', }, gray: { 50: 'hsl(var(--gray-50))',