diff --git a/website/components/Button.tsx b/website/components/Button.tsx index ad5e3cab..936a97f3 100644 --- a/website/components/Button.tsx +++ b/website/components/Button.tsx @@ -4,7 +4,6 @@ import { ButtonHTMLAttributes, useEffect, useState } from "react"; import { BiCheck, BiLogoGithub, BiRightArrowAlt } from "react-icons/bi"; import styled, { css, keyframes } from "styled-components"; -import { mobile } from "@/constants/breakpoints"; import analytics from "@/lib/analytics"; interface StyledProps { @@ -103,24 +102,11 @@ const secondaryButtonStyles = css` `; const tertiaryButtonStyles = css` - color: #419bf9; - font-size: 21px; - font-style: normal; - font-weight: 400; - line-height: 32px; /* 152.381% */ - display: flex; - align-items: center; - transform: translateY(0); - transition: all 0.2s ease-in-out; + ${secondaryButtonStyles} + color: var(--foreground); &:hover { - opacity: 0.8; - transform: translateY(-2px); - } - - @media ${mobile} { - font-size: 16px; - line-height: 24px; + color: var(--brand-primary); } `; @@ -231,31 +217,39 @@ const ButtonImpl = ({ ); }; +export const ButtonPrimary = (props: Props) => ( + +); + +export const ButtonSecondary = (props: Props) => ( + +); + +export const ButtonTertiary = (props: Props) => ( + +); + +export const ButtonCodespaces = (props: Props) => ( + +); + const Button = { - Primary: (props: Props) => ( - - ), - Secondary: (props: Props) => ( - - ), - Tertiary: (props: Props) => ( - - ), - Codespaces: (props: Props) => ( - - ), + Primary: ButtonPrimary, + Secondary: ButtonSecondary, + Tertiary: ButtonTertiary, + Codespaces: ButtonCodespaces, }; export default Button; diff --git a/website/components/CTAButtons.tsx b/website/components/CTAButtons.tsx new file mode 100644 index 00000000..04cfaeb4 --- /dev/null +++ b/website/components/CTAButtons.tsx @@ -0,0 +1,41 @@ +"use client"; +import styled from "styled-components"; + +import { ButtonPrimary, ButtonTertiary } from "@/components/Button"; +import { mobile } from "@/constants/breakpoints"; + +const CTAButtons = () => { + return ( + + + View on GitHub + + + Try in playground + + + ); +}; + +namespace S { + export const CTAButtons = styled.div` + display: flex; + flex-direction: row; + gap: 16px; + @media ${mobile} { + flex-direction: column; + } + `; +} + +export default CTAButtons; diff --git a/website/components/DocsLayout.tsx b/website/components/DocsLayout.tsx index 7cccef5f..c53f9481 100644 --- a/website/components/DocsLayout.tsx +++ b/website/components/DocsLayout.tsx @@ -37,7 +37,7 @@ namespace S { display: flex; flex-direction: column; gap: 24px; - padding: 224px 0 48px 0; + padding: 160px 0 48px 0; width: 100%; max-width: 827px; margin: 0 auto; diff --git a/website/components/DocsNav.tsx b/website/components/DocsNav.tsx index dfeb81e4..6a4069d8 100644 --- a/website/components/DocsNav.tsx +++ b/website/components/DocsNav.tsx @@ -41,9 +41,7 @@ const navItems: NavItem[] = [ { path: "references", title: "References", - children: [ - { path: "comparisons", title: "Comparison to alternatives" }, - ], + children: [{ path: "comparisons", title: "Comparison to alternatives" }], }, ]; @@ -102,7 +100,7 @@ const DocsNav = () => { namespace S { export const NavItemsWrapper = styled.div` - padding-top: 240px; + padding-top: 172px; @media ${mobile} { padding-top: 0; } diff --git a/website/components/EmailCapture.tsx b/website/components/EmailCapture.tsx index 5acad4ff..b490abe9 100644 --- a/website/components/EmailCapture.tsx +++ b/website/components/EmailCapture.tsx @@ -21,9 +21,6 @@ const EmailCapture = ({ // eslint-disable-next-line no-unused-vars subscribe: (d: MailchimpFormData) => void, ) => { - // if (!email.includes("@")) { - // return; - // } // log some analytics in segment // try catch this because people use adblockers, which will cause this call to fail // eslint-disable-next-line no-unused-vars @@ -44,8 +41,8 @@ const EmailCapture = ({ // do the actual mailchimp submission subscribe({ EMAIL: email, - COMMS: "NOT_COLLECTED", // this form does not have these inputs - FEATURES: "NOT_COLLECTED", // this form does not have these inputs + COMMS: "DEMO", + FEATURES: "DEMO", UTM_SOURCE: utmParams.utm_source || "NOT_SET", UTM_MEDIUM: utmParams.utm_medium || "NOT_SET", UTM_CAMP: utmParams.utm_campaign || "NOT_SET", @@ -87,8 +84,8 @@ const EmailCapture = ({ // @ts-ignore status === "success" && ( - Success! You’ve been added to our list of beta users. Keep - an eye on your inbox! + Success! We will reach out soon, so keep an eye on your + inbox! ) } diff --git a/website/components/EmailInput.tsx b/website/components/EmailInput.tsx index cea76a4b..4e6040ef 100644 --- a/website/components/EmailInput.tsx +++ b/website/components/EmailInput.tsx @@ -39,7 +39,7 @@ const EmailInput = ({ loading={isLoading} isSuccess={isSuccess} > - Join the beta + Get a demo ); diff --git a/website/components/LandingPageTemplate.tsx b/website/components/LandingPageTemplate.tsx index 02372e1f..12cb2725 100644 --- a/website/components/LandingPageTemplate.tsx +++ b/website/components/LandingPageTemplate.tsx @@ -2,6 +2,7 @@ import { ReactNode } from "react"; import Content from "@/components/Content"; import CTA from "@/components/CTA"; +import CTAButtons from "@/components/CTAButtons"; import CTASmall from "@/components/CTASmall"; import EmailCapture from "@/components/EmailCapture"; import { TextBase } from "@/components/Text"; @@ -39,7 +40,7 @@ const LandingPageTemplate = ({ <> {children} - + - Kardinal integrates with your existing distributed tracing, and will handle the heavy lifting of configuring a service mesh for traffic routing for you. + Kardinal integrates with your existing distributed tracing, and will + handle the heavy lifting of configuring a service mesh for traffic + routing for you. - - {children} + + Want a demo? Sign up here + + } + myPrecious={iAmTheLordOfTheRings} + > diff --git a/website/components/Nav/index.tsx b/website/components/Nav/index.tsx index 4cfc4d99..2c34515d 100644 --- a/website/components/Nav/index.tsx +++ b/website/components/Nav/index.tsx @@ -1,35 +1,15 @@ "use client"; import Image from "next/image"; import Link from "next/link"; -import { usePathname } from "next/navigation"; -import { BiBookOpen, BiChat, BiMenu, BiRss, BiX } from "react-icons/bi"; -import { FiGithub } from "react-icons/fi"; -import { TbPrompt, TbSparkles } from "react-icons/tb"; +import { BiMenu, BiX } from "react-icons/bi"; import styled from "styled-components"; -import Banner from "@/components/Banner"; -import Button from "@/components/Button"; -import Responsive from "@/components/Responsive"; import ResponsiveNav from "@/components/ResponsiveNav"; import { mobile, tablet } from "@/constants/breakpoints"; import { useModal } from "@/context/ModalContext"; import analytics from "@/lib/analytics"; import kardinalLogo from "@/public/kardinal-orange.png"; -const WaitlistButton = () => { - const { toggleModal } = useModal(); - return ( - - - Join the beta - - ); -}; - const NavLinksAndButton = () => { return ( @@ -40,7 +20,6 @@ const NavLinksAndButton = () => { analytics.track("BUTTON_CLICK", { analyticsId: "link_nav_docs" }) } > - Docs { }) } > - Playground { analytics.track("BUTTON_CLICK", { analyticsId: "link_nav_github" }) } > - Github { analytics.track("BUTTON_CLICK", { analyticsId: "link_nav_forum" }) } > - Forum { analytics.track("BUTTON_CLICK", { analyticsId: "link_nav_blog" }) } > - Blog - ); @@ -91,11 +65,8 @@ const NavLinksAndButton = () => { const Nav = () => { const { toggleNav, isNavOpen } = useModal(); - const pathname = usePathname(); - const isDocs = pathname.includes("/docs"); return ( - {isDocs && } { Kardinal - - - {isNavOpen ? : }