Add new hero banner

dictionaries/bg.json

@@ -7,11 +7,10 @@
     "contact": "Контакти"
   },
   "main": {
-    "date": "2 – 3",
+    "date": "2 - 3 ноември 2024",
-    "monthYear": "Ноември 2024",
+    "titleLocation": "София Тех Парк",
-    "titleLocation": "Иновативен форум \"Джон Атанасов\" – София Тех Парк",
     "countdownTimer": {
-      "title": "До OpenFest остават:",
+      "title": "До OpenFest остават",
       "days": "Дни",
       "hours": "Часа",
       "minutes": "Минути"
@@ -21,7 +20,7 @@
       "text": "OpenFest е най-голямата българска конференция, посветена на свободната култура, свободното споделяне на знание, свободния и отворен софтуер. Събитието се организира от доброволци и е безплатно за посещение. OpenFest се провежда годишно в София, България."
     },
     "cfp": {
-      "title": "Как можете да участвате в OpenFest 2024",
+      "title": "Как можете да участвате в OpenFest 2024?",
       "lecture": "Участвайте с лекция, работилница или щанд",
       "volunteers": "Присъединете се като доброволец",
       "partners": "Подкрепете събитието като партньор"

dictionaries/en.json

@@ -7,11 +7,10 @@
     "contact": "Contact"
   },
   "main": {
-    "date": "2 - 3",
+    "date": "2 - 3 november 2024",
-    "monthYear": "November, 2024",
+    "titleLocation": "Sofia Tech Park",
-    "titleLocation": "Innovation forum \"John Atanasoff\" – Sofia Tech Park",
     "countdownTimer": {
-      "title": "OpenFest starts in:",
+      "title": "OpenFest starts in",
       "days": "Days",
       "hours": "Hours",
       "minutes": "Minutes"

src/app/[lang]/page.jsx

@@ -10,19 +10,21 @@ export default async function Home({ params }) {
 
   return (
     <>
-      <section className='h-[65vh] bg-home-bg bg-cover sm:h-[75vh]'>
+      <section className='h-[65vh] bg-home-bg bg-cover bg-bottom sm:h-[75vh]'>
         <div className='container flex h-full flex-col justify-center gap-10 text-black sm:gap-16'>
           <div className='text-center'>
-            <p className='text-xl sm:text-3xl'>{dictionary.main.monthYear}</p>
+            <p className='font-semibold uppercase tracking-[0.2em] text-white sm:text-xl'>
-            <h1 className='text-8xl font-semibold leading-none sm:text-[9rem]'>
               {dictionary.main.date}
+            </p>
+            <h1 className='text-6xl font-bold text-white sm:text-7xl'>
+              OpenFest <br /> 2024
             </h1>
           </div>
           <div className='text-center'>
-            <p className='pb-2 text-2xl font-semibold sm:pb-4 sm:text-5xl'>
+            <p className='pb-2 text-2xl font-semibold text-white sm:pb-4 sm:text-5xl'>
               “Let’s share the freedom!”
             </p>
-            <p className='text-xl sm:text-3xl'>
+            <p className='text-xl text-white sm:text-3xl'>
               {dictionary.main.titleLocation}
             </p>
           </div>
@@ -55,7 +57,7 @@ export default async function Home({ params }) {
           </h2>
           <div className='flex flex-col gap-4 sm:flex-row sm:gap-8'>
             <div className='flex basis-1/3 flex-col items-center justify-center gap-3 rounded-xl bg-blue-2 p-6 sm:gap-6'>
-              <div className='flex h-20 w-20 items-center justify-center rounded-full bg-blue-8 text-4xl text-blue-2 sm:h-24 sm:w-24 sm:text-5xl'>
+              <div className='flex h-20 w-20 items-center justify-center rounded-full bg-blue-8 text-4xl text-blue-2 shadow-md shadow-black sm:h-24 sm:w-24 sm:text-5xl'>
                 <i className='fa-solid fa-lightbulb'></i>
               </div>
               <p className='text-center text-white'>
@@ -63,7 +65,7 @@ export default async function Home({ params }) {
               </p>
             </div>
             <div className='flex basis-1/3 flex-col items-center justify-center gap-3 rounded-xl bg-blue-2 p-6 sm:gap-6'>
-              <div className='flex h-20 w-20 items-center justify-center rounded-full bg-blue-8 text-4xl text-blue-2 sm:h-24 sm:w-24 sm:text-5xl'>
+              <div className='flex h-20 w-20 items-center justify-center rounded-full bg-blue-8 text-4xl text-blue-2 shadow-md shadow-black sm:h-24 sm:w-24 sm:text-5xl'>
                 <i className='fa-solid fa-helmet-safety'></i>
               </div>
               <p className='text-center text-white'>
@@ -71,7 +73,7 @@ export default async function Home({ params }) {
               </p>
             </div>
             <div className='flex basis-1/3 flex-col items-center justify-center gap-3 rounded-xl bg-blue-2 p-6 sm:gap-6'>
-              <div className='flex h-20 w-20 items-center justify-center rounded-full bg-blue-8 text-4xl text-blue-2 sm:h-24 sm:w-24 sm:text-5xl'>
+              <div className='flex h-20 w-20 items-center justify-center rounded-full bg-blue-8 text-4xl text-blue-2 shadow-md shadow-black sm:h-24 sm:w-24 sm:text-5xl'>
                 <i className='fa-solid fa-handshake-angle'></i>
               </div>
               <p className='text-center text-white'>

src/components/CountDownTimer.jsx

@@ -41,44 +41,48 @@ const CountDownTimer = ({ props }) => {
           {props.title}
         </h2>
         <div className='flex flex-col items-center justify-evenly gap-8 lg:flex-row'>
-          <div className='relative h-40 w-40 lg:h-64 lg:w-64'>
+          <div className='relative h-48 w-48 lg:h-64 lg:w-64'>
             <div className='absolute inset-0 rotate-[-45deg] overflow-hidden rounded-full bg-[#A9CDF7]'>
               <div className='absolute left-0 top-0 h-full w-1/2'></div>
               <div className='absolute left-0 top-0 h-full w-1/2 bg-[#C8E0FC]'></div>
             </div>
             <div className='absolute inset-0 flex items-center justify-center'>
-              <span className='text-center font-bold text-gray-800'>
+              <span className='text-center font-bold'>
-                <p className='pb-1 pt-2 text-5xl lg:pb-3 lg:pt-4 lg:text-8xl'>
+                <p className='pb-1 pt-2 text-6xl text-white lg:pb-3 lg:pt-4 lg:text-8xl'>
                   {days}
                 </p>
-                <p className='text-xl font-light lg:text-5xl'> {props.days}</p>
+                <p className='text-2xl font-light text-white lg:text-5xl'>
+                  {props.days}
+                </p>
               </span>
             </div>
           </div>
-          <div className='relative h-40 w-40 lg:h-64 lg:w-64'>
+          <div className='relative h-48 w-48 lg:h-64 lg:w-64'>
             <div className='absolute inset-0 rotate-[-45deg] overflow-hidden rounded-full bg-[#A9CDF7]'>
               <div className='absolute left-0 top-0 h-full w-full'></div>
             </div>
             <div className='absolute inset-0 flex items-center justify-center'>
               <span className='text-center font-bold text-gray-800'>
-                <p className='pb-1 pt-2 text-5xl lg:pb-3 lg:pt-4 lg:text-8xl'>
+                <p className='pb-1 pt-2 text-6xl text-white lg:pb-3 lg:pt-4 lg:text-8xl'>
                   {hours}
                 </p>
-                <p className='text-xl font-light lg:text-5xl'> {props.hours}</p>
+                <p className='text-2xl font-light text-white lg:text-5xl'>
+                  {props.hours}
+                </p>
               </span>
             </div>
           </div>
-          <div className='relative h-40 w-40 lg:h-64 lg:w-64'>
+          <div className='relative h-48 w-48 lg:h-64 lg:w-64'>
             <div className='absolute inset-0 rotate-[-45deg] overflow-hidden rounded-full bg-[#A9CDF7]'>
               <div className='absolute left-0 top-0 h-full w-1/2'></div>
               <div className='absolute right-0 top-0 h-full w-1/2 bg-[#C8E0FC]'></div>
             </div>
             <div className='absolute inset-0 flex items-center justify-center'>
               <span className='text-center font-bold text-gray-800'>
-                <p className='pb-1 pt-2 text-5xl lg:pb-3 lg:pt-4 lg:text-8xl'>
+                <p className='pb-1 pt-2 text-6xl text-white lg:pb-3 lg:pt-4 lg:text-8xl'>
                   {minutes}
                 </p>
-                <p className='text-xl font-light lg:text-5xl'>
+                <p className='text-2xl font-light text-white lg:text-5xl'>
                   {props.minutes}
                 </p>
               </span>

src/components/NewsFeed.jsx

@@ -17,7 +17,7 @@ const NewsFeed = async ({ lang }) => {
             return (
               <div
                 key={post.title}
-                className='flex basis-1/3 flex-col overflow-hidden rounded-xl shadow-xl'
+                className='flex basis-1/3 flex-col overflow-hidden rounded-xl drop-shadow-2xl'
               >
                 <div>
                   <Image src={post.imageUrl} width='400' height='190'></Image>

src/components/Partners.jsx

@@ -18,7 +18,7 @@ const Partners = async ({ lang }) => {
 
   return (
     <section>
-      <div className='container flex flex-col gap-8 sm:gap-12'>
+      <div className='container flex flex-col gap-10 !py-16 sm:gap-16'>
         <div>
           <h2 className='pb-4 text-center text-2xl text-blue-2 sm:pb-8 sm:text-4xl'>
             {dictionary.main.partners.sponsors}

tailwind.config.ts

@@ -11,7 +11,7 @@ const config: Config = {
         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
         'gradient-conic':
           'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
-        'home-bg': "url('/images/openfest-1.webp')",
+        'home-bg': "url('/images/openfest-1.png')",
       },
       colors: {
         'blue-2': '#004394',