diff --git a/web/src/components/landing-page.css b/web/src/components/landing-page.css index e1082cb..cda4278 100644 --- a/web/src/components/landing-page.css +++ b/web/src/components/landing-page.css @@ -34,7 +34,12 @@ --feat-bg: #221f1b; --feat-text: #ffffff; --term-bg: #221f1b; - font-family: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif; + font-family: + "Inter", + ui-sans-serif, + system-ui, + -apple-system, + sans-serif; background: var(--canvas); color: var(--ink); font-size: 16px; @@ -298,6 +303,33 @@ position: relative; z-index: 1; } +/* Out of flow so the hero's vertical centering ignores the laurel and the + headline block sits exactly where it did without it. */ +.itc-hero-ph-laurel { + color: var(--ink); + display: inline-flex; + position: absolute; + bottom: calc(100% + 28px); + left: 50%; + transform: translateX(-50%); + opacity: 0.85; + transition: opacity 0.18s ease; +} +.itc-hero-ph-laurel:hover { + opacity: 1; +} +.itc-hero-ph-laurel svg { + height: 44px; + width: auto; +} +@media (max-width: 767px) { + .itc-hero-ph-laurel { + bottom: calc(100% + 20px); + } + .itc-hero-ph-laurel svg { + height: 38px; + } +} .itc-hero-title { color: var(--ink); transition: color 0.18s ease; diff --git a/web/src/components/landing-page.tsx b/web/src/components/landing-page.tsx index d767483..57bdf0f 100644 --- a/web/src/components/landing-page.tsx +++ b/web/src/components/landing-page.tsx @@ -7,11 +7,14 @@ import { type ReactNode, type SVGProps } from "react"; import { NewsletterSignup } from "@/components/newsletter-signup"; +import { ProductHuntLaurel } from "@/components/product-hunt-laurel"; import { SiteFooter } from "@/components/site-footer"; import { featurePages } from "@/lib/feature-pages"; import "./landing-page.css"; const SIGNUP_URL = "https://app.openseo.so/sign-up"; +const PRODUCT_HUNT_URL = + "https://www.producthunt.com/products/openseo?launch=openseo"; const GITHUB_URL = "https://github.com/every-app/open-seo"; const DISCORD_URL = "https://discord.gg/c9uGs3cFXr"; @@ -179,7 +182,10 @@ function ArrowCta({ size?: "md" | "lg"; }) { return ( - + {children} @@ -192,6 +198,15 @@ function Hero() { return (
+ + +

{page.eyebrow}

-

+

{blurb}

@@ -457,8 +475,7 @@ function McpSection() { 
               
                 › find and cluster keywords
-                for{" "}
-                openseo.so
+                for openseo.so
                 {"\n\n"}
                 
                   ⏺ openseo.keyword_research(seed: "open source seo")
@@ -630,22 +647,10 @@ function GeminiIcon(props: SVGProps) {
           
         
         
-          
+          
         
         
-          
+          
         
         
           
           
-            Why Open Source?{" "}
-            
+            Why Open Source? 
           
         
       
diff --git a/web/src/components/product-hunt-laurel.tsx b/web/src/components/product-hunt-laurel.tsx
new file mode 100644
index 0000000..15ab430
--- /dev/null
+++ b/web/src/components/product-hunt-laurel.tsx
@@ -0,0 +1,209 @@
+// Product Hunt "1st Product of the Day" laurel badge. Paths are Product
+// Hunt's official badge artwork; fill inherits currentColor so the badge can
+// sit on any background.
+export function ProductHuntLaurel({ className }: { className?: string }) {
+  return (
+    
+  );
+}