From 5915576bd55d3597b4ff7a4573d0f830e55efe5a Mon Sep 17 00:00:00 2001
From: Jarrison Cano <me@jarrison.dev>
Date: Thu, 10 Oct 2024 15:50:23 -0500
Subject: [PATCH] add refactor to all the web

---
 app/components/FAQ.tsx                 |  2 +-
 app/components/Footer.tsx              |  2 +-
 app/components/Nav.tsx                 | 15 ++-------------
 app/components/Schedule.tsx            |  2 +-
 app/components/Ticket.tsx              |  2 +-
 app/components/TicketDownload.tsx      |  2 +-
 app/components/WelcomeHero.tsx         |  9 ++++-----
 app/components/common/Contributors.tsx |  2 +-
 app/components/common/Summary.tsx      |  2 +-
 app/components/common/Table.tsx        |  2 +-
 app/components/ui/button.tsx           |  2 +-
 app/page.tsx                           |  2 +-
 12 files changed, 16 insertions(+), 28 deletions(-)

diff --git a/app/components/FAQ.tsx b/app/components/FAQ.tsx
index 45798f6..70f2024 100644
--- a/app/components/FAQ.tsx
+++ b/app/components/FAQ.tsx
@@ -46,7 +46,7 @@ const questions = [
 export const FAQ = () => {
   return (
     <section>
-      <h2 className="mb-[4.5rem] text-center text-white text-[3.5rem] font-semibold">
+      <h2 className="mb-[4.5rem] text-center text-white text-5xl md:text-[3.5rem] font-semibold">
         Preguntas frecuentes
       </h2>
       <div className="flex flex-col items-center justify-center gap-4 w-4/5 md:w-3/5 m-auto">
diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
index 027e1af..ce64119 100644
--- a/app/components/Footer.tsx
+++ b/app/components/Footer.tsx
@@ -39,7 +39,7 @@ export const Footer = () => {
       "max-w-7xl w-full mx-auto text-center mb-10 flex flex-col justify-between items-center"
     ),
     socialIcon: cn("inline-flex"),
-    copyRight: cn("text-sm mt-5 inset-x-0 bottom-2"),
+    copyRight: cn("text-sm mt-5 inset-x-0 bottom-2 text-center px-2"),
   };
 
   const renderSocialIcons = () =>
diff --git a/app/components/Nav.tsx b/app/components/Nav.tsx
index ad99bac..102a235 100644
--- a/app/components/Nav.tsx
+++ b/app/components/Nav.tsx
@@ -121,12 +121,6 @@ export const Nav = () => {
               </div>
             )}
           </div>
-          <Link
-            href="https://docs.google.com/forms/d/e/1FAIpQLSc-tddK0-eUZODZr8ErbFHkthVZdzQTyI-xDPRRFsZN76NGzw/viewform"
-            className="transition-all duration-300 hover:scale-105"
-          >
-            Votar charlas
-          </Link>
           {user ? (
             <div ref={trigger}>
               <button
@@ -139,7 +133,7 @@ export const Nav = () => {
                   alt="user avatar image"
                   width={40}
                   height={40}
-                  className="relative rounded-full border-2 border-caSecondary-500 hover:scale-105 cursor-pointer transition-all duration-300"
+                  className="relative overflow-hidden rounded-full border-2 border-caSecondary-500 hover:scale-105 cursor-pointer transition-all duration-300"
                 />
               </button>
               {isOpen && (
@@ -191,12 +185,7 @@ export const Nav = () => {
             : "max-h-0 opacity-0 overflow-hidden"
         }`}
       >
-        <Link
-          href="https://docs.google.com/forms/d/e/1FAIpQLSc-tddK0-eUZODZr8ErbFHkthVZdzQTyI-xDPRRFsZN76NGzw/viewform"
-          className="transition-all duration-300 hover:scale-105"
-        >
-          Votar charlas
-        </Link>
+       
         {user ? (
           <Button
             variant="secondary"
diff --git a/app/components/Schedule.tsx b/app/components/Schedule.tsx
index 76e371b..9425a1d 100644
--- a/app/components/Schedule.tsx
+++ b/app/components/Schedule.tsx
@@ -7,7 +7,7 @@ export const Schedule = () => {
   const timezone = useTimezone();
   return (
     <section className="w-full mx-auto max-w-sm md:max-w-6xl">
-      <h2 className="text-center font-semibold text-[56px] text-hero ">
+      <h2 className="text-center font-semibold text-[56px] text-5xl sm:text-hero ">
         Horarios y charlas
       </h2>
       <span className="flex justify-center my-12 text-sm">
diff --git a/app/components/Ticket.tsx b/app/components/Ticket.tsx
index b722118..a01a3f0 100644
--- a/app/components/Ticket.tsx
+++ b/app/components/Ticket.tsx
@@ -34,7 +34,7 @@ export const Ticket = forwardRef<HTMLDivElement, TicketProps>(function Ticket(
             <div className="flex gap-5 items-center">
               <img
                 data-atropos-offset="2"
-                className="w-8 lg:w-16 sm:w-28 aspect-square rounded-full p-[0.1rem] bg-gradient-to-rb from-caPrimary-600 to-caSecondary-500"
+                className="w-8 lg:w-16 sm:w-28 overflow-hidden aspect-square rounded-full p-[0.1rem] bg-gradient-to-rb from-caPrimary-600 to-caSecondary-500"
                 src={avatar}
                 id="avatar"
                 alt={`Avatar de ${name}`}
diff --git a/app/components/TicketDownload.tsx b/app/components/TicketDownload.tsx
index 8fd8f96..c063d08 100644
--- a/app/components/TicketDownload.tsx
+++ b/app/components/TicketDownload.tsx
@@ -62,7 +62,7 @@ export const TicketDownload = () => {
       id="ticket"
       className="w-full min-h-[600px] max-w-6xl items-center mx-auto flex gap-12 flex-col py-7"
     >
-      <p className="text-3xl font-semibold">
+      <p className="text-2xl md:text-3xl font-semibold text-center">
         Descarga tu ticket y compártelo en redes sociales
       </p>
       {user && (
diff --git a/app/components/WelcomeHero.tsx b/app/components/WelcomeHero.tsx
index 328faac..2c88a60 100644
--- a/app/components/WelcomeHero.tsx
+++ b/app/components/WelcomeHero.tsx
@@ -18,19 +18,18 @@ export const WelcomeHero: FC<Props> = ({ variant, children }) => {
     >
       <div className="relative z-20 flex flex-col gap-10 items-center text-center">
         <div className="flex flex-col gap-2">
-          <p className="text-balance text-hero font-semibold lg:text-wrap">
-            ¡Gracias por estar presente en el
+          <p className="text-center md:text-balance text-5xl sm:text-hero font-semibold lg:text-wrap">
+            ¡Gracias por estar presente en el {' '}
             <a
               href="https://x.com/search?q=%23Aforshow" target="_blank"
               rel="noreferrer"
               className="inline-block bg-gradient-to-r from-caPrimary-500 to-caSecondary-500 text-transparent bg-clip-text font-[800]">
-              Aforshow
+              Aforshow!
             </a>
-            !
           </p>
           {children}
         </div>
-        <div className="md:w-5/6 w-full px-3">
+        <div className="md:w-5/6 w-full px-4">
           <h2 className="text-caTextSecondary text-lg mb-3">
             Puedes ver la repetición del evento aquí:
           </h2>
diff --git a/app/components/common/Contributors.tsx b/app/components/common/Contributors.tsx
index 72f2b9d..0c321be 100644
--- a/app/components/common/Contributors.tsx
+++ b/app/components/common/Contributors.tsx
@@ -28,7 +28,7 @@ export const Contributors = () => {
 
   return (
     <section className="text-center my-10">
-      <h4 className="text-3xl text-white">Contribuidores del desarrollo</h4>
+      <h4 className="text-2xl md:text-3xl text-white">Contribuidores del desarrollo</h4>
       <div className="mt-10">
         {contributors.length > 0 && (
           <div
diff --git a/app/components/common/Summary.tsx b/app/components/common/Summary.tsx
index 4c00964..6c7921e 100644
--- a/app/components/common/Summary.tsx
+++ b/app/components/common/Summary.tsx
@@ -22,7 +22,7 @@ export const Summary = ({
   return (
     <div className={cn("w-full group", className)}>
       <div
-        className="font-bold text-[1.75rem] text-white cursor-pointer relative flex items-center justify-between"
+        className="font-bold text-xl md:text-[1.75rem] text-white cursor-pointer relative flex items-center justify-between"
         onClick={toggleOpen}
       >
         {title}
diff --git a/app/components/common/Table.tsx b/app/components/common/Table.tsx
index 8cc01df..8344aaa 100644
--- a/app/components/common/Table.tsx
+++ b/app/components/common/Table.tsx
@@ -12,7 +12,7 @@ export const Table = ({ title, authors, timestamp }: TableProps) => {
   return (
     <article className="grid items-center">
       <footer className="flex flex-col items-center gap-2 md:row-span-2 lg:row-auto">
-        <p className="font-semibold md:text-3xl leading-7 md:leading-10 text-scheduleTitle text-wrap">
+        <p className="font-semibold md:text-3xl leading-7 md:leading-10 text-scheduleTitle text-wrap text-center">
           {title}
         </p>
         <p className="text-[#B3B3B3] text-scheduleAuthor md:text-3xl italic">
diff --git a/app/components/ui/button.tsx b/app/components/ui/button.tsx
index d64a5c0..1e4b567 100644
--- a/app/components/ui/button.tsx
+++ b/app/components/ui/button.tsx
@@ -45,7 +45,7 @@ export interface ButtonProps
 const Button = ({ className, variant, size, ...props }: ButtonProps) => {
   return (
     <button
-      className={cn(buttonVariants({ variant, size, className }))}
+      className={cn(buttonVariants({ variant, size, className }), 'max-sm:text-sm')}
       {...props}
     />
   );
diff --git a/app/page.tsx b/app/page.tsx
index 0527a76..696da60 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -49,7 +49,7 @@ export default function Home({
 
   return (
     <CursorsContextProvider room={room} host={host}>
-      <main className="font-dmSans">
+      <main className="font-dmSans overflow-x-hidden">
         <Cursors />
         <Hero />
         <section className="flex flex-col gap-[72px]">