[FEATURE] Add new pricing to our website (#98)

Co-authored-by: Martin Sidorov <[email protected]>
LookinLabs · Dec 22, 2024 · 2ba5e84 · 2ba5e84
1 parent 4dfe1f1
commit 2ba5e84
Show file tree

Hide file tree

Showing 4 changed files with 141 additions and 19 deletions.
diff --git a/index.html b/index.html
@@ -92,6 +92,11 @@
                     data-translation-key="navbar_offer">What
                     we offer?</a>
                 </li>
+                <li>
+                  <a href="#pricing"
+                    class="block py-2 px-3 md:hover:bg-transparent md:border-0 md:hover:text-purple-400 md:p-0 text-white md:dark:hover:text-purple-400 hover:bg-gray-700 hover:text-white md:dark:hover:bg-transparent"
+                    data-translation-key="navbar_pricing">Pricing</a>
+                </li>
                 <li>
                   <a href="#contact"
                     class="block py-2 px-3 md:hover:bg-transparent md:border-0 md:hover:text-purple-400 md:p-0 text-white md:dark:hover:text-purple-400 hover:bg-gray-700 hover:text-white md:dark:hover:bg-transparent"
@@ -210,23 +215,55 @@ <h3 data-translation-key="what_do_we_offer_infinity_icon" class="text-xl font-se
                 <p data-translation-key="what_do_we_offer_infinity_icon_description" class="text-gray-600">Earn certificates to showcase your skills</p>
               </div>
             </div>
+            <div class="w-full sm:w-1/2 lg:w-1/3 px-4 mb-8 sm:mb-0">
+              <div class="text-center">
+                <i class="fas fa-hand-holding-usd text-6xl text-transparent bg-clip-text bg-gradient-to-r from-emerald-700 via-indigo-700 to-purple-900 mb-4"></i>
+                <h3 data-translation-key="what_do_we_offer_affordable_icon" class="text-xl font-semibold mb-2">Affordable Pricing</h3>
+                <p data-translation-key="what_do_we_offer_affordable_icon_description" class="text-gray-600">Get top-quality education at a fraction of the cost compared to other organizations.</p>
+              </div>
+            </div>
           </div>
         </div>
       </section>
-      <section id="partners" class="flex flex-col items-center justify-center p-4 pt-16">
-          <h1 class="text-2xl font-bold my-6 underline w-full text-center" data-translation-key="section_partners_title">Our Partners</h1>
-          <div class="flex flex-col md:flex-row w-full items-center mt-12 md:mt-6 mb-12 px-4">
-              <div class="flex flex-1 justify-center md:justify-end pr-2 md:pr-8">
-                  <a href="https://aws.amazon.com/what-is-cloud-computing">
-                      <img class="w-40" src="./resources/img/powered-by-aws-white.webp" alt="Powered by AWS">
-                  </a>
-              </div>
-              <div class="flex flex-1 justify-center md:justify-start pl-2 md:pl-8 mt-8 md:mt-0">
-                  <a href="https://kood.tech/">
-                      <img class="w-80" src="./resources/img/kood_johvi.webp" alt="Powered By Kood Jõhvi">
-                  </a>
-              </div>
+      <section id="pricing" class="py-16 bg-gray-900 dark:bg-gray-900 bg-opacity-0 dark:bg-opacity-0">
+        <div class="container mx-auto px-6">
+          <h1 class="text-2xl font-bold my-6 underline w-full text-center" data-translation-key="pricing_section_title">Pricing</h1>
+          <p class="text-center text-gray-600 dark:text-gray-400" data-translation-key="pricing_section_description">Choose the plan that best suits and fill the form below</p>
+          <p class="text-center text-gray-600 dark:text-gray-400 mb-12" data-translation-key="pricing_section_description2">Experience the best with our 14-day free trial. Join us today and unlock your potential!</p>
+          <div class="flex flex-col md:flex-row justify-center items-center space-y-6 md:space-y-0 md:space-x-6">
+            <!-- Early Bird -->
+            <div class="flex flex-col items-center bg-gray-900 bg-opacity-30 border-yellow-400 rounded-lg shadow-lg p-4 w-full md:w-1/4 text-center border-2">
+              <i class="fas fa-gem text-4xl text-transparent bg-clip-text bg-gradient-to-r from-emerald-700 via-indigo-700 to-purple-900 mb-4"></i>
+              <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2" data-translation-key="pricing_early_bird_title">Early Bird Prices</h3>
+              <p class="text-gray-600 dark:text-gray-400 mb-4" data-translation-key="pricing_early_bird_description">Become one of the 10 newcomers</p>
+              <p class="text-purple-500 dark:text-purple-400 font-semibold mb-4" data-translation-key="pricing_early_bird_discount">Pay 40% less!</p>
+              <div class="text-2xl font-bold text-gray-800 dark:text-white mb-2">60€</div>
+              <p class="text-gray-600 dark:text-gray-400 mb-4" data-translation-key="pricing_early_bird_duration">per month</p>
+            </div>
+            <!-- Monthly Plan -->
+            <div class="flex flex-col items-center bg-gray-900 bg-opacity-30 border border-gray-600 rounded-lg shadow-lg p-4 w-full md:w-1/4 text-center">
+              <i class="fas fa-gem text-4xl text-transparent bg-clip-text bg-gradient-to-r from-emerald-700 via-indigo-700 to-purple-900 mb-4"></i>
+              <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2" data-translation-key="pricing_monthly_title">Monthly Plan</h3>
+              <div class="text-2xl font-bold text-gray-800 dark:text-white mb-2">100€</div>
+              <p class="text-gray-600 dark:text-gray-400 mb-4" data-translation-key="pricing_monthly_duration">per month</p>
+            </div>
+            <!-- Quarterly Plan -->
+            <div class="flex flex-col items-center bg-gray-900 bg-opacity-30 border border-gray-600 rounded-lg shadow-lg p-4 w-full md:w-1/4 text-center">
+              <i class="fas fa-gem text-4xl text-transparent bg-clip-text bg-gradient-to-r from-emerald-700 via-indigo-700 to-purple-900 mb-4"></i>
+              <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2" data-translation-key="pricing_quarterly_title">Quarterly Plan</h3>
+              <div class="text-2xl font-bold text-gray-800 dark:text-white mb-2">300€</div>
+              <p class="text-gray-600 dark:text-gray-400 mb-4" data-translation-key="pricing_quarterly_duration">per quarter</p>
+            </div>
+            <!-- Yearly Plan -->
+            <div class="flex flex-col items-center bg-gray-900 bg-opacity-30 border border-gray-600 rounded-lg shadow-lg p-4 w-full md:w-1/4 text-center">
+              <i class="fas fa-gem text-4xl text-transparent bg-clip-text bg-gradient-to-r from-emerald-700 via-indigo-700 to-purple-900 mb-4"></i>
+              <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2" data-translation-key="pricing_yearly_title">Yearly Plan</h3>
+              <div class="text-2xl font-bold text-gray-800 dark:text-white mb-2">1080€</div>
+              <p class="text-gray-600 dark:text-gray-400 mb-2" data-translation-key="pricing_yearly_duration">per year</p>
+              <p class="text-purple-500 dark:text-purple-400 font-semibold mb-4" data-translation-key="pricing_yearly_discount">Pay 10% less!</p>
+            </div>
           </div>
+        </div>
       </section>
       <section id="contact" class="flex flex-col items-center justify-center pt-24">
         <h1 class="text-2xl font-bold my-6 underline w-full text-center" data-translation-key="section_contact_title">Join
@@ -272,7 +309,7 @@ <h1 class="text-2xl font-bold my-6 underline w-full text-center" data-translatio
           </div>
         </form>
       </section>
-      
+
       <!-- Loader Section -->
       <section id="loader" class="fixed z-10 inset-0 overflow-y-auto hidden" aria-labelledby="modal-title" role="dialog"
         aria-modal="true">
@@ -309,6 +346,21 @@ <h1 class="text-2xl font-bold my-6 underline w-full text-center" data-translatio
           </div>
         </div>
       </section>
+      <section id="partners" class="flex flex-col items-center justify-center p-4 pt-16">
+          <h1 class="text-2xl font-bold my-6 underline w-full text-center" data-translation-key="section_partners_title">Our Partners</h1>
+          <div class="flex flex-col md:flex-row w-full items-center mt-12 md:mt-6 mb-12 px-4">
+              <div class="flex flex-1 justify-center md:justify-end pr-2 md:pr-8">
+                  <a href="https://aws.amazon.com/what-is-cloud-computing">
+                      <img class="w-40" src="./resources/img/powered-by-aws-white.webp" alt="Powered by AWS">
+                  </a>
+              </div>
+              <div class="flex flex-1 justify-center md:justify-start pl-2 md:pl-8 mt-8 md:mt-0">
+                  <a href="https://kood.tech/">
+                      <img class="w-80" src="./resources/img/kood_johvi.webp" alt="Powered By Kood Jõhvi">
+                  </a>
+              </div>
+          </div>
+      </section>
     </main>
     <div class="sm:w-auto md:w-auto lg:w-auto xl:w-auto flex justify-center mt-4">
       <footer class="w-full mt-20 p-2 bg-gray-900 border-gray-200 text-center text-white">

diff --git a/resources/translations/ee.json b/resources/translations/ee.json
@@ -7,6 +7,7 @@
   "navbar_about": "Organisatsioon",
   "navbar_who_we_are": "Kes me oleme?",
   "navbar_offer": "Mida me pakume?",
+  "navbar_pricing": "Hinnakiri",
   "navbar_contact": "Liitu Meiega",
 
   "section_about_title": "Meie Organisatsioon",
@@ -18,10 +19,10 @@
   "who_we_are_description": "Lookinlabs organisatsiooni meeskond koosneb mitmest sertifitseeritud spetsialistist, kes tagavad meie teadmised tipptaseme arengu osutamiseks. LookinLabs organisatsioonis leiate partnerluse teie edule pühendunud ekspertide meeskonnaga. Me väärtustame oma meeskonnakaaslasi ja töötame väsimatult, et nooremad arendajad leiaksid endale töökoha.",
 
   "section_offer_title": "Mida me pakume",
-  
+
   "what_do_we_offer_book_icon": "Terviklikud Teadmised",
   "what_do_we_offer_book_icon_description": "Omanda nõutavaid oskusi erinevates tehnoloogiates",
-  
+
   "what_do_we_offer_users_icon": "Eksperdi Mentorlus",
   "what_do_we_offer_users_icon_description": "Õppige praktilise kogemusega tipptaseme ekspertidelt",
 
@@ -34,8 +35,30 @@
   "what_do_we_offer_laptop_icon": "Kaasaegsed tehnoloogiad",
   "what_do_we_offer_laptop_icon_description": "Õpi kõige populaarsemaid tehnoloogiaid ja tööriistu",
 
+  "what_do_we_offer_affordable_icon": "Taskukohane hinnakujundus",
+  "what_do_we_offer_affordable_icon_description": "Saage kvaliteetseid teadmisi murdosa hinnaga võrreldes teiste organisatsioonidega.",
+
   "section_partners_title": "Meie partnerid",
 
+  "pricing_section_title": "Hinnakiri",
+  "pricing_section_description": "Valige sobiv plaan ja täitke allpool olev vorm",
+  "pricing_section_description2": "Koge parimat meie 14-päevase tasuta prooviversiooniga. Liituge meiega täna ja avage oma potentsiaal!",
+
+  "pricing_early_bird_title": "Varajane lind",
+  "pricing_early_bird_description": "Ole üks esimene 5st liitujast!",
+  "pricing_early_bird_discount": "Maksa 40% vähem!",
+  "pricing_early_bird_duration": "kuus",
+
+  "pricing_monthly_title": "Kuuplaan",
+  "pricing_monthly_duration": "kuus",
+
+  "pricing_quarterly_title": "Kvartaliplaan",
+  "pricing_quarterly_duration": "kvartalis",
+
+  "pricing_yearly_title": "Aastaplaan",
+  "pricing_yearly_duration": "aastas",
+  "pricing_yearly_discount": "Maksa 10% vähem!",
+
   "section_contact_title": "Liitu Meiega",
   "contact_form_username_placeholder": "Kasutajanimi",
   "contact_form_email_placeholder": "E-post",

diff --git a/resources/translations/en.json b/resources/translations/en.json
@@ -7,6 +7,7 @@
   "navbar_about": "About",
   "navbar_who_we_are": "Who we are?",
   "navbar_offer": "What we offer?",
+  "navbar_pricing": "Pricing",
   "navbar_contact": "Join Us",
 
   "section_about_title": "About",
@@ -22,21 +23,43 @@
 
   "what_do_we_offer_book_icon": "Comprehensive Knowledge",
   "what_do_we_offer_book_icon_description": "Master in-demand skills across different technologies",
-  
+
   "what_do_we_offer_users_icon": "Expert Guidance",
   "what_do_we_offer_users_icon_description": "Learn from top-rated experts with hands-on experience",
 
   "what_do_we_offer_tools_icon": "Project Based Learning",
   "what_do_we_offer_tools_icon_description": "Develop real projects and learn by doing",
-  
+
   "what_do_we_offer_infinity_icon": "Code Lifetime Access",
   "what_do_we_offer_infinity_icon_description": "Keep your code even after leaving the project or organization",
 
   "what_do_we_offer_laptop_icon": "Modern Tech Stack",
   "what_do_we_offer_laptop_icon_description": "Work with the most popular technologies and tools",
 
+  "what_do_we_offer_affordable_icon": "Affordable Pricing",
+  "what_do_we_offer_affordable_icon_description": "Get top-quality knowledge at a fraction of the cost compared to other organizations.",
+
   "section_partners_title": "Our Partners",
 
+  "pricing_section_title": "Pricing",
+  "pricing_section_description": "Choose the plan that best suits and fill the form below",
+  "pricing_section_description2": "Experience the best with our 14-day free trial. Join us today and unlock your potential!",
+
+  "pricing_early_bird_title": "Early Bird",
+  "pricing_early_bird_description": "Be one of the first 5 newcomers!",
+  "pricing_early_bird_discount": "Pay 40% less!",
+  "pricing_early_bird_duration": "per month",
+
+  "pricing_monthly_title": "Monthly Plan",
+  "pricing_monthly_duration": "per month",
+
+  "pricing_quarterly_title": "Quarterly Plan",
+  "pricing_quarterly_duration": "per quarter",
+
+  "pricing_yearly_title": "Yearly Plan",
+  "pricing_yearly_duration": "per year",
+  "pricing_yearly_discount": "Pay 10% less!",
+
   "section_contact_title": "Join Us",
   "contact_form_username_placeholder": "Username",
   "contact_form_email_placeholder": "Email",

diff --git a/resources/translations/ru.json b/resources/translations/ru.json
@@ -7,6 +7,7 @@
   "navbar_about": "О нас",
   "navbar_who_we_are": "Кто мы?",
   "navbar_offer": "Что мы предлагаем?",
+  "navbar_pricing": "Цены",
   "navbar_contact": "Присоединиться к нам",
 
   "section_about_title": "О нас",
@@ -21,7 +22,7 @@
 
   "what_do_we_offer_book_icon": "Комплексные Знания",
   "what_do_we_offer_book_icon_description": "Овладейте востребованными навыками работы с различными технологиями",
-  
+
   "what_do_we_offer_users_icon": "Экспертное Руководство",
   "what_do_we_offer_users_icon_description": "Учитесь у высококлассных экспертов с практическим опытом",
 
@@ -34,8 +35,31 @@
   "what_do_we_offer_laptop_icon": "Современные Технологии",
   "what_do_we_offer_laptop_icon_description": "Работайте с самыми популярными технологиями и инструментами",
 
+  "what_do_we_offer_affordable_icon": "Доступные Цены",
+  "what_do_we_offer_affordable_icon_description": "Получите знания высочайшего качества за долю стоимости по сравнению с другими организациями.",
+
   "section_partners_title": "Наши партнеры",
 
+  "pricing_section_title": "Цены",
+
+  "pricing_section_description": "Выберите подходящий план и заполните форму ниже",
+  "pricing_section_description2": "Опробуйте лучшее с нашей 14-дневной бесплатной пробной версией. Присоединяйтесь к нам сегодня и разблокируйте свой потенциал!",
+
+  "pricing_early_bird_title": "Ранняя Пташка",
+  "pricing_early_bird_description": "Будьте одним из первых 5ти новичков!",
+  "pricing_early_bird_discount": "Оплатите на 40% меньше!",
+  "pricing_early_bird_duration": "в месяц",
+
+  "pricing_monthly_title": "Ежемесячный План",
+  "pricing_monthly_duration": "в месяц",
+
+  "pricing_quarterly_title": "Квартальный План",
+  "pricing_quarterly_duration": "в квартал",
+
+  "pricing_yearly_title": "Годовой План",
+  "pricing_yearly_duration": "в год",
+  "pricing_yearly_discount": "Оплатите на 10% меньше!",
+
   "section_contact_title": "Присоединиться к нам",
   "contact_form_username_placeholder": "Имя пользователя",
   "contact_form_email_placeholder": "Электронная почта",