feat: improve logo

src/app/(app)/layout.tsx

@@ -1,11 +1,11 @@
 import Header from '@/components/layout/Header';
-import { getSession } from '@/lib/sessions';
 import { getEnvHost } from '@/lib/server';
-import { Metadata } from 'next';
+import { getSession } from '@/lib/sessions';
+import { getUserTeams } from '@/services/database/team';
 import '@/theme/app.css';
 import '@/theme/globals.css';
+import { Metadata } from 'next';
 import Providers from './providers';
-import { getUserTeams } from '@/services/database/team';
 
 export const dynamic = 'force-dynamic';
 

src/components/heading/SectionTitle.tsx

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+
+const SectionTitle = ({ children }: { children: ReactNode }) => {
+  return (
+    <h2 className="font-bold text-3xl lg:text-4xl text-center flex flex-col max-w-2xl">
+      {children}
+    </h2>
+  );
+};
+
+export default SectionTitle;

src/components/home/Hero.tsx

@@ -1,20 +1,19 @@
 import { routes } from '@/core/constants';
-import { getCurrentUser } from '@/lib/sessions';
 import Image from 'next/image';
 import Link from 'next/link';
 import Button from '../Button';
 
 export default function Hero({ isConnected }: { isConnected: boolean }) {
   return (
-    <div className=" p-4 m-auto max-w-5xl pt-10 pb-20 text-gray-900 w-full h-full flex max-lg:flex-col">
+    <div className="p-4 m-auto max-w-5xl pt-20 pb-20 text-gray-900 w-full h-full flex max-lg:flex-col">
       <section className="flex justify-center lg:text-start text-center flex-col flex-1 h-full">
-        <h1 className=" leading-[1.1] text-4xl xl:text-6xl font-black ">
+        <h1 className="text-4xl xl:text-5xl font-black leading-normal">
           The Frontpage of Teams Knowledge
         </h1>
         <h2 className="mt-4 text-2xl font-[300]">
           {"Save and share your team's curation"}
         </h2>
-        <div className="pt-10 justify-center lg:justify-start flex">
+        <div className="pt-10 justify-center lg:justify-start flex gap-4">
           {isConnected ? (
             <Link href="/teams">
               <Button type="button" size="lg">
@@ -24,10 +23,15 @@ export default function Hero({ isConnected }: { isConnected: boolean }) {
           ) : (
             <Link href={routes.LOGIN}>
               <Button type="button" size="lg">
-                Get Started
+                Create Team
               </Button>
             </Link>
           )}
+          <Link href={routes.DISCOVER}>
+            <Button type="button" size="lg" variant="outline">
+              Browse Digests
+            </Button>
+          </Link>
         </div>
       </section>
       <section className="flex-1 flex justify-center lg:justify-end max-lg:mt-12">

src/components/home/HomeDigests.tsx

@@ -1,5 +1,6 @@
 import { getDiscoverDigests } from '@/services/database/digest';
 import PublicDigestCard from '../teams/PublicDigestCard';
+import Section from './Section';
 
 const HomeDigests = async () => {
   const { digests } = await getDiscoverDigests({
@@ -8,10 +9,11 @@ const HomeDigests = async () => {
   });
 
   return (
-    <div className="p-4 m-auto max-w-5xl pt-10 pb-20 text-gray-900 w-full h-full flex flex-col items-center">
-      <h2 className="pb-12 font-[800] text-2xl lg:text-3xl text-center flex flex-col ">
-        <span>Community digests</span>
-      </h2>
+    <Section
+      title="Community Digests"
+      caption="Explore digests from other teams to dig up relevant content."
+      className="max-w-5xl"
+    >
       <div className="flex max-lg:flex-col lg:space-x-10 max-lg:space-y-12">
         <div className="gap-3 grid md:grid-cols-3 xs:grid-cols-2">
           {digests.map((digest) => (
@@ -23,7 +25,7 @@ const HomeDigests = async () => {
           ))}
         </div>
       </div>
-    </div>
+    </Section>
   );
 };
 

src/components/home/HomeFeatures.tsx

@@ -0,0 +1,140 @@
+'use client';
+
+import { Tab } from '@headlessui/react';
+import clsx from 'clsx';
+import Image from 'next/image';
+import { useEffect, useState } from 'react';
+
+import screenshotBuilder from '@/images/screenshots/builder.png';
+import screenshotDigest from '@/images/screenshots/digest.png';
+import screenshotDiscover from '@/images/screenshots/discover.png';
+import screenshotList from '@/images/screenshots/list.png';
+import Section from './Section';
+
+const features = [
+  {
+    title: 'Collect Links',
+    description: `Gather your team's links in one place with our webapp or through the seamless Slack integration.`,
+    image: screenshotList,
+  },
+  {
+    title: 'Build your Digest',
+    description:
+      'Craft customized digests by selecting top links and enhance them with markdown content and AI summarization.',
+    image: screenshotBuilder,
+  },
+  {
+    title: 'Share it',
+    description:
+      'Share your digests using the public link or through the in-app newsletter feature.',
+    image: screenshotDigest,
+  },
+  {
+    title: 'Discover Digests',
+    description: 'Explore digests from other teams to dig up relevant content.',
+    image: screenshotDiscover,
+  },
+];
+
+export default function PrimaryFeatures() {
+  let [tabOrientation, setTabOrientation] = useState<'horizontal' | 'vertical'>(
+    'horizontal'
+  );
+
+  useEffect(() => {
+    let lgMediaQuery = window.matchMedia('(min-width: 1024px)');
+
+    function onMediaQueryChange({ matches }: { matches: boolean }) {
+      setTabOrientation(matches ? 'vertical' : 'horizontal');
+    }
+
+    onMediaQueryChange(lgMediaQuery);
+    lgMediaQuery.addEventListener('change', onMediaQueryChange);
+
+    return () => {
+      lgMediaQuery.removeEventListener('change', onMediaQueryChange);
+    };
+  }, []);
+
+  return (
+    <Section
+      title="The Digest.club Features"
+      caption="Discover the features that make Digest.club the best tool for your team."
+      className="relative overflow-hidden py-24 sm:py-26 w-full"
+    >
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <Tab.Group
+          as="div"
+          className="grid grid-cols-1 items-center gap-y-2 pt-10 sm:gap-y-6 lg:grid-cols-12 lg:pt-0"
+          vertical={tabOrientation === 'vertical'}
+        >
+          {({ selectedIndex }) => (
+            <>
+              <div className="-mx-4 flex overflow-x-auto pb-4 sm:mx-0 sm:overflow-visible sm:pb-0 lg:col-span-5">
+                <Tab.List className="relative z-10 flex gap-x-4 whitespace-nowrap px-4 sm:mx-auto sm:px-0 lg:mx-0 lg:block lg:gap-x-0 lg:gap-y-1 lg:whitespace-normal">
+                  {features.map((feature, featureIndex) => (
+                    <div
+                      key={feature.title}
+                      className={clsx(
+                        'group relative rounded-full px-4 py-1 lg:rounded-l-xl lg:rounded-r-none lg:p-6',
+                        selectedIndex === featureIndex
+                          ? 'bg-red bg-purple-400/10 ring-1 lg:ring-inset ring-purple-800/10'
+                          : 'hover:bg-purple-400/10 lg:hover:bg-purple-400/5'
+                      )}
+                    >
+                      <h3>
+                        <Tab
+                          className={clsx(
+                            'font-display text-lg outline-none font-semibold lg:font-bold',
+                            selectedIndex === featureIndex
+                              ? 'text-black lg:text-black'
+                              : 'text-black hover:text-black lg:text-black'
+                          )}
+                        >
+                          <span className="absolute inset-0 rounded-full lg:rounded-l-xl lg:rounded-r-none" />
+                          {feature.title}
+                        </Tab>
+                      </h3>
+                      <p
+                        className={clsx(
+                          'mt-2 hidden text-sm lg:block',
+                          selectedIndex === featureIndex
+                            ? 'text-black'
+                            : 'text-slate-700 group-hover:text-black'
+                        )}
+                      >
+                        {feature.description}
+                      </p>
+                    </div>
+                  ))}
+                </Tab.List>
+              </div>
+              <Tab.Panels className="lg:col-span-7">
+                {features.map((feature) => (
+                  <Tab.Panel key={feature.title} unmount={false}>
+                    <div className="relative sm:px-6 lg:hidden">
+                      <div className="absolute -inset-x-4 bottom-[-4.25rem] top-[-6.5rem] bg-white/10 ring-1 ring-inset ring-white/10 sm:inset-x-0 sm:rounded-t-xl" />
+                      <p className="relative mx-auto max-w-2xl text-base text-slate-700 text-center">
+                        {feature.description}
+                      </p>
+                    </div>
+                    <div className="mt-10 w-[45rem] overflow-hidden rounded-xl bg-slate-50 shadow-xl shadow-blue-900/20 sm:w-auto lg:mt-0 lg:w-[67.8125rem]">
+                      <Image
+                        quality={100}
+                        className="w-full"
+                        src={feature.image}
+                        alt=""
+                        priority
+                        sizes="(min-width: 1024px) 67.8125rem, (min-width: 640px) 100vw, 45rem"
+                      />
+                    </div>
+                  </Tab.Panel>
+                ))}
+              </Tab.Panels>
+            </>
+          )}
+        </Tab.Group>
+      </div>
+    </Section>
+  );
+}

src/components/home/HomeFooter.tsx

@@ -1,22 +1,14 @@
-import { mainNavigation, routes } from '@/core/constants';
-import { memo, PropsWithChildren } from 'react';
-import Logo from '../layout/Logo';
+import { mainNavigation } from '@/core/constants';
 import Link from 'next/link';
-
-const MainSection = ({ children }: PropsWithChildren) => {
-  return (
-    <section className="xs:max-lg:row-span-2 lg:col-span-2 place-content-center">
-      {children}
-    </section>
-  );
-};
+import { PropsWithChildren, memo } from 'react';
+import Logo from '../layout/Logo';
 
 const ListSection = ({
   title,
   children,
 }: PropsWithChildren & { title: string }) => {
   return (
-    <section className="place-self-start lg:place-self-end flex h-full">
+    <section className="flex h-full flex-1 sm:flex-initial">
       <div className="py-6 xs:py-0">
         <h2 className="font-bold text-lg">{title}</h2>
         <div className="bg-white w-10 h-0.5 mb-3" />
@@ -30,37 +22,42 @@ const HomeFooter = () => {
   const currentYear = new Date().getFullYear();
 
   return (
-    <div className="bg-gray-900 py-12 text-white">
-      <div className="max-w-5xl m-auto px-4 grid xs:grid-cols-2 lg:grid-cols-4 w-full gap-4">
-        <MainSection>
+    <div className="bg-black py-12 text-white px-8 lg:px-4">
+      <div className="max-w-5xl flex flex-col m-auto xs:flex-row">
+        <section className="flex-1">
           <div className="flex flex-col">
-            <Logo className="text-white" />
+            <Logo className="text-white" isWhite />
             <Link href="https://www.premieroctet.com/" target="_blank">
               <span className="text-sm mt-2">
                 Premier Octet © {currentYear}
               </span>
             </Link>
           </div>
-        </MainSection>
-        <ListSection title="Navigation">
-          {mainNavigation.map((item) => (
-            <li key={item.route}>
-              <Link href={item.route}>{item.label}</Link>
+        </section>
+        <div className="flex flex-row gap-8 flex-1 justify-start xs:justify-end">
+          <ListSection title="Navigation">
+            {mainNavigation.map((item) => (
+              <li key={item.route}>
+                <Link href={item.route}>{item.label}</Link>
+              </li>
+            ))}
+          </ListSection>
+          <ListSection title="Social">
+            <li>
+              <Link href="https://twitter.com/DigestClub" target="_blank">
+                Twitter
+              </Link>
             </li>
-          ))}
-        </ListSection>
-        <ListSection title="Social">
-          <li>
-            <Link href="https://twitter.com/DigestClub" target="_blank">
-              Twitter
-            </Link>
-          </li>
-          <li>
-            <Link href="https://github.com/premieroctet/digestclub" target="_blank">
-              GitHub
-            </Link>
-          </li>
-        </ListSection>
+            <li>
+              <Link
+                href="https://github.com/premieroctet/digestclub"
+                target="_blank"
+              >
+                GitHub
+              </Link>
+            </li>
+          </ListSection>
+        </div>
       </div>
     </div>
   );