diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css index 5ec834c8..cc526de1 100644 --- a/apps/web/src/app/globals.css +++ b/apps/web/src/app/globals.css @@ -841,9 +841,12 @@ body { } .dark .glass-overlay { - background: hsl(var(--surface-1) / 0.7); - border: 1px solid rgba(255, 255, 255, 0.06); - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04); + background: linear-gradient(180deg, rgba(122, 107, 245, 0.05), transparent 42%), var(--mdt-surface); + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + border: 1px solid var(--mdt-border); + border-radius: 18px; + box-shadow: 0 18px 50px -24px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05); } /* Modals, command palette, dropdowns */ @@ -856,9 +859,9 @@ body { } .dark .glass-modal { - background: hsl(var(--surface-2) / 0.94); - border: 1px solid rgba(255, 255, 255, 0.07); - box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06); + background: linear-gradient(180deg, rgba(122, 107, 245, 0.06), transparent 38%), var(--mdt-surface-hi); + border: 1px solid var(--mdt-border); + box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06); } /* Core workspace — NO glass, solid crisp background */ @@ -1445,4 +1448,254 @@ body { .dark .todo-app .paper-grain::before { mix-blend-mode: screen; opacity: 0.04; -} \ No newline at end of file +} +/* ───────────────────────────────────────────────────────────────────────── + MYDEVTOOLS · DECK DESIGN LAYER (matches the investor-deck aesthetic) + Theme-independent — marketing surfaces always render the dark "deck" look. + ───────────────────────────────────────────────────────────────────────── */ +:root { + --mdt-bg: #08090f; + --mdt-bg2: #0d0f18; + --mdt-surface: #14161f; + --mdt-surface-hi: #1c1f2b; + --mdt-border: #2a2e3d; + --mdt-text: #f4f5fa; + --mdt-muted: #9aa0b4; + --mdt-faint: #5b6076; + --mdt-indigo: #5b63f0; + --mdt-violet: #9a5cf2; + --mdt-cyan: #4fd0e6; + --mdt-green: #3fd79a; + --mdt-amber: #f2a93b; + --mdt-grad: linear-gradient(100deg, #5b63f0 0%, #9a5cf2 52%, #4fd0e6 100%); + --mdt-grad-soft: linear-gradient(100deg, rgba(91,99,240,.16), rgba(154,92,242,.16) 52%, rgba(79,208,230,.16)); +} + +/* dark base retuned to the deck palette */ +.dark { + --background: 232 30% 5%; + --foreground: 228 50% 97%; + --card: 230 24% 9%; + --card-foreground: 228 50% 97%; + --popover: 230 24% 9%; + --popover-foreground: 228 50% 97%; + --muted: 232 26% 10%; + --muted-foreground: 228 16% 70%; + --border: 232 22% 15%; + --input: 232 22% 15%; + --surface-1: 232 30% 6%; + --surface-2: 232 28% 8%; + --surface-3: 232 26% 11%; +} + +/* deck canvas wrapper — forces the dark premium look on marketing pages */ +html { overflow-x: hidden; } +.mdt-deck { + position: relative; + background: var(--mdt-bg); + color: var(--mdt-text); + isolation: isolate; +} +/* ambient color depth fixed behind all content (kills flat grey sections) */ +.mdt-deck::before { + content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; + background: + radial-gradient(52% 42% at 88% 6%, rgba(122,107,245,.15), transparent 60%), + radial-gradient(48% 40% at 4% 70%, rgba(79,140,235,.12), transparent 60%), + radial-gradient(85% 55% at 52% 118%, rgba(154,92,242,.11), transparent 60%); +} +.mdt-deck ::selection { background: rgba(122,107,245,.35); } + +/* atmospheric backdrop: orbs + grid + grain, behind all content */ +.mdt-backdrop { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } +.mdt-orb { position: absolute; border-radius: 9999px; filter: blur(40px); opacity: .9; } +.mdt-orb--brand { background: radial-gradient(circle at 35% 35%, rgba(154,92,242,.55), rgba(91,99,240,.28) 45%, transparent 70%); } +.mdt-orb--cyan { background: radial-gradient(circle, rgba(79,208,230,.32), transparent 70%); } +.mdt-orb--blue { background: radial-gradient(circle, rgba(79,140,235,.30), transparent 70%); } +.mdt-grid { + position: absolute; inset: 0; pointer-events: none; + background-image: + linear-gradient(to right, rgba(160,172,255,.045) 1px, transparent 1px), + linear-gradient(to bottom, rgba(160,172,255,.045) 1px, transparent 1px); + background-size: 64px 64px; + -webkit-mask-image: radial-gradient(130% 110% at 0% 0%, #000 0%, transparent 62%); + mask-image: radial-gradient(130% 110% at 0% 0%, #000 0%, transparent 62%); +} +.mdt-noise { + position: absolute; inset: 0; pointer-events: none; opacity: .28; mix-blend-mode: soft-light; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); +} +/* content stacks above the backdrop naturally; backdrop sits at z-index:-1. + (No blanket position rule — it would override fixed/sticky children.) */ + +/* typography helpers */ +.mdt-grad-text { + background: var(--mdt-grad); + -webkit-background-clip: text; background-clip: text; + -webkit-text-fill-color: transparent; color: transparent; +} +.mdt-kicker { + font-family: var(--font-geist-mono), ui-monospace, monospace; + text-transform: uppercase; letter-spacing: .22em; + font-size: .78rem; color: var(--mdt-muted); +} +.mdt-mono { font-family: var(--font-geist-mono), ui-monospace, monospace; } +.mdt-text-muted { color: var(--mdt-muted); } +.mdt-text-faint { color: var(--mdt-faint); } + +/* surfaces, rails, pills */ +.mdt-surface { + background: linear-gradient(180deg, rgba(255,255,255,.02), transparent), var(--mdt-surface); + border: 1px solid var(--mdt-border); + border-radius: 18px; +} +.mdt-surface-hi { background: var(--mdt-surface-hi); border: 1px solid var(--mdt-border); border-radius: 18px; } +.mdt-rail { background: var(--mdt-grad); } +.mdt-pill { + display: inline-flex; align-items: center; gap: .5rem; + border: 1px solid var(--mdt-border); border-radius: 9999px; + background: var(--mdt-surface); padding: .35rem .85rem; + font-family: var(--font-geist-mono), monospace; font-size: .8rem; color: var(--mdt-muted); +} +.mdt-card-hover { transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .3s, box-shadow .3s; } +.mdt-card-hover:hover { transform: translateY(-4px); border-color: rgba(122,107,245,.5); box-shadow: 0 20px 60px -20px rgba(91,99,240,.35); } + +/* gradient-stroke icons (uses the hidden ) */ +.mdt-icon-grad svg, svg.mdt-icon-grad { stroke: url(#mdtGrad); } + +/* buttons */ +.mdt-btn-grad { + background: var(--mdt-grad); color: #0a0b12; border: none; + font-weight: 600; transition: filter .2s, transform .2s, box-shadow .2s; + box-shadow: 0 10px 30px -10px rgba(122,107,245,.6); +} +.mdt-btn-grad:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 16px 40px -10px rgba(122,107,245,.7); } +.mdt-btn-ghost { + background: rgba(255,255,255,.03); color: var(--mdt-text); + border: 1px solid var(--mdt-border); transition: background .2s, border-color .2s, transform .2s; +} +.mdt-btn-ghost:hover { background: rgba(255,255,255,.06); border-color: rgba(122,107,245,.5); transform: translateY(-2px); } + +/* gradient hairline divider */ +.mdt-hr { height: 1px; border: 0; background: linear-gradient(90deg, transparent, var(--mdt-border) 20%, var(--mdt-border) 80%, transparent); } + +/* ─── DECK FX: futuristic motion + interaction (scoped to .mdt-deck) ───────── */ +@property --mdt-angle { syntax: ""; initial-value: 0deg; inherits: false; } + +/* cursor-following gradient border on every surface card */ +.mdt-deck .glass-overlay { position: relative; } +.mdt-deck .glass-overlay::before { + content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; + pointer-events: none; z-index: 3; + background: radial-gradient(180px circle at var(--mx, 50%) var(--my, 50%), rgba(150,160,255,.9), rgba(122,107,245,.18) 45%, transparent 66%); + -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); + mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); + -webkit-mask-composite: xor; mask-composite: exclude; + opacity: 0; transition: opacity .4s ease; +} +.mdt-deck .glass-overlay:hover::before { opacity: 1; } + +/* animated gradient border-beam for a featured card */ +.mdt-deck .mdt-beam { position: relative; } +.mdt-deck .mdt-beam::after { + content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; + pointer-events: none; z-index: 3; + background: conic-gradient(from var(--mdt-angle), transparent 0 62%, #5b63f0 78%, #9a5cf2 88%, #4fd0e6 96%, transparent 100%); + -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); + mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); + -webkit-mask-composite: xor; mask-composite: exclude; + animation: mdt-spin 6s linear infinite; +} +@keyframes mdt-spin { to { --mdt-angle: 360deg; } } + +/* scroll-progress beam */ +.mdt-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; transform-origin: 0 50%; background: var(--mdt-grad); z-index: 60; } + +/* slow sheen across gradient headline text */ +.mdt-grad-anim { background-size: 220% 100%; animation: mdt-sheen 9s ease-in-out infinite; } +@keyframes mdt-sheen { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } + +/* aurora canvas in hero */ +.mdt-aurora { position: absolute; inset: 0; width: 100%; height: 100%; filter: blur(72px) saturate(1.25); opacity: .5; mix-blend-mode: screen; pointer-events: none; } + +/* infinite tool-name ticker */ +.mdt-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } +.mdt-marquee__track { display: inline-flex; gap: 2.5rem; padding-right: 2.5rem; white-space: nowrap; animation: mdt-scroll 45s linear infinite; will-change: transform; } +.mdt-marquee:hover .mdt-marquee__track { animation-play-state: paused; } +@keyframes mdt-scroll { to { transform: translateX(-50%); } } + +@media (prefers-reduced-motion: reduce) { + .mdt-marquee__track, .mdt-grad-anim, .mdt-deck .mdt-beam::after { animation: none !important; } +} + +/* ─── DECK MOTION TOKENS (from motion-design skill) ───────────────────────── */ +:root { + --dur-1: 120ms; --dur-2: 180ms; --dur-3: 240ms; --dur-4: 300ms; --dur-5: 500ms; + --ease-out-quart: cubic-bezier(.165, .84, .44, 1); + --ease-out-quint: cubic-bezier(.23, 1, .32, 1); + --ease-out-expo: cubic-bezier(.19, 1, .22, 1); + --ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1); +} + +/* living background: slow grid drift + slightly richer aurora */ +.mdt-grid { animation: mdt-grid-drift 64s linear infinite; } +@keyframes mdt-grid-drift { to { background-position: 64px 64px, 64px 64px; } } +.mdt-aurora { opacity: .6; } + +/* card hover easing aligned to tokens (transform/shadow only) */ +.mdt-card-hover { transition: transform var(--dur-3) var(--ease-out-quart), border-color var(--dur-3) ease, box-shadow var(--dur-3) ease; } + +/* header scroll-translucent transition (subtle state change) */ +.mdt-nav { transition: background-color var(--dur-3) ease, backdrop-filter var(--dur-3) ease, border-color var(--dur-3) ease, box-shadow var(--dur-3) ease; } + +/* accessibility: honor reduced-motion globally */ +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { + animation-duration: .01ms !important; + animation-iteration-count: 1 !important; + transition-duration: .01ms !important; + scroll-behavior: auto !important; + } +} + +/* ─── CRT BOOT LOADER (monitor illustration) ──────────────────────────────── */ +.crt-boot { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; overflow: hidden; + background: radial-gradient(120% 120% at 50% 28%, #0c0e16 0%, #050608 58%, #030305 100%); } +.crt-boot--out { animation: crt-out 600ms cubic-bezier(.19,1,.22,1) forwards; } +@keyframes crt-out { to { opacity: 0; transform: scale(1.06); filter: blur(8px); visibility: hidden; } } + +.crt { width: min(540px, 84vw); transform: perspective(1500px) rotateX(2deg); } +.crt__monitor { position: relative; border-radius: 26px; padding: 24px 24px 28px; + background: linear-gradient(180deg, #262932, #16181f 58%, #0f1116); + box-shadow: 0 44px 100px -34px rgba(0,0,0,.92), inset 0 1px 0 rgba(255,255,255,.07), inset 0 -3px 10px rgba(0,0,0,.6); } +.crt__screen { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; padding: 18px 18px 16px; + background: radial-gradient(120% 120% at 50% 42%, #0a1510 0%, #060d0a 68%, #040706 100%); + box-shadow: inset 0 0 70px rgba(0,0,0,.9), inset 0 0 0 2px rgba(0,0,0,.55), 0 0 34px rgba(94,242,160,.1); } +.crt__screen::before { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; + background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.3) 2px 3px); } +.crt__screen::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; + background: radial-gradient(130% 80% at 50% -10%, rgba(160,210,255,.14), transparent 55%); } +.crt__flicker { animation: crt-flicker 3.6s infinite steps(60); } +@keyframes crt-flicker { 0%,100%{opacity:1} 8%{opacity:.92} 10%{opacity:1} 50%{opacity:.96} 52%{opacity:1} } +.crt__code { position: relative; z-index: 2; height: 100%; font-family: var(--font-geist-mono), monospace; + font-size: clamp(10px, 1.5vw, 13px); line-height: 1.72; color: #5ef2a0; text-shadow: 0 0 6px rgba(94,242,160,.5); } +.crt__line { white-space: pre-wrap; word-break: break-word; } +.crt__accent { color: #7fd7ff; text-shadow: 0 0 6px rgba(127,215,255,.6); } +.crt__cursor { display: inline-block; width: 7px; height: 1em; transform: translateY(2px); + background: #5ef2a0; box-shadow: 0 0 8px #5ef2a0; animation: crt-blink 1s steps(2) infinite; } +@keyframes crt-blink { 50% { opacity: 0; } } +.crt__brand { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding: 0 6px; } +.crt__brand span { font-family: var(--font-geist-mono), monospace; font-size: 10px; letter-spacing: .34em; color: #5b6076; } +.crt__led { width: 8px; height: 8px; border-radius: 50%; background: #5ef2a0; box-shadow: 0 0 10px #5ef2a0; animation: crt-blink 1.4s steps(2) infinite; } +.crt__neck { width: 78px; height: 24px; margin: 0 auto; background: linear-gradient(180deg, #1a1c22, #101116); } +.crt__base { width: 196px; height: 14px; margin: 0 auto; border-radius: 0 0 14px 14px; + background: linear-gradient(180deg, #1d1f26, #0e0f14); box-shadow: 0 20px 44px -18px rgba(0,0,0,.9); } +@media (prefers-reduced-motion: reduce) { + .crt__flicker, .crt__cursor, .crt__led { animation: none !important; } + .crt { transform: none; } +} + + +/* dashboard editor caret */ +.mdt-dash-caret { background: var(--mdt-cyan); box-shadow: 0 0 8px var(--mdt-cyan); border-radius: 1px; animation: mdt-caret-blink 1.1s steps(2) infinite; } +@keyframes mdt-caret-blink { 50% { opacity: 0; } } diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx index ddfc4a1b..eeb6e9fe 100644 --- a/apps/web/src/app/page.tsx +++ b/apps/web/src/app/page.tsx @@ -35,12 +35,24 @@ import { } from "lucide-react"; import { sidebarData } from "@/components/sidebar/data/sidebar-data"; import { homepageFaqItems } from "@/lib/seo/structured-data"; +import MdtAurora from "@/components/mdt-aurora"; +import { MdtFx } from "@/components/mdt-fx"; +import { Magnetic } from "@/components/mdt-magnetic"; +import { Tilt } from "@/components/mdt-tilt"; +import { MdtBoot } from "@/components/mdt-boot"; +import { MdtDashboard } from "@/components/mdt-dashboard"; // ─── Animation Variants ──────────────────────────────────────────────────────── +const EASE_EXPO = [0.16, 1, 0.3, 1] as const; const fadeUp = { - hidden: { opacity: 0, y: 28 }, - visible: { opacity: 1, y: 0 }, + hidden: { opacity: 0, y: 32, filter: "blur(6px)" }, + visible: { + opacity: 1, + y: 0, + filter: "blur(0px)", + transition: { duration: 0.7, ease: EASE_EXPO }, + }, }; const stagger = { @@ -227,13 +239,30 @@ export default function Page() { }, []); return ( -
+
+ {/* deck atmosphere: fixed grid + grain behind everything + gradient def for icons */} +
+
+
+ + + + + + + + + +
+ +
{/* ── Hero ────────────────────────────────────────────────────────────── */}
- {/* Ambient orbs */} + {/* Ambient orbs + living aurora */}
+ Online Developer Tools
- + JSON, JWT, Regex & {allAppTools.length}+ More @@ -335,13 +364,15 @@ export default function Page() { transition={{ duration: 0.6, delay: 0.24 }} className="flex flex-col sm:flex-row items-center justify-center gap-3 pt-2" > - + + + {[ { value: `${allAppTools.length}+`, label: "Online Tools" }, { value: "GPL-3.0", label: "Open Source" }, { value: "Self-host", label: "Free Forever" }, ].map((s, i) => ( -
-
+
+
{s.value}
-
+
{s.label}
@@ -387,27 +418,9 @@ export default function Page() { className="pt-4 relative mx-auto max-w-5xl" > {/* Browser chrome frame */} -
- {/* Fake browser bar */} -
-
-
-
-
-
-
- https://mydevtools.tech/dashboard -
-
- MyDevTools dashboard interface showing unified developer toolkit: SQL client, NoSQL explorer, API client, JSON formatter, and 60+ tools in one workspace -
+ + + {/* Glow beneath the screenshot */}
@@ -773,7 +786,7 @@ export default function Page() { Paid @@ -904,6 +917,28 @@ export default function Page() {
+ {/* Infinite tool-name ticker */} + +
+ {[...allAppTools, ...allAppTools].map((t, i) => ( + + + {t.title} + + ))} +
+ + Ready to Build{" "} - + Faster? diff --git a/apps/web/src/app/tools/page.tsx b/apps/web/src/app/tools/page.tsx index 15e4c1ec..bc4d7842 100644 --- a/apps/web/src/app/tools/page.tsx +++ b/apps/web/src/app/tools/page.tsx @@ -5,6 +5,9 @@ import { Header } from '@/components/header' import { Footer } from '@/components/footer' import { ToolsGrid } from '@/components/tools-grid' import { publicToolSlugs } from '@/lib/tool-categories' +import { MdtFx } from '@/components/mdt-fx' +import MdtAurora from '@/components/mdt-aurora' +import { MdtBoot } from '@/components/mdt-boot' const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://mydevtools.tech' const ogImage = `${baseUrl}/api/og?title=${encodeURIComponent('Online Developer Tools')}&description=${encodeURIComponent('Browse 50+ browser-based developer tools. No install required.')}` @@ -32,13 +35,29 @@ export const metadata: Metadata = { export default function ToolsIndexPage() { return ( -
+
+
+
+
+ + + + + + + + + +
+ +
{/* ── Hero ── */}
+
@@ -57,7 +76,7 @@ export default function ToolsIndexPage() {

Online{' '} - + Developer Tools

@@ -68,7 +87,7 @@ export default function ToolsIndexPage() { Get Full Access diff --git a/apps/web/src/components/header.tsx b/apps/web/src/components/header.tsx index bbb4b079..d576f3db 100644 --- a/apps/web/src/components/header.tsx +++ b/apps/web/src/components/header.tsx @@ -1,10 +1,11 @@ "use client"; -import { useState } from "react"; +import { useState, useEffect } from "react"; import Link from "next/link"; import { Github, Menu, X, ArrowRight } from "lucide-react"; import { Button } from "@/components/ui/button"; import { ModeToggle } from "./modeToggle"; import { Logo } from "./logo"; +import { Magnetic } from "@/components/mdt-magnetic"; import { motion, AnimatePresence } from "framer-motion"; import { cn } from "@/lib/utils"; @@ -48,6 +49,14 @@ type HeaderProps = { export function Header({ showThemeToggle = true }: HeaderProps) { const [isMenuOpen, setIsMenuOpen] = useState(false); + const [scrolled, setScrolled] = useState(false); + + useEffect(() => { + const onScroll = () => setScrolled(window.scrollY > 8); + onScroll(); + window.addEventListener("scroll", onScroll, { passive: true }); + return () => window.removeEventListener("scroll", onScroll); + }, []); const mobileNavLinks = [ { href: "/", label: "Home" }, @@ -60,7 +69,14 @@ export function Header({ showThemeToggle = true }: HeaderProps) { ]; return ( -
+
{/* Logo */} @@ -152,12 +168,14 @@ export function Header({ showThemeToggle = true }: HeaderProps) { - + + +
@@ -205,7 +223,7 @@ export function Header({ showThemeToggle = true }: HeaderProps) { "text-base font-medium transition-all duration-200", "hover:bg-muted/60 active:scale-[0.98]", "min-h-[48px]", - link.isPrimary && "bg-foreground text-background hover:bg-foreground/90" + link.isPrimary && "mdt-btn-grad" )} > {link.icon && } diff --git a/apps/web/src/components/marketing-seo-page.tsx b/apps/web/src/components/marketing-seo-page.tsx index 97ede799..b811df99 100644 --- a/apps/web/src/components/marketing-seo-page.tsx +++ b/apps/web/src/components/marketing-seo-page.tsx @@ -2,6 +2,9 @@ import Link from 'next/link' import { ArrowRight, CheckCircle2 } from 'lucide-react' import { Header } from '@/components/header' import { Footer } from '@/components/footer' +import { MdtFx } from '@/components/mdt-fx' +import MdtAurora from '@/components/mdt-aurora' +import { MdtBoot } from '@/components/mdt-boot' import type { PlatformSeoPage } from '@/lib/seo/platform-pages' import { publicToolSlugs } from '@/lib/tool-categories' import { toolsMetadata } from '@/lib/metadata' @@ -37,7 +40,7 @@ function CtaLink({ rel={external ? 'noreferrer' : undefined} className={ variant === 'primary' - ? 'inline-flex h-12 items-center justify-center rounded-full bg-foreground px-7 text-sm font-medium text-background shadow-md transition-all hover:bg-foreground/90 hover:scale-[1.03] active:scale-[0.98]' + ? 'mdt-btn-grad inline-flex h-12 items-center justify-center rounded-full px-7 text-sm font-medium' : 'inline-flex h-12 items-center justify-center rounded-full border border-border/60 bg-background/60 px-7 text-sm font-medium text-foreground transition-all hover:bg-muted hover:scale-[1.03] active:scale-[0.98]' } > @@ -54,7 +57,22 @@ export function MarketingSeoPage({ page }: { page: PlatformSeoPage }) { const jsonLd = buildPlatformPageJsonLd(page.slug) return ( -
+
+
+
+
+ + + + + + + + + +
+ + {jsonLd ? (