add britlex project

app/components/Work.tsx

@@ -2,7 +2,7 @@ import Image from 'next/image'
 import Stocks from '../../public/Stocks.png'
 import Game from '../../public/Game.png'
 import Qpos from '../../public/qpos.png'
-// import Starwars from '../../public/Starwars.png'
+import Britlex from '../../public/Britlex.png'
 
 import { DM_Mono } from 'next/font/google'
 
@@ -110,6 +110,82 @@ export default function Work() {
           </div>
         </li>
 
+        <li className="relative overflow-hidden rounded-lg px-[24px] py-[30px] md:py-0 lg:px-0">
+          <Image
+            src={Britlex}
+            alt="Britlex"
+            loading="eager"
+            className="absolute top-0 left-0 z-[-1] h-full w-full rounded-2xl blur-[40px] md:left-[40%] md:max-w-[calc(60%-24px)] md:blur-[5px] lg:left-[47%] lg:max-w-[53%]"
+          />
+
+          <div>
+            <p
+              className={`${mono.className} text-[14px] text-secondary md:text-[15px]`}
+            >
+              Featured Project
+            </p>
+            <h3 className="text-[23px] font-bold text-main md:text-[25px] xl:text-[27px]">
+              Britlex
+            </h3>
+            <p className="mt-[30px] text-[16px] md:block md:w-[60%] md:rounded-md md:bg-[#e0e7ff] md:py-[20px] md:px-[30px] md:text-[17px] lg:w-[53%] xl:text-[18px]">
+              Landing page for online language school. Responsive UI, eye
+              catching design.
+            </p>
+
+            <ul
+              className={`${mono.className} mt-[30px] flex flex-wrap justify-start gap-x-3 text-[14px] leading-[23px] md:text-[15px]`}
+            >
+              <li>Next.js</li>
+              <li>React</li>
+              <li>Tailwind</li>
+              <li>HTML</li>
+            </ul>
+
+            <div className="mt-[16px] ml-[-8px] mb-[-8px] flex items-center justify-start md:mb-0">
+              <a
+                href="https://github.com/davbazz/Britlex"
+                target="_blank"
+                className="cursor-pointer p-[8px]"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  className="feather feather-github h-5 w-5 fill-none hover:stroke-secondary"
+                >
+                  <title>GitHub</title>
+                  <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
+                </svg>
+              </a>
+              <a
+                href="https://britlex-linguistics.vercel.app/"
+                target="_blank"
+                className="cursor-pointer p-[8px]"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  className="feather feather-external-link h-[21px] w-[22px] fill-none hover:stroke-secondary"
+                >
+                  <title>External Link</title>
+                  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
+                  <polyline points="15 3 21 3 21 9"></polyline>
+                  <line x1="10" y1="14" x2="21" y2="3"></line>
+                </svg>
+              </a>
+            </div>
+          </div>
+        </li>
+
         <li className="relative overflow-hidden rounded-lg px-[24px] py-[30px] md:py-0 lg:px-0">
           <Image
             src={Stocks}