diff --git a/src/assets/images/tosiscan-background-1x.jpg b/src/assets/images/tosiscan-background-1x.jpg
new file mode 100644
index 0000000..549128b
Binary files /dev/null and b/src/assets/images/tosiscan-background-1x.jpg differ
diff --git a/src/assets/images/tosiscan-bg-1440x88-2x-min.jpg b/src/assets/images/tosiscan-bg-1440x88-2x-min.jpg
new file mode 100644
index 0000000..c2cf5e2
Binary files /dev/null and b/src/assets/images/tosiscan-bg-1440x88-2x-min.jpg differ
diff --git a/src/assets/images/tosiscan-logo-center.svg b/src/assets/images/tosiscan-logo-center.svg
new file mode 100644
index 0000000..a73a446
--- /dev/null
+++ b/src/assets/images/tosiscan-logo-center.svg
@@ -0,0 +1,26 @@
+
diff --git a/src/assets/images/tosiscan-logo-header.svg b/src/assets/images/tosiscan-logo-header.svg
new file mode 100644
index 0000000..cbf00a1
--- /dev/null
+++ b/src/assets/images/tosiscan-logo-header.svg
@@ -0,0 +1,31 @@
+
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 2335440..53c558b 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -5,7 +5,7 @@ import { AppBar, Container, Toolbar, Link, List, ListItem } from '@mui/material'
import { styled } from '@mui/system'
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
-import { ReactComponent as Logo } from '../assets/images/logo-tosi-scan-white.svg'
+import { ReactComponent as Logo } from '../assets/images/tosiscan-logo-header.svg'
import { ReactComponent as LogoColors } from '../assets/images/logo-tosi-scan-colors.svg'
import { theme } from '../theme'
@@ -76,9 +76,11 @@ const Header = () => {
sx={{
paddingY: 1.25,
paddingX: 2,
- border: isDark ? '1px solid rgba(236, 253, 243, 0.5)' : '1px solid rgba(16, 24, 40, 0.05)',
+ border: '1px solid',
+ borderColor: isDark ? '#D4EF33 #D4EF33 #00D1FF #00D1FF ' : ' rgba(16, 24, 40, 0.05)',
borderRadius: '100px',
color: isDark ? 'white' : 'grey.800',
+ backgroundColor: isDark ? '#081010' : 'white',
}}
>
Become a publisher
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index 48bcac3..5a1f651 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -3,9 +3,8 @@ import React from 'react'
import { Box, Container, Typography } from '@mui/material'
import { styled } from '@mui/system'
-import { ReactComponent as Logo } from '../assets/images/logo-tosi-scan-white.svg'
-import BgHeroDecorationLeft from '../assets/images/bg-hero-decoration-left.svg'
-import BgHeroDecorationRight from '../assets/images/bg-hero-decoration-right.svg'
+import { ReactComponent as Logo } from '../assets/images/tosiscan-logo-center.svg'
+import TosiBackground from '../assets/images/tosiscan-background-1x.jpg'
import Header from './Header'
import Search from './Search'
@@ -13,36 +12,9 @@ import Search from './Search'
const Wrapper = styled(Box)(() => ({
position: 'relative',
minHeight: '389px',
- background:
- 'linear-gradient(117.62deg, #07939c -4.96%, #24b871 95.78%), ' +
- 'linear-gradient(90deg, #7f56d9 0%, #9e77ed 100%), ' +
- 'linear-gradient(90deg, #322272 0%, #5329ae 100%)',
-
- '&::before': {
- position: 'absolute',
- left: 0,
- bottom: 0,
- content: '""',
- width: '462px',
- height: '374px',
- backgroundImage: `url(${BgHeroDecorationLeft})`,
- backgroundSize: 'contain',
- backgroundRepeat: 'no-repeat',
- backgroundPosition: 'center center',
- },
-
- '&::after': {
- position: 'absolute',
- top: 0,
- right: 0,
- content: '""',
- width: '602px',
- height: '374px',
- backgroundImage: `url(${BgHeroDecorationRight})`,
- backgroundSize: 'contain',
- backgroundRepeat: 'no-repeat',
- backgroundPosition: 'center center',
- },
+ backgroundImage: `url(${TosiBackground})`,
+ backgroundPosition: 'center',
+ backgroundSize: 'cover',
}))
const Hero = () => (
diff --git a/src/components/SmallHero.tsx b/src/components/SmallHero.tsx
index b9a2677..09bd183 100644
--- a/src/components/SmallHero.tsx
+++ b/src/components/SmallHero.tsx
@@ -3,7 +3,7 @@ import React from 'react'
import { Box, Container } from '@mui/material'
import { styled } from '@mui/system'
-import BgHeroDecorationRight from '../assets/images/bg-hero-decoration-right.svg'
+import TosiBackground from '../assets/images/tosiscan-bg-1440x88-2x-min.jpg'
import Header from './Header'
import Search from './Search'
@@ -15,23 +15,9 @@ const Wrapper = styled(Box)(() => ({
alignItems: 'center',
justifyContent: 'center',
minHeight: '88px',
- background:
- 'linear-gradient(117.62deg, #07939c -4.96%, #24b871 95.78%), ' +
- 'linear-gradient(90deg, #7f56d9 0%, #9e77ed 100%), ' +
- 'linear-gradient(90deg, #322272 0%, #5329ae 100%)',
-
- '&::after': {
- position: 'absolute',
- top: 0,
- right: 0,
- content: '""',
- width: '602px',
- height: '374px',
- backgroundImage: `url(${BgHeroDecorationRight})`,
- backgroundSize: 'contain',
- backgroundRepeat: 'no-repeat',
- backgroundPosition: 'center center',
- },
+ backgroundImage: `url(${TosiBackground})`,
+ backgroundPosition: 'center',
+ backgroundSize: 'cover',
}))
export default function SmallHero() {