Update branding for nearform (#2851)

FormidableLabs · Apr 4, 2024 · 2833384 · 2833384
1 parent 8c4cbe7
commit 2833384
Show file tree

Hide file tree

Showing 23 changed files with 118 additions and 376 deletions.
diff --git a/docs/README.md b/docs/README.md
@@ -42,7 +42,7 @@ Upon creating a Pull Request, a Vercel preview deployment is created and posted
 
 ### Production
 
-This site is deployed with Vercel infrastructure and is automated with a repository trigger in the Formidable Labs Vercel account. 
+This site is deployed with Vercel infrastructure. 
 
 The site is directly accessible at [https://victory-rose.vercel.app/open-source/victory](https://victory-rose.vercel.app/open-source/victory).
 

diff --git a/docs/public/static/logos/logo-formidable-icon.svg b/docs/public/static/logos/logo-formidable-icon.svg
diff --git a/docs/public/static/logos/logo-formidable.svg b/docs/public/static/logos/logo-formidable.svg
diff --git a/docs/src/app/page.tsx b/docs/src/app/page.tsx
@@ -21,7 +21,7 @@ export default function Home() {
   return (
     <StyledLayout>
       <IndexWrapper>
-        <Hero {...content.hero} />
+        <Hero />
         <Features featureArray={content.features} />
         <Companies />
         <Guides />

diff --git a/docs/src/content/faq/faq.md b/docs/src/content/faq/faq.md
@@ -403,7 +403,7 @@ Whilst using `victory-native` in Expo apps that target iOS & Android is fully su
 
 However as both `victory-native` and `victory` share the same public API, it's possible to configure your Expo project so that it automatically uses `victory-native` when building your native apps for iOS & Android, and `victory` when building your web app.
 
-> ☣️ Please note that while you can follow the instructions below to configure your Expo project to make this work, Formidable still does not officially support Expo Web apps.
+> ☣️ Please note that while you can follow the instructions below to configure your Expo project to make this work, Victory does not officially support Expo Web apps.
 
 ```sh
 yarn add -D @expo/webpack-config

diff --git a/docs/src/partials/footer.js b/docs/src/partials/footer.js
@@ -1,107 +1,34 @@
 import React from "react";
-import SVG from "react-inlinesvg";
 import styled from "styled-components";
+import Image from "next/image";
 
-const formidableIcon = "/open-source/victory/static/logos/logo-formidable-icon.svg";
+import nearFormLogo from "../static/logos/nearform-logo-white.svg";
 
 const FooterContainer = styled.footer`
-  background-color: ${({ theme }) => theme.color.black};
+  background-color: #1b1b1d;
   color: ${({ theme }) => theme.color.white};
   display: flex;
-  justify-content: center;
-`;
-
-const InnerContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  height: ${({ theme }) => theme.layout.footerHeight};
-  justify-content: center;
-  padding: 0 ${({ theme }) => theme.spacing.md};
+  align-items: center;
+  justify-content: space-between;
   width: 100%;
-
-  @media ${({ theme }) => theme.mediaQuery.md} {
-    flex-direction: row;
-    height: ${({ theme }) => theme.layout.md.footerHeight};
-    max-width: ${({ theme }) => theme.layout.footerMaxWidth};
-    padding-bottom: ${({ theme }) => theme.spacing.lg};
-    padding-top: ${({ theme }) => theme.spacing.lg};
-  }
-`;
-
-const IconAndContact = styled.div`
-  display: flex;
-  margin-bottom: ${({ theme }) => theme.spacing.sm};
-  margin-right: ${({ theme }) => theme.spacing.xl};
+  padding: 48px 48px;
 `;
 
-const Contact = styled.div`
-  display: flex;
-  flex-direction: column;
-
-  > a {
-    color: ${({ theme }) => theme.color.white};
-    margin-bottom: ${({ theme }) => theme.spacing.xs};
-  }
-`;
-
-const Icon = styled(SVG)`
+const BrandLogo = styled.a`
+  display: block;
   margin-right: ${({ theme }) => theme.spacing.sm};
-
-  > svg {
-    color: ${({ theme }) => theme.color.white};
-    height: 6rem;
-  }
-`;
-
-const Blurb = styled.p`
-  margin: 0;
-  > a {
-    color: ${({ theme }) => theme.color.white};
-    text-decoration: underline;
-  }
 `;
 
 const Footer = ({ className = "" }) => (
   <FooterContainer className={className}>
-    <InnerContainer>
-      <IconAndContact>
-        <a
-          href="https://commerce.nearform.com"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Icon src={formidableIcon} alt="Formidable" />
-        </a>
-        <Contact>
-          <a
-            href="https://commerce.nearform.com/contact/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            CONTACT
-          </a>
-          <a
-            href="https://commerce.nearform.com/careers/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            CAREERS
-          </a>
-        </Contact>
-      </IconAndContact>
-      <Blurb>
-        {
-          "Formidable is a global design and engineering consultancy and open source software organization, specializing in React.js, React Native, GraphQL, Node.js, and the extended JavaScript ecosystem. We have locations in Seattle, London, Toronto, Denver, and Phoenix with remote consultants worldwide. For more information please visit "
-        }
-        <a
-          href="https://commerce.nearform.com/"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          formidable.com.
-        </a>
-      </Blurb>
-    </InnerContainer>
+    <BrandLogo
+      href="https://commerce.nearform.com"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <Image src={nearFormLogo} alt="Nearform logo" height={100} width={100} />
+    </BrandLogo>
+    <div>Copyright © 2013-2024 Nearform</div>
   </FooterContainer>
 );
 

diff --git a/docs/src/partials/header.js b/docs/src/partials/header.js
@@ -1,12 +1,11 @@
 import React from "react";
+import Image from "next/image";
 import Link from 'next/link';
+import { usePathname } from "next/navigation";
 import styled, { css } from "styled-components";
 import SVG from "react-inlinesvg";
 
-import { usePathname } from "next/navigation";
-
-const formidableIcon = "/open-source/victory/static/logos/logo-formidable-icon.svg";
-const formidableLogo = "/open-source/victory/static/logos/logo-formidable.svg";
+import nearformLogo from "@/static/logos/nf_icon.png";
 const burgerIcon = "/open-source/victory/static/burger.svg";
 
 const HeaderContainer = styled.header`
@@ -90,32 +89,6 @@ const NavAnchor = styled(({ active, theme, ...rest }) => <a {...rest} />)`
   ${navItemStyle}
 `;
 
-const FormidableIcon = styled(SVG)`
-  color: ${({ theme }) => theme.color.red};
-  display: flex;
-
-  @media ${({ theme }) => theme.mediaQuery.md} {
-    display: none;
-  }
-
-  > svg {
-    height: 2.4rem;
-    width: 1.8rem;
-  }
-`;
-
-const FormidableLogo = styled(SVG)`
-  color: ${({ theme }) => theme.color.nearBlack};
-  display: none;
-  height: 2.8rem;
-  position: relative;
-  top: -0.1rem;
-
-  @media ${({ theme }) => theme.mediaQuery.md} {
-    display: block;
-  }
-`;
-
 const Header = ({ className = "", onMenuClick }) => {
   const pathname = usePathname();
   return (
@@ -177,14 +150,7 @@ const Header = ({ className = "", onMenuClick }) => {
           target="_blank"
           rel="noopener noreferrer"
         >
-          <FormidableIcon src={formidableIcon} />
-        </a>
-        <a
-          href="https://commerce.nearform.com/"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <FormidableLogo src={formidableLogo} />
+          <Image src={nearformLogo} height={50} />
         </a>
       </InnerContainer>
     </HeaderContainer>

diff --git a/docs/src/partials/home/companies.js b/docs/src/partials/home/companies.js
@@ -54,7 +54,7 @@ const Company = styled.li`
 const CompanyLogo = Image;
 
 const Companies = () => (
-  <LandingSectionWrapper bg={importedTheme.color.lightGray}>
+  <LandingSectionWrapper $bg={importedTheme.color.lightGray}>
     <LandingSectionContent>
       <SectionHeading>A Few of Our Fans</SectionHeading>
       <CompaniesList>

diff --git a/docs/src/partials/home/content.js b/docs/src/partials/home/content.js
@@ -1,48 +1,10 @@
-import siteConfig from "@/static-config-helpers/site-data";
-
-const LogoFormidable = "/open-source/victory/static/logos/logo-formidable-icon.svg";
 const FeatureRobust = "/open-source/victory/static/feature-robust.svg";
 const FeatureFlexible = "/open-source/victory/static/feature-flexible.svg";
 const FeatureNative = "/open-source/victory/static/feature-native.png";
-const HeroBackground = "/open-source/victory/static/hero-background.svg";
 
 // TODO: just merge this into the actual HTML and not
 // hidden inside a JS file
 const content = {
-  hero: {
-    background: HeroBackground,
-    cornerText: "ANOTHER OSS \n PROJECT BY",
-    cornerIcon: LogoFormidable,
-    description:      siteConfig.siteDescription,
-    code: "npm install victory",
-    link: {
-      text: "DOCUMENTATION",
-      location: "/docs",
-    },
-    linksArray: [
-      {
-        text: "ABOUT",
-        location: "/about",
-      },
-      {
-        text: "DOCS",
-        location: "/docs",
-      },
-      {
-        text: "GALLERY",
-        location: "/gallery",
-      },
-      {
-        text: "GITHUB",
-        location: "https://github.com/FormidableLabs/victory",
-        external: true,
-      },
-      {
-        text: "FAQS",
-        location: "/docs/faq",
-      },
-    ],
-  },
   features: [
     {
       title: "Robust",

diff --git a/docs/src/partials/home/get-started.js b/docs/src/partials/home/get-started.js
@@ -34,7 +34,7 @@ const StyledLandingSectionContent = styled(LandingSectionContent)`
 
 const GetStarted = ({ description, link }) => {
   return (
-    <LandingSectionWrapper bg={importedTheme.color.red}>
+    <LandingSectionWrapper $bg={importedTheme.color.red}>
       <StyledLandingSectionContent color={importedTheme.color.white}>
         <SectionHeading>Get Started</SectionHeading>
         <SectionDescription>{description}</SectionDescription>