From e2ae3b96d3ef3bab1884c6b4ad1c3acd988c3e77 Mon Sep 17 00:00:00 2001
From: Leon Talbert <leon.talbert@gmail.com>
Date: Sun, 10 Nov 2024 23:59:02 +0700
Subject: [PATCH] Remove carousel for now

---
 src/pages/ens-v2.tsx | 58 ++++++++++++++++++++++++++++++++++++++------
 1 file changed, 50 insertions(+), 8 deletions(-)

diff --git a/src/pages/ens-v2.tsx b/src/pages/ens-v2.tsx
index 8914398ca..3e1a7c50f 100644
--- a/src/pages/ens-v2.tsx
+++ b/src/pages/ens-v2.tsx
@@ -9,6 +9,7 @@ import {
   GasPumpSVG,
   // InfoCircleSVG,
   KeySVG,
+  mq,
   // QuestionBubbleSVG,
   // QuestionCircleSVG,
   // RightArrowSVG,
@@ -17,8 +18,6 @@ import {
   WalletSVG,
 } from '@ensdomains/thorin'
 
-import { Carousel } from '@app/components/pages/migrate/Carousel'
-
 // import DAOSVG from '../assets/DAO.svg'
 // import SocialX from '../assets/social/SocialX.svg'
 
@@ -120,7 +119,8 @@ const Main = styled.main(
 
 const AnnouncementBanner = styled.div(
   ({ theme }) => css`
-    height: ${theme.space.full};
+    width: 312px;
+    height: 182px;
     text-align: center;
     & > a {
       height: ${theme.space.full};
@@ -182,7 +182,23 @@ const CardHeader = styled.h3(
   `,
 )
 
-const AnnouncementSlide = ({
+// const AnnouncementSlide = ({
+//   title,
+//   text,
+//   href = '#',
+// }: {
+//   title: string
+//   text: string
+//   href?: string
+// }) => (
+//   <AnnouncementBanner>
+//     <Banner as="a" alert="info" target="_blank" rel="noopener noreferrer" href={href} title={title}>
+//       {text}
+//     </Banner>
+//   </AnnouncementBanner>
+// )
+
+const AnnouncementSlideTemp = ({
   title,
   text,
   href = '#',
@@ -198,6 +214,20 @@ const AnnouncementSlide = ({
   </AnnouncementBanner>
 )
 
+const AnnouncementContainer = styled.div(
+  ({ theme }) => css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: ${theme.space['4']};
+
+    ${mq.sm.min(css`
+      flex-direction: row;
+    `)}
+  `,
+)
+
 const SlideshowContainer = styled.div(
   ({ theme }) => css`
     display: flex;
@@ -295,11 +325,11 @@ export default function ENSv2() {
         <Typography asProp="h3" fontVariant="headingThree">
           {t('announcement.title')}
         </Typography>
-        <Carousel>
-          {/* <AnnouncementSlide
+        {/* <Carousel>
+          <AnnouncementSlide
             title={t('announcement.l2.title')}
             text={t('announcement.l2.caption')}
-          /> */}
+          />
           <AnnouncementSlide
             title={t('announcement.ensv2.title')}
             text={t('announcement.ensv2.caption')}
@@ -310,7 +340,19 @@ export default function ENSv2() {
             text={t('announcement.nextgen.caption')}
             href="https://blog.ens.domains/post/ensv2"
           />
-        </Carousel>
+        </Carousel> */}
+        <AnnouncementContainer>
+          <AnnouncementSlideTemp
+            title={t('announcement.ensv2.title')}
+            text={t('announcement.ensv2.caption')}
+            href="https://blog.ens.domains/post/ensv2-update"
+          />
+          <AnnouncementSlideTemp
+            title={t('announcement.nextgen.title')}
+            text={t('announcement.nextgen.caption')}
+            href="https://blog.ens.domains/post/ensv2"
+          />
+        </AnnouncementContainer>
       </SlideshowContainer>
       {/* <Footer as="footer">
         <Typography asProp="h3" fontVariant="headingThree">