From 743e4e1994a1d3c89782f721aff84de0734abedc Mon Sep 17 00:00:00 2001 From: Tim Raderschad Date: Thu, 2 Nov 2023 20:56:35 +0100 Subject: [PATCH] feat(web): add new landing page info (#88) --- apps/web/public/img/companies/dynabase.svg | 4 + apps/web/public/img/companies/igus.svg | 3 + apps/web/public/img/companies/mavenoid.svg | 15 +++ apps/web/public/img/companies/rbtx.svg | 73 +++++++++++++ apps/web/src/components/Integrations.tsx | 113 +++++++++++++++++++++ apps/web/src/components/UsedBy.tsx | 58 +++++++++++ apps/web/src/pages/index.tsx | 9 ++ 7 files changed, 275 insertions(+) create mode 100644 apps/web/public/img/companies/dynabase.svg create mode 100644 apps/web/public/img/companies/igus.svg create mode 100644 apps/web/public/img/companies/mavenoid.svg create mode 100644 apps/web/public/img/companies/rbtx.svg create mode 100644 apps/web/src/components/Integrations.tsx create mode 100644 apps/web/src/components/UsedBy.tsx diff --git a/apps/web/public/img/companies/dynabase.svg b/apps/web/public/img/companies/dynabase.svg new file mode 100644 index 00000000..0c9a9779 --- /dev/null +++ b/apps/web/public/img/companies/dynabase.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/web/public/img/companies/igus.svg b/apps/web/public/img/companies/igus.svg new file mode 100644 index 00000000..5b0902c3 --- /dev/null +++ b/apps/web/public/img/companies/igus.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/web/public/img/companies/mavenoid.svg b/apps/web/public/img/companies/mavenoid.svg new file mode 100644 index 00000000..15ccaaf1 --- /dev/null +++ b/apps/web/public/img/companies/mavenoid.svg @@ -0,0 +1,15 @@ + + + + + diff --git a/apps/web/public/img/companies/rbtx.svg b/apps/web/public/img/companies/rbtx.svg new file mode 100644 index 00000000..a99a3132 --- /dev/null +++ b/apps/web/public/img/companies/rbtx.svg @@ -0,0 +1,73 @@ + + diff --git a/apps/web/src/components/Integrations.tsx b/apps/web/src/components/Integrations.tsx new file mode 100644 index 00000000..011d4752 --- /dev/null +++ b/apps/web/src/components/Integrations.tsx @@ -0,0 +1,113 @@ +import { DOCS_URL } from "@tryabby/core"; +import { AnimatePresence, motion } from "framer-motion"; +import { cn } from "lib/utils"; +import Link from "next/link"; +import { useEffect, useRef, useState } from "react"; +import { SiAngular, SiNextdotjs, SiReact, SiSvelte } from "react-icons/si"; + +const INTEGRATIONS = [ + { + name: "Next.js", + logo: , + docsUrlSlug: "nextjs", + logoFill: "#fff", + }, + { + name: "React", + logo: , + docsUrlSlug: "react", + logoFill: "#61DAFB", + }, + { + name: "Svelte", + logo: , + docsUrlSlug: "svelte", + logoFill: "#FF3E00", + }, + { + name: "Angular", + logo: , + docsUrlSlug: "angular", + logoFill: "#DD0031", + }, +] satisfies Array<{ + name: string; + logo: React.ReactNode; + logoFill: string; + docsUrlSlug: string; +}>; + +export const Integrations = () => { + const [currentIntegrationIndex, setCurrentIntegrationIndex] = useState(0); + const intervalRef = useRef(); + const currentIntegration = INTEGRATIONS[currentIntegrationIndex]; + + useEffect(() => { + intervalRef.current = setInterval(() => { + setCurrentIntegrationIndex((index) => + index === INTEGRATIONS.length - 1 ? 0 : index + 1 + ); + }, 2000); + + return () => clearInterval(intervalRef.current); + }, []); + + if (!currentIntegration) { + return null; + } + + return ( +
+
+

Feature Flags for

+
+ + {INTEGRATIONS.map( + (integration, index) => + index === currentIntegrationIndex && ( + + {integration.name} + + ) + )} + +
+
+
+ {INTEGRATIONS.map((integration, index) => ( +
+ +
+ ))} +
+
+ + {currentIntegration.name} Docs + +
+
+ ); +}; diff --git a/apps/web/src/components/UsedBy.tsx b/apps/web/src/components/UsedBy.tsx new file mode 100644 index 00000000..3cb5fa6e --- /dev/null +++ b/apps/web/src/components/UsedBy.tsx @@ -0,0 +1,58 @@ +import Link from "next/link"; +import IgusLogo from "../../public/img/companies/igus.svg"; +import DynabaseLogo from "../../public/img/companies/dynabase.svg"; +import RBTXLogo from "../../public/img/companies/rbtx.svg"; +import MavenoidLogo from "../../public/img/companies/mavenoid.svg"; +import Image from "next/image"; + +const COMPANIES = [ + { + name: "igus", + logo: IgusLogo, + companyUrl: "https://www.igus.com/", + }, + { + name: "RBTX", + logo: RBTXLogo, + companyUrl: "https://rbtx.com/", + }, + { + name: "Dynabase", + logo: DynabaseLogo, + companyUrl: "https://dynabase.de/", + }, + { + name: "Mavenoid", + logo: MavenoidLogo, + companyUrl: "https://mavenoid.com/", + }, +] satisfies Array<{ + logo: React.ReactNode; + name: string; + companyUrl: string; +}>; + +export function UsedBy() { + return ( +
+

Used by engineers at:

+ +
+ {COMPANIES.map((company, index) => ( + + {company.name} + + ))} +
+
+ ); +} diff --git a/apps/web/src/pages/index.tsx b/apps/web/src/pages/index.tsx index 3af15cfe..bff68f12 100644 --- a/apps/web/src/pages/index.tsx +++ b/apps/web/src/pages/index.tsx @@ -21,6 +21,8 @@ import abbyScreenshot from "../../public/screenshot.png"; import { NextPageWithLayout } from "./_app"; import { DevtoolsArrow } from "components/DevtoolsArrow"; import { useTracking } from "lib/tracking"; +import { Integrations } from "components/Integrations"; +import { UsedBy } from "components/UsedBy"; const { useAbby, AbbyProvider, useFeatureFlag, __abby__, withDevtools } = createAbby({ @@ -153,6 +155,13 @@ const Home: NextPageWithLayout< )} +
+ +
+ +
+ +