feat: add poromtional langinh

pages/index.js

@@ -23,15 +23,115 @@ export default function Home({ data_NEWS }) {
           .fix-col {
             flex-direction: row;
           }
+          .opening-announcement {
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 2rem;
+            width: min(1180px, calc(100% - 2rem));
+            margin: 2rem auto;
+            padding: clamp(2rem, 5vw, 3.5rem);
+            overflow: hidden;
+            border-radius: 1.5rem;
+            color: #fff;
+            background: linear-gradient(120deg, #0b3942, #147778);
+            box-shadow: 0 20px 50px rgba(13, 83, 88, 0.18);
+            direction: rtl;
+          }
+          .opening-announcement::after {
+            content: '';
+            position: absolute;
+            width: 360px;
+            height: 360px;
+            left: -140px;
+            bottom: -230px;
+            border: 1px solid rgba(255, 255, 255, 0.17);
+            border-radius: 50%;
+            box-shadow: 0 0 0 65px rgba(255, 255, 255, 0.035);
+            pointer-events: none;
+          }
+          .opening-copy,
+          .opening-actions {
+            position: relative;
+            z-index: 1;
+          }
+          .opening-copy {
+            max-width: 720px;
+          }
+          .opening-label {
+            display: inline-block;
+            margin-bottom: 0.8rem;
+            color: #a5eee6;
+            font-size: 0.85rem;
+            font-weight: 700;
+          }
+          .opening-copy h2 {
+            margin: 0;
+            color: #fff;
+            font-size: clamp(1.55rem, 3vw, 2.5rem);
+            font-weight: 800;
+            line-height: 1.5;
+          }
+          .opening-copy p {
+            margin: 1rem 0 0;
+            color: rgba(255, 255, 255, 0.82);
+            font-size: 0.95rem;
+            line-height: 2;
+          }
+          .opening-button {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            min-height: 50px;
+            padding: 0.8rem 1.4rem;
+            border-radius: 0.8rem;
+            color: #083b40;
+            background: #a5eee6;
+            font-size: 0.9rem;
+            font-weight: 700;
+            white-space: nowrap;
+            transition: background 180ms ease, transform 180ms ease;
+          }
+          .opening-button:hover {
+            color: #083b40;
+            background: #c5f8f2;
+            text-decoration: none;
+            transform: translateY(-2px);
+          }
+          @media screen and (max-width: 800px) {
+            .opening-announcement {
+              flex-direction: column;
+              align-items: flex-start;
+              gap: 1.5rem;
+            }
+          }
           @media screen and (max-width: 639px) {
             .fix-col {
               flex-direction: column;
             }
+            .opening-announcement {
+              width: calc(100% - 1.25rem);
+              margin: 1.25rem auto;
+              border-radius: 1rem;
+            }
           }
         `}
       </style>
       <AppContainer>
         <Slider />
+        <section className='opening-announcement' aria-labelledby='opening-announcement-title'>
+          <div className='opening-copy'>
+            <span className='opening-label'>اطلاع‌رسانی افتتاح</span>
+            <h2 id='opening-announcement-title'>در چند قدمی افتتاح بیمارستان مهر ایرانیان</h2>
+            <p>اخبار و زمان دقیق افتتاح بیمارستان از طریق همین وب‌سایت اطلاع‌رسانی خواهد شد.</p>
+          </div>
+          <div className='opening-actions'>
+            <Link href='/landing'>
+              <a className='opening-button'>آشنایی با بیمارستان</a>
+            </Link>
+          </div>
+        </section>
         <br />
         <div className='lg:mx-20 sm:mx-5'>
           <SimpleGrid spacing={15} columns={[1, 2, 2]}>