diff --git a/www/README.md b/www/README.md index ebd6f1384a7..c6a9109e4dd 100644 --- a/www/README.md +++ b/www/README.md @@ -41,3 +41,7 @@ We use `@vercel/og-image` for dynamic open graph image generation. They are depl To use the dynamic images, we override the default Docusaurus theme using [`swizzling`](https://www.docusaurus.io/docs/swizzling). You can find these overrides in [src/theme/\*\*](./src/theme). To play with them locally go the `og-image` folder and run `pnpm dev`. + +## Company logos + +We store a list of company logos in the `www/static/img/logos/*` folder to show on the landing page. To add future logos, simply add the png/svg to the folder, and then add it to the `www/src/components/companies.ts` map with the key of the company name and the value of the logo file location. Be sure to normalize your logos, and consider running them though an optimizer tool like [SVGOMG](https://jakearchibald.github.io/svgomg/). Finally, ensure that they have a set width and height. diff --git a/www/src/components/CompaniesUsing.tsx b/www/src/components/CompaniesUsing.tsx new file mode 100644 index 00000000000..d383d6f2f2f --- /dev/null +++ b/www/src/components/CompaniesUsing.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import { companyLogos } from './companies'; +import { SectionTitle } from './SectionTitle'; + +const animationRow = Array(2).fill(0) as [number, number]; + +/** + * An animated logo carousel to show companies using tRPC. Tailwind code taken from Cruip + * @see https://cruip.com/create-an-infinite-horizontal-scroll-animation-with-tailwind-css/ + */ +export const CompaniesUsing = () => { + return ( + <> + +
+ {animationRow.map((_, index) => ( + + ))} +
+ + ); +}; diff --git a/www/src/components/companies.ts b/www/src/components/companies.ts new file mode 100644 index 00000000000..df82fdef031 --- /dev/null +++ b/www/src/components/companies.ts @@ -0,0 +1,12 @@ +export const companyLogos: Record = { + netflix: './img/logos/netflix.svg', + newfront: './img/logos/newfront.svg', + cal: './img/logos/calcom.svg', + ping: './img/logos/ping.svg', + pleo: './img/logos/pleo.svg', + snaplet: './img/logos/snaplet.svg', + napo: './img/logos/napo.svg', + documenso: './img/logos/documenso.png', + fintory: './img/logos/fintory.svg', + algora: './img/logos/algora.svg', +}; diff --git a/www/src/pages/index.tsx b/www/src/pages/index.tsx index 4a8f013607c..74900c80b40 100644 --- a/www/src/pages/index.tsx +++ b/www/src/pages/index.tsx @@ -9,6 +9,7 @@ import React, { useEffect } from 'react'; import { FiArrowRight } from 'react-icons/fi'; import { popIn } from '../animations/popIn'; import { Button } from '../components/Button'; +import { CompaniesUsing } from '../components/CompaniesUsing'; import { Features } from '../components/Features'; import { GithubSponsorButton } from '../components/GithubSponsorButton'; import { GithubStarsButton } from '../components/GithubStarsButton'; @@ -283,6 +284,10 @@ const HomeContent: React.FC = () => { +
+ +
+
+ + diff --git a/www/static/img/logos/calcom.svg b/www/static/img/logos/calcom.svg new file mode 100644 index 00000000000..93fee68de0c --- /dev/null +++ b/www/static/img/logos/calcom.svg @@ -0,0 +1,3 @@ + + + diff --git a/www/static/img/logos/documenso.png b/www/static/img/logos/documenso.png new file mode 100644 index 00000000000..07ce536a222 Binary files /dev/null and b/www/static/img/logos/documenso.png differ diff --git a/www/static/img/logos/fintory.svg b/www/static/img/logos/fintory.svg new file mode 100644 index 00000000000..b309d007a3c --- /dev/null +++ b/www/static/img/logos/fintory.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/www/static/img/logos/napo.svg b/www/static/img/logos/napo.svg new file mode 100644 index 00000000000..2562e13699d --- /dev/null +++ b/www/static/img/logos/napo.svg @@ -0,0 +1,3 @@ + + + diff --git a/www/static/img/logos/netflix.svg b/www/static/img/logos/netflix.svg new file mode 100644 index 00000000000..2a9f52813fa --- /dev/null +++ b/www/static/img/logos/netflix.svg @@ -0,0 +1,3 @@ + + + diff --git a/www/static/img/logos/newfront.svg b/www/static/img/logos/newfront.svg new file mode 100644 index 00000000000..9fba7a620a9 --- /dev/null +++ b/www/static/img/logos/newfront.svg @@ -0,0 +1,4 @@ + + + + diff --git a/www/static/img/logos/ping.svg b/www/static/img/logos/ping.svg new file mode 100644 index 00000000000..3ab0e39f107 --- /dev/null +++ b/www/static/img/logos/ping.svg @@ -0,0 +1,3 @@ + + + diff --git a/www/static/img/logos/pleo.svg b/www/static/img/logos/pleo.svg new file mode 100644 index 00000000000..ccf20d98dd4 --- /dev/null +++ b/www/static/img/logos/pleo.svg @@ -0,0 +1,3 @@ + + + diff --git a/www/static/img/logos/snaplet.svg b/www/static/img/logos/snaplet.svg new file mode 100644 index 00000000000..88a8d01596e --- /dev/null +++ b/www/static/img/logos/snaplet.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/www/tailwind.config.ts b/www/tailwind.config.ts index 8a7e992c220..961d44437a7 100644 --- a/www/tailwind.config.ts +++ b/www/tailwind.config.ts @@ -37,10 +37,15 @@ const config: Config = { transform: 'translateY(-1rem)', }, }, + 'infinite-scroll': { + from: { transform: 'translateX(0)' }, + to: { transform: 'translateX(-100%)' }, + }, }, animation: { 'pop-in': 'pop-in 1s ease-out', loader: 'loader 0.6s infinite alternate', + 'infinite-scroll': 'infinite-scroll 25s linear infinite', }, }, },