diff --git a/public/icons/discord.svg b/public/icons/discord.svg
new file mode 100644
index 0000000..3a0754f
--- /dev/null
+++ b/public/icons/discord.svg
@@ -0,0 +1,3 @@
+
diff --git a/public/icons/docs.svg b/public/icons/docs.svg
new file mode 100644
index 0000000..7ce97d7
--- /dev/null
+++ b/public/icons/docs.svg
@@ -0,0 +1,10 @@
+
diff --git a/public/icons/forum.svg b/public/icons/forum.svg
new file mode 100644
index 0000000..0f7b576
--- /dev/null
+++ b/public/icons/forum.svg
@@ -0,0 +1,3 @@
+
diff --git a/public/icons/x.svg b/public/icons/x.svg
new file mode 100644
index 0000000..3e47ac4
--- /dev/null
+++ b/public/icons/x.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/components/BU/BUHero.tsx b/src/components/BU/BUHero.tsx
index 4d65021..d65e19e 100644
--- a/src/components/BU/BUHero.tsx
+++ b/src/components/BU/BUHero.tsx
@@ -4,13 +4,45 @@ import Image from 'next/image'
import Link from 'next/link'
import { businessUnitMark } from '../../../utils/bu'
import { Button } from '../Button'
-import ArrowUpRight from '../Icons/ArrowUpRight'
interface Props {
data: any
}
export const BUHero = ({ data }: Props) => {
+ const renderSocialIcon = (label: string) => {
+ switch (label) {
+ case 'X':
+ return
+ case 'Discord':
+ return (
+
+ )
+ case 'Docs':
+ return (
+
+ )
+ case 'Forum':
+ return (
+
+ )
+ default:
+ return (
+
+ )
+ }
+ }
+
return (
@@ -83,10 +115,7 @@ export const BUHero = ({ data }: Props) => {
href={item.link}
target="_blank"
>
- {item?.label}
-
-
-
+ {renderSocialIcon(item?.label)}
))}
@@ -415,9 +444,14 @@ const CustomLink = styled(Link)`
}
`
-const IconContainer = styled.div`
- visibility: hidden;
- display: none;
+const SocialIcon = styled(Image)`
+ width: 24px;
+ height: 24px;
+
+ @media (max-width: ${breakpoints.sm}px) {
+ width: 18px;
+ height: 18px;
+ }
`
export default BUHero