Feature/newhomepage

.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)"
     ]
   }
 }

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

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',
         ],
       },
     ],

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;
 }