Notification Update

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

@@ -33,8 +33,8 @@
     "created_word": "Word created successfully."
   },
   "announcement": {
-    "description": "We have <span className='font-semibold'>amazing news,</span> just for you! Learn from our blog!",
-    "button": "See More"
+    "description": "We're launching soon on",
+    "button": "get notified"
   },
   "feedback": {
     "title": "Feedback",

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

@@ -32,8 +32,8 @@
     "signin_success": "Giriş başarılı, anasayfaya yönlendiriliyorsunuz."
   },
   "announcement": {
-    "description": "Size özel <span className='font-semibold'>harika haberlerimiz</span> var! Blogumuzdan öğrenin!",
-    "button": "Daha Fazla Gör"
+    "description": "Yakında başlıyoruz",
+    "button": "haberdar ol"
   },
   "navbar": {
     "home": "Ana Sayfa",

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();
@@ -14,19 +15,18 @@ 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="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>
-            <p className="text-sm" dangerouslySetInnerHTML={{ __html: t("announcement.description") }}></p>
-          </div>
+      <section className="w-full border-b py-3 bg-[#FF6154] text-white">
+        <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">
-            <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">
+              {t("announcement.description")}
+            </p>
+            <Button className="px-1.5 h-5 rounded-sm font-bold bg-white text-[#FF6154] mx-2">
+              Product Hunt
+            </Button>
+            <p className="text-sm font-semibold mr-2">
+              {t("announcement.button")}
+            </p>
           </div>
         </div>
       </section>

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

@@ -0,0 +1,27 @@
+import { useTheme } from "next-themes";
+import React from "react";
+
+export default function ProductHunt({ height, width }: any) {
+  const { theme, systemTheme } = useTheme();
+
+  const themes =
+    theme === "system" ? systemTheme : theme === "dark" ? "ligth" : "dark";
+
+  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=" +
+          themes
+        }
+        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 (