From 9c2a6da593f7177aedf879138b96a1ed142775b0 Mon Sep 17 00:00:00 2001 From: Skylar Brown Date: Wed, 14 Aug 2024 14:30:24 -0700 Subject: [PATCH 1/5] website changes for launch --- website/components/Button.tsx | 75 ++++++++++------------ website/components/CTAButtons.tsx | 27 ++++++++ website/components/EmailCapture.tsx | 11 ++-- website/components/EmailInput.tsx | 2 +- website/components/LandingPageTemplate.tsx | 17 +++-- website/components/Nav/index.tsx | 29 +-------- 6 files changed, 81 insertions(+), 80 deletions(-) create mode 100644 website/components/CTAButtons.tsx diff --git a/website/components/Button.tsx b/website/components/Button.tsx index ad5e3cab..4521e954 100644 --- a/website/components/Button.tsx +++ b/website/components/Button.tsx @@ -103,24 +103,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 +218,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..e1d98c03 --- /dev/null +++ b/website/components/CTAButtons.tsx @@ -0,0 +1,27 @@ +"use client"; +import styled from "styled-components"; + +import { ButtonPrimary, ButtonTertiary } from "@/components/Button"; + +const CTAButtons = () => { + return ( + + + View on GitHub + + + Try in playground + + + ); +}; + +namespace S { + export const CTAButtons = styled.div` + display: flex; + flex-direction: row; + gap: 16px; + `; +} + +export default CTAButtons; 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..60370ad2 100644 --- a/website/components/Nav/index.tsx +++ b/website/components/Nav/index.tsx @@ -2,34 +2,16 @@ 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 +22,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 - ); @@ -108,9 +84,6 @@ const Nav = () => { Kardinal - - - {isNavOpen ? : } From f780518ae32c4dffd1f8b891e8c6908bb5c70896 Mon Sep 17 00:00:00 2001 From: Skylar Brown Date: Wed, 14 Aug 2024 14:33:11 -0700 Subject: [PATCH 2/5] fix build error --- website/components/Button.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/website/components/Button.tsx b/website/components/Button.tsx index 4521e954..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 { From b27f1567bd600d5bebe7a4c4716e617c92dd6874 Mon Sep 17 00:00:00 2001 From: Skylar Brown Date: Wed, 14 Aug 2024 14:41:33 -0700 Subject: [PATCH 3/5] fix missing href, remove docs banner --- website/components/CTAButtons.tsx | 18 ++++++++++++++++-- website/components/Nav/index.tsx | 2 -- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/website/components/CTAButtons.tsx b/website/components/CTAButtons.tsx index e1d98c03..04cfaeb4 100644 --- a/website/components/CTAButtons.tsx +++ b/website/components/CTAButtons.tsx @@ -2,14 +2,25 @@ 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 @@ -21,6 +32,9 @@ namespace S { display: flex; flex-direction: row; gap: 16px; + @media ${mobile} { + flex-direction: column; + } `; } diff --git a/website/components/Nav/index.tsx b/website/components/Nav/index.tsx index 60370ad2..e8e3cbeb 100644 --- a/website/components/Nav/index.tsx +++ b/website/components/Nav/index.tsx @@ -5,7 +5,6 @@ import { usePathname } from "next/navigation"; import { BiMenu, BiX } from "react-icons/bi"; import styled from "styled-components"; -import Banner from "@/components/Banner"; import ResponsiveNav from "@/components/ResponsiveNav"; import { mobile, tablet } from "@/constants/breakpoints"; import { useModal } from "@/context/ModalContext"; @@ -71,7 +70,6 @@ const Nav = () => { const isDocs = pathname.includes("/docs"); return ( - {isDocs && } Date: Wed, 14 Aug 2024 14:44:15 -0700 Subject: [PATCH 4/5] fix build error --- website/components/Nav/index.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/website/components/Nav/index.tsx b/website/components/Nav/index.tsx index e8e3cbeb..2c34515d 100644 --- a/website/components/Nav/index.tsx +++ b/website/components/Nav/index.tsx @@ -1,7 +1,6 @@ "use client"; import Image from "next/image"; import Link from "next/link"; -import { usePathname } from "next/navigation"; import { BiMenu, BiX } from "react-icons/bi"; import styled from "styled-components"; @@ -66,8 +65,6 @@ const NavLinksAndButton = () => { const Nav = () => { const { toggleNav, isNavOpen } = useModal(); - const pathname = usePathname(); - const isDocs = pathname.includes("/docs"); return ( From 70e6f1281d1ac45b2999e970c95152a02bfeec0f Mon Sep 17 00:00:00 2001 From: Skylar Brown Date: Wed, 14 Aug 2024 14:49:12 -0700 Subject: [PATCH 5/5] less top padding on docs --- website/components/DocsLayout.tsx | 2 +- website/components/DocsNav.tsx | 6 ++---- 2 files changed, 3 insertions(+), 5 deletions(-) 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; }