feat: home page in product hunt notification

apps/next/public/static/locales/en/common.json

@@ -33,7 +33,7 @@
     "created_word": "Word created successfully."
   },
   "announcement": {
-    "description": "We have <span className='font-semibold'>amazing news,</span> just for you! Learn from our blog!",
+    "description": "Support us on Product Hunt!",
     "button": "See More"
   },
   "feedback": {

apps/next/public/static/locales/tr/common.json

@@ -32,7 +32,7 @@
     "signin_success": "Giriş başarılı, anasayfaya yönlendiriliyorsunuz."
   },
   "announcement": {
-    "description": "Size özel <span className='font-semibold'>harika haberlerimiz</span> var! Blogumuzdan öğrenin!",
+    "description": "Bizi Product Hunt'da destekleyin!",
     "button": "Daha Fazla Gör"
   },
   "navbar": {

apps/next/src/components/Layout/MainLayout/Banner/index.tsx

@@ -1,8 +1,9 @@
-import { useState } from "react";
-import { PartyPopper } from "lucide-react";
-import { useTranslation } from "next-i18next";
-
+import ProductHunt from "./product.hunt";
+import PartyPopper from "/public/images/party-popper.svg";
 import { Button } from "@wordigo/ui";
+import { useTranslation } from "next-i18next";
+import Image from "next/image";
+import { useState } from "react";
 
 const Banner = () => {
   const { t } = useTranslation();
@@ -15,18 +16,21 @@ const Banner = () => {
   return (
     isBannerOpen && (
       <section className="w-full border-b py-3">
-        <div className="max-w-[90rem] max-lg:w-full px-20 max-md:px-4 flex items-center mx-auto justify-between">
+        <div className="max-w-[90rem] max-lg:w-full px-20 max-md:px-4 flex items-center mx-auto justify-center">
           <div className="flex items-center">
-            <div className="w-10 h-10 p-2.5 border rounded-[0.5rem] mr-4">
-              <PartyPopper className="w-5 h-5 animate-pulse" />
+            <div className="w-11 h-11 p-2 border rounded-[0.5rem] mr-4">
+              <Image
+                className="animate-pulse"
+                alt=""
+                src={"/images/party-popper.png"}
+                width={43}
+                height={43}
+              />
             </div>
-            <p className="text-sm" dangerouslySetInnerHTML={{ __html: t("announcement.description") }}></p>
-          </div>
-          <div className="flex items-center">
-            <Button variant="default">{t("announcement.button")}</Button>
-            {/* <Button variant="ghost" onClick={closeBanner}>
-                <X className="w-4 h-4" />
-              </Button> */}
+            <p className="text-sm font-semibold mr-4">
+              {t("announcement.description")}
+            </p>
+            <ProductHunt width="200px" height="43.19px" />
           </div>
         </div>
       </section>

apps/next/src/components/Layout/MainLayout/Banner/product.hunt.tsx

@@ -0,0 +1,25 @@
+import { useTheme } from "next-themes";
+import React from "react";
+
+export default function ProductHunt({ height, width }: any) {
+  const { theme } = useTheme();
+  console.log(theme, "theme");
+
+  return (
+    <a
+      href="https://www.producthunt.com/products/devsozluk/reviews?utm_source=badge-product_review&utm_medium=badge&utm_souce=badge-devsozluk"
+      target="_blank"
+    >
+      <img
+        src={
+          "https://api.producthunt.com/widgets/embed-image/v1/product_review.svg?product_id=549647&theme=" +
+          theme
+        }
+        alt="DevS&#0246;zl&#0252;k - Open&#0032;source&#0032;social&#0032;platform&#0032;for&#0032;developers&#0046; | Product Hunt"
+        className="width: 250px; height: 54px;"
+        width={width}
+        height={height}
+      />
+    </a>
+  );
+}

apps/next/src/components/Layout/MainLayout/index.tsx

@@ -1,7 +1,6 @@
-import { type PropsWithChildren } from "react";
-
 import Banner from "./Banner";
 import HomeHeader from "./Header";
+import { type PropsWithChildren } from "react";
 
 const MainLayout: React.FC<PropsWithChildren> = ({ children }) => {
   return (