Merge pull request #139 from ZivFisher/fix-the-style-in-main-page

fix: Fixed the style in the main page.

components/Common/Darkmode.tsx

@@ -6,12 +6,12 @@ import { useTheme } from 'next-themes';
 
 const Darkmode: React.FC = () => {
   const { theme, setTheme } = useTheme();
-  if (theme === 'system') setTheme('dark')
+  if (theme === 'system') setTheme('dark');
   return (
     <button
       id="שינוי פלטה"
       aria-label={`לחץ פה למעבר לפלטה ${theme === 'dark' ? 'בהירה' : 'כהה'}`}
-      className="w-6 h-6 cursor-pointer inset-0 bg-transparent border-none p-0 m-0"
+      className="flex justify-center content-center w-6 h-6 cursor-pointer inset-0 bg-transparent border-none p-0 m-0"
       onClick={() => {
         setTheme(theme === 'dark' ? 'light' : 'dark');
       }}

components/Home/Quote.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 const Quote: React.FC = () => {
   return (
     <div className="bg-purple-100/50 dark:bg-gray-800/50 h-96">

components/Home/TitleSection.tsx

@@ -2,28 +2,31 @@ import DiscordLink from '@/components/Common/DiscordLink';
 
 export default function TitleSection() {
   return (
-    <div className="relative  mx-auto max-w-[1600px] px-4 md:px-14 flex justify-between h-[90vh] md:h-[70vh] pb-10">
-      <div className="flex flex-col items-center w-full mt-[1.2rem] md:-mt-2 lg:mt-0 md:px-10 lg:px-12  gap-7  md:w-1/2 md:items-start">
-        <h1 className="w-full text-center md:text-[40px] lg:text-5xl md:text-right">
+    <div className="relative mx-auto max-w-[1600px] px-4 flex justify-between h-[70vh] 2xl:h-[80vh] xl:h-[70vh] md:h-[70vh] md:px-14 pb-10 sm:h-[80vh]">
+      <div className="flex flex-col items-center w-full gap-6 mt-[1.2rem] 2xl:gap-12 lg:px-12 lg:mt-0 lg:gap-8 md:-mt-2 md:px-10 md:w-1/2 md:items-start md:gap-4">
+        <h1 className="w-full text-center 2xl:text-5xl xl:text-3xl lg:text-3xl md:text-right md:text-2xl">
           קהילת מעקף&nbsp;-
           <br />
           קוד פתוח ישראל
         </h1>
-        <h4 className="w-full text-center md:text-right">
-          מטרת הקהילה היא חיבור בין מפתחים ישראלים המעוניינים לתרום לקוד פתוח,
-          ובין ספריות קוד פתוח ישראליות.
+
+        <h4 className="w-full text-center 2xl:text-2xl xl:text-sm lg:text-sm md:text-right md:text-1xs">
+          מטרת הקהילה היא חיבור בין מפתחים ישראלים
+          <br /> המעוניינים לתרום לקוד פתוח, ובין ספריות קוד פתוח ישראליות.
           <br />
           פרטים מלאים על הקהילה ניתן למצוא <br />
           באתר הזמני של הקהילה
         </h4>
+
         <DiscordLink
-          className="w-100 py-4 px-10 text-xl"
+          className="w-100 py-4 px-10 2xl:text-1xl xl:text-base lg:text-sm md:text-2xs"
           href="https://maakaf.netlify.app/"
         >
-         לחצו כאן למעבר לאתר הקהילה הזמני
+          לחצו כאן למעבר לאתר הקהילה הזמני
         </DiscordLink>
       </div>
-      <div className="absolute lg:min-h-[800px] xl:w-[650px] top-0 left-0 w-full h-full -z-10 md:z-0 opacity-40 md:w-1/2 md:min-h-screen md:opacity-100 md:static">
+
+      <div className="absolute xl:w-[650px] top-0 left-0 w-full h-full -z-10 md:z-0 opacity-40 md:w-1/2 md:opacity-100 md:static">
         <div
           className={
             'bg-[url("/images/skeleton_loader.png")] dark:bg-[url("/images/skeleton_loader_dark.png")] w-full h-full bg-top bg-no-repeat bg-contain '

components/utils/Dropdown.tsx

@@ -84,7 +84,7 @@ export const Dropdown = <T extends OptionValue>({
         <div
           onClick={toggleDropdown}
           onKeyDown={handleKeyDown}
-          className="flex gap-5 items-center"
+          className="flex gap-2 items-center"
           aria-label="Dropdown"
           tabIndex={0}
         >

tailwind.config.js

@@ -72,11 +72,15 @@ module.exports = {
       inter: ['Inter', 'sans-serif'],
     },
     fontSize: {
+      "3xs": "6px",
+      "2xs": "8px",
+      "1xs": "10px",
       xs: '12px',
       sm: '14px',
       base: '16px',
       lg: '18px',
       xl: '20px',
+      "1xl": "22px",
       '2xl': '24px',
       '3xl': '34px',
       '4xl': '48px',