Implement cryptoXR page

alephium · Jan 9, 2025 · d2d2a1f · d2d2a1f
1 parent 277dfbd
commit d2d2a1f
Show file tree

Hide file tree

Showing 17 changed files with 459 additions and 606 deletions.
diff --git a/src/components/AlephiumLogo.tsx b/src/components/AlephiumLogo.tsx
@@ -37,7 +37,7 @@ const AlephiumLogo = ({ className, fill = 'white', accentFill, gradientIndex, ..
             <g transform="matrix(0.46324,0,0,0.476693,63.1121,4506.2)">
               <motion.path
                 d="M561.888,18.859C561.888,6.522 552.173,-1.782 540.207,0.327L396.272,25.704C384.306,27.813 374.592,39.542 374.592,51.88L374.592,323.734C374.592,336.072 384.306,344.375 396.272,342.266L540.207,316.89C552.173,314.78 561.888,303.051 561.888,290.714L561.888,18.859Z"
-                fill={accentFill ?? 'url(#logo-accent-gradient)'}
+                fill={fill}
                 animate={{ rotateY: gradientIndex * 360 }}
                 transition={{ duration: 0.3 }}
               />

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -10,8 +10,8 @@ import Column from './Columns/Column'
 import ModalTeam from './ModalTeam'
 import ModalContact from './ModalContact'
 
-import Logo from '../images/svgs/logo.svg'
 import { graphql, useStaticQuery } from 'gatsby'
+import AlephiumLogo from './AlephiumLogo'
 
 export interface FooterContentType {
   footer: {
@@ -35,6 +35,7 @@ const Footer = ({ className }: FooterProps) => {
   const [isTeamModalOpen, setIsTeamModalOpen] = useState(false)
   const [isContactModalOpen, setIsContactModalOpen] = useState(false)
   const data = useStaticQuery<FooterContentType>(footerQuery)
+  const theme = useTheme()
 
   const content = data.footer.nodes[0].frontmatter
 
@@ -46,7 +47,7 @@ const Footer = ({ className }: FooterProps) => {
     <div className={className}>
       <PageSectionContainerStyled>
         <LogosSection>
-          <LogoStyled />
+          <LogoStyled gradientIndex={0} fill={theme.textTertiary} />
         </LogosSection>
         <Separator />
         <FooterColumnsSection gap="var(--spacing-4)">
@@ -111,7 +112,7 @@ export const footerQuery = graphql`
 
 export default styled(Footer)`
   padding: var(--spacing-12) 0;
-  background-color: ${({ theme }) => theme.bgTertiary};
+  background-color: ${({ theme }) => theme.bgPrimary};
   color: ${({ theme }) => theme.textPrimary};
   font-size: var(--fontSize-18);
   border-top: 1px solid ${({ theme }) => theme.separator};
@@ -120,6 +121,7 @@ export default styled(Footer)`
 const LogosSection = styled.div`
   display: flex;
   flex-direction: column;
+  justify-content: flex-start;
 `
 
 const Separator = styled.div`
@@ -165,14 +167,7 @@ const PageSectionContainerStyled = styled(PageSectionContainer)`
   }
 `
 
-const LogoStyled = styled(Logo)`
-  max-width: var(--width-82);
-
-  .dark {
-    fill: var(--color-logo-black-dark);
-  }
-
-  .light {
-    fill: var(--color-logo-black-light);
-  }
+const LogoStyled = styled(AlephiumLogo)`
+  height: auto;
+  max-width: 60px;
 `
diff --git a/src/components/TeamMember.tsx b/src/components/TeamMember.tsx
@@ -34,6 +34,9 @@ const TeamMemberContainer = styled.div`
   flex-direction: column;
   align-items: center;
   text-align: center;
+  border: 1px solid ${({ theme }) => theme.borderPrimary};
+  padding: 20px;
+  border-radius: 22px;
 `
 
 const TeamMemberName = styled(SimpleLink)`