From 3c18ed64fd5bb8ffb7ff9ee2b7bb55a899c9ba43 Mon Sep 17 00:00:00 2001 From: Fax Date: Sun, 15 Mar 2026 21:15:58 +1300 Subject: [PATCH 1/2] cards --- .claude/settings.local.json | 3 +- changelog/v0.5.0.md | 1 + src/app/components/welcome-modal/changelog.ts | 1 + src/app/features/home/home.component.css | 225 +++++++++++- src/app/features/home/home.component.html | 336 ++++++++++++++---- src/app/features/home/home.component.spec.ts | 54 ++- 6 files changed, 528 insertions(+), 92 deletions(-) diff --git a/.claude/settings.local.json b/.claude/settings.local.json index bbfb763..98f638b 100644 --- a/.claude/settings.local.json +++ b/.claude/settings.local.json @@ -2,7 +2,8 @@ "permissions": { "allow": [ "Bash(npm test)", - "Bash(export PATH=\"/c/Users/aaron/AppData/Local/mise/shims:$PATH\")" + "Bash(export PATH=\"/c/Users/aaron/AppData/Local/mise/shims:$PATH\")", + "WebFetch(domain:ehire-cms.webflow.io)" ] } } diff --git a/changelog/v0.5.0.md b/changelog/v0.5.0.md index 45c83de..097434f 100644 --- a/changelog/v0.5.0.md +++ b/changelog/v0.5.0.md @@ -11,3 +11,4 @@ - Updated screenshots throughout the homepage - Google Tag Manager integration with custom events for search and document views - Auth page redesigned to match homepage dark theme with teal accents and logo +- Homepage redesigned with floating UI mockups, scrolling feature marquee, 4x2 feature grid with circular icons, teal CTA, and 4-column footer diff --git a/src/app/components/welcome-modal/changelog.ts b/src/app/components/welcome-modal/changelog.ts index 0fbd1ae..53b81f5 100644 --- a/src/app/components/welcome-modal/changelog.ts +++ b/src/app/components/welcome-modal/changelog.ts @@ -25,6 +25,7 @@ export const CHANGELOG: ChangelogEntry[] = [ 'Updated screenshots throughout the homepage', 'Google Tag Manager integration with custom events for search and document views', 'Auth page redesigned to match homepage dark theme with teal accents and logo', + 'Homepage redesigned with floating UI mockups, scrolling feature marquee, 4x2 feature grid with circular icons, teal CTA, and 4-column footer', ], }, ], diff --git a/src/app/features/home/home.component.css b/src/app/features/home/home.component.css index 39055cf..474e586 100644 --- a/src/app/features/home/home.component.css +++ b/src/app/features/home/home.component.css @@ -25,7 +25,7 @@ background-clip: text; } -/* Hero screenshot */ +/* Hero screenshot (mobile fallback) */ .hero-screenshot { animation: fadeUp 0.8s ease-out 0.2s both; position: relative; @@ -57,32 +57,229 @@ } } -/* Feature cards */ +/* ── Hero Floating Mockups ── */ +.hero-mockups { + position: relative; + min-height: 340px; +} + +.mockup-card { + position: absolute; + background: #0c0c10; + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 0.75rem; + padding: 0.875rem; + box-shadow: + 0 0 0 1px rgba(255, 255, 255, 0.04), + 0 16px 48px rgba(0, 0, 0, 0.5); + animation: floatMockup 6s ease-in-out infinite; +} + +.mockup-results { + top: 0; + left: 0; + right: 20%; + transform: rotate(-1deg); + animation-delay: 0s; + z-index: 2; +} + +.mockup-queries { + bottom: 0; + right: 0; + width: 52%; + transform: rotate(1.5deg); + animation-delay: -3s; + z-index: 3; +} + +@keyframes floatMockup { + 0%, 100% { transform: translateY(0) rotate(var(--rotate, -1deg)); } + 50% { transform: translateY(-8px) rotate(var(--rotate, -1deg)); } +} + +.mockup-results { --rotate: -1deg; } +.mockup-queries { --rotate: 1.5deg; } + +.mockup-header { + display: flex; + justify-content: space-between; + align-items: center; + padding-bottom: 0.5rem; + margin-bottom: 0.5rem; + border-bottom: 1px solid rgba(255, 255, 255, 0.06); +} + +.mockup-row { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.375rem 0; + font-size: 0.6875rem; + color: #8a8a9a; + border-bottom: 1px solid rgba(255, 255, 255, 0.03); +} + +.mockup-row:last-child { + border-bottom: none; +} + +.mockup-ticker { + font-weight: 700; + color: #ffffff; + font-size: 0.6875rem; + width: 2.5rem; + flex-shrink: 0; +} + +.mockup-badge { + font-size: 0.5625rem; + font-weight: 600; + padding: 0.125rem 0.375rem; + border-radius: 0.25rem; + flex-shrink: 0; + text-transform: uppercase; +} + +.mockup-badge-8k { + background: rgba(78, 201, 176, 0.15); + color: #4ec9b0; +} + +.mockup-badge-10k { + background: rgba(97, 175, 239, 0.15); + color: #61afef; +} + +.mockup-badge-def { + background: rgba(229, 192, 123, 0.15); + color: #e5c07b; +} + +.mockup-desc { + flex: 1; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + min-width: 0; +} + +.mockup-tag { + font-size: 0.5625rem; + padding: 0.0625rem 0.3125rem; + border-radius: 0.1875rem; + background: rgba(255, 255, 255, 0.06); + color: #707080; + flex-shrink: 0; +} + +.mockup-date { + color: #505060; + font-size: 0.625rem; + flex-shrink: 0; +} + +/* Mockup query sidebar items */ +.mockup-query-item { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.375rem 0; + font-size: 0.6875rem; +} + +.mockup-query-icon { + width: 0.625rem; + height: 0.625rem; + border-radius: 0.125rem; + flex-shrink: 0; +} + +.mockup-query-name { + flex: 1; + color: #b0b0b8; +} + +.mockup-query-label { + font-size: 0.5625rem; + font-weight: 600; + color: #505060; + text-transform: uppercase; +} + +/* ── Scrolling Marquee ── */ +.marquee-track { + display: flex; + overflow: hidden; + width: 100%; +} + +.marquee-content { + display: flex; + flex-shrink: 0; + animation: marquee 30s linear infinite; +} + +@keyframes marquee { + 0% { transform: translateX(0); } + 100% { transform: translateX(-100%); } +} + +@media (prefers-reduced-motion: reduce) { + .marquee-content { + animation-play-state: paused; + } +} + +.marquee-item { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0 2rem; + white-space: nowrap; + font-size: 0.8125rem; + font-weight: 500; + color: #707080; +} + +.marquee-item svg { + color: #4ec9b0; + flex-shrink: 0; +} + +/* ── Feature cards ── */ .feature-card { background: #0c0c10; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 1rem; padding: 1.75rem; - transition: border-color 0.2s ease; + transition: border-color 0.2s ease, transform 0.2s ease; } .feature-card:hover { - border-color: rgba(255, 255, 255, 0.12); + border-color: rgba(78, 201, 176, 0.25); + transform: translateY(-2px); } -.feature-icon { +/* Circular teal-bordered icon */ +.feature-icon-circle { display: flex; align-items: center; justify-content: center; - width: 2.5rem; - height: 2.5rem; - border-radius: 0.625rem; - background: rgba(78, 201, 176, 0.08); + width: 2.75rem; + height: 2.75rem; + border-radius: 50%; + border: 2px solid rgba(78, 201, 176, 0.3); color: #4ec9b0; margin-bottom: 1rem; + transition: border-color 0.2s ease; +} + +.feature-card:hover .feature-icon-circle { + border-color: rgba(78, 201, 176, 0.6); } -/* Showcase images */ +/* ── Showcase images ── */ .showcase-image-wrap { animation: fadeUp 0.8s ease-out both; } @@ -99,13 +296,13 @@ transform: scale(1.02); } -/* CTA card */ -.cta-card { +/* ── CTA card (teal-tinted) ── */ +.cta-card-v2 { position: relative; border-radius: 1.25rem; - border: 1px solid rgba(255, 255, 255, 0.06); + border: 1px solid rgba(78, 201, 176, 0.15); overflow: hidden; - background: #0c0c10; + background: linear-gradient(135deg, rgba(78, 201, 176, 0.06), rgba(78, 201, 176, 0.02)); padding: 4rem 2rem; } diff --git a/src/app/features/home/home.component.html b/src/app/features/home/home.component.html index 04149c0..b3223cc 100644 --- a/src/app/features/home/home.component.html +++ b/src/app/features/home/home.component.html @@ -10,6 +10,7 @@
+ Sign In @@ -25,83 +26,232 @@
-
-
- - Free during beta -
+
+
+ +
+
+ + Free during beta +
-

- Search and analyze
- SEC filings with precision -

+

+ Search and analyze
+ SEC filings with precision +

-

- A query-driven tool for searching, filtering, and reading EDGAR filings. - Built for analysts, researchers, and investors. -

+

+ A query-driven tool for searching, filtering, and reading EDGAR filings. + Built for analysts, researchers, and investors. +

-
- - Get Started Free - - - - See How It Works - -
+
+ + Get Started Free + + + + See How It Works + +
+
+ + + - -
- Nullabroke filing search interface showing the query builder with 19 saved queries, SQL-like search syntax, and results for 8-K presentation filings + +
+ Nullabroke filing search interface showing the query builder with 19 saved queries, SQL-like search syntax, and results for 8-K presentation filings +
- -
-
-
-
-
19+
-
Pre-built Queries
+ +
+
+
+
+ + Query Builder +
+
+ + EDGAR Coverage +
+
+ + XBRL Data +
+
+ + Document Viewer +
+
+ + 19 Blueprints +
+
+ + Real-Time Data +
+
+ + Save & Pin +
+
+ + Mobile Ready +
+
+ +
+ + +
+
+
+
+ Nullabroke filing search interface showing the query builder with saved queries and search results
-
-
100%
-
Free to Use
+
+

The numbers speak

+
+
+
19+
+
Pre-built blueprint queries for common SEC searches — IPOs, earnings, insider trades, and more.
+
+
+
100%
+
Full EDGAR coverage. Every filing type, every company, every document — searchable and readable.
+
+
+
4
+
Dynamic parameter types — dropdowns, text inputs, number inputs, and tag selectors built into your queries.
+
+
+ + Learn More + +
-
+

Built for SEC research

Everything you need to search, filter, and read SEC filings — without the noise.

-
+
-
+

Query Builder

@@ -110,7 +260,7 @@

Query Builder

-
+

19 Blueprint Queries

@@ -119,7 +269,7 @@

19 Blueprint Queries

-
+

Save & Organize

@@ -128,7 +278,7 @@

Save & Organize

-
+

Document Viewer

@@ -137,7 +287,7 @@

Document Viewer

-
+

XBRL Data Viewer

@@ -146,19 +296,37 @@

XBRL Data Viewer

-
+

Works on Any Device

Fully responsive on desktop, tablet, and mobile. Dark-themed for extended use. Sign in instantly with Google or GitHub.

+ +
+
+ +
+

Dynamic Parameters

+

Embed dropdowns, text fields, number inputs, and tag selectors directly in your queries. Change inputs without rewriting SQL.

+
+ + +
+
+ +
+

Real-Time EDGAR Data

+

Queries run directly against the SEC EDGAR full-text search API. Results reflect the latest filings as they are published.

+
+
-
+
@@ -296,7 +464,7 @@

Read fi
-
+

Ready to explore SEC filings?

@@ -312,15 +480,51 @@

Ready to explore SEC -

diff --git a/src/app/features/home/home.component.spec.ts b/src/app/features/home/home.component.spec.ts index 8204af8..b8f7e46 100644 --- a/src/app/features/home/home.component.spec.ts +++ b/src/app/features/home/home.component.spec.ts @@ -49,7 +49,7 @@ describe('HomeComponent', () => { expect(h1?.textContent).toContain('precision'); }); - it('should render hero mockups on desktop and screenshot on mobile', () => { + it('should render hero floating mockups', () => { const el: HTMLElement = fixture.nativeElement; const mockups = el.querySelector('.hero-mockups'); expect(mockups).toBeTruthy(); @@ -57,9 +57,6 @@ describe('HomeComponent', () => { expect(mockupResults).toBeTruthy(); const mockupQueries = el.querySelector('.mockup-queries'); expect(mockupQueries).toBeTruthy(); - const heroImg = el.querySelector('.hero-screenshot img') as HTMLImageElement; - expect(heroImg).toBeTruthy(); - expect(heroImg.src).toContain('filings-presentations'); }); it('should render the scrolling marquee with 8 items', () => {