feat: Adding berachain

package.json

@@ -42,6 +42,7 @@
     "fontaine": "^0.5.0",
     "graphql": "^16.9.0",
     "graphql-request": "^7.1.2",
+    "gsap": "^3.12.5",
     "i18next": "^23.16.5",
     "i18next-resources-for-ts": "^1.5.0",
     "i18next-resources-to-backend": "^1.2.1",

src/app/[lng]/berachain/explore/[slug]/page.tsx

@@ -0,0 +1,65 @@
+import { type Metadata } from 'next';
+import { siteName } from 'src/app/lib/metadata';
+import BerachainExplorePage from 'src/app/ui/berachain/BerachainExplorePage';
+import { berachainMarkets } from 'src/components/Berachain/const/berachainExampleData';
+import { getSiteUrl } from 'src/const/urls';
+import { sliceStrToXChar } from 'src/utils/splitStringToXChar';
+
+export async function generateMetadata({
+  params,
+}: {
+  params: { slug: string };
+}): Promise<Metadata> {
+  try {
+    const beraMarket = await berachainMarkets.filter(
+      (market) => market.protocol.slug === params.slug,
+    );
+
+    if (!beraMarket) {
+      throw new Error();
+    }
+
+    const openGraph: Metadata['openGraph'] = {
+      title: 'Jumper | Berachain',
+      description: 'Dive into the Berachain universe!',
+      siteName: siteName,
+      url: `${getSiteUrl()}/berachain/explore/${params.slug}`,
+      // images: [
+      //   {
+      //     url: `${article.url}${articleData.Image.data.attributes?.url}`,
+      //     width: 900,
+      //     height: 450,
+      //     alt: 'banner image',
+      //   },
+      // ],
+      // type: 'article',
+    };
+
+    return {
+      title: `Jumper Learn | ${sliceStrToXChar(beraMarket[0].protocol.name, 45)}`,
+      description: `Description of ${beraMarket[0].protocol.name}`,
+      alternates: {
+        canonical: `${getSiteUrl()}/berachain/explore/${params.slug}`,
+      },
+      twitter: openGraph,
+      openGraph,
+    };
+  } catch (err) {
+    return {
+      title: `Jumper Learn | ${sliceStrToXChar(params.slug.replaceAll('-', ' '), 45)}`,
+      description: `This is the description for the article "${params.slug.replaceAll('-', ' ')}".`,
+    };
+  }
+}
+
+export default async function Page({ params }: { params: { slug: string } }) {
+  const berachainProtocol = await berachainMarkets.filter(
+    (market) => market.protocol.slug === params.slug,
+  );
+
+  return (
+    <BerachainExplorePage
+      market={berachainProtocol.length > 0 ? berachainProtocol[0] : undefined}
+    />
+  );
+}

src/app/[lng]/berachain/explore/page.tsx

@@ -0,0 +1,14 @@
+import { type Metadata } from 'next';
+import BerachainExploreMarketsPage from 'src/app/ui/berachain/BerachainExploreMarketPage';
+
+export const metadata: Metadata = {
+  title: 'Jumper | Berachain',
+  description: 'Dive into the Berachain universe!',
+  alternates: {
+    canonical: `${process.env.NEXT_PUBLIC_SITE_URL}/berachain`,
+  },
+};
+
+export default async function Page() {
+  return <BerachainExploreMarketsPage />;
+}

src/app/[lng]/berachain/layout.tsx

@@ -0,0 +1,13 @@
+import type { Metadata } from 'next';
+import type { PropsWithChildren } from 'react';
+import { Layout } from 'src/Layout';
+
+export const metadata: Metadata = {
+  other: {
+    'partner-theme': 'berachain',
+  },
+};
+
+export default async function BeraChainLayout({ children }: PropsWithChildren) {
+  return <Layout>{children}</Layout>;
+}

src/app/[lng]/berachain/page.tsx

@@ -0,0 +1,14 @@
+import { type Metadata } from 'next';
+import BerachainPage from 'src/app/ui/berachain/BerachainPage';
+
+export const metadata: Metadata = {
+  title: 'Jumper | Berachain',
+  description: 'Dive into the Berachain universe!',
+  alternates: {
+    canonical: `${process.env.NEXT_PUBLIC_SITE_URL}/berachain`,
+  },
+};
+
+export default async function Page() {
+  return <BerachainPage />;
+}

src/app/ui/berachain/BerachainExploreMarketPage.tsx

@@ -0,0 +1,8 @@
+'use client';
+import { BerachainExplore } from 'src/components/Berachain/BerachainExplore';
+
+const BerachainExploreMarketsPage = () => {
+  return <BerachainExplore />;
+};
+
+export default BerachainExploreMarketsPage;

src/app/ui/berachain/BerachainExplorePage.tsx

@@ -0,0 +1,13 @@
+'use client';
+import { BerachainExploreProtocol } from 'src/components/Berachain/BerachainExploreProtocol';
+import type { BerachainMarketType } from 'src/components/Berachain/const/berachainExampleData';
+
+interface BerachainExplorePageProps {
+  market?: BerachainMarketType;
+}
+
+const BerachainExplorePage = ({ market }: BerachainExplorePageProps) => {
+  return <BerachainExploreProtocol market={market} />;
+};
+
+export default BerachainExplorePage;

src/app/ui/berachain/BerachainPage.tsx

@@ -0,0 +1,8 @@
+'use client';
+import { Berachain } from 'src/components/Berachain/Berachain';
+
+const BerachainPage = () => {
+  return <Berachain />;
+};
+
+export default BerachainPage;

src/components/AccordionFAQ/AccordionFAQ.style.ts

@@ -1,22 +1,23 @@
-import type { AccordionProps as MuiAccordionProps } from '@mui/material';
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
+import type { BoxProps } from '@mui/material';
 import {
   Box,
-  Container,
   Divider,
   IconButton,
   Accordion as MuiAccordion,
   AccordionDetails as MuiAccordionDetails,
+  AccordionSummary as MuiAccordionSummary,
+  Typography,
   type Breakpoint,
 } from '@mui/material';
 
-import { styled } from '@mui/material/styles';
+import { alpha, keyframes, styled } from '@mui/material/styles';
 
-export const AccordionContainer = styled(Container)(({ theme }) => ({
+export const AccordionBox = styled(Box)(({ theme }) => ({
   margin: 'auto',
-  marginTop: theme.spacing(4),
-  padding: theme.spacing(1, 2),
+  // marginTop: theme.spacing(4),
+  // padding: theme.spacing(1, 2),
   borderRadius: '8px',
-  background: theme.palette.surface1.main,
   position: 'relative',
   maxWidth: theme.breakpoints.values.md,
   width: '100% !important',
@@ -25,51 +26,89 @@ export const AccordionContainer = styled(Container)(({ theme }) => ({
       ? '0px 2px 4px rgba(0, 0, 0, 0.04), 0px 8px 16px rgba(0, 0, 0, 0.08)'
       : '0px 2px 4px rgba(0, 0, 0, 0.04), 0px 8px 16px rgba(0, 0, 0, 0.04)',
 
-  '&:before': {
-    content: '" "',
-    zIndex: '-1',
-    position: 'absolute',
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-    background: 'linear-gradient(to top left, #fff 0%, #fff 100% )',
-    filter: 'blur(20px)',
-    opacity: 'var(0.7)',
-    transition: 'opacity 0.3s',
-  },
   [theme.breakpoints.up('sm' as Breakpoint)]: {
     width: theme.breakpoints.values.md,
     maxWidth: theme.breakpoints.values.md,
   },
 }));
 
-export interface AccordionProps extends Omit<MuiAccordionProps, 'component'> {
+interface FaqShowMoreArrowProps {
+  arrowSize?: number;
+}
+
+export const rotateAnimation = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(180deg);
+  }
+`;
+
+export const FaqShowMoreArrow = styled(ArrowForwardIosIcon, {
+  shouldForwardProp: (prop) => prop !== 'arrowSize',
+})<FaqShowMoreArrowProps>(({ arrowSize }) => ({
+  width: arrowSize || 24,
+  height: arrowSize || 24,
+  transition: 'transform 0.3s ease',
+  transform: 'rotate(90deg)',
+}));
+
+export interface AccordionItemWrapperProps extends BoxProps {
   show?: boolean;
 }
 
-export const Accordion = styled(MuiAccordion, {
-  shouldForwardProp: (prop) => prop !== 'backgroundImageUrl',
-})<AccordionProps>(({ theme, show }) => ({
-  background: 'transparent',
-  visibility: show ? 'visible' : 'hidden',
-  height: show ? 'auto' : 0,
+export const AccordionItemWrapper = styled(Box)<AccordionItemWrapperProps>(
+  ({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    gap: theme.spacing(2),
+  }),
+);
+
+export const Accordion = styled(MuiAccordion)(({ theme, sx }) => ({
+  fontFamily: 'inherit',
+  borderRadius: '16px',
+  padding: theme.spacing(2, 3),
+  width: '100%',
+  background: alpha(theme.palette.text.primary, 0.08),
+  minHeight: 64,
+  transition: 'background-color 300ms ease-in-out',
+  // visibility: show ? 'visible' : 'hidden',
+  // height: show ? 'auto' : 0,
   '&:last-of-type': {
-    marginBottom: show ? theme.spacing(2) : 0,
+    borderRadius: '16px',
+  },
+
+  '&:hover': {
+    background: alpha(theme.palette.text.primary, 0.16),
   },
 }));
 
-export const AccordionDetails = styled(MuiAccordionDetails)<AccordionProps>(
-  () => ({
-    '& > img': { width: '100%' },
-  }),
-);
+export const AccordionDetails = styled(MuiAccordionDetails)(() => ({
+  '& > img': { width: '100%' },
+}));
+
+export const AccordionTitle = styled(Typography)(({ theme }) => ({
+  color: theme.palette.text.primary,
+  margin: theme.spacing(2, 'auto'),
+  marginBottom: theme.spacing(4),
+  textAlign: 'center',
+}));
 
 export const AccordionToggleButton = styled(IconButton)(({ theme }) => ({
-  width: 42,
-  height: 42,
-  color:
-    theme.palette.mode === 'dark' ? theme.palette.white.main : 'currentColor',
+  background: alpha(theme.palette.text.primary, 0.08),
+  color: theme.palette.text.primary,
+  transition: 'background-color 300ms ease-in-out',
+  width: 32,
+  height: 32,
+  backgroundColor: alpha(theme.palette.text.primary, 0.08),
+
+  '&:hover': {
+    color: theme.palette.text.primary,
+    background: alpha(theme.palette.text.primary, 0.16),
+  },
 }));
 
 export const AccordionHeader = styled(Box)(() => ({
@@ -79,7 +118,24 @@ export const AccordionHeader = styled(Box)(() => ({
 }));
 
 export const AccordionDivider = styled(Divider)(({ theme }) => ({
-  ...(theme.palette.mode === 'dark' && {
-    borderColor: theme.palette.grey[200],
-  }),
+  borderColor: alpha(theme.palette.text.primary, 0.08),
+}));
+
+export const AccordionSummary = styled(MuiAccordionSummary)(({ theme }) => ({
+  minHeight: 'inherit',
+  '& .MuiAccordionSummary-content': {
+    alignItems: 'center',
+    gap: theme.spacing(1.5),
+  },
+}));
+
+export const AccordionIndex = styled(Box)(({ theme }) => ({
+  borderRadius: '16px',
+  height: 32,
+  width: 32,
+  flexShrink: 0,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  background: alpha(theme.palette.text.primary, 0.08),
 }));