New website copy (#118)

* WIP: New copy

* Button

* Fix svgs

* Add one command

* Add mobile Everything you need to build and query a great API

* Update meta info & images

* update logo on docs

* Update Everything you need to build and query a great API for desktop

* Update GraphQL is the best API framework section

* update title

* Copy updates

* Design updates

* Update GraphQL is the best API framework section

* Add testimonials

* Add github star counter

* Add wrapping to hero buttons

* Remove delay for github start counter

---------

Co-authored-by: Bogdan Soare <[email protected]>

website/next.config.js

@@ -6,7 +6,7 @@ const withNextra = require('nextra')({
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-  transpilePackages: ['geist'],
+  transpilePackages: ['geist', 'react-tweet'],
 }
 
 module.exports = withNextra(nextConfig)

website/package.json

@@ -19,7 +19,10 @@
     "nextra": "^2.13.2",
     "nextra-theme-docs": "^2.13.2",
     "react": "^18.0.0",
+    "react-countup": "^6.5.0",
     "react-dom": "^18.0.0",
+    "react-fast-marquee": "^1.6.2",
+    "react-tweet": "^3.2.0",
     "sass": "^1.69.5",
     "tailwind-merge": "^2.0.0"
   },

website/src/components/ExternalLink.tsx

@@ -0,0 +1,20 @@
+import { External } from '@/components/icons'
+
+type ExternalLinkProps = {
+  href: string
+  children: React.ReactNode
+}
+
+export function ExternalLink({ href, children }: ExternalLinkProps) {
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="group inline-flex items-center gap-2.5 rounded-lg border border-gravel-400/20 bg-[linear-gradient(0deg,rgba(188,188,184,0.02)_0%,rgba(188,188,184,0.02)_100%),linear-gradient(180deg,rgba(255,255,255,0.04)_0%,rgba(255,255,255,0.00)_100%)] px-3 py-2 hover:border-starship-500 hover:bg-[linear-gradient(0deg,rgba(219,254,1,0.04)_0%,rgba(219,254,1,0.04)_100%),linear-gradient(180deg,rgba(255,255,255,0.04)_0%,rgba(255,255,255,0.00)_100%)]"
+    >
+      {children}
+      <External className="w-4 flex-shrink-0 text-gravel-300 group-hover:text-starship-500" />
+    </a>
+  )
+}

website/src/components/HeadMeta.tsx

@@ -4,20 +4,17 @@ type HeadMetaProps = {
   url: string
 }
 
-const imageUrl = 'https://fusedata.dev/images/fuse-og-image.jpg'
+const imageUrl = 'https://fusedata.dev/images/og-image.png'
 const imageWidth = (1200).toString()
 const imageHeight = (630).toString()
 const imageType = 'image/jpeg'
-const imageAlt =
-  'Fuse, the opinionated framework for easily creating typesafe data layers'
+const imageAlt = 'Fuse: Build and query great APIs with TypeScript'
 
 export function getHeadMetaContent({ title, description, url }: HeadMetaProps) {
-  const metaTitle = title
-    ? `${title} – Fuse`
-    : 'Fuse: The opinionated framework for easily creating typesafe data layers'
+  const metaTitle = title ? `${title} – Fuse` : 'Fuse: TypeScript API Framework'
   const metaDescription =
     description ||
-    'Data layers enable frontend teams to transform backend APIs for their UIs. Fuse is tailor-made to make it simple to build data layers, starting with first-class support for Next.js.'
+    'Aggregate all your data sources and transform them into a great GraphQL API for your clients with many best practices built-in for you—fully typesafe.'
 
   let keyIndex = 0
   const getKey = () => {

website/src/components/Section.tsx

@@ -13,7 +13,7 @@ export function Section({
   return (
     <section
       className={cn(
-        'relative overflow-hidden',
+        'relative',
         variant === 'light' ? 'text-gravel-900' : 'bg-gravel-950 text-white',
       )}
     >

website/src/components/StarOnGithub.tsx

@@ -0,0 +1,32 @@
+import { useRef } from 'react'
+import { useCountUp } from 'react-countup'
+import { ButtonLink } from '@/components/Button'
+import { GithubLogo, Star } from '@/components/icons'
+
+type StarOnGithubProps = {
+  stars: number
+}
+
+export function StarOnGithub({ stars = 0 }: StarOnGithubProps) {
+  const countUpRef = useRef<HTMLSpanElement | null>(null)
+  useCountUp({ ref: countUpRef, start: stars - 10, end: stars })
+
+  return (
+    <ButtonLink
+      href="https://github.com/StellateHQ/fuse"
+      target="_blank"
+      variant="light"
+      rel="noopener noreferrer"
+      className="justify-center py-1.5 pr-2.5"
+    >
+      <GithubLogo className="h-5 w-5" />
+      Star on GitHub
+      {stars && (
+        <div className="inline-flex h-7 items-center gap-1.5 rounded-xl border border-gravel-200 bg-gravel-50 px-2.5">
+          <Star className="h-4 w-4" />
+          <span ref={countUpRef} className="text-sm tabular-nums" />
+        </div>
+      )}
+    </ButtonLink>
+  )
+}

website/src/components/Testimonials.tsx

@@ -0,0 +1,30 @@
+import type { Tweet } from 'react-tweet/api'
+import { TweetHeader, TweetBody, enrichTweet } from 'react-tweet'
+import Marquee from 'react-fast-marquee'
+import { Section } from '@/components/Section'
+import { Card } from '@/components/Card'
+
+type TestimonialsProps = {
+  tweets: Tweet[]
+}
+
+export function Testimonials({ tweets }: TestimonialsProps) {
+  return (
+    <Section variant="dark" className="pb-10 pt-16 md:pt-24">
+      <Marquee pauseOnHover speed={80} className="items-start">
+        {tweets.map((t) => {
+          const tweet = enrichTweet(t)
+
+          return (
+            <div key={tweet.id_str} className="mx-5 w-[350px]">
+              <Card className="space-y-3 px-4 py-3 text-sm">
+                <TweetBody tweet={tweet} />
+                <TweetHeader tweet={tweet} />
+              </Card>
+            </div>
+          )
+        })}
+      </Marquee>
+    </Section>
+  )
+}

website/src/components/icons/AngularjsLogo.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react'
+import type { SVGProps } from 'react'
+const SvgAngularjsLogo = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={61}
+    height={16}
+    fill="none"
+    viewBox="0 0 61 16"
+    aria-hidden="true"
+    {...props}
+  >
+    <g clipPath="url(#a)">
+      <path
+        fill="#CCC"
+        d="M16.798 11.426v-6.1h.789l3.733 4.914V5.326h.746v6.1h-.79l-3.731-4.957v4.957zm11.324-.24a4.423 4.423 0 0 1-1.591.283c-2.209 0-3.314-1.06-3.314-3.178 0-2.005 1.067-3.008 3.199-3.008.612 0 1.18.086 1.706.257v.682a4.543 4.543 0 0 0-1.62-.299c-1.664 0-2.495.79-2.495 2.367 0 1.692.818 2.539 2.456 2.539.262 0 .552-.035.87-.103V8.653h.79zm1.259-2.114V5.327h.789v3.745c0 1.17.583 1.757 1.749 1.757 1.165 0 1.748-.586 1.748-1.757V5.327h.79v3.745c0 1.598-.846 2.397-2.538 2.397-1.692 0-2.538-.799-2.538-2.397m7.272-3.746v5.46h3.191v.64h-3.98v-6.1zm4.33 6.1h-.82l3.033-6.904 3.033 6.904h-.874l-.79-1.92h-2.017l.217-.639h1.536l-1.139-2.764zm6.077 0v-6.1h2.602c1.16 0 1.74.488 1.74 1.463 0 .794-.566 1.381-1.701 1.762l2.094 2.874h-1.04l-1.941-2.742v-.516c1.166-.185 1.748-.633 1.748-1.343 0-.563-.324-.845-.972-.845h-1.74v5.447z"
+      />
+      <path
+        fill="#A6120D"
+        d="M54.751 5.327V9.67c0 1.172-.69 1.757-2.068 1.757v-.64c.853 0 1.28-.373 1.28-1.117V5.327zm1.408 5.886v-.725a6.16 6.16 0 0 0 2.073.342c1.049 0 1.574-.384 1.574-1.152 0-.654-.387-.98-1.16-.98h-.785c-1.277 0-1.916-.556-1.916-1.664 0-1.167.818-1.75 2.453-1.75.711 0 1.372.087 1.984.256v.726a5.639 5.639 0 0 0-1.984-.342c-1.108 0-1.663.37-1.663 1.11 0 .653.375.98 1.126.98h.785c1.3 0 1.95.555 1.95 1.663 0 1.195-.788 1.792-2.364 1.792a8.04 8.04 0 0 1-2.073-.256"
+      />
+      <path
+        fill="#B3B3B3"
+        d="M8.7.43 1.575 2.935 2.7 12.27l6.006 3.301 6.037-3.345 1.125-9.333z"
+      />
+      <path fill="#A6120D" d="M15.158 3.431 8.683 1.223v13.558l5.427-3.003z" />
+      <path fill="#DD1B16" d="m2.375 3.471.965 8.347 5.343 2.963V1.223z" />
+      <path
+        fill="#F2F2F2"
+        d="m10.466 8.441-1.783.833H6.804l-.883 2.21-1.643.03 4.405-9.799zm-.173-.42L8.695 4.857l-1.311 3.11h1.299z"
+      />
+      <path
+        fill="#B3B3B3"
+        d="m8.683 1.715.011 3.142 1.488 3.112H8.686l-.003 1.304 2.068.001.967 2.24 1.572.03z"
+      />
+    </g>
+    <defs>
+      <clipPath id="a">
+        <path fill="#fff" d="M.913 0h59.294v16H.913z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+export default SvgAngularjsLogo

website/src/components/icons/Automatic.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react'
+import type { SVGProps } from 'react'
+const SvgAutomatic = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    fill="none"
+    viewBox="0 0 24 24"
+    aria-hidden="true"
+    {...props}
+  >
+    <path
+      stroke="#DBFE01"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeMiterlimit={10}
+      strokeWidth={1.2}
+      d="M6.938 14v4h-4M18.938 10V6h4"
+    />
+    <path
+      stroke="#DBFE01"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeMiterlimit={10}
+      strokeWidth={1.2}
+      d="M19.205 6c1.51 1.6 2.4 3.644 2.4 6.044 0 4.8-3.912 8.712-8.712 8.712-1.155 0-2.31-.267-3.377-.623M6.67 18c-1.51-1.6-2.4-3.645-2.4-6.045 0-4.8 3.912-8.71 8.712-8.71 1.155 0 2.31.266 3.377.621"
+    />
+    <path
+      stroke="#DBFE01"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.2}
+      d="m10.357 15.096 1.901-5.703a.716.716 0 0 1 1.359 0l1.9 5.703m-4.471-2.064h3.784"
+    />
+  </svg>
+)
+export default SvgAutomatic