components#Footer TypeScript Examples

PageLayout: React.FC<PageLayoutProps> = ({ children }) => {
  const classes = useStyles();

  return (
    <Box className={classes.page}>
      <BetaWarningBanner />
      <Header />
      <Background fallback={false} />
      <Box className={classes.pageWrapper}>{children}</Box>
      <Footer />
    </Box>
  );
}

describe('app context tests', () => {
  it('should render partial footer on mobile', () => {
    render(
      <AppProvider config={{} as any} isMobile={true} children={<Footer />} />
    );

    // partial footer should now be visible
    const footer = screen.getByTestId('footer');

    expect(footer).toHaveTextContent(/^Designed and built by Adam Alston$/);
    expect(footer).not.toHaveTextContent(/Source/);
  });

  describe('reducer tests', () => {
    it('should return the initial state', () => {
      const state = reducer(undefined, {});

      expect(state).toEqual(undefined);
    });

    it('should return the dark theme', () => {
      const state = reducer(undefined, { type: 'SET_THEME', value: 'dark' });

      expect(state).toEqual({ theme: themes.dark });
    });

    it('should return the light theme', () => {
      const state = reducer(undefined, { type: 'SET_THEME', value: 'light' });

      expect(state).toEqual({ theme: themes.light });
    });
  });
});

function App() {
  const { isApiReady } = useApi();

  return (
    <>
      <Header />
      <main>
        {isApiReady ? <Routing /> : <ApiLoader />}
        <RefreshButton />
      </main>
      <Footer />
    </>
  );
}

function Component() {
  const { isApiReady } = useApi();

  useBalanceSubscription();
  useLoggedInAccount();

  return (
    <>
      <Header />
      <main>{isApiReady ? <Routing /> : <ApiLoader />}</main>
      <Footer />
    </>
  );
}

App: React.FC = () => {
  const [isReady, setIsReady]: [boolean, Function] = useState(false);
  const [isMobile, setIsMobile]: [boolean, Function] = useState(false);

  const init = () => {
    if (
      window.matchMedia(
        '(max-device-width: 820px) and (-webkit-min-device-pixel-ratio: 2)'
      )?.matches
    ) {
      setIsMobile(true);
    }

    // before the state refactoring, 'theme' had a boolean-ish ('true', 'false')
    // value in localStorage, now 'theme' has a theme value ('dark', 'light'),
    // to prevent the site from breaking, older 'theme' entries should be updated
    const localStorageTheme: string | null = localStorage.getItem('theme');
    if (localStorageTheme === 'true') {
      localStorage.setItem('theme', 'dark');
    } else if (localStorageTheme === 'false') {
      localStorage.setItem('theme', 'light');
    }

    setIsReady(true);
  };

  useEffect(() => {
    if (!isReady) init();
  }, [isReady]);

  return isReady ? (
    <AppProvider config={config} isMobile={isMobile}>
      <div className="app">
        <Toggle />
        <Content />
        <Buttons />
        <Footer />
        <Particles />
      </div>
    </AppProvider>
  ) : (
    <></>
  );
}

Custom404: NextPage = () => {
  const router = useRouter()
  const { t } = useTranslation(`404`)
  const { slug } = router.query

  const inConstruction = [`features`, `plugins`].includes(slug as string)

  return (
    <>
      <SEO
        title={
          inConstruction
            ? `This page is currently being developed.`
            : `You hit a dead end.`
        }
      />
      <Nav />
      <Container className=" max-w-7xl " id="content">
        <div className="z-20 mx-auto  text-center ">
          {!inConstruction ? (
            <>
              <div className="animation-flicker mt-4">
                <Image src={text404} alt="404" width={207} height={45} />
              </div>

              <h1 className="text-6xl font-semibold lg:text-7xl">
                {t(`dead-end`)}
              </h1>
              <p className="my-5 mt-6 text-xl lg:text-2xl">{t(`guide-back`)}</p>
            </>
          ) : (
            <>
              <h1 className="mt-8 text-3xl font-semibold lg:text-4xl">
                {t(`in-construction`)}
              </h1>
              <p className="mt-4 text-lg">{t(`check-later`)}</p>
              <p className="my-2 mb-4 text-sm lg:text-lg">
                {t(`blahaj-while-waiting`)}
              </p>
            </>
          )}

          <div className="my-2 mx-auto inline-flex overflow-clip rounded-xl drop-shadow-lg">
            <Image src={Blahaj} alt="" width="712" height="450" />
          </div>
          <div className="mx-auto mt-8 mb-8 flex justify-center">
            <button
              onClick={() => router.back()}
              className="mx-3 w-44 items-center rounded-full bg-pinkRed px-8 py-1 text-lg font-semibold text-white "
            >
              {t(`go-back`)}
            </button>
            <Link
              passHref
              href="https://www.ikea.com/us/en/p/blahaj-soft-toy-shark-90373590/"
            >
              <a className="mx-3 inline-flex w-44 items-center rounded-full bg-yellow-500 px-8 py-1  font-semibold text-white ">
                <span className="mx-auto">{t(`get-blahaj`)}</span>
              </a>
            </Link>
          </div>

          <a
            href="https://twitter.com/niichi021"
            className="pt-4 text-sm text-gray-700 dark:text-gray-300"
          >
            {t(`image-sauce`)}
          </a>
        </div>
      </Container>
      <Footer />
    </>
  )
}

OpenSource: NextPage<pageProps> = ({
  contributors,
  commits,
  netReceived,
  pullRequests,
  openIssues,
  totalPaid,
  balance,
}) => {
  const { t } = useTranslation(`about`)
  const [isOpen, setIsOpen] = useState(false)

  return (
    <>
      <SEO title={t(`page-title`)} />
      <Nav />
      <Container className="pt-8 lg:pt-16" id="content">
        <div className="z-20 mx-auto px-2 pb-8 lg:max-w-7xl ">
          <h1 className="lg:text-0xl bg-gradient-to-br from-[#005BEA] to-[#00C6FB] bg-clip-text text-4xl font-bold text-transparent xxs:text-5xl lg:text-9xl">
            {t(`title1`)} <br />
            {t(`title2`)}
          </h1>
          <p className="my-4 mb-8 mt-8 text-lg sm:px-2 sm:text-xl lg:mb-20 lg:text-2xl">
            {t(`hero-p`)}
          </p>
          <Container offset={10} noMargin fadeIn>
            <div className="mx-auto flex flex-wrap gap-8 pb-16 text-center">
              <div className="mx-auto text-xl">
                <div className="mb-1 text-6xl font-bold">{commits}</div>
                {t(`commits`)}
                <BiGitPullRequest
                  className="mx-auto mt-2 fill-pinkRed"
                  size={40}
                />
              </div>
              <div className="mx-auto text-xl">
                <div className="mb-1 text-6xl font-bold">{pullRequests}</div>
                {t(`pull-requests`)}
                <BiGitPullRequest
                  className="mx-auto mt-2 fill-pinkRed"
                  size={40}
                />
              </div>
              <div className="mx-auto text-xl">
                <div className="mb-1 text-6xl font-bold">{openIssues}</div>
                {t(`open-issues`)}
                <BiGitPullRequest
                  className="mx-auto mt-2 fill-pinkRed"
                  size={40}
                />
              </div>
            </div>
            <div className="w-full text-center">
              <a
                href="https://github.com/vignetteapp"
                className="button mx-auto "
              >
                {t(`visit-github-button`)}
              </a>
            </div>
          </Container>
        </div>
        <Container fadeIn noMargin className="mt-32 text-center ">
          <Image src={repoIcon} alt="" quality={100} width={72} height={72} />

          <h2 className="mt-8 text-2xl font-bold lg:text-3xl">
            {t(`section1-title`)}
          </h2>
          <div className=" mx-auto  mt-6 flex max-w-6xl flex-wrap justify-center gap-4 px-0 lg:p-8 ">
            {contributors.map((user) => (
              <Link
                passHref
                key={user.login}
                href={`https://github.com/${user.login}`}
              >
                <a className="p-4">
                  <div className="mx-auto">
                    <Image
                      width={64}
                      height={64}
                      className="rounded-full"
                      src={user.profile}
                      alt=""
                    />
                  </div>
                </a>
              </Link>
            ))}
          </div>

          <p className="mx-auto mt-8 text-xs leading-snug  text-gray-700 dark:text-gray-300 sm:max-w-md sm:text-sm">
            {t(`section1-p`)}
          </p>

          <p className="mt-4 text-xs text-gray-800 dark:text-gray-200  ">
            {t(`updates-daily-text`)}
          </p>
        </Container>
        <Container>
          <div className="mt-14 text-center lg:mt-28">
            <div className="inline-flex overflow-hidden rounded-2xl drop-shadow-xl">
              <Image
                alt=""
                src={VignettePadding}
                width={64}
                height={64}
                quality={100}
              />
            </div>

            <h2 className="mt-3 text-2xl font-semibold">
              {t(`section2-title`)}
            </h2>
            <p className="mx-auto mt-2 max-w-md">{t(`section2-p`)}</p>
          </div>
          <div className="mx-auto mt-10 flex flex-wrap justify-center gap-4 lg:max-w-5xl ">
            {teamMembers.map((m: Member) => (
              <a
                href={m.url}
                key={m.name}
                className=" my-2 mx-2 text-center lg:mx-8"
              >
                <div className="inline-flex overflow-hidden rounded-full ">
                  <Image
                    alt=""
                    className=""
                    src={m.avatar}
                    width={64}
                    height={64}
                  />
                </div>
                <h4 className=" my-1 font-medium capitalize">{m.name}</h4>
                <p className="max-w-[9em] text-xs">{m.role}</p>
              </a>
            ))}
          </div>
        </Container>
        <Container className="mt-12 text-center">
          <Image src={donationImage} width={400} height={400} alt="" />
          <h1 className="text-3xl font-bold"> {t(`section3-title`)}</h1>
          <p className="mx-auto mt-2 mb-2 max-w-[34em]">{t(`section3-p`)}</p>
          <button
            onClick={() => setIsOpen(true)}
            className="font-semibold text-pinkRed hover:underline"
          >
            {t(`gives-back-button`)}
          </button>
          <Transition appear show={isOpen} as={Fragment}>
            <Dialog
              as="div"
              className="fixed inset-0 z-10 overflow-y-auto"
              onClose={() => setIsOpen(false)}
            >
              <div className="min-h-screen px-4 text-center">
                <Transition.Child
                  as={Fragment}
                  enter="ease-out duration-300"
                  enterFrom="opacity-0"
                  enterTo="opacity-100"
                  leave="ease-in duration-200"
                  leaveFrom="opacity-100"
                  leaveTo="opacity-0"
                >
                  <Dialog.Overlay className="fixed inset-0" />
                </Transition.Child>
                <Dialog.Overlay className="fixed inset-0 bg-black/20 backdrop-blur-sm dark:bg-neutral-900/80 " />
                {/* This element is to trick the browser into centering the modal contents. */}
                <span
                  className="inline-block h-screen align-middle"
                  aria-hidden="true"
                >
                  &#8203;
                </span>
                <Transition.Child
                  as={Fragment}
                  enter="ease-out duration-300"
                  enterFrom="opacity-0 scale-95"
                  enterTo="opacity-100 scale-100"
                  leave="ease-in duration-200"
                  leaveFrom="opacity-100 scale-100"
                  leaveTo="opacity-0 scale-95"
                >
                  <div className="prose-md prose my-8 inline-block w-full max-w-2xl transform overflow-hidden rounded-2xl bg-white px-6 py-4 text-left align-middle shadow-xl transition-all dark:prose-invert dark:bg-black">
                    <Dialog.Title
                      as="h3"
                      className="text-lg font-medium leading-6 "
                    >
                      {t(`gives-back-button`)}
                    </Dialog.Title>
                    <div className="mt-2">
                      <ReactMarkdown>{t(`gives-back-p`)}</ReactMarkdown>
                    </div>

                    <div className="mt-6">
                      <button
                        type="button"
                        className="button-small inline-flex justify-center border border-transparent bg-pinkRed px-4 py-2 text-sm font-medium text-white hover:bg-[#ff2277] focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 dark:bg-pinkRed"
                        onClick={() => setIsOpen(false)}
                      >
                        {t(`got-it-button`)}
                      </button>
                    </div>
                  </div>
                </Transition.Child>
              </div>
            </Dialog>
          </Transition>
          <div className="mx-auto my-10 flex w-full max-w-5xl flex-wrap justify-center gap-6 text-lg lg:gap-20 lg:text-xl ">
            <div className="w-40 md:w-52">
              <h3 className="mb-1 text-3xl font-bold lg:text-5xl">
                ${netReceived}
              </h3>
              {t(`earned`)}
            </div>

            <div className="w-40 md:w-52">
              <h3 className="mb-1 text-3xl font-bold lg:text-5xl">
                ${balance}
              </h3>
              {t(`balance`)}
            </div>

            <div className="w-52">
              <h3 className="mb-1 text-3xl font-bold lg:text-5xl">
                ${totalPaid}
              </h3>
              {t(`paid`)}
            </div>
          </div>
          <a className="button">{t(`support-us-button`)}</a>
        </Container>
      </Container>

      <Footer />
    </>
  )
}

PostLayout: NextPage<{ post: Post }> = ({ post }) => {
  const Component = useMemo(
    () => getMDXComponent(post.body.code),
    [post.body.code],
  )
  const { t } = useTranslation(`blog`)

  return (
    <>
      <SEO
        title={t(`blog-template`, { title: post.title })}
        desc={post.summary}
        template={false}
      />

      <BlogNav />

      <article className="mx-auto py-8 lg:py-12 " id="content">
        <div className="mx-auto mb-6 max-w-3xl px-4">
          <Link href="/blog">
            <a className="text-sm font-semibold uppercase tracking-tight text-pinkRed">
              {post.category}
            </a>
          </Link>

          <h1 className="mt-1 text-3xl font-bold lg:text-5xl">{post.title}</h1>
          <p className=" prose mt-8 text-neutral-500 dark:prose-invert dark:text-neutral-400  sm:prose-lg">
            {post.summary}
          </p>
          <div className="mt-8 flex items-center">
            <Image
              src={members.filter((item) => item.name == post.author)[0].avatar}
              width={40}
              height={40}
              alt=""
              className="rounded-full"
            />
            <div className="pl-2 text-sm">
              <span className="font-semibold">{post.author}</span>
              <time
                dateTime={post.date}
                className="block text-gray-600 dark:text-gray-200"
              >
                {format(parseISO(post.date), `LLLL d, yyyy`)}
              </time>
            </div>
          </div>
        </div>

        <div className="prose prose-lg prose-neutral relative mx-auto max-w-3xl px-4 prose-a:text-pinkRed prose-img:rounded dark:prose-invert">
          <Component
            components={
              {
                ...components,
              } as any
            }
          />
        </div>
      </article>
      <div className="mx-auto max-w-3xl px-4">
        <h3 className="mb-1 font-semibold">Tags</h3>
        <div className="mb-8 flex gap-2">
          {post.tags.map((tag, i) => (
            <div
              className="max-w-min rounded bg-neutral-800 py-1 px-2 text-sm capitalize text-white "
              key={i}
            >
              {tag}
            </div>
          ))}
        </div>

        <Link href="/blog" passHref>
          <a>
            <span className="tracking-[0]">&lt;-</span>
            {` `}
            {t(`back-to-list`)}
          </a>
        </Link>
      </div>
      <div className="relative left-0 h-80 w-80  lg:top-24 2xl:absolute">
        <Image src={circles} layout="fill" priority alt="" />
      </div>
      <Footer />
    </>
  )
}

Blog: NextPage<{ posts: Post[] }> = ({ posts }) => {
  const { t } = useTranslation(`blog`)
  const [featuredPost] = posts.slice(0)

  return (
    <>
      <SEO title={t(`title`)} desc={t(`hero-p`)} template={false} />

      <Container noMargin id="content">
        <div className="prose-invert relative z-20 w-full pb-14 text-white md:pb-28 ">
          <Image
            src={publicationCover}
            layout="fill"
            objectFit="cover"
            objectPosition="center"
            priority
            alt=""
          />
          <BlogNav />
          <div className="relative z-20 px-4">
            <h1 className="pt-4 pb-4 text-center text-4xl font-bold text-white md:pt-16 lg:text-5xl">
              {t(`hero-title`)}
            </h1>
            <p className="text-center text-lg lg:text-xl ">{t(`hero-p`)}</p>
          </div>
        </div>
        <div
          className="mx-auto grid max-w-7xl gap-8 px-6  pt-8 sm:grid-cols-2 md:grid-cols-3"
          id="blog-feed"
        >
          <div className="mx-0 mb-6 flex flex-wrap md:max-w-full md:flex-nowrap">
            <Link href={featuredPost.url} passHref>
              <a className="inline-flex h-44 overflow-hidden rounded xs:h-64 md:h-[28rem]">
                <Image
                  src={featuredPost.image}
                  width="1080"
                  height="540"
                  quality={100}
                  className="rounded object-cover object-center"
                  alt=""
                  priority
                />
              </a>
            </Link>
            <div className="py-4 md:px-8 md:py-8 lg:w-[32rem]">
              <h3 className="my-1  text-xs font-bold uppercase text-pinkRed">
                {featuredPost.category}
              </h3>
              <Link href={featuredPost.url} passHref>
                <a>
                  <h2 className="text-2xl font-bold lg:text-4xl">
                    {featuredPost.title}
                  </h2>
                  <p className="mt-4">{featuredPost.summary}</p>
                </a>
              </Link>
              <div className="mt-4 flex items-center">
                <Link
                  href={
                    members.filter(
                      (item) => item.name == featuredPost.author,
                    )[0].url
                  }
                >
                  <a>
                    <Image
                      src={
                        members.filter(
                          (item) => item.name == featuredPost.author,
                        )[0].avatar
                      }
                      width={40}
                      height={40}
                      alt=""
                      className="rounded-full"
                    />
                  </a>
                </Link>
                <div className="pl-2 text-sm">
                  <Link
                    href={
                      members.filter(
                        (item) => item.name == featuredPost.author,
                      )[0].url
                    }
                  >
                    <a>
                      <span className="font-semibold">
                        {featuredPost.author}
                      </span>
                    </a>
                  </Link>

                  <time
                    dateTime={featuredPost.date}
                    className="block text-gray-600 dark:text-gray-200"
                  >
                    {format(parseISO(featuredPost.date), `LLLL d, yyyy`)}
                  </time>
                </div>
              </div>
            </div>
          </div>
          {posts.slice(1, posts.length).map((post, idx) => (
            <PostCard key={idx} {...post} />
          ))}
        </div>
        <div className="mx-auto mt-8 max-w-7xl px-6">
          <Link href="/" passHref>
            <a>&lt;- {t(`back-to-home`)}</a>
          </Link>
        </div>
      </Container>
      <Footer />
    </>
  )
}

Home: NextPage<cache> = () => {
  const { t } = useTranslation(`contact`)
  return (
    <>
      <SEO title={t(`page-title`)} />
      <Nav />
      <Container
        id="content"
        className="z-20 mx-auto max-w-7xl overflow-hidden pt-8 text-center lg:relative lg:pt-20"
      >
        <div className=" flex justify-center">
          <h1
            style={{
              paddingLeft: `0.2em`,
              marginLeft: `-0.2em`,
              paddingBottom: `0.2em`,
              marginBottom: `-0.2em`,
            }}
            className="gradient-primary max-w-2xl bg-clip-text text-4xl font-bold text-transparent xxs:text-5xl lg:text-7xl"
          >
            {t(`title`)}
          </h1>
        </div>

        <p className="mx-auto mt-8 max-w-md text-lg lg:mt-16">
          {t(`hero-p-1`)} {` `}
          <span className="font-bold">{t(`hero-p-2`, { members: 89 })}</span>
          {` `}
          {t(`hero-p-3`)}
        </p>
        <div className="mx-auto mt-10 flex  flex-wrap justify-center gap-8 p-4 ">
          <div className="flex h-96 w-full max-w-[16rem] flex-col justify-between rounded-xl border p-8 px-10 text-center shadow dark:border-neutral-700">
            <div className="item-center dark:border-none-neutral-700 mx-auto flex h-24 w-24 items-center justify-center rounded-xl border bg-[#2732cc] dark:border dark:border-none ">
              <SiDiscord size={48} color="white" className=" " />
            </div>
            <h3 className=" mt-4 text-xl font-bold">Discord</h3>
            <p className="mx-auto mt-2 mb-10 max-w-[16rem] text-center text-sm">
              {t(`discord-p`)}
            </p>
            <a
              className="button-small w-full"
              href="https://go.vignetteapp.org/discord"
            >
              {t(`join-button`)}
            </a>
          </div>

          <div className="flex h-96 w-[16rem] flex-col justify-between rounded-xl border p-8 px-10 text-center shadow dark:border-neutral-700">
            <div>
              <div className=" item-center mx-auto flex h-24 w-24 items-center justify-center rounded-xl border bg-white dark:border-none dark:border-neutral-700">
                <SiGithub size={48} color="black" className=" " />
              </div>
              <h3 className=" mt-4 text-xl font-bold">GitHub</h3>
              <p className="mx-auto mt-2  mb-10 max-w-[10rem] text-center text-sm">
                {t(`github-p`)}
              </p>
            </div>
            <a
              className="button-small w-full"
              href="https://github.com/vignetteapp"
            >
              {t(`visit-button`)}
            </a>
          </div>

          <div className="flex h-96 w-[16rem] flex-col justify-between rounded-xl border p-8 px-10 text-center shadow dark:border-neutral-700">
            <div>
              <div className="item-center mx-auto flex h-24 w-24 items-center justify-center rounded-xl border bg-white dark:border-none dark:border-neutral-700">
                <SiTwitter size={48} className="fill-[#59adff] " />
              </div>
              <h3 className=" mt-4 text-xl font-bold">Twitter</h3>
              <p className="mx-auto mt-2 max-w-[10rem] text-center text-sm">
                {t(`twitter-p`)}
              </p>
            </div>
            <a
              className="button-small w-full"
              href="https://twitter.com/vignette_org"
            >
              {t(`visit-button`)}
            </a>
          </div>

          <div className="flex h-96 w-[16rem] flex-col justify-between rounded-xl border p-8 px-10 text-center shadow dark:border-neutral-700">
            <div>
              <div className="item-center mx-auto flex h-24 w-24 items-center justify-center rounded-xl border bg-pinkRed dark:border-none dark:border-neutral-700">
                <Image src={envelope} width={48} height={48} alt="" />
              </div>
              <h3 className=" mt-4 text-xl font-bold">{t(`anything-else`)}</h3>
              <p className="mx-auto mt-2 max-w-[18rem] text-center text-sm">
                {t(`email-p`)}
              </p>
            </div>
            <a
              className="button-small w-full"
              href="mailto:[email protected]"
            >
              {t(`email-us-button`)}
            </a>
          </div>
        </div>
      </Container>

      <Footer />
    </>
  )
}

Home: NextPage<cache> = ({ contributors }) => {
  const { t } = useTranslation(`home`)
  const { locale } = useRouter()
  return (
    <>
      <SEO />
      <Nav />
      <Container className="z-20 overflow-hidden pt-8 lg:relative" id="content">
        <div className="mx-auto grid-cols-1  pb-8 sm:px-2 lg:max-w-7xl lg:grid-cols-2 lg:gap-24 lg:px-4 lg:pt-32 lg:pb-72 xl:grid">
          <div className="lg:max-w-3xl">
            <h1
              style={{
                paddingLeft: `0.2em`,
                marginLeft: `-0.2em`,
                paddingBottom: `0.2em`,
                marginBottom: `-0.2em`,
              }}
              className={
                `gradient-primary bg-clip-text text-4xl font-bold text-transparent ` +
                ([`en`, `ko`, `fil`, `de`].includes(locale as string)
                  ? `xxs:text-6xl lg:text-8xl   `
                  : `xxs:text-5xl lg:text-7xl `)
              }
            >
              {t(`title1`)}
              <br /> {t(`title2`)}
            </h1>
            <p className="my-4 mb-8 max-w-[22rem]  xxs:text-xl lg:mb-16 lg:max-w-[30rem] lg:text-2xl">
              {t(`hero-p`)}
            </p>

            <a
              href="https://go.vignetteapp.org/discord"
              className="button inline-block sm:hidden"
            >
              {t(`join-discord-short`)}
            </a>
            <a
              href="https://go.vignetteapp.org/discord"
              className="button hidden sm:inline-block"
            >
              {t(`join-discord-long`)}
            </a>
          </div>
        </div>
        <MenuComp />
      </Container>
      <Container
        offset={10}
        fadeIn
        id="design"
        className="mx-auto mt-20 max-w-6xl px-4 pt-16 lg:mt-28"
      >
        <div className="flex flex-wrap justify-between ">
          <Container noMargin>
            <div className="flex items-center">
              <Image src={sparkle} width={64} height={64} alt="" />
              <h2 className="ml-2 max-w-[14rem] text-2xl font-bold xxs:text-3xl">
                {t(`design-title-line1`)}
                <br /> {t(`design-title-line2`)}
              </h2>
            </div>
            <p className="max-w-sm py-8 xxs:text-lg lg:max-w-sm">
              {t(`design-p`)}
            </p>
          </Container>
          <Container noMargin offset={10}>
            <Image
              src={section1comp}
              alt=""
              width={544}
              height={270.5}
              quality={90}
            />
          </Container>
        </div>
      </Container>
      <Container fadeIn noMargin offset={10}>
        <Container
          id="plugins"
          className="mt-20 max-w-6xl px-4 pt-16 text-center lg:mt-28"
        >
          <Image src={puzzle} quality={95} alt="" width={60} height={60} />

          <h2 className="text-2xl font-bold xxs:text-3xl">
            {t(`plugins-title`)}
          </h2>
          <p className="mx-auto max-w-[34rem] pt-4 pb-8 xxs:text-lg lg:pb-12">
            {t(`plugins-p`)}
          </p>
          <Link href="/plugins" passHref>
            <a className="button"> {t(`explore-plugins-button`)}</a>
          </Link>
        </Container>
        <Container noMargin offset={10} className=" pt-16">
          <Marquee speed={50} gradientWidth={0}>
            {extensions.map((ext, index) => (
              <ExtensionCard key={index} name={ext.name} />
            ))}
          </Marquee>
          <Marquee speed={40} delay={0.3} className="pb-8" gradientWidth={0}>
            {extensions.map((ext, index) => (
              <ExtensionCard key={index} name={ext.name} />
            ))}
          </Marquee>
        </Container>
      </Container>

      <Container
        fadeIn
        offset={10}
        id="transparency"
        className="mt-20 max-w-5xl  gap-8 pt-16 lg:mt-28 "
      >
        <div className="mx-auto mt-auto mb-6 text-center lg:mb-8">
          <Image quality={95} src={shipwheel} alt="" width={60} height={60} />
          <h2 className="text-3xl font-bold xxs:text-3xl">
            {t(`transparency-title-line1`)}
            <br /> {t(`transparency-title-line2`)}
          </h2>
          <p className="mx-auto max-w-[22rem] pb-8 pt-4 xxs:text-lg">
            {t(`transparency-p`)}
          </p>
          <div className="mx-auto mb-8 flex flex-wrap justify-center gap-4 sm:max-w-7xl sm:gap-8">
            {contributors.map((c) => (
              <div
                key={c.login}
                className="relative h-11 w-11  lg:h-16 lg:w-16"
              >
                <Image
                  src={c.profile}
                  layout="fill"
                  className="rounded-full"
                  alt=""
                />
              </div>
            ))}
          </div>
          <Link href="/about" passHref>
            <a className="button">{t(`about-button`)}</a>
          </Link>
        </div>
      </Container>
      <Container offset={10} fadeIn>
        <Partners />
      </Container>

      <Footer />
    </>
  )
}