diff --git a/public/favicon.ico b/public/favicon.ico index 51188c9..09cedbc 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/src/app/(app)/layout.tsx b/src/app/(app)/layout.tsx index 03cab3e..bb721b3 100644 --- a/src/app/(app)/layout.tsx +++ b/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'; diff --git a/src/components/heading/SectionTitle.tsx b/src/components/heading/SectionTitle.tsx new file mode 100644 index 0000000..118acf3 --- /dev/null +++ b/src/components/heading/SectionTitle.tsx @@ -0,0 +1,11 @@ +import { ReactNode } from 'react'; + +const SectionTitle = ({ children }: { children: ReactNode }) => { + return ( +

+ {children} +

+ ); +}; + +export default SectionTitle; diff --git a/src/components/home/Hero.tsx b/src/components/home/Hero.tsx index fea39e8..5562f21 100644 --- a/src/components/home/Hero.tsx +++ b/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 ( -
+
-

+

The Frontpage of Teams Knowledge

{"Save and share your team's curation"}

-
+
{isConnected ? ( )} + + +
diff --git a/src/components/home/HomeDigests.tsx b/src/components/home/HomeDigests.tsx index 416fd50..14bd73c 100644 --- a/src/components/home/HomeDigests.tsx +++ b/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 ( -
-

- Community digests -

+
{digests.map((digest) => ( @@ -23,7 +25,7 @@ const HomeDigests = async () => { ))}
-
+
); }; diff --git a/src/components/home/HomeFeatures.tsx b/src/components/home/HomeFeatures.tsx new file mode 100644 index 0000000..accc766 --- /dev/null +++ b/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 ( +
+
+ + {({ selectedIndex }) => ( + <> +
+ + {features.map((feature, featureIndex) => ( +
+

+ + + {feature.title} + +

+ +
+ ))} + +
+ + {features.map((feature) => ( + +
+
+

+ {feature.description} +

+
+
+ +
+ + ))} + + + )} + +
+
+ ); +} diff --git a/src/components/home/HomeFooter.tsx b/src/components/home/HomeFooter.tsx index 5d3aa01..3ef4de1 100644 --- a/src/components/home/HomeFooter.tsx +++ b/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 ( -
- {children} -
- ); -}; +import { PropsWithChildren, memo } from 'react'; +import Logo from '../layout/Logo'; const ListSection = ({ title, children, }: PropsWithChildren & { title: string }) => { return ( -
+

{title}

@@ -30,37 +22,42 @@ const HomeFooter = () => { const currentYear = new Date().getFullYear(); return ( -
-
- +
+
+
- + Premier Octet © {currentYear}
- - - {mainNavigation.map((item) => ( -
  • - {item.label} +
    • +
    + + {mainNavigation.map((item) => ( +
  • + {item.label} +
    • + ))} +     + +
  • + + Twitter +
    • - ))} -     - -
  • - - Twitter - -
    • -
  • - - GitHub - -
    • -     +
  • + + GitHub + +
    • + +
    ); diff --git a/src/components/home/HomeSteps.tsx b/src/components/home/HomeSteps.tsx index 1d595ab..317eb00 100644 --- a/src/components/home/HomeSteps.tsx +++ b/src/components/home/HomeSteps.tsx @@ -1,5 +1,6 @@ -import React from 'react'; import Image from 'next/image'; +import React from 'react'; +import Section from './Section'; type StepProps = { title: string; @@ -12,11 +13,11 @@ const Step = ({ title, img, description }: StepProps) => ( -
    +
    {title} @@ -27,35 +28,35 @@ const Step = ({ title, img, description }: StepProps) => ( const HomeSteps = () => { return ( -
    -

    - {'Create or join your team’s feed.'} - {'Share the good stuff with others.'} -

    +
    -
    +
    ); }; diff --git a/src/components/home/Section.tsx b/src/components/home/Section.tsx new file mode 100644 index 0000000..d9a722d --- /dev/null +++ b/src/components/home/Section.tsx @@ -0,0 +1,36 @@ +import clsx from 'clsx'; +import { ReactNode } from 'react'; +import SectionTitle from '../heading/SectionTitle'; + +const Section = ({ + children, + title, + caption, + className, +}: { + children: ReactNode; + title: ReactNode; + caption?: ReactNode; + className?: string; +}) => { + return ( +
    +
    + {title} + {Boolean(caption) && ( +

    + {caption} +

    + )} +
    + {children} +
    + ); +}; + +export default Section; diff --git a/src/components/layout/BrandIcon.tsx b/src/components/layout/BrandIcon.tsx new file mode 100644 index 0000000..db3d2cc --- /dev/null +++ b/src/components/layout/BrandIcon.tsx @@ -0,0 +1,19 @@ +import { SVGProps } from 'react'; + +const BrandIcon = (props: SVGProps) => ( + + + +); + +export default BrandIcon; diff --git a/src/components/layout/Logo.tsx b/src/components/layout/Logo.tsx index 2531b82..4573ce4 100644 --- a/src/components/layout/Logo.tsx +++ b/src/components/layout/Logo.tsx @@ -1,15 +1,13 @@ 'use client'; import clsx from 'clsx'; +import BrandIcon from './BrandIcon'; -const Logo = (props: { className?: string }) => { +const Logo = (props: { className?: string; isWhite?: boolean }) => { return ( -
    -
    +
    + digest.club diff --git a/src/components/pages/Homepage.tsx b/src/components/pages/Homepage.tsx index 163aac1..da77f1b 100644 --- a/src/components/pages/Homepage.tsx +++ b/src/components/pages/Homepage.tsx @@ -1,8 +1,9 @@ import Hero from '@/components/home/Hero'; -import HomeFooter from '../home/HomeFooter'; -import HomeSteps from '../home/HomeSteps'; import { Session } from 'next-auth'; import HomeDigests from '../home/HomeDigests'; +import HomeFeatures from '../home/HomeFeatures'; +import HomeFooter from '../home/HomeFooter'; +import HomeSteps from '../home/HomeSteps'; const Homepage = ({ user }: { user?: Session['user'] }) => { return ( @@ -14,6 +15,9 @@ const Homepage = ({ user }: { user?: Session['user'] }) => {
    + +
    +
    diff --git a/src/images/screenshots/builder.png b/src/images/screenshots/builder.png new file mode 100644 index 0000000..3077a5d Binary files /dev/null and b/src/images/screenshots/builder.png differ diff --git a/src/images/screenshots/digest.png b/src/images/screenshots/digest.png new file mode 100644 index 0000000..39d6582 Binary files /dev/null and b/src/images/screenshots/digest.png differ diff --git a/src/images/screenshots/discover.png b/src/images/screenshots/discover.png new file mode 100644 index 0000000..adeef67 Binary files /dev/null and b/src/images/screenshots/discover.png differ diff --git a/src/images/screenshots/list.png b/src/images/screenshots/list.png new file mode 100644 index 0000000..07dc12f Binary files /dev/null and b/src/images/screenshots/list.png differ