danny
/
tyndale-ai-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: rebrand to Woolnoth with new color palette and typography 

Replace Tyndale AI branding with Woolnoth identity including:
- New brand colors: Deep Navy (#24293e), Soft Light Grey (#f4f4f6),
  Cool Slate Blue (#5c6f91), and Burnt Coral Red (#e94f37)
- Updated typography from Montserrat/Outfit to Inter/Plus Jakarta Sans
- Add reusable Logo component for consistent branding
- Update favicon and page title
- Apply new color scheme across all components (chat, landing, pages)
- Update CSS variables and Tailwind config for brand consistency

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Danny 2026-01-13 08:23:36 -06:00
parent b352a73190
commit 6fb6f68998
16 changed files with 214 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
index.html
View File

@ -2,14 +2,14 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tyndale AI - Algorithmic Trading Intelligence</title> <title>Woolnoth - Algorithmic Trading Intelligence</title>
<!-- Google Fonts --> <!-- Google Fonts: Inter (body) + Plus Jakarta Sans (headings) -->
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap" rel="stylesheet">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

7
public/favicon.svg Normal file
View File

@ -0,0 +1,7 @@
<svg width="32" height="32" viewBox="0 0 1852 1852" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1851.88 0H0V1851.88H1851.88V0Z" fill="#E94F37"/>
<path d="M709.789 379.562C721.959 409.745 707.517 438.793 701.675 467.028C646.988 726.993 590.679 986.47 535.019 1246.11C527.554 1281.16 521.875 1316.54 513.923 1351.43C506.783 1382.58 486.336 1397.35 455.991 1396.86C439.114 1396.7 426.944 1390.53 419.966 1367C431.487 1311.83 443.983 1250.65 456.965 1189.48C491.367 1027.53 525.931 865.413 560.496 703.463C580.78 608.532 600.253 513.601 621.511 418.995C633.033 366.743 658.347 356.195 709.789 379.562Z" fill="#F4F4F6"/>
<path d="M1427.37 285.608C1439.54 315.791 1425.1 344.838 1419.26 373.074C1364.57 633.038 1308.26 892.516 1252.6 1152.16C1245.14 1187.21 1239.46 1222.58 1231.51 1257.47C1224.36 1288.63 1203.92 1303.4 1173.57 1302.91C1156.7 1302.75 1144.53 1296.58 1137.55 1273.05C1149.07 1217.88 1161.56 1156.7 1174.55 1095.52C1208.95 933.571 1243.51 771.459 1278.08 609.508C1298.36 514.578 1317.84 419.647 1339.09 325.041C1350.61 272.951 1376.09 262.403 1427.37 285.608Z" fill="#F4F4F6"/>
<path d="M835.064 896.084C847.235 926.267 832.792 955.314 826.95 983.55C772.264 1243.51 785.084 1167.73 729.261 1427.37C721.796 1462.42 716.117 1497.8 708.003 1532.69C700.863 1563.68 680.416 1578.61 650.071 1578.13C633.194 1577.8 621.024 1571.8 614.046 1548.27C625.567 1493.09 638.063 1431.92 651.045 1370.74C685.447 1208.79 650.882 1382.1 685.447 1219.98C705.731 1125.22 725.366 1030.12 746.462 935.517C758.308 883.265 783.623 872.717 835.064 896.084Z" fill="#F4F4F6"/>
<path d="M1087.24 800.18C1099.41 830.364 1084.97 859.411 1079.13 887.647C1024.44 1147.61 1037.26 1071.83 981.436 1331.47C973.971 1366.52 968.292 1401.9 960.178 1436.78C953.038 1467.78 932.591 1482.71 902.246 1482.22C885.369 1481.9 873.199 1475.89 866.221 1452.36C877.742 1397.19 890.238 1336.01 903.22 1274.83C937.622 1112.88 903.057 1286.19 937.622 1124.08C957.906 1029.31 977.541 934.219 998.637 839.613C1010.48 787.523 1035.8 776.975 1087.24 800.18Z" fill="#F4F4F6"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

10
src/components/chat/ChatInput.tsx
View File

@ -30,13 +30,13 @@ const ChatInput = ({ onSend, disabled, mode, placeholder = 'Ask a question...' }
} }
const modeFocusColors = { const modeFocusColors = {
general: 'focus-visible:ring-blue-500', general: 'focus-visible:ring-brand-slate',
strategy: 'focus-visible:ring-purple-500', strategy: 'focus-visible:ring-brand-coral',
} }
const modeButtonColors = { const modeButtonColors = {
general: 'bg-blue-500 hover:bg-blue-600', general: 'bg-brand-slate hover:bg-brand-slate/80',
strategy: 'bg-purple-500 hover:bg-purple-600', strategy: 'bg-brand-coral hover:bg-brand-coral/80',
} }
return ( return (
@ -48,7 +48,7 @@ const ChatInput = ({ onSend, disabled, mode, placeholder = 'Ask a question...' }
placeholder={placeholder} placeholder={placeholder}
disabled={disabled} disabled={disabled}
className={cn( className={cn(
'flex-1 bg-slate-700 border-slate-600 text-white placeholder:text-slate-400', 'flex-1 bg-brand-navy/50 border-brand-slate/30 text-white placeholder:text-brand-grey/50',
modeFocusColors[mode] modeFocusColors[mode]
)} )}
/> />

10
src/components/chat/ChatMessage.tsx
View File

@ -14,11 +14,11 @@ const ChatMessage = ({ message, mode }: ChatMessageProps) => {
const modeColors = { const modeColors = {
general: { general: {
userBg: 'bg-blue-600 border-blue-500/30', userBg: 'bg-brand-slate border-brand-slate/30',
userText: 'text-white', userText: 'text-white',
}, },
strategy: { strategy: {
userBg: 'bg-purple-600 border-purple-500/30', userBg: 'bg-brand-coral border-brand-coral/30',
userText: 'text-white', userText: 'text-white',
}, },
} }
@ -28,7 +28,7 @@ const ChatMessage = ({ message, mode }: ChatMessageProps) => {
return ( return (
<div className={cn('flex gap-3 mb-4', isUser ? 'justify-end' : 'justify-start')}> <div className={cn('flex gap-3 mb-4', isUser ? 'justify-end' : 'justify-start')}>
{!isUser && ( {!isUser && (
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-slate-700 flex items-center justify-center"> <div className="flex-shrink-0 w-8 h-8 rounded-full bg-brand-slate/30 flex items-center justify-center">
<Bot className="h-5 w-5 text-white" /> <Bot className="h-5 w-5 text-white" />
</div> </div>
)} )}
@ -38,7 +38,7 @@ const ChatMessage = ({ message, mode }: ChatMessageProps) => {
'max-w-[80%] rounded-2xl px-4 py-3 border', 'max-w-[80%] rounded-2xl px-4 py-3 border',
isUser isUser
? `${colors.userBg} ${colors.userText}` ? `${colors.userBg} ${colors.userText}`
: 'bg-slate-700 text-white border-slate-600' : 'bg-brand-navy/50 text-white border-brand-slate/30'
)} )}
> >
{isUser ? ( {isUser ? (
@ -53,7 +53,7 @@ const ChatMessage = ({ message, mode }: ChatMessageProps) => {
</div> </div>
{isUser && ( {isUser && (
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-slate-600 flex items-center justify-center"> <div className="flex-shrink-0 w-8 h-8 rounded-full bg-brand-slate/50 flex items-center justify-center">
<User className="h-5 w-5 text-white" /> <User className="h-5 w-5 text-white" />
</div> </div>
)} )}

12
src/components/chat/ModeToggle.tsx
View File

@ -23,15 +23,15 @@ const ModeToggle = ({ mode, onToggle, disabled }: ModeToggleProps) => {
const modeConfig = { const modeConfig = {
general: { general: {
label: 'General Assistant', label: 'General Assistant',
bg: 'bg-blue-500/20 border-blue-500/40', bg: 'bg-brand-slate/20 border-brand-slate/40',
text: 'text-blue-400', text: 'text-brand-grey',
hover: 'hover:bg-blue-500/30', hover: 'hover:bg-brand-slate/30',
}, },
strategy: { strategy: {
label: 'Strategy Analysis', label: 'Strategy Analysis',
bg: 'bg-purple-500/20 border-purple-500/40', bg: 'bg-brand-coral/20 border-brand-coral/40',
text: 'text-purple-400', text: 'text-brand-coral',
hover: 'hover:bg-purple-500/30', hover: 'hover:bg-brand-coral/30',
}, },
} }

10
src/components/chat/TradingBackground.tsx
View File

@ -102,7 +102,7 @@ const TradingBackground = () => {
<g className="animate-pulse" style={{ animationDuration: '6s' }}> <g className="animate-pulse" style={{ animationDuration: '6s' }}>
<path <path
d="M 0,30 Q 25,15 50,20 T 100,10" d="M 0,30 Q 25,15 50,20 T 100,10"
stroke="rgba(96, 165, 250, 0.4)" stroke="rgba(92, 111, 145, 0.4)"
strokeWidth="0.5" strokeWidth="0.5"
fill="none" fill="none"
strokeDasharray="3,3" strokeDasharray="3,3"
@ -121,7 +121,7 @@ const TradingBackground = () => {
<g className="animate-pulse" style={{ animationDuration: '8s', animationDelay: '1s' }}> <g className="animate-pulse" style={{ animationDuration: '8s', animationDelay: '1s' }}>
<path <path
d="M 0,70 Q 25,85 50,80 T 100,95" d="M 0,70 Q 25,85 50,80 T 100,95"
stroke="rgba(168, 85, 247, 0.4)" stroke="rgba(233, 79, 55, 0.4)"
strokeWidth="0.5" strokeWidth="0.5"
fill="none" fill="none"
strokeDasharray="3,3" strokeDasharray="3,3"
@ -140,7 +140,7 @@ const TradingBackground = () => {
<g className="animate-pulse" style={{ animationDuration: '7s', animationDelay: '0.5s' }}> <g className="animate-pulse" style={{ animationDuration: '7s', animationDelay: '0.5s' }}>
<path <path
d="M 0,50 Q 30,40 60,45 Q 80,50 100,55" d="M 0,50 Q 30,40 60,45 Q 80,50 100,55"
stroke="rgba(59, 130, 246, 0.35)" stroke="rgba(92, 111, 145, 0.35)"
strokeWidth="0.4" strokeWidth="0.4"
fill="none" fill="none"
strokeDasharray="2.5,2.5" strokeDasharray="2.5,2.5"
@ -158,8 +158,8 @@ const TradingBackground = () => {
</svg> </svg>
{/* Floating gradient orbs */} {/* Floating gradient orbs */}
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl animate-pulse" style={{ animationDuration: '8s' }}></div> <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-brand-slate/10 rounded-full blur-3xl animate-pulse" style={{ animationDuration: '8s' }}></div>
<div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl animate-pulse" style={{ animationDuration: '10s', animationDelay: '2s' }}></div> <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-brand-coral/10 rounded-full blur-3xl animate-pulse" style={{ animationDuration: '10s', animationDelay: '2s' }}></div>
</div> </div>
) )
} }

23
src/components/chat/TyndaleBot.tsx
View File

@ -9,6 +9,7 @@ import { ScrollArea } from '@/components/ui/scroll-area'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import { ArrowLeft } from 'lucide-react' import { ArrowLeft } from 'lucide-react'
import Logo from '@/components/ui/Logo'
const TyndaleBot = () => { const TyndaleBot = () => {
const [mode, setMode] = useState<ChatMode>('general') const [mode, setMode] = useState<ChatMode>('general')
@ -43,16 +44,14 @@ const TyndaleBot = () => {
return ( return (
<div className="min-h-screen flex items-center justify-center p-4"> <div className="min-h-screen flex items-center justify-center p-4">
<div className="tech-border-wrapper w-full max-w-4xl h-[85vh]"> <div className="tech-border-wrapper w-full max-w-4xl h-[85vh]">
<div className="bg-slate-800 rounded-lg h-full flex flex-col"> <div className="bg-brand-navy rounded-lg h-full flex flex-col">
{/* Header */} {/* Header */}
<div className="flex items-center justify-between p-4 border-b border-slate-700"> <div className="flex items-center justify-between p-4 border-b border-brand-slate/30">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<Link to="/" className="text-slate-400 hover:text-white transition-colors"> <Link to="/" className="text-brand-grey/70 hover:text-white transition-colors">
<ArrowLeft className="h-5 w-5" /> <ArrowLeft className="h-5 w-5" />
</Link> </Link>
<h2 className="text-xl font-display font-bold text-white"> <Logo variant="light" size="sm" />
Woolnoth, LLC
</h2>
</div> </div>
<ModeToggle mode={mode} onToggle={handleModeToggle} disabled={isLoading} /> <ModeToggle mode={mode} onToggle={handleModeToggle} disabled={isLoading} />
</div> </div>
@ -66,7 +65,7 @@ const TyndaleBot = () => {
<h3 className="text-2xl font-display font-bold text-white mb-4"> <h3 className="text-2xl font-display font-bold text-white mb-4">
{mode === 'general' ? 'General Trading Assistant' : 'Strategy Analysis'} {mode === 'general' ? 'General Trading Assistant' : 'Strategy Analysis'}
</h3> </h3>
<p className="text-slate-400"> <p className="text-brand-grey/70">
{mode === 'general' {mode === 'general'
? 'Ask me anything about trading concepts, market conditions, or terminology.' ? 'Ask me anything about trading concepts, market conditions, or terminology.'
: 'Let\'s analyze your algorithmic strategies, backtest results, and risk metrics.'} : 'Let\'s analyze your algorithmic strategies, backtest results, and risk metrics.'}
@ -82,26 +81,26 @@ const TyndaleBot = () => {
{/* Loading indicator */} {/* Loading indicator */}
{isLoading && ( {isLoading && (
<div className="flex gap-3 mb-4"> <div className="flex gap-3 mb-4">
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-slate-700 flex items-center justify-center"> <div className="flex-shrink-0 w-8 h-8 rounded-full bg-brand-slate/30 flex items-center justify-center">
<div className="flex gap-1"> <div className="flex gap-1">
<div <div
className={cn( className={cn(
'w-1.5 h-1.5 rounded-full animate-bounce', 'w-1.5 h-1.5 rounded-full animate-bounce',
mode === 'general' ? 'bg-blue-400' : 'bg-purple-400' mode === 'general' ? 'bg-brand-slate/70' : 'bg-brand-coral/70'
)} )}
style={{ animationDelay: '0ms' }} style={{ animationDelay: '0ms' }}
/> />
<div <div
className={cn( className={cn(
'w-1.5 h-1.5 rounded-full animate-bounce', 'w-1.5 h-1.5 rounded-full animate-bounce',
mode === 'general' ? 'bg-blue-500' : 'bg-purple-500' mode === 'general' ? 'bg-brand-slate' : 'bg-brand-coral'
)} )}
style={{ animationDelay: '150ms' }} style={{ animationDelay: '150ms' }}
/> />
<div <div
className={cn( className={cn(
'w-1.5 h-1.5 rounded-full animate-bounce', 'w-1.5 h-1.5 rounded-full animate-bounce',
mode === 'general' ? 'bg-blue-600' : 'bg-purple-600' mode === 'general' ? 'bg-brand-slate' : 'bg-brand-coral'
)} )}
style={{ animationDelay: '300ms' }} style={{ animationDelay: '300ms' }}
/> />
@ -113,7 +112,7 @@ const TyndaleBot = () => {
</ScrollArea> </ScrollArea>
{/* Input */} {/* Input */}
<div className="p-4 border-t border-slate-700"> <div className="p-4 border-t border-brand-slate/30">
<ChatInput <ChatInput
onSend={sendMessage} onSend={sendMessage}
disabled={isLoading} disabled={isLoading}

10
src/components/landing/LandingFeatures.tsx
View File

@ -21,13 +21,13 @@ const features = [
const LandingFeatures = () => { const LandingFeatures = () => {
return ( return (
<section id="features" className="py-24 bg-gradient-to-b from-gray-50 to-white"> <section id="features" className="py-24 bg-gradient-to-b from-brand-grey to-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-16"> <div className="text-center mb-16">
<h2 className="text-4xl md:text-5xl font-display font-bold text-gray-900 mb-4"> <h2 className="text-4xl md:text-5xl font-display font-bold text-brand-navy mb-4">
Powerful Features Powerful Features
</h2> </h2>
<p className="text-xl text-gray-600 max-w-2xl mx-auto"> <p className="text-xl text-brand-slate max-w-2xl mx-auto">
Everything you need to make informed trading decisions with AI assistance Everything you need to make informed trading decisions with AI assistance
</p> </p>
</div> </div>
@ -40,11 +40,11 @@ const LandingFeatures = () => {
style={{animationDelay: `${index * 0.1}s`}} style={{animationDelay: `${index * 0.1}s`}}
> >
<CardHeader> <CardHeader>
<div className="w-12 h-12 rounded-lg bg-gradient-to-br from-violet-500 to-purple-600 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform"> <div className="w-12 h-12 rounded-lg bg-gradient-to-br from-brand-navy to-brand-coral flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
<feature.icon className="h-6 w-6 text-white" /> <feature.icon className="h-6 w-6 text-white" />
</div> </div>
<CardTitle className="text-xl font-display">{feature.title}</CardTitle> <CardTitle className="text-xl font-display">{feature.title}</CardTitle>
<CardDescription className="text-gray-600"> <CardDescription className="text-brand-slate">
{feature.description} {feature.description}
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>

10
src/components/landing/LandingFooter.tsx
View File

@ -1,12 +1,12 @@
import Logo from '@/components/ui/Logo'
const LandingFooter = () => { const LandingFooter = () => {
return ( return (
<footer className="bg-gray-900 text-gray-400 py-12"> <footer className="bg-brand-navy text-brand-grey/70 py-12">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex flex-col md:flex-row items-center justify-between"> <div className="flex flex-col md:flex-row items-center justify-between">
<div className="mb-4 md:mb-0"> <div className="mb-4 md:mb-0">
<span className="text-2xl font-display font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent"> <Logo variant="light" size="lg" />
Woolnoth, LLC
</span>
<p className="text-sm mt-2">Algorithmic Trading Intelligence</p> <p className="text-sm mt-2">Algorithmic Trading Intelligence</p>
</div> </div>
@ -20,7 +20,7 @@ const LandingFooter = () => {
</div> </div>
</div> </div>
<div className="mt-8 pt-8 border-t border-gray-800 text-center text-sm"> <div className="mt-8 pt-8 border-t border-brand-slate/30 text-center text-sm">
<p>&copy; 2026 Woolnoth, LLC. All rights reserved.</p> <p>&copy; 2026 Woolnoth, LLC. All rights reserved.</p>
</div> </div>
</div> </div>

8
src/components/landing/LandingHero.tsx
View File

@ -5,24 +5,24 @@ import TradingBackground from '@/components/chat/TradingBackground'
const LandingHero = () => { const LandingHero = () => {
return ( return (
<section className="relative min-h-screen flex items-center justify-center overflow-hidden grain-overlay bg-gradient-to-br from-trading-dark via-trading-blue to-trading-dark"> <section className="relative min-h-screen flex items-center justify-center overflow-hidden grain-overlay bg-gradient-to-br from-brand-navy via-brand-navy/95 to-brand-navy">
<TradingBackground /> <TradingBackground />
<div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center pt-20"> <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center pt-20">
<h1 className="text-5xl md:text-7xl font-display font-bold text-white mb-6 animate-fade-up"> <h1 className="text-5xl md:text-7xl font-display font-bold text-white mb-6 animate-fade-up">
Algorithmic Trading <br /> Algorithmic Trading <br />
<span className="bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 bg-clip-text text-transparent"> <span className="bg-gradient-to-r from-brand-grey via-brand-slate to-brand-coral bg-clip-text text-transparent">
Intelligence Intelligence
</span> </span>
</h1> </h1>
<p className="text-xl md:text-2xl text-gray-300 mb-10 max-w-3xl mx-auto animate-fade-up" style={{animationDelay: '0.1s'}}> <p className="text-xl md:text-2xl text-brand-grey/80 mb-10 max-w-3xl mx-auto animate-fade-up" style={{animationDelay: '0.1s'}}>
Your AI assistant for strategy analysis, market insights, and trading decisions Your AI assistant for strategy analysis, market insights, and trading decisions
</p> </p>
<div className="flex items-center justify-center gap-4 animate-fade-up" style={{animationDelay: '0.2s'}}> <div className="flex items-center justify-center gap-4 animate-fade-up" style={{animationDelay: '0.2s'}}>
<Link to="/chat"> <Link to="/chat">
<Button className="bg-violet-500 hover:bg-violet-600 text-white rounded-xl px-8 py-6 text-lg shadow-glow-purple"> <Button className="bg-brand-coral hover:bg-brand-coral/90 text-white rounded-xl px-8 py-6 text-lg shadow-glow-coral">
Start Trading Chat Start Trading Chat
<ArrowRight className="ml-2 h-5 w-5" /> <ArrowRight className="ml-2 h-5 w-5" />
</Button> </Button>

11
src/components/landing/LandingNavigation.tsx
View File

@ -1,26 +1,25 @@
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import Logo from '@/components/ui/Logo'
const LandingNavigation = () => { const LandingNavigation = () => {
return ( return (
<nav className="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-200"> <nav className="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-200">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-16"> <div className="flex items-center justify-between h-16">
<Link to="/" className="flex items-center space-x-2"> <Link to="/" className="flex items-center">
<span className="text-2xl font-display font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent"> <Logo variant="dark" size="lg" />
Woolnoth, LLC
</span>
</Link> </Link>
<div className="flex items-center space-x-6"> <div className="flex items-center space-x-6">
<Link <Link
to="/tyndale" to="/tyndale"
className="text-gray-600 hover:text-gray-900 transition-colors font-medium" className="text-brand-slate hover:text-brand-navy transition-colors font-medium"
> >
About Tyndale About Tyndale
</Link> </Link>
<Link to="/chat"> <Link to="/chat">
<Button className="bg-violet-500 hover:bg-violet-600 text-white rounded-xl"> <Button className="bg-brand-coral hover:bg-brand-coral/90 text-white rounded-xl">
Start Start
</Button> </Button>
</Link> </Link>

100
src/components/ui/Logo.tsx Normal file
View File

@ -0,0 +1,100 @@
interface LogoProps {
variant?: 'dark' | 'light' | 'coral' | 'slate'
showText?: boolean
size?: 'sm' | 'md' | 'lg' | 'xl'
className?: string
}
const Logo = ({ variant = 'dark', showText = true, size = 'md', className = '' }: LogoProps) => {
const sizeConfig = {
sm: { height: 24 },
md: { height: 32 },
lg: { height: 40 },
xl: { height: 56 },
}
const colorConfig = {
dark: '#24293e',
light: '#f4f4f6',
coral: '#e94f37',
slate: '#5c6f91',
}
const { height } = sizeConfig[size]
const fill = colorConfig[variant]
if (showText) {
// Full wordmark with logomark + "Woolnoth" text
// Original viewBox: 0 0 1852 726, aspect ratio ~2.55
const width = height * 2.55
return (
<div className={className}>
<svg
width={width}
height={height}
viewBox="0 0 1852 726"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
{/* Logomark - 4 lines forming W */}
{/* Line 1 - tall, leftmost */}
<path d="M284.837 179.697C288.882 189.873 284.079 199.544 282.119 209.088C263.789 296.377 244.827 383.54 226.117 470.766C223.589 482.523 221.693 494.406 219.038 506.163C216.636 516.592 209.747 521.585 199.57 521.396C193.945 521.332 189.836 519.246 187.435 511.346C191.29 492.826 195.525 472.283 199.823 451.741C211.39 397.32 222.957 342.898 234.587 288.54C241.35 256.683 247.987 224.764 255.066 193.033C259.112 175.399 267.581 171.859 284.837 179.697Z" fill={fill}/>
{/* Line 2 - short, starts lower */}
<path d="M326.933 353.139C330.979 363.316 326.175 372.987 324.215 382.531C305.822 469.82 310.12 444.348 291.411 531.574C288.883 543.33 286.986 555.213 284.332 566.97C281.93 577.399 275.04 582.392 264.864 582.203C259.238 582.14 255.13 580.117 252.728 572.153C256.584 553.633 260.818 533.091 265.18 512.548C276.747 458.127 265.117 516.341 276.683 461.919C283.51 430.063 290.083 398.143 297.226 366.413C301.145 348.841 309.678 345.302 326.933 353.139Z" fill={fill}/>
{/* Line 3 - short, starts lower */}
<path d="M411.631 321.03C415.677 331.206 410.873 340.877 408.913 350.421C390.52 437.71 394.818 412.238 376.109 499.464C373.58 511.22 371.684 523.103 369.03 534.86C366.628 545.289 359.738 550.283 349.562 550.093C343.936 550.03 339.828 548.007 337.426 540.043C341.282 521.523 345.516 500.981 349.878 480.438C361.445 426.017 349.815 484.231 361.381 429.809C368.208 397.953 374.781 366.033 381.924 334.303C385.843 316.731 394.376 313.192 411.631 321.03Z" fill={fill}/>
{/* Line 4 - tall */}
<path d="M525.91 148.156C529.955 158.333 525.151 168.004 523.192 177.548C504.862 264.837 485.9 352 467.19 439.226C464.662 450.983 462.766 462.866 460.111 474.622C457.709 485.052 450.82 490.045 440.643 489.855C435.018 489.792 430.909 487.706 428.507 479.805C432.363 461.286 436.598 440.743 440.896 420.201C452.463 365.779 464.03 311.358 475.66 256.999C482.423 225.143 488.997 193.223 496.139 161.493C500.121 143.922 508.591 140.319 525.91 148.156Z" fill={fill}/>
{/* "oolnoth" text */}
{/* First "o" */}
<path d="M625.462 256.62C633.489 256.873 641.579 256.241 649.48 258.327C680.831 266.481 685.509 289.551 681.59 309.588C675.079 343.088 667.747 376.398 660.668 409.772C659.025 417.609 657.192 425.447 655.359 433.285C648.532 462.234 629.823 479.616 601.506 486.253C586.905 489.666 572.051 490.235 556.629 487.58C530.335 483.092 514.786 465.205 520.348 435.371C525.847 405.79 532.736 376.461 539.12 347.07C541.459 336.262 544.114 325.58 546.136 314.708C552.963 278.237 580.142 257.252 616.36 256.557C619.394 256.557 622.428 256.62 625.462 256.62ZM579.131 462.929C610.229 462.739 621.543 447.254 625.462 428.165C632.414 394.855 639.43 361.545 646.826 328.361C648.722 319.954 649.986 311.674 649.86 303.078C649.733 293.66 644.487 288.098 636.396 285.127C631.719 283.42 626.536 281.966 621.732 282.156C600.052 283.167 583.934 286.897 576.602 313.444C574.896 319.701 573.568 326.085 572.178 332.469C565.099 365.779 557.956 399.026 551.13 432.4C547.969 447.949 555.618 459.2 570.914 462.36C574.327 463.055 577.93 462.866 579.131 462.929Z" fill={fill}/>
{/* Second "o" */}
<path d="M700.109 447.191C701.247 423.489 707.252 404.716 710.918 385.501C715.216 362.873 720.841 340.497 725.203 317.869C732.408 280.45 757.818 257.633 796.185 256.621C807.246 256.305 818.497 255.547 829.242 258.265C850.859 263.827 862.868 276.342 861.92 300.424C861.351 315.657 857.116 330.131 854.335 344.859C849.089 372.417 842.642 399.723 836.89 427.218C830.822 456.104 815.4 476.583 786.135 484.989C767.425 490.362 748.4 491.563 729.627 486.064C709.148 479.996 698.782 468.176 700.109 447.191ZM760.978 462.93C785.882 464.005 801.494 448.645 804.97 430.062C805.413 427.597 806.298 425.258 806.867 422.793C810.533 405.664 814.135 388.535 817.865 371.406C821.973 352.317 826.271 333.292 830.19 314.203C832.845 301.309 828.484 290.5 818.434 285.886C802.379 278.554 774.252 282.031 763.696 298.022C759.461 304.406 756.806 311.232 755.226 318.754C749.285 347.134 743.09 375.514 737.086 403.894C734.621 415.588 730.639 427.091 731.018 439.29C731.397 450.857 735.569 456.42 746.251 460.844C751.055 462.867 755.985 462.74 760.978 462.93Z" fill={fill}/>
{/* "l" */}
<path d="M972.027 148.156C976.072 158.333 971.269 168.004 969.309 177.548C950.979 264.837 932.017 352 913.308 439.226C910.779 450.983 908.883 462.866 906.228 474.622C903.826 485.052 896.937 490.045 886.76 489.855C881.135 489.792 877.027 487.706 874.625 479.805C878.48 461.286 882.715 440.743 887.013 420.201C898.58 365.779 910.147 311.358 921.777 256.999C928.541 225.143 935.114 193.223 942.257 161.493C946.239 143.922 954.772 140.319 972.027 148.156Z" fill={fill}/>
{/* "n" */}
<path d="M1088.77 484.61C1073.16 492.068 1071.45 491.879 1061.4 481.323C1066.27 457.999 1071.2 433.981 1076.32 410.025C1082.89 379.117 1089.53 348.272 1096.1 317.426C1101.86 290.563 1088.08 281.461 1065.01 282.473C1042.76 283.421 1028.91 288.667 1022.21 318.817C1011.28 368.245 1001.42 417.863 991.053 467.417C990.547 469.882 989.346 472.221 989.03 474.623C988.019 482.018 983.278 486.064 976.768 488.529C969.878 491.057 963.937 489.856 959.259 484.041C957.806 480.565 957.932 476.962 958.691 473.548C970.447 419.19 982.393 364.832 994.15 310.474C1001.42 277.037 1029.93 257.948 1060.26 256.874C1074.87 256.305 1089.47 255.294 1103.56 260.603C1121.7 267.429 1131.69 284.306 1128.84 303.647C1123.79 337.906 1114.94 371.405 1108.18 405.348C1103.88 426.965 1098.76 448.455 1094.4 470.009C1093.32 474.939 1092.06 479.616 1088.77 484.61Z" fill={fill}/>
{/* Third "o" */}
<path d="M1258.61 256.431C1266.45 256.936 1276.5 256.431 1286.17 260.097C1303.8 266.67 1311.83 277.605 1312.65 296.251C1313.35 312.116 1308.61 327.033 1305.64 342.266C1300.01 371.278 1293.69 400.164 1287.37 429.05C1281.05 457.999 1264.3 477.783 1235.16 485.62C1217.46 490.361 1199.32 491.372 1181.5 486.379C1161.84 480.88 1150.78 469.819 1150.9 447.317C1151.03 430.061 1155.9 413.627 1159.31 396.941C1164.49 371.405 1171.26 346.122 1175.49 320.46C1181.88 281.587 1208.23 255.988 1251.78 256.367C1253.43 256.431 1254.94 256.431 1258.61 256.431ZM1212.03 462.929C1236.23 463.94 1252.23 449.213 1255.89 429.872C1256.33 427.406 1257.22 425.068 1257.72 422.603C1261.39 405.474 1265.06 388.344 1268.72 371.278C1272.83 352.19 1277.13 333.164 1281.05 314.076C1283.58 301.75 1279.78 291.637 1270.37 286.581C1254.37 278.048 1221.25 281.082 1211.27 303.33C1208.99 308.387 1207.1 313.444 1205.96 318.879C1200.08 347.26 1193.88 375.64 1187.82 404.02C1185.35 415.776 1181.37 427.217 1181.75 439.479C1182.13 450.92 1186.43 456.545 1197.17 460.97C1202.1 462.929 1207.03 462.739 1212.03 462.929Z" fill={fill}/>
{/* "t" */}
<path d="M1415.11 194.867C1413.53 216.295 1406.26 236.837 1402.97 259.781C1429.14 260.792 1455.12 259.592 1480.47 260.476C1488.37 272.359 1487.42 278.617 1475.54 290.31H1398.74C1391.79 296.821 1393.11 305.227 1391.47 312.18C1382.94 348.777 1375.42 385.627 1367.52 422.414C1365.68 430.883 1365.68 439.416 1366.76 447.949C1372.51 459.327 1382.31 462.803 1394.19 462.993C1422.57 463.435 1436.29 448.202 1439.7 428.102C1441.03 420.201 1443.17 412.427 1445.39 404.716C1449.5 390.241 1460.68 386.512 1475.85 395.803C1474.02 419.19 1470.92 442.766 1455.5 462.803C1445.58 475.697 1431.61 483.029 1416.12 486.379C1400.38 489.793 1384.52 490.551 1368.27 487.201C1339.39 481.196 1330.16 459.327 1334.52 437.394C1341.35 402.946 1349.06 368.751 1356.33 334.429C1364.92 293.724 1373.39 253.018 1381.99 212.249C1382.62 209.342 1383.76 206.497 1384.14 203.527C1385.09 196.195 1389.26 191.96 1395.96 189.368C1402.91 186.65 1408.73 187.725 1415.11 194.867Z" fill={fill}/>
{/* "h" */}
<path d="M1491.34 481.89C1498.67 446.747 1505.81 412.425 1513.08 378.104C1524.78 322.671 1536.53 267.175 1548.35 211.742C1551.89 195.055 1556.32 178.558 1559.03 161.745C1560.99 149.673 1567.19 143.984 1578.94 142.973C1582.8 143.731 1586.59 144.869 1589.56 148.282C1591.46 154.097 1590.26 159.912 1588.99 165.917C1581.41 200.744 1573.95 235.508 1566.56 270.399C1566.05 272.801 1565.67 275.392 1567.88 277.984C1570.47 275.645 1572.94 273.18 1575.59 270.967C1594.75 255.039 1617.06 253.775 1639.94 258.579C1653.91 261.55 1662.25 274.001 1663.45 288.476C1664.97 306.427 1659.6 323.366 1656.06 340.496C1647.52 382.276 1638.42 423.929 1629.57 465.646C1628.94 468.617 1627.68 471.398 1627.3 474.369C1626.41 481.827 1621.93 485.999 1615.29 488.464C1608.53 490.992 1602.52 490.044 1597.59 484.798C1594.18 475.759 1598.41 467.542 1600.06 459.389C1609.09 415.143 1618.58 371.025 1628.25 326.906C1629.19 322.481 1629.51 317.931 1630.46 313.569C1635.14 291.004 1621.48 280.701 1598.6 282.598C1577.05 284.367 1563.84 297.578 1557.71 317.488C1553.6 330.888 1551.07 344.794 1548.16 358.51C1539.95 396.75 1531.85 435.054 1523.89 473.357C1522.18 481.638 1517.82 487.073 1509.67 489.159C1502.65 490.866 1496.84 488.97 1491.34 481.89Z" fill={fill}/>
</svg>
</div>
)
}
// Logomark only - 4 lines forming W
// Aspect ratio ~1:1.3
const width = height * 0.77
return (
<div className={className}>
<svg
width={width}
height={height}
viewBox="0 0 340 440"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
{/* Line 1 - tall, leftmost */}
<path d="M97.837 39.697C101.882 49.873 97.079 59.544 95.119 69.088C76.789 156.377 57.827 243.54 39.117 330.766C36.589 342.523 34.693 354.406 32.038 366.163C29.636 376.592 22.747 381.585 12.57 381.396C6.945 381.332 2.836 379.246 0.435 371.346C4.29 352.826 8.525 332.283 12.823 311.741C24.39 257.32 35.957 202.898 47.587 148.54C54.35 116.683 60.987 84.764 68.066 53.033C72.112 35.399 80.581 31.859 97.837 39.697Z" fill={fill}/>
{/* Line 2 - short, starts lower */}
<path d="M139.933 213.139C143.979 223.316 139.175 232.987 137.215 242.531C118.822 329.82 123.12 304.348 104.411 391.574C101.883 403.33 99.986 415.213 97.332 426.97C94.93 437.399 88.04 442.392 77.864 442.203C72.238 442.14 68.13 440.117 65.728 432.153C69.584 413.633 73.818 393.091 78.18 372.548C89.747 318.127 78.117 376.341 89.683 321.919C96.51 290.063 103.083 258.143 110.226 226.413C114.145 208.841 122.678 205.302 139.933 213.139Z" fill={fill}/>
{/* Line 3 - short, starts lower */}
<path d="M224.631 181.03C228.677 191.206 223.873 200.877 221.913 210.421C203.52 297.71 207.818 272.238 189.109 359.464C186.58 371.22 184.684 383.103 182.03 394.86C179.628 405.289 172.738 410.283 162.562 410.093C156.936 410.03 152.828 408.007 150.426 400.043C154.282 381.523 158.516 360.981 162.878 340.438C174.445 286.017 162.815 344.231 174.381 289.809C181.208 257.953 187.781 226.033 194.924 194.303C198.843 176.731 207.376 173.192 224.631 181.03Z" fill={fill}/>
{/* Line 4 - tall */}
<path d="M338.91 8.156C342.955 18.333 338.151 28.004 336.192 37.548C317.862 124.837 298.9 212 280.19 299.226C277.662 310.983 275.766 322.866 273.111 334.622C270.709 345.052 263.82 350.045 253.643 349.855C248.018 349.792 243.909 347.706 241.507 339.805C245.363 321.286 249.598 300.743 253.896 280.201C265.463 225.779 277.03 171.358 288.66 116.999C295.423 85.143 301.997 53.223 309.139 21.493C313.121 3.922 321.591 0.319 338.91 8.156Z" fill={fill}/>
</svg>
</div>
)
}
export const LogoMark = ({ variant = 'dark', size = 'md', className = '' }: Omit<LogoProps, 'showText'>) => {
return <Logo variant={variant} showText={false} size={size} className={className} />
}
export default Logo

64
src/index.css
View File

@ -4,30 +4,36 @@
@layer base { @layer base {
:root { :root {
--background: 0 0% 100%; /* Woolnoth Brand Colors (HSL values) */
--foreground: 222.2 84% 4.9%; /* Deep Navy: #24293e = 228 27% 19% */
/* Soft Light Grey: #f4f4f6 = 240 11% 96% */
/* Cool Slate Blue: #5c6f91 = 218 23% 47% */
/* Burnt Coral Red: #e94f37 = 8 79% 56% */
--background: 240 11% 96%;
--foreground: 228 27% 19%;
--card: 0 0% 100%; --card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%; --card-foreground: 228 27% 19%;
--popover: 0 0% 100%; --popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%; --popover-foreground: 228 27% 19%;
--primary: 222.2 47.4% 11.2%; --primary: 228 27% 19%;
--primary-foreground: 210 40% 98%; --primary-foreground: 0 0% 100%;
--secondary: 210 40% 96.1%; --secondary: 240 11% 96%;
--secondary-foreground: 222.2 47.4% 11.2%; --secondary-foreground: 228 27% 19%;
--muted: 210 40% 96.1%; --muted: 240 11% 96%;
--muted-foreground: 215.4 16.3% 46.9%; --muted-foreground: 218 23% 47%;
--accent: 210 40% 96.1%; --accent: 218 23% 47%;
--accent-foreground: 222.2 47.4% 11.2%; --accent-foreground: 0 0% 100%;
--destructive: 0 84.2% 60.2%; --destructive: 8 79% 56%;
--destructive-foreground: 210 40% 98%; --destructive-foreground: 0 0% 100%;
--border: 214.3 31.8% 91.4%; --border: 218 23% 85%;
--input: 214.3 31.8% 91.4%; --input: 218 23% 85%;
--ring: 222.2 84% 4.9%; --ring: 8 79% 56%;
--radius: 0.5rem; --radius: 0.5rem;
} }
body { body {
@apply bg-background text-foreground font-montserrat; @apply bg-background text-foreground font-inter;
} }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
@ -77,25 +83,25 @@
background: transparent; background: transparent;
} }
/* General Mode - Blue scrollbar */ /* General Mode - Slate scrollbar */
.tyndale-scroll-general { .tyndale-scroll-general {
scrollbar-color: rgb(59 130 246 / 0.7) transparent; scrollbar-color: rgb(92 111 145 / 0.7) transparent;
} }
.tyndale-scroll-general::-webkit-scrollbar-thumb { .tyndale-scroll-general::-webkit-scrollbar-thumb {
background: linear-gradient(to bottom, rgb(96 165 250), rgb(59 130 246)); background: linear-gradient(to bottom, rgb(112 131 165), rgb(92 111 145));
border-radius: 9999px; border-radius: 9999px;
border: 2px solid transparent; border: 2px solid transparent;
background-clip: padding-box; background-clip: padding-box;
} }
/* Strategy Mode - Purple scrollbar */ /* Strategy Mode - Coral scrollbar */
.tyndale-scroll-strategy { .tyndale-scroll-strategy {
scrollbar-color: rgb(168 85 247 / 0.7) transparent; scrollbar-color: rgb(233 79 55 / 0.7) transparent;
} }
.tyndale-scroll-strategy::-webkit-scrollbar-thumb { .tyndale-scroll-strategy::-webkit-scrollbar-thumb {
background: linear-gradient(to bottom, rgb(192 132 252), rgb(168 85 247)); background: linear-gradient(to bottom, rgb(245 120 100), rgb(233 79 55));
border-radius: 9999px; border-radius: 9999px;
border: 2px solid transparent; border: 2px solid transparent;
background-clip: padding-box; background-clip: padding-box;
@ -114,11 +120,11 @@
padding: 2px; padding: 2px;
background: linear-gradient( background: linear-gradient(
90deg, 90deg,
#64748b, #24293e,
#8b5cf6, #5c6f91,
#06b6d4, #e94f37,
#8b5cf6, #5c6f91,
#64748b #24293e
); );
background-size: 300% 100%; background-size: 300% 100%;
animation: gradient-rotate 6s ease infinite; animation: gradient-rotate 6s ease infinite;

2
src/pages/ChatPage.tsx
View File

@ -3,7 +3,7 @@ import TradingBackground from '@/components/chat/TradingBackground'
const ChatPage = () => { const ChatPage = () => {
return ( return (
<div className="min-h-screen bg-gradient-to-br from-trading-dark via-trading-blue to-trading-dark relative"> <div className="min-h-screen bg-gradient-to-br from-brand-navy via-brand-navy/95 to-brand-navy relative">
<TradingBackground /> <TradingBackground />
<TyndaleBot /> <TyndaleBot />
</div> </div>

12
src/pages/TyndalePage.tsx
View File

@ -9,11 +9,11 @@ const TyndalePage = () => {
<div className="min-h-screen flex flex-col"> <div className="min-h-screen flex flex-col">
<LandingNavigation /> <LandingNavigation />
<main className="flex-1 bg-gradient-to-br from-trading-dark via-trading-blue to-trading-dark grain-overlay pt-24 pb-16"> <main className="flex-1 bg-gradient-to-br from-brand-navy via-brand-navy/95 to-brand-navy grain-overlay pt-24 pb-16">
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<Link <Link
to="/" to="/"
className="inline-flex items-center text-gray-400 hover:text-white transition-colors mb-8 animate-fade-up" className="inline-flex items-center text-brand-grey/70 hover:text-white transition-colors mb-8 animate-fade-up"
> >
<ArrowLeft className="h-4 w-4 mr-2" /> <ArrowLeft className="h-4 w-4 mr-2" />
Back to Home Back to Home
@ -22,11 +22,11 @@ const TyndalePage = () => {
<div className="text-center mb-12 animate-fade-up" style={{ animationDelay: '0.1s' }}> <div className="text-center mb-12 animate-fade-up" style={{ animationDelay: '0.1s' }}>
<h1 className="text-4xl md:text-5xl font-display font-bold text-white mb-4"> <h1 className="text-4xl md:text-5xl font-display font-bold text-white mb-4">
William{' '} William{' '}
<span className="bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 bg-clip-text text-transparent"> <span className="bg-gradient-to-r from-brand-grey via-brand-slate to-brand-coral bg-clip-text text-transparent">
Tyndale Tyndale
</span> </span>
</h1> </h1>
<p className="text-xl text-gray-300"> <p className="text-xl text-brand-grey/80">
c. 1494 &ndash; October 6, 1536 c. 1494 &ndash; October 6, 1536
</p> </p>
</div> </div>
@ -34,13 +34,13 @@ const TyndalePage = () => {
<Card className="bg-white/5 backdrop-blur-md border-white/10 animate-fade-up" style={{ animationDelay: '0.2s' }}> <Card className="bg-white/5 backdrop-blur-md border-white/10 animate-fade-up" style={{ animationDelay: '0.2s' }}>
<CardHeader> <CardHeader>
<CardTitle className="text-2xl text-white flex items-center gap-3"> <CardTitle className="text-2xl text-white flex items-center gap-3">
<div className="p-2 rounded-lg bg-gradient-to-br from-violet-500 to-purple-600"> <div className="p-2 rounded-lg bg-gradient-to-br from-brand-navy to-brand-coral">
<BookOpen className="h-6 w-6 text-white" /> <BookOpen className="h-6 w-6 text-white" />
</div> </div>
The Father of the English Bible The Father of the English Bible
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent className="space-y-6 text-gray-300 leading-relaxed"> <CardContent className="space-y-6 text-brand-grey/80 leading-relaxed">
<p> <p>
Born near Gloucestershire, England, William Tyndale was a scholar and theologian Born near Gloucestershire, England, William Tyndale was a scholar and theologian
who dedicated his life to a singular mission: making the Bible accessible to who dedicated his life to a singular mission: making the Bible accessible to

19
tailwind.config.ts
View File

@ -17,14 +17,15 @@ export default {
}, },
extend: { extend: {
fontFamily: { fontFamily: {
'montserrat': ['Montserrat', 'sans-serif'], 'inter': ['Inter', 'sans-serif'],
'display': ['Outfit', 'sans-serif'], 'display': ['Plus Jakarta Sans', 'sans-serif'],
}, },
colors: { colors: {
// Trading-themed dark blues (similar to Home Pulse AI) // Woolnoth brand colors
'trading-dark': '#0a1628', 'brand-navy': '#24293e',
'trading-blue': '#1e3a5f', 'brand-grey': '#f4f4f6',
'trading-blue-light': '#3d5a7a', 'brand-slate': '#5c6f91',
'brand-coral': '#e94f37',
// Shadcn color system // Shadcn color system
border: 'hsl(var(--border))', border: 'hsl(var(--border))',
@ -67,9 +68,9 @@ export default {
sm: 'calc(var(--radius) - 4px)' sm: 'calc(var(--radius) - 4px)'
}, },
boxShadow: { boxShadow: {
'glow-blue': '0 0 40px -10px rgba(59, 130, 246, 0.5)', 'glow-coral': '0 0 40px -10px rgba(233, 79, 55, 0.5)',
'glow-purple': '0 0 40px -10px rgba(168, 85, 247, 0.4)', 'glow-slate': '0 0 40px -10px rgba(92, 111, 145, 0.4)',
'glow-green': '0 0 40px -10px rgba(34, 197, 94, 0.5)', 'glow-navy': '0 0 40px -10px rgba(36, 41, 62, 0.5)',
}, },
keyframes: { keyframes: {
'fade-up': { 'fade-up': {