Feat/footer UI

frontend/src/components/Footer.tsx

@@ -2,9 +2,9 @@ import { useRecoilValue } from 'recoil';
 import github from '../assets/github.png';
 import { Link } from 'react-router-dom';
 import { loggedInState } from '../store/atoms/auth';
-import { CgProfile } from 'react-icons/cg';
+import {CgBoard , CgProfile} from 'react-icons/cg';
 import { BsFilePost } from 'react-icons/bs';
-import { FaHome } from 'react-icons/fa';
+import {FaEnvelope , FaHome , FaPortrait} from 'react-icons/fa';
 import { useTranslation } from 'react-i18next';
 import logo from "../assets/favicon.png";
 
@@ -16,15 +16,27 @@ const Footer = () => {
     return (
         <div className='bg-black text-white p-10'>
             <div className='md:flex'>
-                <div className='md:w-1/2'>
-                    <div className="flex items-center">
-                        <img src={logo} className="h-8" alt="Styleshare Logo" />
-                        <span className="ml-4 text-2xl font-semibold whitespace-nowrap text-white">
-                            {t('footer.heading')}
-                        </span>
+                <div className='md:w-1/4'>
+                    <div className="flex items-center flex-col">
+                        <div className="flex">
+                            <img src={logo} className="h-8" alt="Styleshare Logo" />
+                            <span className="ml-4 text-2xl font-semibold whitespace-nowrap text-white">
+                                {t('footer.heading')}
+                            </span>
+                        </div>
+                        <div className='block  m-auto mt-10'>
+                            <div className='flex gap-4 justify-center md:justify-end'>
+                                <a href="https://github.com/VaibhavArora314/StyleShare" className="hover:scale-110 hover:shadow-[0_0_10px_2px_blue] transition-transform transition-shadow duration-300 ease">
+                                    <img src={github} alt="github" className='pointer w-14 h-14' />
+                                </a>
+                                <Link to='/app' className="hover:scale-110 hover:shadow-[0_0_10px_2px_blue] transition-transform transition-shadow duration-300 ease flex items-center justify-center p-2 text-white rounded-full focus:outline-none">
+                                    <FaHome size={35} />
+                                </Link>
+                            </div>
+                        </div>
                     </div>
                 </div>
-                <div className='md:w-3/4 md:flex'>
+                <div className='md:w-2/4 md:flex'>
                     <div className='md:w-1/3'>
                         <p className='text-gray-200 font-bold mt-8 md:mt-0'>{t('footer.company')}</p>
                         <ul className='text-gray-300 py-4'>
@@ -51,6 +63,12 @@ const Footer = () => {
                                     <CgProfile size={20} />
                                 </Link>
                             </li>
+                            <li className='py-1 cursor-pointer'>
+                                <Link className='flex items-center gap-1' to='/app/leaderboard'>
+                                    {t('navbar.links.leaderboard')}
+                                    <CgBoard size={20} />
+                                </Link>
+                            </li>
                         </ul>
                     </div>
                     <div className='md:w-1/3'>
@@ -68,19 +86,28 @@ const Footer = () => {
                         </ul>
                     </div>
                 </div>
+                <div className='md:w-4/4 md:flex flex-col'>
+                    <div className="m-2 font-bold mb-5">{ t('footer.subscribe') }</div>
+                    <form className="md:flex flex-col gap-3">
+                        <div className="flex">
+                            <label className="p-2  border-2 border-white text-2xl"><FaPortrait/></label>
+                            <input type="text" className="p-2 " placeholder="Full Name"/>
+                        </div>
+                        <div className="flex">
+                            <label className="p-2  border-2 border-white text-2xl"><FaEnvelope/></label>
+                            <input type="email" className="p-2" placeholder="Email"/>
+                        </div>
+                        <button className="border-2 p-2 hover:text-black hover:bg-white border-white">{ t('footer.sub_button') }</button>
+                    </form>
+                </div>
             </div>
-           <div className='block w-3/4 m-auto mt-10'>
-                    <div className='flex gap-4 justify-center md:justify-end'>
-                  <a href="https://github.com/VaibhavArora314/StyleShare" className="hover:scale-110 hover:shadow-[0_0_10px_2px_blue] transition-transform transition-shadow duration-300 ease">
-                   <img src={github} alt="github" className='pointer w-14 h-14' />
-                   </a>
-                 <Link to='/app' className="hover:scale-110 hover:shadow-[0_0_10px_2px_blue] transition-transform transition-shadow duration-300 ease flex items-center justify-center p-2 text-white rounded-full focus:outline-none">
-                   <FaHome size={35} />
-                  </Link>
-                   </div>
-          </div>
 
-            <div className='mt-10 text-gray-300 xl:flex justify-center text-md lg:text-xl xl:text-md'>{t('footer.copy1')} {currentYear}{t('footer.copy2')}</div>
+            <hr className="mt-10"/>
+            <div className='mt-5 text-gray-300 xl:flex justify-center text-md lg:text-xl xl:text-md gap-5'>
+                <div>{ t('footer.accessibility') } </div>|
+                <div>{t('footer.copy1')} {currentYear}{t('footer.copy2')} </div> |
+                <div>{ t('footer.conduct') }</div>
+            </div>
         </div>
     )
 }

frontend/src/locales/en/translation.json

@@ -34,14 +34,19 @@
     "footer":{
         "heading":"Style Share",
         "company":"Company",
+        "subscribe" : "Subscribe to get latest update",
+        "sub_button": "Get Updated",
+        "accessibility" : "Accessibility Statement",
+        "conduct" : "Supplier Code of Conduct",
         "c":{
             "l1":"About Us",
             "l2":"Contact Us"
         },
         "quick":"Quick Links",
         "q":{
             "q1":"All Posts",
-            "q2":"User profile"
+            "q2":"User profile",
+            "q3": "Leader Board"
         },
         "legal":"Legal Pages",
         "l":{

frontend/src/locales/guj/translation.json

@@ -34,6 +34,10 @@
     "footer":{
         "heading":"સ્ટાઇલ શેર",
         "company":"કંપની",
+        "accessibility" : "",
+        "conduct" : "",
+        "sub_button":"અપડેટ મેળવો",
+        "subscribe" : "નવીનતમ અપડેટ મેળવવા માટે સબ્સ્ક્રાઇબ કરો",
         "c":{
             "l1":"અમારા વિશે",
             "l2":"અમારો સંપર્ક કરો"

frontend/src/locales/hi/translation.json

@@ -34,6 +34,10 @@
         "footer": {
             "heading": "स्टाइल शेयर",
             "company": "कंपनी",
+            "accessibility" : "",
+            "conduct" : "",
+            "sub_button":"अपडेट हो जाओ",
+            "subscribe" : "नवीनतम अपडेट पाने के लिए सदस्यता लें",
             "c": {
                 "l1": "हमारे बारे में",
                 "l2": "हमसे संपर्क करें"

frontend/src/locales/mh/translation.json

@@ -33,6 +33,10 @@
     "footer": {
         "heading": "स्टाइल शेअर",
         "company": "कंपनी",
+      "accessibility" : "",
+      "conduct" : "",
+      "sub_button":"अद्यतनित करा",
+      "subscribe" : "नवीनतम अपडेट मिळविण्यासाठी सदस्यता घ्या",
         "c": {
             "l1": "आमच्याबद्दल",
             "l2": "आमच्याशी संपर्क साधा"

frontend/src/locales/tam/translation.json

@@ -34,6 +34,10 @@
     "footer":{
         "heading":"ஸ்டைல் ஷேர்",
         "company":"நிறுவனம்",
+        "accessibility" : "",
+        "conduct" : "",
+        "sub_button":"புதுப்பிக்கப்படும்",
+        "subscribe" : "சமீபத்திய புதுப்பிப்பைப் பெற குழுசேரவும்",
         "c":{
             "l1":"எங்களை பற்றி",
             "l2":"தொடர்பு கொள்ளுங்கள்"

frontend/src/locales/tel/translation.json

@@ -34,6 +34,10 @@
     "footer":{
         "heading":"స్టైల్ షేర్",
         "company":"కంపెనీ",
+        "accessibility" : "",
+        "conduct" : "",
+        "sub_button":"నవీకరించబడండి",
+        "subscribe" : "తాజా నవీకరణను పొందడానికి సభ్యత్వాన్ని పొందండి",
         "c":{
             "l1":"మా గురించి",
             "l2":"మమ్మల్ని సంప్రదించండి"

frontend/src/locales/ur/translation.json

@@ -34,6 +34,10 @@
     "footer":{
         "heading":"اسٹائل شیئر",
         "company":"کمپنی",
+        "accessibility" : "",
+        "conduct" : "",
+        "sub_button":"اپ ڈیٹ ہو جاؤ",
+        "subscribe" : "تازہ ترین اپ ڈیٹ حاصل کرنے کے لیے سبسکرائب کریں۔",
         "c":{
             "l1":"ہمارے بارے میں",
             "l2":"ہم سے رابطہ کریں"

frontend/src/locales/wb/translation.json

@@ -34,6 +34,10 @@
     "footer":{
         "heading":"স্টাইল শেয়ার",
         "company":"কোম্পানি",
+        "accessibility" : "",
+        "conduct" : "",
+        "sub_button":"আপডেট পেতে",
+        "subscribe":"সর্বশেষ আপডেট পেতে সাবস্ক্রাইব করুন",
         "c":{
             "l1":"আমাদের সম্পর্কে",
             "l2":"যোগাযোগ করুন"