added firefox addon button to homepage

README.md

@@ -20,16 +20,23 @@
 
 > Keep Track of Your Job Applications in one place
 
+
+[atsfs.kurttekin.com](https://atsfs.kurttekin.com/)
+> It is currently in development state.
+
+<img src="/assets/firefox.png"
+alt="firefox addon">
+> Firefox Addon to add jobs to ATSFS
+
 ## Features
 - Log your job application and details
 - Write comments on jobs
 - Ability to search, filter and sort your applications
 - Graphs that show your application stats
 - Update applications
 - Generate interview questions with AI using your resume and job details
+- Browser Extension to add jobs from job posting site to ATSFS with single click
 
-[atsfs.kurttekin.com](https://atsfs.kurttekin.com/)
-> It is currently in development state.
 
 <br />
 

frontend/src/components/Home.js

@@ -4,7 +4,8 @@ import organizeImage from '../assets/organize.png';
 import filterImage from '../assets/filter.png';
 import starsImage from '../assets/stars.png';
 import goalsImage from '../assets/goal.png';
-import aiImage from '../assets/ai.png';
+import aiImage from '../assets/ai.png'
+import firefoxExtImage from '../assets/firefox.png';
 import buyMeACoffeeImage from '../assets/buy-me-a-beer.png';
 import separator from '../assets/separator.png';
 import { useNavigate } from 'react-router-dom';
@@ -13,6 +14,7 @@ import styled from "styled-components";
 import screenshotImage from '../assets/screenshot1.png';
 import { useTranslation } from 'react-i18next';
 import { Trans } from 'react-i18next';
+
 const Button = styled.button`
     margin-right: 0;
     margin-left: 0;
@@ -31,6 +33,10 @@ const Home = () => {
         navigate('/register');
     };
 
+    const handleExtensionClick = () => {
+        window.open('https://addons.mozilla.org', '_blank');
+    };
+
     return (
         <div className="home-container">
             <div className="header-container">
@@ -83,14 +89,21 @@ const Home = () => {
                 <div className="screenshot-text">
                     <h2 className="big-text">{t('hero.title')}</h2>
                     <p className="big-text2">
-                        ⚹<Trans i18nKey="hero.point1" components={{ bold: <b /> }} /><br/>
-                        ⚹<Trans i18nKey="hero.point2" components={{ bold: <b /> }} /><br/>
-                        ⚹<Trans i18nKey="hero.point3" components={{ bold: <b /> }} /><br/>
-                        ⚹<Trans i18nKey="hero.point4" components={{ bold: <b /> }} /><br/>
+                        ⚹<Trans i18nKey="hero.point1" components={{bold: <b/>}}/><br/>
+                        ⚹<Trans i18nKey="hero.point2" components={{bold: <b/>}}/><br/>
+                        ⚹<Trans i18nKey="hero.point3" components={{bold: <b/>}}/><br/>
+                        ⚹<Trans i18nKey="hero.point4" components={{bold: <b/>}}/><br/>
                     </p>
                 </div>
             </div>
 
+            <div className="extension-section"
+                 style={{textAlign: 'center', padding: '20px 0'}}>
+                <img src={firefoxExtImage} alt="Get Firefox Extension" onClick={handleExtensionClick}
+                     style={{height: '128px', width: 'auto', marginBottom: '10px'}}/>
+                <p className="illustration-text">{t('extension.description')}</p>
+            </div>
+
             <div className="support-container">
                 <a href="https://www.buymeacoffee.com/cankurttekin" target="_blank" rel="noopener noreferrer">
                     <img
@@ -118,12 +131,14 @@ const Home = () => {
                 </p>
                 <br/>
                 <p style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
-                    <a href="https://github.com/cankurttekin/job-application-tracker" target="_blank" rel="noopener noreferrer" style={{display: 'flex', alignItems: 'center'}}> <span className="material-icons" style={{marginRight: '5px'}}>code</span> Source Code </a>
+                    <a href="https://github.com/cankurttekin/job-application-tracker" target="_blank"
+                       rel="noopener noreferrer" style={{display: 'flex', alignItems: 'center'}}> <span
+                        className="material-icons" style={{marginRight: '5px'}}>code</span> Source Code </a>
                 </p>
             </footer>
         </div>
 
-            );
-        };
+    );
+};
 
 export default Home;

frontend/src/locales/en.json

@@ -24,6 +24,10 @@
     "point2": "<bold>Stay organized</bold>, never miss an opportunity.",
     "point3": "<bold>Generate</bold> personalized interview questions to prepare effectively.",
     "point4": "<bold>Analyze</bold> your application stats."
+  },
+
+  "extension" : {
+    "description" : "Browser extension let's you add jobs to ATSFS from job posting site(LinkedIn) with just a single click."
   }
 }
 

frontend/src/locales/tr.json

@@ -24,5 +24,8 @@
     "point2": "<bold>Düzenli kalın</bold>, hiçbir fırsatı kaçırmayın.",
     "point3": "<bold>Etkili hazırlanın</bold>; kişisel mülakat soruları oluşturun.",
     "point4": "Başvuru istatistiklerinizi analiz edin."
+  },
+  "extension" : {
+    "description" : "Tarayı eklentisi ile tek bir tıkla iş ilanlarınızı ATSFS'e ekleyin."
   }
 }