Feat/website (#42)

* added features

* fake it till you make it

* show active fissa count

* PrimaryFeatures: a bit less spacing

apps/nextjs/next.config.mjs

@@ -12,7 +12,7 @@ const config = {
   eslint: { ignoreDuringBuilds: !!process.env.CI },
   typescript: { ignoreBuildErrors: !!process.env.CI },
   images: {
-    domains: ["play.google.com", "tools.applemediaservices.com", "tools.applemediaservices.com"],
+    domains: ["play.google.com", "tools.applemediaservices.com", 'i.scdn.co', "misc.scdn.co", "image-cdn-ak.spotifycdn.com", "mosaic.scdn.co"],
   },
 };
 

apps/nextjs/package.json

@@ -18,16 +18,21 @@
     "@fissa/db": "*",
     "@fissa/tailwind-config": "*",
     "@fissa/utils": "*",
+    "@headlessui/react": "^2.1.8",
     "@tanstack/react-query": "4.36.1",
     "@trpc/client": "10.21.1",
     "@trpc/next": "10.21.1",
     "@trpc/react-query": "10.21.1",
     "@trpc/server": "10.21.1",
     "@vercel/analytics": "1.2.2",
+    "clsx": "^2.1.1",
+    "framer-motion": "^11.5.6",
+    "lucide-react": "^0.445.0",
     "next": "14.2.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-toastify": "10.0.5",
+    "use-debounce": "^10.0.3",
     "zod": "3.23.8"
   },
   "devDependencies": {

apps/nextjs/src/components/AppDemo.tsx

@@ -0,0 +1,13 @@
+import { AppScreen } from './AppScreen'
+import { TrackList } from './TrackList'
+
+
+export function AppDemo() {
+  return (
+    <AppScreen>
+      <AppScreen.Body className='space-y-4'>
+        <TrackList/>
+      </AppScreen.Body>
+    </AppScreen>
+  )
+}

apps/nextjs/src/components/AppScreen.tsx

@@ -0,0 +1,72 @@
+import clsx from 'clsx'
+import { Settings } from 'lucide-react'
+import { forwardRef } from 'react'
+import { useTheme } from '~/providers/ThemeProvider'
+
+export function AppScreen({
+  children,
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<'div'>) {
+  return (
+    <div className={clsx('flex flex-col', className)} {...props}>
+      <div className="text-white flex justify-between px-4 pt-2">
+        <h1 className='text-xl font-bold'>Fissa 1994</h1>
+        <Settings />
+      </div>
+      {children}
+    </div>
+  )
+}
+
+AppScreen.Header = forwardRef<
+  React.ElementRef<'div'>,
+  { children: React.ReactNode }
+>(function AppScreenHeader({ children }, ref) {
+  return (
+    <div ref={ref} className="mt-6 px-4 text-white">
+      {children}
+    </div>
+  )
+})
+
+AppScreen.Title = forwardRef<
+  React.ElementRef<'div'>,
+  { children: React.ReactNode }
+>(function AppScreenTitle({ children }, ref) {
+  return (
+    <div ref={ref} className="text-2xl text-white">
+      {children}
+    </div>
+  )
+})
+
+AppScreen.Subtitle = forwardRef<
+  React.ElementRef<'div'>,
+  { children: React.ReactNode }
+>(function AppScreenSubtitle({ children }, ref) {
+  return (
+    <div ref={ref} className="text-sm text-gray-500">
+      {children}
+    </div>
+  )
+})
+
+AppScreen.Body = forwardRef<
+  React.ElementRef<'div'>,
+  { className?: string; children: React.ReactNode }
+>(function AppScreenBody({ children, className }, ref) {
+  const { theme } = useTheme()
+
+  return (
+    <div
+      ref={ref}
+      className={clsx('mt-4 px-4 flex-auto', className)}
+      style={{
+        backgroundColor: theme['900']
+      }}
+    >
+      {children}
+    </div>
+  )
+})

apps/nextjs/src/components/AppStoreLink.tsx

@@ -0,0 +1,19 @@
+import Image from "next/image";
+import Link from 'next/link';
+
+export function AppStoreLink() {
+  return (
+    <Link
+      href="https://apps.apple.com/us/app/fissa-houseparty/id1632218985?itsct=apps_box_badge&itscg=30200"
+      aria-label="Download on the App Store"
+      className="flex items-center justify-center"
+    >
+      <Image
+        width={192}
+        height={108}
+        src="https://apple-resources.s3.amazonaws.com/media-badges/download-on-the-app-store/black/en-us.svg"
+        alt="Download on the App Store"
+      />
+    </Link>
+  )
+}

apps/nextjs/src/components/Button.tsx

@@ -0,0 +1,59 @@
+import clsx from 'clsx'
+import Link from 'next/link'
+
+const baseStyles = {
+  solid:
+    'inline-flex justify-center rounded-lg py-2 px-3 text-sm font-semibold outline-2 outline-offset-2 transition-colors',
+  outline:
+    'inline-flex justify-center rounded-lg border py-[calc(theme(spacing.2)-1px)] px-[calc(theme(spacing.3)-1px)] text-sm outline-2 outline-offset-2 transition-colors',
+}
+
+const variantStyles = {
+  solid: {
+    cyan: 'relative overflow-hidden bg-cyan-500 text-white before:absolute before:inset-0 active:before:bg-transparent hover:before:bg-white/10 active:bg-cyan-600 active:text-white/80 before:transition-colors',
+    white:
+      'bg-white text-cyan-900 hover:bg-white/90 active:bg-white/90 active:text-cyan-900/70',
+    gray: 'bg-gray-800 text-white hover:bg-gray-900 active:bg-gray-800 active:text-white/80',
+  },
+  outline: {
+    gray: 'border-gray-300 text-gray-700 hover:border-gray-400 active:bg-gray-100 active:text-gray-700/80',
+  },
+}
+
+type ButtonProps = (
+  | {
+      variant?: 'solid'
+      color?: keyof typeof variantStyles.solid
+    }
+  | {
+      variant: 'outline'
+      color?: keyof typeof variantStyles.outline
+    }
+) &
+  (
+    | Omit<React.ComponentPropsWithoutRef<typeof Link>, 'color'>
+    | (Omit<React.ComponentPropsWithoutRef<'button'>, 'color'> & {
+        href?: undefined
+      })
+  )
+
+export function Button({ className, ...props }: ButtonProps) {
+  props.variant ??= 'solid'
+  props.color ??= 'gray'
+
+  className = clsx(
+    baseStyles[props.variant],
+    props.variant === 'outline'
+      ? variantStyles.outline[props.color]
+      : props.variant === 'solid'
+        ? variantStyles.solid[props.color]
+        : undefined,
+    className,
+  )
+
+  return typeof props.href === 'undefined' ? (
+    <button className={className} {...props} />
+  ) : (
+    <Link className={className} {...props} />
+  )
+}

apps/nextjs/src/components/CircleBackground.tsx

@@ -0,0 +1,45 @@
+import { useId } from 'react'
+
+export function CircleBackground({
+  color,
+  ...props
+}: React.ComponentPropsWithoutRef<'svg'> & {
+  color: string
+}) {
+  const id = useId()
+
+  return (
+    <svg
+      viewBox="0 0 558 558"
+      width="558"
+      height="558"
+      fill="none"
+      aria-hidden="true"
+      {...props}
+    >
+      <defs>
+        <linearGradient
+          id={id}
+          x1="79"
+          y1="16"
+          x2="105"
+          y2="237"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor={color} />
+          <stop offset="1" stopColor={color} stopOpacity="0" />
+        </linearGradient>
+      </defs>
+      <path
+        opacity=".2"
+        d="M1 279C1 125.465 125.465 1 279 1s278 124.465 278 278-124.465 278-278 278S1 432.535 1 279Z"
+        stroke={color}
+      />
+      <path
+        d="M1 279C1 125.465 125.465 1 279 1"
+        stroke={`url(#${id})`}
+        strokeLinecap="round"
+      />
+    </svg>
+  )
+}

apps/nextjs/src/components/Container.tsx

@@ -0,0 +1,17 @@
+import clsx from 'clsx'
+import { useTheme } from '~/providers/ThemeProvider'
+
+export function Container({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<'div'>) {
+  const { theme } = useTheme()
+
+  return (
+    <div
+      className={clsx('mx-auto max-w-7xl px-4 sm:px-6 lg:px-8', className)}
+      style={{color: theme[100]}}
+      {...props}
+    />
+  )
+}

apps/nextjs/src/components/Faqs.tsx

@@ -0,0 +1,109 @@
+import { useTheme } from '~/providers/ThemeProvider'
+import { Container } from './Container'
+
+const faqs = [
+  [
+    {
+      question: 'Why shouldn\'t I host a Spotify jam istead?',
+      answer:
+        'Fissa does not require you to be on the same network to jam. Besides, Fissa allows you to vote on the next song, allowing you to skip those bad songs on top of the queue.',
+    },
+    {
+      question: 'Can I use Fissa without a Spotify account?',
+      answer:
+        'Unfortunately not. Fissa is just a tool for handling the order of songs in a playlist. Spotify is still doing all the hard work.',
+    },
+    {
+      question: 'Do I need a Spotify premium account?',
+      answer:
+        'If you would like to be the host of a Fissa, you are required to have a premium subscription. Others joining your Fissa can do so on a free account.',
+    },
+  ],
+  // [
+  //   {
+  //     question: 'Do the people giving you tips realize what they are doing?',
+  //     answer:
+  //       'Again I would argue this isn’t really our responsibility. People make their own choices. If they don’t research the consequences that’s on them, not on us.',
+  //   },
+  //   {
+  //     question: 'Where is Pocket based?',
+  //     answer:
+  //       'Let’s just say it’s not somewhere where the SEC is going to find us.',
+  //   },
+  //   {
+  //     question: 'Is there any age limit to trading on Pocket?',
+  //     answer:
+  //       'For our free plan, the age limit is based on the minimum age to trade in your country of residence. Our VIP plan uses advanced transaction anonymization though, so you can use that plan even if you’re 9 years old. Or a dog.',
+  //   },
+  // ],
+  [
+    {
+      question: 'Can Fissa also do...',
+      answer:
+        'Probably not, but we love to hear your ideas! Reach out to us for any feature request you have. We are always looking for ways to improve Fissa.',
+    },
+    {
+      question: 'How can I support Fissa?',
+      answer:
+        'Tell you friends, colleagues, grandma and her cat! Fissa is a small hobby project and we would love to see it grow.',
+    },
+    {
+      question: 'Fissa is awesome!',
+      answer:
+        'Not realy a question, but thank you. You are awesome too!',
+    },
+  ],
+]
+
+export function Faqs() {
+  const { theme } = useTheme()
+
+  return (
+    <section
+      id="faqs"
+      aria-labelledby="faqs-title"
+      className="border-t border-gray-200 py-20 sm:py-32"
+      style={{ backgroundColor: theme['100'] }}
+    >
+      <Container style={{ color: theme['900'] }}>
+        <div className="mx-auto max-w-2xl lg:mx-0">
+          <h2
+            id="faqs-title"
+            className="text-3xl font-medium tracking-tight"
+          >
+            Frequently asked questions
+          </h2>
+          <p className="mt-2 text-lg">
+            If you have anything else you want to ask,{' '}
+            <a
+              href="mailto:[email protected]"
+              className="text-gray-900 underline"
+            >
+              reach out to us
+            </a>
+            .
+          </p>
+        </div>
+        <ul
+          role="list"
+          className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-8 sm:mt-20 lg:max-w-none lg:grid-cols-3"
+        >
+          {faqs.map((column, columnIndex) => (
+            <li key={columnIndex}>
+              <ul role="list" className="space-y-10">
+                {column.map((faq, faqIndex) => (
+                  <li key={faqIndex}>
+                    <h3 className="text-lg font-semibold leading-6 text-gray-900">
+                      {faq.question}
+                    </h3>
+                    <p className="mt-4 text-sm text-gray-700">{faq.answer}</p>
+                  </li>
+                ))}
+              </ul>
+            </li>
+          ))}
+        </ul>
+      </Container>
+    </section>
+  )
+}