Merge pull request #32 from eriandev/main

feat: hero responsive design
Afordin · Jul 23, 2024 · 62f54e4 · 62f54e4
2 parents 4b4ba47 + 780ecf0
commit 62f54e4
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 9 deletions.
diff --git a/app/components/Nav.tsx b/app/components/Nav.tsx
@@ -5,7 +5,7 @@ import { Button } from "./ui/button";
 
 export const Nav = () => {
   return (
-    <nav className="relative w-full max-w-6xl h-16 mx-auto flex items-center justify-between">
+    <nav className="relative px-2 w-full max-w-6xl h-16 mx-auto flex items-center justify-between">
       <a href="/" className="flex items-center gap-1 cursor-pointer">
         <Image src="/logo.png" alt="logo image" width={28} height={28}></Image>
         <h1 className="text-2xl text-white font-semibold">Aforshow</h1>

diff --git a/app/components/WelcomeHero.tsx b/app/components/WelcomeHero.tsx
@@ -1,15 +1,15 @@
-import { Countdown } from "./common/Countdown";
 import { Button } from "./ui/button";
+import { Countdown } from "./common/Countdown";
 
 export const WelcomeHero = () => {
   return (
     <section className="mx-auto max-w-6xl w-full h-full">
       <div className="relative z-20 flex flex-col gap-12 items-center text-center">
         <div className="flex flex-col ">
-          <h2 className="text-caTextSecondary text-[24px]">
+          <h2 className="text-caTextSecondary text-lg md:text-[24px]">
             El evento de programación del año
           </h2>
-          <p className="text-6xl font-semibold">
+          <p className="text-balance text-hero font-semibold lg:text-wrap">
             Da tu primera charla de programación y aporta valor a la comunidad
             en el{" "}
             <span className="inline-block bg-gradient-to-r from-caPrimary-500 to-caSecondary-500 text-transparent bg-clip-text">

diff --git a/app/components/common/Countdown.tsx b/app/components/common/Countdown.tsx
@@ -68,7 +68,7 @@ export const Countdown = ({
   /* Use cn to override the wraper if need it */
 
   return (
-    <div className={cn("flex gap-16", className)}>
+    <div className={cn("flex gap-6 md:gap-16", className)}>
       {time.map(({ key, label }, index) => (
         <section key={index} className="text-center text-shadow-sm">
           <span className="font-bold text-3xl xl:text-6xl">

diff --git a/app/shared-space.tsx b/app/shared-space.tsx
@@ -41,7 +41,7 @@ export default function SharedSpace() {
   const count = Object.keys(others).length + (self ? 1 : 0);
 
   return (
-    <div className="flex flex-col gap-[72px] min-h-screen overflow-hidden pt-4">
+    <div className="flex min-h-screen flex-col gap-[72px] overflow-hidden">
       <div className="z-10 absolute pointer-events-none top-0 left-0 w-full h-full overflow-clip">
         {count > 0 && (
           <div className="absolute top-4 left-4 pointer-events-none flex items-center">
@@ -51,9 +51,9 @@ export default function SharedSpace() {
         )}
       </div>
 
-      <div className="w-[300px] h-[300px] bg-caBlurBoxes absolute blur-[200px] left-[-100px] top-80"></div>
-      <div className="w-[300px] h-[300px] bg-caBlurBoxes absolute blur-[200px] right-[-100px] top-20"></div>
-      <div className="bg-pattern overflow-hidden relative gap-[74px] flex flex-col">
+      <div className="bg-caBlurBoxes absolute left-[-100px] top-80 h-[200px] w-[200px] blur-[200px] sm:h-[300px] sm:w-[300px]"></div>
+      <div className="bg-pattern relative flex w-full flex-col gap-[74px] overflow-hidden px-2 pt-4">
+      <div className="bg-caBlurBoxes absolute right-[-100px] top-20 h-[200px] w-[200px] blur-[200px] sm:h-[300px] sm:w-[300px]"></div>
         <Nav />
         <WelcomeHero />
 

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -53,6 +53,9 @@ const config: Config = {
         "pos-0": "0% 0%",
         "pos-100": "100% 100%",
       },
+      fontSize: {
+        hero: ['clamp(1.5rem, 5.5vw, 3.75rem)', '1.1'],
+      },
     },
   },
   variants: {