added learn more page on wait list (#65)

apps/wait-list/app/components/animated-tooltip/index.tsx

@@ -0,0 +1,91 @@
+import {useState} from 'react'
+import {
+  motion,
+  useTransform,
+  AnimatePresence,
+  useMotionValue,
+  useSpring,
+} from 'framer-motion'
+
+export const AnimatedTooltip = ({
+  items,
+}: {
+  items: {
+    id: number
+    name: string
+    designation: string
+    image: string
+  }[]
+}) => {
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
+  const springConfig = {stiffness: 100, damping: 5}
+  const x = useMotionValue(0) // going to set this value on mouse move
+  // rotate the tooltip
+  const rotate = useSpring(
+    useTransform(x, [-100, 100], [-45, 45]),
+    springConfig,
+  )
+  // translate the tooltip
+  const translateX = useSpring(
+    useTransform(x, [-100, 100], [-50, 50]),
+    springConfig,
+  )
+  const handleMouseMove = (event: any) => {
+    const halfWidth = event.target.offsetWidth / 2
+    x.set(event.nativeEvent.offsetX - halfWidth) // set the x value, which is then used in transform and rotate
+  }
+
+  return (
+    <>
+      {items.map(item => (
+        <div
+          className="-mr-4  relative group"
+          key={item.name}
+          onMouseEnter={() => setHoveredIndex(item.id)}
+          onMouseLeave={() => setHoveredIndex(null)}
+        >
+          <AnimatePresence mode="wait">
+            {hoveredIndex === item.id ? (
+              <motion.div
+                initial={{opacity: 0, y: 20, scale: 0.6}}
+                animate={{
+                  opacity: 1,
+                  y: 0,
+                  scale: 1,
+                  transition: {
+                    type: 'spring',
+                    stiffness: 260,
+                    damping: 10,
+                  },
+                }}
+                exit={{opacity: 0, y: 20, scale: 0.6}}
+                style={{
+                  translateX,
+                  rotate,
+                  whiteSpace: 'nowrap',
+                }}
+                className="absolute -top-16 -left-1/2 translate-x-1/2 flex text-xs  flex-col items-center justify-center rounded-md bg-black z-50 shadow-xl px-4 py-2"
+              >
+                <div className="absolute inset-x-10 z-30 w-[20%] -bottom-px bg-gradient-to-r from-transparent via-emerald-500 to-transparent h-px " />
+                <div className="absolute left-10 w-[40%] z-30 -bottom-px bg-gradient-to-r from-transparent via-sky-500 to-transparent h-px " />
+                <div className="font-bold text-white relative z-30 text-base">
+                  {item.name}
+                </div>
+                <div className="text-white text-xs">{item.designation}</div>
+              </motion.div>
+            ) : null}
+          </AnimatePresence>
+          <img
+            // onMouseMove={handleMouseMove}
+            onMouseMoveCapture={handleMouseMove}
+            height={100}
+            width={100}
+            src={item.image}
+            alt={item.name}
+            className="object-cover !m-0 !p-0 object-top rounded-full h-14 w-14 border-2 group-hover:scale-105 group-hover:z-30 border-white  relative transition duration-500"
+          />
+        </div>
+      ))}
+    </>
+  )
+}

apps/wait-list/app/components/layout/container.tsx

@@ -3,7 +3,7 @@ import {type ReactNode} from 'react'
 
 export const BackgroundContainer = ({children}: {children: ReactNode}) => {
   return (
-    <div className="h-[100dvh] md:h-[100vh] lg:h-[100vh] overscroll-y-none w-full  bg-white  bg-dot-black/[0.2]  relative">
+    <div className="h-[100dvh] md:h-[100vh] lg:h-[100vh] overscroll-y-auto lg:overscroll-y-none w-full  bg-white  bg-dot-black/[0.2]  relative">
       <div className="absolute pointer-events-none inset-0 flex items-center justify-center  bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)]"></div>
       {children}
     </div>

apps/wait-list/app/components/layout/header.tsx

@@ -19,7 +19,7 @@ export const Header = () => {
         </Link>
 
         <div className="flex justify-center items-center gap-x-12">
-          <Button variant="outline" isLink>
+          <Button href="/learn-more" variant="outline" isLink>
             Learn more{' '}
             <span className="pl-1" aria-hidden="true">
               &rarr;

apps/wait-list/app/modules/index.ts

@@ -1,3 +1,3 @@
 export * from './landing-page/index.tsx'
 export * from './404-page/index.tsx'
-
+export * from './learn-more/index.tsx'

apps/wait-list/app/modules/learn-more/index.tsx

@@ -0,0 +1,139 @@
+import {AnimatedTooltip} from '@/components/animated-tooltip/index.tsx'
+import {BackgroundContainer} from '@/components/layout/container.tsx'
+import {Header} from '@/components/layout/header.tsx'
+
+const faqs = [
+  {
+    id: 1,
+    question: 'What is mfoni?',
+    answer:
+      'mfoni is a photo gallery app in Ghana. It uses facial and image recognition to help users find photos from events and shows.',
+  },
+  {
+    id: 2,
+    question: 'How do I use it?',
+    answer:
+      'While mfoni is currently under development, you can stay updated by following our Twitter account for the latest news and announcements.',
+  },
+  {
+    id: 3,
+    question: 'Who is it for?',
+    answer:
+      'As an event organizer, freelance photographer, or someone who loves being in front of the camera, you can join our waitlist now!',
+  },
+
+  {
+    id: 4,
+    question: 'When will v0.1.0 launch?',
+    answer:
+      "We're aiming to launch v0.1.0 by Q1 2024, if not sooner. However, we'll keep you updated on our progress.",
+  },
+]
+
+const people = [
+  {
+    id: 1,
+    name: 'Domey',
+    designation: 'Software Engineer',
+    image:
+      'https://images.unsplash.com/photo-1599566150163-29194dcaad36?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=3387&q=80',
+  },
+  {
+    id: 2,
+    name: 'Fiifi Jr.',
+    designation: 'Software Engineer',
+    image:
+      'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8YXZhdGFyfGVufDB8fDB8fHww&auto=format&fit=crop&w=800&q=60',
+  },
+  {
+    id: 3,
+    name: 'Edward',
+    designation: 'Software Engineer',
+    image:
+      'https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8YXZhdGFyfGVufDB8fDB8fHww&auto=format&fit=crop&w=800&q=60',
+  },
+  {
+    id: 4,
+    name: 'Ronnie',
+    designation: 'Project Manager',
+    image:
+      'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fGF2YXRhcnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=800&q=60',
+  },
+  {
+    id: 5,
+    name: 'Audrey',
+    designation: 'Product Manager',
+    image:
+      'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=3540&q=80',
+  },
+  {
+    id: 6,
+    name: 'Nkay',
+    designation: 'Software Engineer',
+    image:
+      'https://images.unsplash.com/photo-1544725176-7c40e5a71c5e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=3534&q=80',
+  },
+  {
+    id: 7,
+    name: 'Noah',
+    designation: 'Software Engineer',
+    image:
+      'https://images.unsplash.com/photo-1599566150163-29194dcaad36?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=3387&q=80',
+  },
+]
+
+export const LearnMoreModule = () => {
+  return (
+    <BackgroundContainer>
+      <div className="flex flex-col justify-between items-center h-full">
+        <div className="flex flex-col justify-center items-center ">
+          <Header />
+          <div className="mx-auto max-w-6xl px-6 py-20 sm:py-24 lg:px-8">
+            <div className="mx-auto max-w-2xl text-center">
+              <h2 className="text-2xl font-bold leading-10 tracking-tight text-black">
+                Frequently asked questions
+              </h2>
+              <p className="mt-6 text-base leading-7 text-gray-600">
+                Have a different question and can’t find the answer you’re
+                looking for? Reach out to our support team by{' '}
+                <span className="font-semibold text-blue-600 hover:text-blue-500">
+                  sending us an email
+                </span>{' '}
+                and we’ll get back to you as soon as we can.
+              </p>
+            </div>
+            <div className="mt-20">
+              <dl className="space-y-16 sm:grid sm:grid-cols-2 sm:gap-x-6 sm:gap-y-16 sm:space-y-0 lg:gap-x-10">
+                {faqs.map(faq => (
+                  <div key={faq.id}>
+                    <dt className="text-base font-semibold leading-7 text-gray-900">
+                      {faq.question}
+                    </dt>
+                    <dd className="mt-2 text-base leading-7 text-gray-600">
+                      {faq.answer}
+                    </dd>
+                  </div>
+                ))}
+              </dl>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div className="mx-auto max-w-2xl px-6 text-center">
+            <h2 className="text-xl font-bold leading-10 tracking-tight text-gray-900">
+              Meet the team
+            </h2>
+            <p className="2xl:my-3 my-3 md:my-2 text-base leading-7 text-gray-600">
+              We’re a dynamic group of individuals who are passionate about what
+              we do and dedicated to delivering the best results for our
+              clients.
+            </p>
+          </div>
+          <div className="flex flex-row items-center justify-center 2xl:my-10 my-10 md:my-8 w-full">
+            <AnimatedTooltip items={people} />
+          </div>
+        </div>
+      </div>
+    </BackgroundContainer>
+  )
+}

apps/wait-list/app/routes/learn-more.ts

@@ -0,0 +1,12 @@
+import {type MetaFunction} from '@remix-run/node'
+import {LearnMoreModule} from '@/modules/index.ts'
+
+export const meta: MetaFunction = () => {
+  return [
+    {title: 'Learn more | mfoni'},
+    {name: 'description', content: 'Welcome to mfoni!'},
+    {name: 'keywords', content: 'mfoni, Mfoni'},
+  ]
+}
+
+export default LearnMoreModule