Skip to content

Commit 8ed9c57

Browse files
smithjilkssmithjilks
committed
Improve typography
Signed-off-by: Jilks Smith <smithjilks@gmail.com>
1 parent 26ea030 commit 8ed9c57

26 files changed

Lines changed: 1902 additions & 1001 deletions

‎src/components/FeatureSection.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@ const textOrderClass = imageSide === 'left' ? 'lg:order-2' : 'lg:order-1';
2222
<img class="w-full rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 transition-transform duration-500 hover:scale-105" src={image} alt={imageAlt}>
2323
</div>
2424
<div class={`mt-10 lg:mt-0 ${textOrderClass}`}>
25-
{subtitle && <div class="text-primary font-semibold tracking-wide uppercase mb-2">{subtitle}</div>}
26-
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl font-heading mb-4">
25+
{subtitle && <div class="text-primary font-medium tracking-wide uppercase mb-2">{subtitle}</div>}
26+
<h2 class="text-3xl text-text-main sm:text-4xl font-heading mb-4">
2727
{title}
2828
</h2>
2929
<div class="prose prose-lg text-gray-500">

‎src/components/Footer.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const currentYear = new Date().getFullYear();
4747

4848
<!-- Legal -->
4949
<div>
50-
<h3 class="text-sm font-bold tracking-wider uppercase mb-4 text-text-muted">Legal</h3>
50+
<h3 class="text-sm tracking-wider uppercase mb-4 text-text-muted">Legal</h3>
5151
<div class="space-y-4">
5252
<div>
5353
<h4 class="text-sm font-medium text-text-main">Prism AI</h4>

‎src/components/Header.astro‎

Lines changed: 58 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -19,57 +19,57 @@
1919
<nav class="hidden md:flex space-x-8 items-center">
2020
<!-- Products Dropdown -->
2121
<div class="relative group">
22-
<button class="text-text-main hover:text-primary font-medium inline-flex items-center space-x-1 transition-colors">
22+
<button class="text-text-main hover:text-primary font-medium inline-flex items-center space-x-1 transition-colors font-heading">
2323
<span>PRODUCTS</span>
2424
<svg class="w-4 h-4 ml-1 transition-transform group-hover:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
2525
</button>
26-
<div class="absolute left-0 mt-2 w-56 rounded-xl shadow-xl bg-white/90 dark:bg-slate-800/90 backdrop-blur-xl ring-1 ring-black ring-opacity-5 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 transform origin-top-left z-50 translate-y-2 group-hover:translate-y-0">
26+
<div class="absolute left-0 mt-2 w-56 rounded-xl shadow-xl bg-white/90 dark:bg-slate-800/90 backdrop-blur-xl ring-1 ring-black ring-opacity-5 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 transform origin-top-left z-50 translate-y-2 group-hover:translate-y-0 text-left">
2727
<div class="py-2" role="menu" aria-orientation="vertical">
28-
<a href="https://prism.ultraviolet.rs" target="_blank" class="block px-4 py-2 text-sm text-text-main hover:bg-surface-hover hover:text-primary transition-colors" role="menuitem">PRISM AI</a>
29-
<a href="/cocos" class="block px-4 py-2 text-sm text-text-main hover:bg-surface-hover hover:text-primary transition-colors" role="menuitem">COCOS AI</a>
30-
<a href="/cube" class="block px-4 py-2 text-sm text-text-main hover:bg-surface-hover hover:text-primary transition-colors" role="menuitem">CUBE AI</a>
28+
<a href="https://prism.ultraviolet.rs" target="_blank" class="block px-4 py-2 text-sm text-text-main hover:bg-surface-hover hover:text-primary transition-colors font-heading" role="menuitem">PRISM AI</a>
29+
<a href="/cocos" class="block px-4 py-2 text-sm text-text-main hover:bg-surface-hover hover:text-primary transition-colors font-heading" role="menuitem">COCOS AI</a>
30+
<a href="/cube" class="block px-4 py-2 text-sm text-text-main hover:bg-surface-hover hover:text-primary transition-colors font-heading" role="menuitem">CUBE AI</a>
3131
<div class="border-t border-border my-1"></div>
32-
<a href="/products" class="block px-4 py-2 text-sm text-text-main hover:bg-surface-hover hover:text-primary font-bold transition-colors" role="menuitem">All Products</a>
32+
<a href="/products" class="block px-4 py-2 text-sm text-text-main hover:bg-surface-hover hover:text-primary transition-colors font-heading" role="menuitem">All Products</a>
3333
</div>
3434
</div>
3535
</div>
3636

3737
<!-- Documentation Dropdown -->
3838
<div class="relative group">
39-
<button class="text-text-main hover:text-primary font-medium inline-flex items-center space-x-1 transition-colors">
39+
<button class="text-text-main hover:text-primary font-medium inline-flex items-center space-x-1 transition-colors font-heading">
4040
<span>DOCUMENTATION</span>
41-
<svg class="w-4 h-4 ml-1 transition-transform group-hover:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
41+
<svg class="w-4 h-4 ml-1 transition-transform group-hover:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
4242
</button>
43-
<div class="absolute left-0 mt-2 w-56 rounded-xl shadow-xl bg-white/90 dark:bg-slate-800/90 backdrop-blur-xl ring-1 ring-black ring-opacity-5 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 transform origin-top-left z-50 translate-y-2 group-hover:translate-y-0">
43+
<div class="absolute left-0 mt-2 w-56 rounded-xl shadow-xl bg-white/90 dark:bg-slate-800/90 backdrop-blur-xl ring-1 ring-black ring-opacity-5 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 transform origin-top-left z-50 translate-y-2 group-hover:translate-y-0 text-left">
4444
<div class="py-2" role="menu">
45-
<a href="https://docs.prism.ultraviolet.rs/" target="_blank" class="block px-4 py-2 text-sm text-text-main hover:bg-surface-hover hover:text-primary transition-colors">PRISM AI</a>
46-
<a href="https://docs.cocos.ultraviolet.rs/" target="_blank" class="block px-4 py-2 text-sm text-text-main hover:bg-surface-hover hover:text-primary transition-colors">COCOS AI</a>
47-
<a href="https://docs.cube.ultraviolet.rs/" target="_blank" class="block px-4 py-2 text-sm text-text-main hover:bg-surface-hover hover:text-primary transition-colors">CUBE AI</a>
45+
<a href="https://docs.prism.ultraviolet.rs/" target="_blank" class="block px-4 py-2 text-sm text-text-main hover:bg-surface-hover hover:text-primary transition-colors font-heading">PRISM AI</a>
46+
<a href="https://docs.cocos.ultraviolet.rs/" target="_blank" class="block px-4 py-2 text-sm text-text-main hover:bg-surface-hover hover:text-primary transition-colors font-heading">COCOS AI</a>
47+
<a href="https://docs.cube.ultraviolet.rs/" target="_blank" class="block px-4 py-2 text-sm text-text-main hover:bg-surface-hover hover:text-primary transition-colors font-heading">CUBE AI</a>
4848
</div>
4949
</div>
5050
</div>
5151

5252
<!-- Projects Dropdown -->
5353
<div class="relative group">
54-
<button class="text-text-main hover:text-primary font-medium inline-flex items-center space-x-1 transition-colors">
54+
<button class="text-text-main hover:text-primary font-medium inline-flex items-center space-x-1 transition-colors font-heading">
5555
<span>PROJECTS</span>
5656
<svg class="w-4 h-4 ml-1 transition-transform group-hover:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
5757
</button>
58-
<div class="absolute left-0 mt-2 w-56 rounded-xl shadow-xl bg-white/90 dark:bg-slate-800/90 backdrop-blur-xl ring-1 ring-black ring-opacity-5 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 transform origin-top-left z-50 translate-y-2 group-hover:translate-y-0">
58+
<div class="absolute left-0 mt-2 w-56 rounded-xl shadow-xl bg-white/90 dark:bg-slate-800/90 backdrop-blur-xl ring-1 ring-black ring-opacity-5 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 transform origin-top-left z-50 translate-y-2 group-hover:translate-y-0 text-left">
5959
<div class="py-2" role="menu">
60-
<a href="/projects/confidential6g" class="block px-4 py-2 text-sm text-text-main hover:bg-surface-hover hover:text-primary transition-colors">CONFIDENTIAL6G</a>
61-
<a href="/projects/elastic" class="block px-4 py-2 text-sm text-text-main hover:bg-surface-hover hover:text-primary transition-colors">ELASTIC</a>
62-
<a href="/projects/titan" class="block px-4 py-2 text-sm text-text-main hover:bg-surface-hover hover:text-primary transition-colors">TITAN</a>
60+
<a href="/projects/confidential6g" class="block px-4 py-2 text-sm text-text-main hover:bg-surface-hover hover:text-primary transition-colors font-heading">CONFIDENTIAL6G</a>
61+
<a href="/projects/elastic" class="block px-4 py-2 text-sm text-text-main hover:bg-surface-hover hover:text-primary transition-colors font-heading">ELASTIC</a>
62+
<a href="/projects/titan" class="block px-4 py-2 text-sm text-text-main hover:bg-surface-hover hover:text-primary transition-colors font-heading">TITAN</a>
6363
<div class="border-t border-border my-1"></div>
64-
<a href="/projects" class="block px-4 py-2 text-sm text-text-main hover:bg-surface-hover hover:text-primary font-bold transition-colors">All Projects</a>
64+
<a href="/projects" class="block px-4 py-2 text-sm text-text-main hover:bg-surface-hover hover:text-primary font-bold transition-colors font-heading">All Projects</a>
6565
</div>
6666
</div>
6767
</div>
6868

69-
<a href="/company" class="text-text-main hover:text-primary font-medium transition-colors">COMPANY</a>
70-
<a href="/careers" class="text-text-main hover:text-primary font-medium transition-colors">CAREERS</a>
71-
<a href="/contact" class="text-text-main hover:text-primary font-medium transition-colors">CONTACT</a>
72-
<a href="/blog" class="text-text-main hover:text-primary font-medium transition-colors">BLOG</a>
69+
<a href="/company" class="text-text-main hover:text-primary font-medium font-heading transition-colors">COMPANY</a>
70+
<a href="/careers" class="text-text-main hover:text-primary font-medium font-heading transition-colors">CAREERS</a>
71+
<a href="/contact" class="text-text-main hover:text-primary font-medium font-heading transition-colors">CONTACT</a>
72+
<a href="/blog" class="text-text-main hover:text-primary font-medium font-heading transition-colors">BLOG</a>
7373

7474
<!-- Icons & Dark Mode -->
7575
<div class="flex items-center space-x-4 ml-4 border-l border-border pl-4">
@@ -111,33 +111,52 @@
111111

112112
<!-- Mobile Menu Overlay -->
113113
<div class="fixed inset-0 z-40 bg-white/95 dark:bg-slate-900/95 backdrop-blur-xl transition-all duration-300 transform translate-x-full md:hidden flex flex-col pt-24 px-6 overflow-y-auto" id="mobile-menu">
114-
<div class="space-y-6">
114+
<div class="space-y-8 pb-10">
115115

116+
<!-- Products Section -->
116117
<div class="space-y-4">
117-
<h3 class="text-sm font-bold text-text-muted uppercase tracking-wider">Products</h3>
118-
<a href="/products" class="block text-2xl font-bold text-text-main hover:text-primary transition-colors">All Products</a>
119-
<a href="https://prism.ultraviolet.rs" class="block text-lg font-medium text-text-muted hover:text-primary transition-colors pl-4 border-l-2 border-transparent hover:border-primary">Prism AI</a>
120-
<a href="/cocos" class="block text-lg font-medium text-text-muted hover:text-primary transition-colors pl-4 border-l-2 border-transparent hover:border-primary">Cocos AI</a>
121-
<a href="/cube" class="block text-lg font-medium text-text-muted hover:text-primary transition-colors pl-4 border-l-2 border-transparent hover:border-primary">Cube AI</a>
118+
<h3 class="text-xs font-bold text-text-muted uppercase tracking-widest font-heading border-b border-border pb-2">Products</h3>
119+
<a href="/products" class="block text-3xl font-bold text-text-main hover:text-primary transition-colors font-heading">
120+
All Products
121+
</a>
122+
<div class="space-y-3 pl-2">
123+
<a href="https://prism.ultraviolet.rs" class="flex items-center justify-between text-xl font-medium text-text-muted hover:text-primary transition-colors group font-heading">
124+
<span>Prism AI</span>
125+
<span class="opacity-0 group-hover:opacity-100 transition-opacity">→</span>
126+
</a>
127+
<a href="/cocos" class="flex items-center justify-between text-xl font-medium text-text-muted hover:text-primary transition-colors group font-heading">
128+
<span>Cocos AI</span>
129+
<span class="opacity-0 group-hover:opacity-100 transition-opacity">→</span>
130+
</a>
131+
<a href="/cube" class="flex items-center justify-between text-xl font-medium text-text-muted hover:text-primary transition-colors group font-heading">
132+
<span>Cube AI</span>
133+
<span class="opacity-0 group-hover:opacity-100 transition-opacity">→</span>
134+
</a>
135+
</div>
122136
</div>
123137

138+
<!-- Documentation Section -->
124139
<div class="space-y-4">
125-
<h3 class="text-sm font-bold text-text-muted uppercase tracking-wider">Documentation</h3>
126-
<a href="https://docs.prism.ultraviolet.rs/" class="block text-lg font-medium text-text-muted hover:text-primary transition-colors pl-4 border-l-2 border-transparent hover:border-primary">Prism AI Docs</a>
127-
<a href="https://docs.cocos.ultraviolet.rs/" class="block text-lg font-medium text-text-muted hover:text-primary transition-colors pl-4 border-l-2 border-transparent hover:border-primary">Cocos AI Docs</a>
128-
<a href="https://docs.cube.ultraviolet.rs/" class="block text-lg font-medium text-text-muted hover:text-primary transition-colors pl-4 border-l-2 border-transparent hover:border-primary">Cube AI Docs</a>
140+
<h3 class="text-xs font-bold text-text-muted uppercase tracking-widest font-heading border-b border-border pb-2">Documentation</h3>
141+
<div class="grid grid-cols-1 gap-3 pl-2">
142+
<a href="https://docs.prism.ultraviolet.rs/" class="block text-lg font-medium text-text-muted hover:text-primary transition-colors font-heading">Prism AI Docs</a>
143+
<a href="https://docs.cocos.ultraviolet.rs/" class="block text-lg font-medium text-text-muted hover:text-primary transition-colors font-heading">Cocos AI Docs</a>
144+
<a href="https://docs.cube.ultraviolet.rs/" class="block text-lg font-medium text-text-muted hover:text-primary transition-colors font-heading">Cube AI Docs</a>
145+
</div>
129146
</div>
130147

148+
<!-- Projects Section -->
131149
<div class="space-y-4">
132-
<h3 class="text-sm font-bold text-text-muted uppercase tracking-wider">Projects</h3>
133-
<a href="/projects" class="block text-2xl font-bold text-text-main hover:text-primary transition-colors">All Projects</a>
150+
<h3 class="text-xs font-bold text-text-muted uppercase tracking-widest font-heading border-b border-border pb-2">Projects</h3>
151+
<a href="/projects" class="block text-3xl font-bold text-text-main hover:text-primary transition-colors font-heading">All Projects</a>
134152
</div>
135153

136-
<div class="pt-6 border-t border-border grid grid-cols-2 gap-4">
137-
<a href="/company" class="text-lg font-medium text-text-main hover:text-primary transition-colors">Company</a>
138-
<a href="/careers" class="text-lg font-medium text-text-main hover:text-primary transition-colors">Careers</a>
139-
<a href="/contact" class="text-lg font-medium text-text-main hover:text-primary transition-colors">Contact</a>
140-
<a href="/blog" class="text-lg font-medium text-text-main hover:text-primary transition-colors">Blog</a>
154+
<!-- Footer Links -->
155+
<div class="pt-8 mt-4 border-t border-border grid grid-cols-2 gap-y-6 gap-x-4">
156+
<a href="/company" class="text-xl font-medium text-text-main hover:text-primary transition-colors font-heading">Company</a>
157+
<a href="/careers" class="text-xl font-medium text-text-main hover:text-primary transition-colors font-heading">Careers</a>
158+
<a href="/contact" class="text-xl font-medium text-text-main hover:text-primary transition-colors font-heading">Contact</a>
159+
<a href="/blog" class="text-xl font-medium text-text-main hover:text-primary transition-colors font-heading">Blog</a>
141160
</div>
142161
</div>
143162
</div>

‎src/components/Hero.astro‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,17 @@ interface Props {
1111
const { title, description, image, ctaText, ctaLink, layout = 'split' } = Astro.props;
1212
---
1313

14-
<section class="bg-background transition-colors duration-300 py-12 lg:py-20">
15-
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
14+
<section class="bg-background transition-colors duration-300 py-3 lg:py-3">
15+
<div class="max-w-7xl mx-auto px-0 sm:px-0 lg:px-0">
1616
{layout === 'stacked' ? (
1717
<div class="flex flex-col gap-8">
1818
{image && (
19-
<div class="w-full relative">
20-
<img class="w-full h-auto object-cover rounded-none shadow-none" src={image} alt="Hero Image">
19+
<div class="flex items-center justify-center h-[400px] overflow-hidden w-full relative">
20+
<img class="max-w-full h-auto" src={image} alt={title} loading="lazy">
2121
</div>
2222
)}
2323
<div class="max-w-4xl">
24-
<h1 class="text-4xl tracking-tight font-extrabold text-text-main sm:text-5xl md:text-6xl mb-6 font-heading">
24+
<h1 class="text-4xl tracking-tight text-text-main sm:text-5xl md:text-6xl mb-6 font-heading">
2525
<span class="block xl:inline">{title}</span>
2626
</h1>
2727
<p class="mt-4 text-lg text-text-muted sm:mt-5 sm:max-w-3xl md:mt-5 md:text-xl">
@@ -41,7 +41,7 @@ const { title, description, image, ctaText, ctaLink, layout = 'split' } = Astro.
4141
) : (
4242
<div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
4343
<div>
44-
<h1 class="text-4xl tracking-tight font-extrabold text-text-main sm:text-5xl md:text-6xl mb-6 font-heading">
44+
<h1 class="text-4xl tracking-tight text-text-main sm:text-5xl md:text-6xl mb-6 font-heading">
4545
<span class="block xl:inline">{title}</span>
4646
</h1>
4747
<p class="mt-4 text-lg text-text-muted sm:mt-5 sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">

0 commit comments

Comments
 (0)