From 3d42d495837230066a594739d876f22f4fd1d533 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carl-Gerhard=20Lindesva=CC=88rd?= <lindesvard@gmail.com>
Date: Wed, 13 Nov 2024 23:44:48 +0100
Subject: [PATCH] fix(public): improve mobile experiance

---
 apps/public/components/github-button.tsx      |  2 +-
 apps/public/components/hero-carousel.tsx      | 22 ++++++++++++-------
 apps/public/components/hero.tsx               |  4 ++--
 apps/public/components/navbar.tsx             |  6 ++++-
 apps/public/components/sections/faq.tsx       |  4 +++-
 .../sections/features/profiles-feature.tsx    |  8 ++++---
 apps/public/components/twitter-card.tsx       |  4 ++--
 7 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/apps/public/components/github-button.tsx b/apps/public/components/github-button.tsx
index deeac979..0126af3b 100644
--- a/apps/public/components/github-button.tsx
+++ b/apps/public/components/github-button.tsx
@@ -19,7 +19,7 @@ export function GithubButton() {
   // }, []);
   return (
     <Button variant={'secondary'} asChild>
-      <Link href="https://git.new/openpanel">
+      <Link href="https://git.new/openpanel" className="hidden md:block">
         <svg
           className="w-5 h-5"
           fill="currentColor"
diff --git a/apps/public/components/hero-carousel.tsx b/apps/public/components/hero-carousel.tsx
index 6b622c98..cc7f0828 100644
--- a/apps/public/components/hero-carousel.tsx
+++ b/apps/public/components/hero-carousel.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useIsDarkMode } from '@/lib/dark-mode';
+import { cn } from '@/lib/utils';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useEffect, useState } from 'react';
 import { Button } from './ui/button';
@@ -77,12 +78,12 @@ export function HeroCarousel() {
       label: 'Retention',
       Component: () => <Image src="retention" />,
     },
-    {
-      id: 'profile',
-      key: 'profile',
-      label: 'Inspect profile',
-      Component: () => <Image src="profile" />,
-    },
+    // {
+    //   id: 'profile',
+    //   key: 'profile',
+    //   label: 'Inspect profile',
+    //   Component: () => <Image src="profile" />,
+    // },
   ];
 
   const [activeFrames, setActiveFrames] = useState<Frame[]>([frames[0]]);
@@ -90,7 +91,7 @@ export function HeroCarousel() {
 
   return (
     <div className="col gap-6 w-full">
-      <div className="row gap-4 justify-center [&>div]:font-medium mt-1">
+      <div className="flex-wrap row gap-x-4 gap-y-2 justify-center [&>div]:font-medium mt-1">
         {frames.map((frame) => (
           <div key={frame.id} className="relative">
             <Button
@@ -130,7 +131,12 @@ export function HeroCarousel() {
       </div>
       <div className="pulled animated-iframe-gradient p-px pb-0 rounded-t-xl">
         <div className="overflow-hidden rounded-xl rounded-b-none w-full bg-background">
-          <div className="relative w-full h-[750px]">
+          <div
+            className={cn(
+              'relative w-full h-[750px]',
+              activeFrame.id !== 'overview' && 'h-auto aspect-[4/3]',
+            )}
+          >
             <AnimatePresence mode="popLayout" initial={false}>
               {activeFrames.slice(-2).map((frame) => (
                 <motion.div
diff --git a/apps/public/components/hero.tsx b/apps/public/components/hero.tsx
index a09c0c34..17ed12fe 100644
--- a/apps/public/components/hero.tsx
+++ b/apps/public/components/hero.tsx
@@ -14,7 +14,7 @@ export function Hero() {
       {/* Content */}
       <div className="container relative z-10">
         <div className="max-w-2xl col gap-4 pt-28 text-center mx-auto ">
-          <h1 className="text-6xl font-bold leading-[1.1]">
+          <h1 className="text-4xl md:text-6xl font-bold leading-[1.1]">
             An open-source alternative to <span>Mixpanel</span>
           </h1>
           <p className="text-xl text-muted-foreground">
@@ -24,7 +24,7 @@ export function Hero() {
         </div>
 
         {/* CTA */}
-        <div className="row gap-4 center-center my-12">
+        <div className="col md:row gap-4 center-center my-12">
           <Button size="lg" asChild>
             <Link href="https://dashboard.openpanel.dev/register">
               Try it for free
diff --git a/apps/public/components/navbar.tsx b/apps/public/components/navbar.tsx
index 5c3f40a8..23d50664 100644
--- a/apps/public/components/navbar.tsx
+++ b/apps/public/components/navbar.tsx
@@ -84,7 +84,10 @@ const Navbar = () => {
               <GithubButton />
               {/* Sign in button */}
               <Button asChild>
-                <Link href="https://dashboard.openpanel.dev/login">
+                <Link
+                  className="hidden md:block"
+                  href="https://dashboard.openpanel.dev/login"
+                >
                   Sign in
                 </Link>
               </Button>
@@ -120,6 +123,7 @@ const Navbar = () => {
                         key={link.url}
                         href={link.url!}
                         className="text-foreground/80 hover:text-foreground text-xl font-medium p-4 px-4"
+                        onClick={() => setIsMobileMenuOpen(false)}
                       >
                         {link.text}
                       </Link>
diff --git a/apps/public/components/sections/faq.tsx b/apps/public/components/sections/faq.tsx
index 586ac15e..4651a3c8 100644
--- a/apps/public/components/sections/faq.tsx
+++ b/apps/public/components/sections/faq.tsx
@@ -120,7 +120,9 @@ export function Faq() {
       >
         {questions.map((q) => (
           <AccordionItem value={q.question} key={q.question}>
-            <AccordionTrigger>{q.question}</AccordionTrigger>
+            <AccordionTrigger className="text-left">
+              {q.question}
+            </AccordionTrigger>
             <AccordionContent>
               <div className="max-w-2xl col gap-2">
                 {q.answer.map((a) => (
diff --git a/apps/public/components/sections/features/profiles-feature.tsx b/apps/public/components/sections/features/profiles-feature.tsx
index 17223cee..cac8a92e 100644
--- a/apps/public/components/sections/features/profiles-feature.tsx
+++ b/apps/public/components/sections/features/profiles-feature.tsx
@@ -73,15 +73,17 @@ export function ProfilesFeature() {
             key={profile.name + index.toString()}
             className="w-full flex-shrink-0 p-8"
           >
-            <div className="row items-center gap-4">
+            <div className="col md:row justify-center md:justify-start items-center gap-4">
               <img src={profile.avatar} className="size-32 rounded-full" />
               <div>
                 <div className="text-3xl font-semibold">{profile.name}</div>
-                <div className="text-muted-foreground">{profile.email}</div>
+                <div className="text-muted-foreground text-center md:text-left">
+                  {profile.email}
+                </div>
               </div>
             </div>
 
-            <div className="mt-8 grid grid-cols-2 gap-4">
+            <div className="mt-8 grid grid-cols-1 md:grid-cols-2 gap-4">
               <div className="rounded-lg border p-4 bg-background-light">
                 <div className="text-sm text-muted-foreground">First seen</div>
                 <div className="text-lg font-medium">
diff --git a/apps/public/components/twitter-card.tsx b/apps/public/components/twitter-card.tsx
index 1c2f21f9..d13b6923 100644
--- a/apps/public/components/twitter-card.tsx
+++ b/apps/public/components/twitter-card.tsx
@@ -51,10 +51,10 @@ export function TwitterCard({
         </div>
         <div className="col gap-1">
           <div className="col">
-            <div className="row gap-2 items-center">
+            <div className="">
               <span className="font-medium">{name}</span>
               {verified && (
-                <div className="relative">
+                <div className="relative inline-block top-0.5 ml-1">
                   <BadgeIcon className="size-4 fill-[#1D9BF0] text-[#1D9BF0]" />
                   <div className="absolute inset-0 center-center">
                     <CheckIcon className="size-2 text-white" strokeWidth={3} />