Fix links and backstage weekly

RoadieHQ · Feb 9, 2024 · cb30baa · cb30baa
1 parent 83a9263
commit cb30baa
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 156 deletions.
diff --git a/src/components/CallToAction/EmailCaptureForm.js b/src/components/CallToAction/EmailCaptureForm.js
@@ -40,8 +40,9 @@ const EmailCaptureForm = ({
       onHoneypotChange={setHoneypotText}
     >
       <div className={classnames('flex flex-col', className)}>
-        <div className="mb-12">
+        <div className="mb-6">
           <TextField
+            className="TextField size-3"
             type="email"
             name="email"
             id={emailInputId}
@@ -63,8 +64,9 @@ const EmailCaptureForm = ({
           setRecaptchaExpired={setRecaptchaExpired}
         />
 
-        <div className="md:ml-1 mt-4">
+        <div className="">
           <Button
+            className="Button size-3 accent"
             text={buttonText}
             disabled={disabled}
             prefixIcon={<PaperAirplaneIcon />}

diff --git a/src/components/SitewideHeader/SitewideHeader.js b/src/components/SitewideHeader/SitewideHeader.js
@@ -269,7 +269,7 @@ const SitewideHeader = () => {
 
         <div className='position-absolute right-0 mr-6'>
           <Link
-            to="/product/catalog"
+            to="/request-demo"
             className="Button size-1 accent"
           >
             Get a Demo
@@ -280,140 +280,4 @@ const SitewideHeader = () => {
   );
 };
 
-export default SitewideHeader;
-
-
-
-
-
-// import React from 'react';
-// import { Popover } from '@headlessui/react';
-// import classnames from 'classnames';
-// import {
-//   CodeIcon,
-//   BookOpenIcon,
-//   ChatIcon,
-//   ShieldCheckIcon,
-//   AcademicCapIcon,
-//   PlayIcon,
-//   NewspaperIcon,
-//   PlusCircleIcon,
-//   CheckCircleIcon,
-// } from '@heroicons/react/outline';
-// import { Button } from 'components';
-
-// import Logo from '../Logo';
-// import TopNavItem from './TopNavItem';
-// import OpenMenuButton from './OpenMenuButton';
-// import TopNavDropdownItem from './TopNavDropdownItem';
-// import DrawerMenu from './DrawerMenu';
-// import TopBanner from 'components/TopBanner';
-// import WhitepaperVs from '../TopBanner/Whitepaper';
-
-// const features = [
-//   {
-//     name: 'Catalog: software, teams & resources',
-//     description: 'All your tech assets on a single glass pane.',
-//     to: '/product/catalog/',
-//     icon: NewspaperIcon,
-//   },
-//   {
-//     name: 'Scaffolder: create and expand',
-//     description: 'Accelerate your development initatives.',
-//     to: '/product/scaffolder/',
-//     icon: PlusCircleIcon,
-//   },
-//   {
-//     name: 'Docs: centralized yet distributed',
-//     description: 'Find everyone’s docs in the same place.',
-//     to: '/product/documentation/',
-//     icon: BookOpenIcon,
-//   },
-//   {
-//     name: 'Tech Insights: Scorecards for Backstage',
-//     description: 'Measure and improve software quality.',
-//     to: '/product/tech-insights/',
-//     icon: CheckCircleIcon,
-//   },
-// ];
-
-// const learn = [
-//   {
-//     name: 'Backstage Bites',
-//     description: 'Short videos to teach Backstage concepts.',
-//     to: '/backstage-bites/',
-//     icon: PlayIcon,
-//   },
-//   {
-//     name: 'Backstage Plugins',
-//     description: 'Browse our Backstage plugin marketplace.',
-//     to: '/backstage/plugins/',
-//     icon: CodeIcon,
-//   },
-//   {
-//     name: 'Blog',
-//     description: 'Read our posts on Backstage and Roadie.',
-//     to: '/blog/',
-//     icon: BookOpenIcon,
-//   },
-//   {
-//     name: 'Case Studies',
-//     description: 'How organisations succeed with Backstage',
-//     to: '/case-studies/',
-//     icon: ShieldCheckIcon,
-//   },
-//   {
-//     name: 'Documentation',
-//     description: 'Set up your Roadie Backstage experience.',
-//     to: '/docs/',
-//     icon: AcademicCapIcon,
-//   },
-//   {
-//     name: 'Chat with us on Discord',
-//     description: 'Get support or provide feedback.',
-//     to: 'https://discord.gg/W3qEMhmx4f',
-//     icon: ChatIcon,
-//   },
-// ];
-
-// const SitewideHeader = ({
-//   ctaTo = '/request-demo/',
-//   ctaText = 'Get a Demo',
-// }) => (
-//   <>
-//     <Popover as={React.Fragment}>
-//       <>
-//         <TopBanner>
-//           <WhitepaperVs />
-//         </TopBanner>
-//         <header className='Header'>
-//           <div className="position-absolute">
-//             <Logo />
-//           </div>
-
-//           <div className='Container'>
-//             <div className="-mr-2 -my-2 md:hidden">
-//               <OpenMenuButton />
-//             </div>
-
-//             <Popover.Group as="nav" className="Flex row ai-center gap-7">
-//               <TopNavDropdownItem text="Product" subItems={features} />
-//               <TopNavDropdownItem text="Resources" subItems={learn} />
-//               <TopNavItem to="/case-studies/" text="Customers" />
-//               <TopNavItem to="/pricing/" text="Pricing" />
-//               <TopNavItem to="/backstage-weekly/" text="Backstage Weekly" />
-//             </Popover.Group>
-//           </div>
-
-//           <div className='position-absolute right-0'>
-//             <Button className="Button size-1 accent" link={true} to={ctaTo} text={ctaText} />
-//           </div>
-//         </header>
-
-//         <DrawerMenu />
-//       </>
-//     </Popover>
-//   </>
-// );
-
-// export default SitewideHeader;
+export default SitewideHeader;
diff --git a/src/components/forms/HelpText.js b/src/components/forms/HelpText.js
@@ -2,9 +2,9 @@ import React from 'react';
 import classnames from 'classnames';
 
 const HelpText = ({ className, state, message }) => {
-  const rootClassName = classnames('text-sm', {
-    'text-gray-600': !state || state === '',
-    'text-primary-700': state === 'error',
+  const rootClassName = classnames('Text size-3', {
+    'lowContrast': !state || state === '',
+    'red': state === 'error',
   }, className);
 
   return (

diff --git a/src/components/forms/TextField.js b/src/components/forms/TextField.js
@@ -22,7 +22,7 @@ const TextField = ({
       </label>
       <div className="mt-1.5 relative">
         <Input id={htmlId} color={color} {...rest} />
-        <div className="mt-3">
+        <div className="mt-2">
           <HelpText message={helpText} state={helpTextState} />
         </div>
       </div>

diff --git a/src/pages/backstage-weekly.js b/src/pages/backstage-weekly.js
@@ -86,16 +86,11 @@ const BackstageWeekly = ({ data }) => {
 
       <Page titleDivide={false} headerBorderBottom={false}>
         <div className="m-auto lg:max-w-2xl mb-44">
-          <div className="mb-4">
-            <Headline el="h2">Backstage Weekly</Headline>
-          </div>
-          <div className="mb-4">
-            <Lead>
-              Get the latest news, deep dives into Backstage features, and a roundup of recent
-              open-source action.
-            </Lead>
-          </div>
-
+          <h1 className="Text size-8 bp2-size-9 mb-3">Backstage Weekly</h1>
+          <p className="Text size-5 weight-1 lowContrast mb-3">
+            Get the latest news, deep dives into Backstage features, and a roundup of recent
+            open-source action.
+          </p>
           <NetlifyFormCallToAction
             setModalOpen={(open) => {
               setModalOpen(open);
@@ -109,9 +104,9 @@ const BackstageWeekly = ({ data }) => {
         </div>
 
         <div>
-          <Headline el="h3" size="small">
+          <h3 className='Text size-7'>
             Previous issues
-          </Headline>
+          </h3>
         </div>
 
         <div className="pt-10 max-w-lg mx-auto grid gap-5 lg:grid-cols-3 lg:max-w-none">

diff --git a/src/stylesheets/Text.css b/src/stylesheets/Text.css
@@ -367,6 +367,10 @@
   color: var(--orange-11);
 }
 
+.Text.red {
+  color: var(--red-11);
+}
+
 .Text.white {
   color: white;
 }