Merge pull request #82 from iranpsc/newspage

add ad section

Author: theAwmin

public/adNews.png

@@ -114,7 +114,19 @@ export default async function LangLayout({
             </Suspense>
 
             <div className='flex flex-col w-full h-screen overflow-y-auto light-scrollbar dark:dark-scrollbar'>
-              <Suspense fallback={<div>Loading Content...</div>}>
+              <Suspense fallback={<div className="fixed top-0 left-0 bottom-0  w-full  h-screen !z-[70] flex items-center justify-center bg-black/60 backdrop-blur-sm" >
+                    <div className="container flex w-full h-screen items-center justify-center md:ms-[25vw] lg:ms-[17vw] xl:ms-[15vw] 3xl:ms-[16vw]">
+                        <div className="holder">
+                            <div className="box"></div>
+                        </div>
+                        <div className="holder">
+                            <div className="box"></div>
+                        </div>
+                        <div className="holder">
+                            <div className="box"></div>
+                        </div>
+                    </div>
+                </div>}>
                 {children}
                 <div className="w-full xl:px-32 lg:px-32 md:px-5 sm:px-5 xs:px-1 bg-[#f8f8f8] dark:bg-black">
                   <FooterClient footerTabs={footerTabs} mainData={mainData} params={resolvedParams} />
@@ -123,7 +135,7 @@ export default async function LangLayout({
             </div>
 
             <a
-              href="https://t.me/metargb"
+              href="https://web.bale.ai/chat?uid=4677411537"
               aria-label="Join us on Telegram"
               target='_blank'
               title="همکاری در توسعه متارنگ"

src/app/[lang]/layout.tsx

@@ -139,9 +139,9 @@ export default function NewsGallerySimple({ gallery, mainImage , params }: NewsG
     <>
       {/* پیش‌نمایش گالری گرید - تعداد متغیر بر اساس دستگاه */}
       <div className="w-full my-8">
-        <div className={`grid gap-3 md:gap-4 ${
+        <div className={`grid gap-3 md:gap-3 ${
           displayCount === 4 
-            ? 'grid-cols-4' // موبایل: 4 ستون
+            ? 'grid-cols-2' // موبایل: 4 ستون
             : 'grid-cols-3' // دسکتاپ: 3 ستون
         }`}>
           {previewImages.map((img, idx) => (

src/app/[lang]/news/categories/[category]/[slug]/components/NewsGallery.tsx

@@ -0,0 +1,35 @@
+// components/WindowsNews.tsx
+import React from 'react';
+import Image from 'next/image';
+
+const WindowsNews = () => {
+    return (
+        <div className=" mx-auto w-full bg-gradient-to-r to-light-primary from-blue-400 dark:to-dark-yellow dark:from-yellow-600 rounded-xl  overflow-hidden  my-10 p-5">
+            <div className="p-6 flex flex-col md:flex-row justify-between" dir="rtl">
+                <div className='w-[300px] mx-auto lg:mx-0 relative'>
+                    <div className='bg-[#5d9eff80] dark:bg-[#d8a90054] w-[240px] h-[240px] rounded-full relative z-0' />
+                    <Image src={'/adNews.png'} fill alt={'ad pic'} className=' w-full max-w-[270px] !h-auto z-10 my-auto ms-[-15px]' />
+                </div>
+                <div className=" flex flex-col gap-4">
+                    <p className="text-xl lg:text-3xl font-rokh font-bold text-white dark:text-black">
+                        عرضه‌ی جدیدترین نسخه ویندوز به بازار
+                    </p>
+                    <p className='text-white dark:text-black max-w-3xl'>
+                        ماکروسافت نسخه جایگزین ویندوز ۸.۱ را با نام ویندوز ۱۰ به صورت رسمی منتشر کرد.
+                        ماکروسافت منوی استارترا که با معرفی ویندوز ۸ حذف شده بود،
+                        به محیط دسکتاپ ویندوز ۱۰ بازگردانده است. سیستم جستجو در ویندوز ۱۰ بهبود یافته و
+                        پشتیبانی از ماوس و صفحه‌کلید نیز بهتر شده است.
+                    </p>
+                </div>
+
+                <div className=" flex items-center lg:items-end lg:pe-10">
+                    <button className="bg-black w-max text-light-primary dark:text-dark-yellow font-bold py-3 px-6 rounded-lg transition duration-300 shadow-md flex items-center gap-2">
+                        آموزش نصب
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default WindowsNews;

src/app/[lang]/news/categories/[category]/[slug]/components/WindowsNews.tsx

@@ -24,6 +24,8 @@ import CustomErrorPage from "@/components/shared/CustomErrorPage";
 import CleanAutoRetryParam from "@/components/shared/CleanAutoRetryParam";
 import NewsTags from "./components/NewsTags";
 import fallbackNewsData from "@/components/utils/news.json";
+import WindowsNews from "./components/WindowsNews"
+import Link from "next/link";
 
 interface NewsPageProps {
   params: Promise<{
@@ -395,6 +397,19 @@ export default async function NewsPage({ params }: NewsPageProps) {
           type="application/ld+json"
           dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
         />
+        <div className="fixed z-[1000] end-10 bottom-[100px]">
+          <Link href={"#em"}  className="bg-light-primary dark:bg-dark-yellow rounded-full w-[60px] h-[60px]  flex items-center justify-center">
+
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path className="stroke-white dark:stroke-black" d="M22 11.5V15.5C22 19 20 20.5 17 20.5H7C4 20.5 2 19 2 15.5V8.5C2 5 4 3.5 7 3.5H12"  stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+              <path className="stroke-white dark:stroke-black" d="M7 9L11 11.5C12.048 12.2897 13.952 11.2897 15 10.5"  stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+              <path d="M19.0062 1.96875C17.9029 1.96875 17.0062 2.86542 17.0062 3.96875V4.93208C17.0062 5.13542 16.9195 5.44542 16.8162 5.61875L16.4329 6.25542C16.1962 6.64875 16.3595 7.08542 16.7929 7.23208C18.2295 7.71208 19.7795 7.71208 21.2162 7.23208C21.6195 7.09875 21.7962 6.62208 21.5762 6.25542L21.1929 5.61875C21.0929 5.44542 21.0062 5.13542 21.0062 4.93208V3.96875C21.0062 2.86875 20.1062 1.96875 19.0062 1.96875Z" stroke="#18C08F" stroke-miterlimit="10" stroke-linecap="round" />
+              <path className="stroke-white dark:stroke-black"  d="M19.623 2.06844C19.5196 2.03844 19.413 2.0151 19.303 2.00177C18.983 1.96177 18.6763 1.9851 18.3896 2.06844C18.4863 1.82177 18.7263 1.64844 19.0063 1.64844C19.2863 1.64844 19.5263 1.82177 19.623 2.06844Z"  stroke-width="0.8" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+              <path className="stroke-white dark:stroke-black" d="M20.0068 7.35156C20.0068 7.90156 19.5568 8.35156 19.0068 8.35156C18.7335 8.35156 18.4802 8.23823 18.3002 8.05823C18.1202 7.87823 18.0068 7.6249 18.0068 7.35156"  stroke-miterlimit="10" />
+            </svg>
+
+          </Link>
+        </div>
         <CleanAutoRetryParam />
         <section className="w-full overflow-y-auto relative bg-[#f8f8f8] dark:bg-black mt-[60px] lg:mt-0">
           <div className="px-5 2xl:px-10">
@@ -431,7 +446,7 @@ export default async function NewsPage({ params }: NewsPageProps) {
                   params={resolvedParams}
                   mainData={mainData}
                 />
-                <NewsContent content={news.content} gallery={news.gallery} params={resolvedParams}/>
+                <NewsContent content={news.content} gallery={news.gallery} params={resolvedParams} />
                 <NewsStats
                   stats={news.stats}
                   category={news.category}
@@ -451,16 +466,18 @@ export default async function NewsPage({ params }: NewsPageProps) {
               <div className="w-full mt-10 space-y-28">
                 <ShowSocialWrapper params={resolvedParams} mainData={mainData} news={news} />
                 <PrevNextNews params={resolvedParams} news={categoryNews || []} mainData={mainData} />
+                <WindowsNews />
               </div>
             </div>
             <div className="w-full hidden lg:block lg:w-[30%] 3xl:w-[20%] sticky top-5">
               <SideCard params={resolvedParams} mainData={mainData} />
             </div>
           </div>
           <div className="ps-5 lg:ps-10 w-full flex items-center mt-14 lg:mt-20 flex-col gap-14">
+
             <PopularNews params={resolvedParams} mainData={mainData} initialNews={[]} />
           </div>
-          <div className="w-full px-5 flex flex-col items-center mt-10">
+          <div id="em" className="w-full px-5 flex flex-col items-center mt-10">
             <svg xmlns="http://www.w3.org/2000/svg" width="364" height="364" viewBox="0 0 364 364" fill="none" className="mb-[-140px] dark:hidden">
               <path d="M333.666 174.419V235.086C333.666 288.169 303.333 310.919 257.833 310.919H106.166C60.6663 310.919 30.333 288.169 30.333 235.086V128.919C30.333 75.8359 60.6663 53.0859 106.166 53.0859H182" stroke="url(#paint0_linear_4633_15252)" strokeWidth="6" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
               <path d="M106.167 136.5L166.834 174.417C182.728 186.394 211.606 171.228 227.5 159.25" stroke="url(#paint1_linear_4633_15252)" strokeWidth="6" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />