feat: ✨ add feature toggles to homepage

- Add take-away and delivery options
- Update responsive styling

src/app/(frontend)/[locale]/about/page.tsx

@@ -1,10 +1,10 @@
-import { Cigarette, PawPrint } from "lucide-react";
-import { Container, HStack, Stack } from "@styled-system/jsx";
+import { Cigarette, DoorOpen, PawPrint, Truck } from "lucide-react";
+import { Container, Stack } from "@styled-system/jsx";
 
+import FeatureToggle from "@/components/general/feature-toggle";
 import { Metadata } from "next";
 import { Params } from "../shared";
 import RichText from "@/components/rich-text";
-import { Text } from "@/components/ui/text";
 import { getAbout } from "@/api";
 import { getI18n } from "@/i18n/server";
 
@@ -17,18 +17,14 @@ export default async function About({ params: { locale } }: { params: Params })
       <Stack gap={10}>
         <RichText content={about.text!} />
         <Stack>
-          {about.dogsAllowed && (
-            <HStack alignItems="center">
-              <PawPrint />
-              <Text>{t("about.dogsAllowed")}</Text>
-            </HStack>
-          )}
-          {about.fumoire && (
-            <HStack alignItems="center">
-              <Cigarette />
-              <Text>{t("about.fumoire")}</Text>
-            </HStack>
-          )}
+          <FeatureToggle
+            icon={PawPrint}
+            feature={about.dogsAllowed}
+            label={t("about.dogsAllowed")}
+          />
+          <FeatureToggle icon={Cigarette} feature={about.fumoire} label={t("about.fumoire")} />
+          <FeatureToggle icon={Truck} feature={about.delivery} label={t("about.delivery")} />
+          <FeatureToggle icon={DoorOpen} feature={about.takeAway} label={t("about.takeAway")} />
         </Stack>
       </Stack>
     </Container>

src/app/(frontend)/[locale]/contact/page.tsx

@@ -59,14 +59,15 @@ export default async function Contact({
             <Heading as="h3" size="xl">
               {t("general.address")}
             </Heading>
-            <HStack gap={12} alignItems="start">
+            <HStack gap={12} alignItems="start" flexWrap="wrap">
               <Address locale={locale} />
               <ContactMethods locale={locale} />
             </HStack>
             {contact.address.embeddedMaps && (
               <styled.div
                 dangerouslySetInnerHTML={{ __html: contact.address.embeddedMaps }}
-                width={600}
+                maxW={600}
+                width="100%"
               />
             )}
           </Stack>

src/app/(frontend)/[locale]/page.tsx

@@ -1,5 +1,5 @@
-import { Box, Container, Stack, styled } from "@styled-system/jsx";
-import { Info, Palmtree, PartyPopper } from "lucide-react";
+import { Box, Container, HStack, Stack } from "@styled-system/jsx";
+import { Cigarette, DoorOpen, Info, Palmtree, PartyPopper, PawPrint, Truck } from "lucide-react";
 import {
   getAbout,
   getCurrentAnnouncements,
@@ -9,6 +9,7 @@ import {
 } from "@/api";
 
 import { Alert } from "@/components/ui/alert";
+import FeatureToggle from "@/components/general/feature-toggle";
 import Gallery from "./gallery";
 import { Heading } from "@/components/ui/heading";
 import Image from "next/image";
@@ -45,14 +46,10 @@ export default async function Home({ params: { locale } }: { params: Params }) {
           maxH="80%"
           align="center"
           px={30}
-          gap={24}
+          gap={20}
           color="white"
         >
-          <Stack
-            maxW={550}
-            width="100%"
-            className={scrollable({ hideScrollbar: false, px: 2 })}
-          >
+          <Stack maxW={550} width="100%" className={scrollable({ hideScrollbar: false, px: 2 })}>
             {announcements.docs.length > 0 && (
               <Heading size="xl" color="white">
                 {t("general.announcements")}
@@ -96,6 +93,16 @@ export default async function Home({ params: { locale } }: { params: Params }) {
           <Text color="white" maxW={550} width="100%" textAlign="center" fontSize={36}>
             {home.tagline}
           </Text>
+          <HStack justify="center" flexWrap="wrap">
+            <FeatureToggle
+              icon={PawPrint}
+              feature={about.dogsAllowed}
+              label={t("about.dogsAllowed")}
+            />
+            <FeatureToggle icon={Cigarette} feature={about.fumoire} label={t("about.fumoire")} />
+            <FeatureToggle icon={Truck} feature={about.delivery} label={t("about.delivery")} />
+            <FeatureToggle icon={DoorOpen} feature={about.takeAway} label={t("about.takeAway")} />
+          </HStack>
         </Stack>
       </Box>
       <Container>

src/components/general/address.tsx

@@ -1,15 +1,15 @@
+import { Box, BoxProps } from "@styled-system/jsx";
 import { getAbout, getContact } from "@/api";
 
-import { Box } from "@styled-system/jsx";
 import { Locale } from "@/i18n/settings";
 import { Text } from "@/components/ui/text";
 
-export default async function Address({ locale }: { locale: Locale }) {
+export default async function Address({ locale, ...props }: { locale: Locale } & BoxProps) {
   const about = await getAbout({ locale });
   const contact = await getContact({ locale });
 
   return (
-    <Box>
+    <Box {...props}>
       <Text fontWeight="bold">{about.name}</Text>
       <Text>
         {contact.address.street} {contact.address.number}

src/components/general/contact-methods.tsx

@@ -1,16 +1,17 @@
-import { Grid } from "@styled-system/jsx";
+import { Grid, GridProps } from "@styled-system/jsx";
+
 import { Link } from "@/components/ui/link";
 import { Locale } from "@/i18n/settings";
 import { Text } from "@/components/ui/text";
 import { getContact } from "@/api";
 import { getI18n } from "@/i18n/server";
 
-export default async function ContactMethods({ locale }: { locale: Locale }) {
+export default async function ContactMethods({ locale, ...props }: { locale: Locale } & GridProps) {
   const t = await getI18n();
   const contact = await getContact({ locale });
 
   return (
-    <Grid gridTemplateColumns="min-content 1fr" columnGap={2} rowGap={0.5}>
+    <Grid gridTemplateColumns="min-content 1fr" columnGap={2} rowGap={0.5} {...props}>
       {contact.phone && (
         <>
           <Text fontWeight="bold">{t("general.phoneNumber")}</Text>

src/components/general/feature-toggle.tsx

@@ -0,0 +1,20 @@
+import { HStack } from "@styled-system/jsx";
+import React from "react";
+import { Text } from "@/components/ui/text";
+
+type FeatureToggleProps = {
+  feature: boolean;
+  icon: React.ComponentType;
+  label: string;
+};
+
+export default function FeatureToggle({ feature, icon: Icon, label }: FeatureToggleProps) {
+  return (
+    feature && (
+      <HStack alignItems="center">
+        <Icon />
+        <Text>{label}</Text>
+      </HStack>
+    )
+  );
+}

src/components/layout/footer.tsx

@@ -18,9 +18,15 @@ export default async function Footer({ locale }: { locale: Locale }) {
 
   return (
     <styled.footer minH={60} p={8} className={stack({ gap: 4, justify: "end" })}>
-      <HStack justify="space-between" alignItems="start" flexWrap="wrap">
-        <Address locale={locale} />
-        <HStack>
+      <Stack
+        css={{
+          flexDir: "column",
+          alignItems: "center",
+          sm: { flexDir: "row", alignItems: "start" },
+        }}
+      >
+        <Address locale={locale} flex={1} />
+        <HStack flex={1} justify="center">
           {(contact.socialLinks ?? []).map((sl) => (
             <IconButton key={sl.id} asChild variant="link">
               <a href={sl.link}>
@@ -29,8 +35,10 @@ export default async function Footer({ locale }: { locale: Locale }) {
             </IconButton>
           ))}
         </HStack>
+        <HStack flex={1} justify="end">
           <ContactMethods locale={locale} />
         </HStack>
+      </Stack>
       <Stack alignSelf="center" gap={1}>
         <Heading size="lg">{t("general.openingTimes")}</Heading>
         <OpeningTimes locale={locale} />

src/globals/About.ts

@@ -31,5 +31,15 @@ export const About: GlobalConfig = {
       type: "checkbox",
       required: true,
     },
+    {
+      name: "delivery",
+      type: "checkbox",
+      required: true,
+    },
+    {
+      name: "takeAway",
+      type: "checkbox",
+      required: true,
+    },
   ],
 };

src/i18n/de.ts

@@ -31,6 +31,8 @@ export default {
   about: {
     dogsAllowed: "Hunde erlaubt",
     fumoire: "Fumoire verfügbar",
+    takeAway: "Take-away",
+    delivery: "Lieferung",
   },
   contact: {
     name: "Name",

src/payload-types.ts

@@ -349,6 +349,8 @@ export interface About {
   } | null;
   dogsAllowed: boolean;
   fumoire: boolean;
+  delivery: boolean;
+  takeAway: boolean;
   updatedAt?: string | null;
   createdAt?: string | null;
 }