add homepage component

sei-protocol · Nov 7, 2024 · 6e7ce9e · 6e7ce9e
1 parent 84afa6e
commit 6e7ce9e
Show file tree

Hide file tree

Showing 4 changed files with 218 additions and 24 deletions.
diff --git a/components/Homepage/SeiIntro.tsx b/components/Homepage/SeiIntro.tsx
@@ -0,0 +1,182 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Container,
+  Title,
+  Text,
+  Button,
+  Group,
+  useMantineTheme,
+  Transition,
+} from '@mantine/core';
+import { IconArrowRight, IconChevronDown } from '@tabler/icons-react';
+import v2BannerImg from '../../public/assets/sei-v2-banner.jpg';
+
+const SeiIntro: React.FC = () => {
+  const theme = useMantineTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const heroStyles = {
+    position: 'relative' as const,
+    height: '80vh',
+    backgroundImage: `url(${v2BannerImg.src})`,
+    backgroundSize: 'cover',
+    backgroundPosition: 'center',
+    backgroundAttachment: 'fixed',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: theme.white,
+    textShadow: '0 2px 4px rgba(0, 0, 0, 0.6)',
+    overflow: 'hidden',
+  };
+
+  const overlayStyles = {
+    position: 'absolute' as const,
+    inset: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  };
+
+  const contentStyles = {
+    position: 'relative' as const,
+    zIndex: 1,
+    maxWidth: '800px',
+    margin: '0 auto',
+    padding: `${theme.spacing.lg}px ${theme.spacing.md}px`,
+    textAlign: 'center' as const,
+    fontFamily: 'Satoshi, sans-serif',
+  };
+
+  const titleStyles = {
+    fontSize: '3.5rem',
+    fontWeight: 500,
+    marginBottom: theme.spacing.md,
+    lineHeight: 1.1,
+    color: '#ECEDEE',
+  };
+
+  const subtitleStyles = {
+    fontSize: '1.25rem',
+    marginBottom: theme.spacing.md,
+    lineHeight: 1.5,
+    color: '#ECEDEE',
+    fontWeight: 500,
+  };
+
+  const buttonsStyles = {
+    marginTop: theme.spacing.md,
+    justifyContent: 'center',
+  };
+
+  const buttonStyles = {
+    height: '2.5rem',
+    padding: '0 1.5rem',
+    fontSize: '0.9rem',
+    fontFamily: 'Satoshi, sans-serif',
+    fontWeight: 500,
+  };
+
+  const scrollIndicatorContainerStyles = {
+    position: 'absolute' as const,
+    bottom: theme.spacing.lg,
+    left: '50%',
+    transform: 'translateX(-50%)',
+    textAlign: 'center' as const,
+    zIndex: 1,
+  };
+
+  const scrollTextStyles = {
+    color: '#ECEDEE',
+    fontFamily: 'Satoshi, sans-serif',
+    fontSize: '1rem',
+    marginBottom: theme.spacing.xs,
+  };
+
+  const scrollIconStyles = {
+    animation: 'bounce 2s infinite',
+    color: '#ECEDEE',
+  };
+
+  const bounceAnimation = `
+    @keyframes bounce {
+      0%, 20%, 50%, 80%, 100% {
+        transform: translateY(0);
+      }
+      40% {
+        transform: translateY(-10px);
+      }
+      60% {
+        transform: translateY(-5px);
+      }
+    }
+  `;
+
+  const keyframesStyle = (
+    <style>
+      {bounceAnimation}
+    </style>
+  );
+
+  return (
+    <section style={heroStyles}>
+      {keyframesStyle}
+      <div style={overlayStyles} />
+      <Transition
+        mounted={mounted}
+        transition="fade"
+        duration={800}
+        timingFunction="ease"
+      >
+        {(styles) => (
+          <div style={{ ...contentStyles, ...styles }}>
+            <Title style={titleStyles}>Welcome to Sei Network</Title>
+            <Text style={subtitleStyles}>
+              The first parallelized EVM blockchain delivering unmatched
+              scalability with a developer-focused approach.
+            </Text>
+            <Group style={buttonsStyles}>
+              <Button
+                variant="gradient"
+                gradient={{ from: '#9E1F19', to: '#780000', deg: 135 }}
+                size="md"
+                style={buttonStyles}
+                rightIcon={<IconArrowRight size={18} />}
+                component="a"
+                href="/users/user-quickstart"
+              >
+                Get Started
+              </Button>
+              <Button
+                variant="outline"
+                color="light"
+                size="md"
+                style={{
+                  ...buttonStyles,
+                  borderColor: '#ECEDEE',
+                  color: '#ECEDEE',
+                }}
+                component="a"
+                href="/learn/general-overview"
+              >
+                Learn More
+              </Button>
+            </Group>
+          </div>
+        )}
+      </Transition>
+      <div style={scrollIndicatorContainerStyles}>
+        <Text style={scrollTextStyles}>Find your starting point</Text>
+        <IconChevronDown
+          size={32}
+          style={scrollIconStyles}
+          aria-hidden="true"
+        />
+      </div>
+    </section>
+  );
+};
+
+export default SeiIntro;
diff --git a/package.json b/package.json
@@ -13,7 +13,8 @@
 	"dependencies": {
 		"@mantine/code-highlight": "^7.12.2",
 		"@mantine/core": "^7.13.4",
-		"@mantine/hooks": "^7.10.1",
+		"@mantine/hooks": "^7.13.4",
+		"@mantine/styles": "^6.0.22",
 		"@rainbow-me/rainbowkit": "^1.3.3",
 		"@sei-js/registry": "^1.0.1",
 		"@tabler/icons-react": "^3.21.0",

diff --git a/pages/index.mdx b/pages/index.mdx
@@ -1,22 +1,10 @@
-import DocCardsGrid from "../components/DocCard/DocCardsGrid";
-import { docsData } from "../data/docsData";
-import { DeveloperSurveyCallout } from '../components';
-import { ImageWithCaption } from "../components";
-import v2BannerImg from "../public/assets/sei-v2-banner.jpg";
+import DeveloperSurveyCallout from '../components/DeveloperSurveyCallout/DeveloperSurveyCallout';
+import SeiIntro from '../components/Homepage/SeiIntro';
+import DocCardsGrid from '../components/DocCard/DocCardsGrid';
+import { docsData } from '../data/docsData';
 
-<DeveloperSurveyCallout />
+<SeiIntro />
 
-# Welcome to Sei Network
-
-Sei sets a bold new standard in blockchain as the first parallelized 
-EVM and delivers unmatched scalability with a developer-focused approach. 
-
-<ImageWithCaption img={v2BannerImg} alt="Sei V2 Banner" />
-
-Sei achieves high performance and low fees through its architecture built 
-on a delegated proof-of-stake model and parallel execution for both EVM and 
-CosmWasm.
-
-<br /><br />
+<br />
 
 <DocCardsGrid data={docsData} />
diff --git a/yarn.lock b/yarn.lock
@@ -121,9 +121,9 @@
     "@floating-ui/dom" "^1.0.0"
 
 "@floating-ui/react@^0.26.9":
-  version "0.26.26"
-  resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.26.26.tgz#ab4b8675b21a61c1c868c392d44b2ccb5d5359a2"
-  integrity sha512-iv2BjdcyoF1j1708Z9CrGtMc9ZZvMPZnDqyB1FrSWYCi+/nlPArUO/u9QhwC4E1Pi4T0g18GZ4W702m0NDh9bw==
+  version "0.26.27"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.26.27.tgz#402f7b4b2702650662705fe9cbe0f1d5607846a1"
+  integrity sha512-jLP72x0Kr2CgY6eTYi/ra3VA9LOkTo4C+DUTrbFgFOExKy3omYVmwMjNKqxAHdsnyLS96BIDLcO2SlnsNf8KUQ==
   dependencies:
     "@floating-ui/react-dom" "^2.1.2"
     "@floating-ui/utils" "^0.2.8"
@@ -218,11 +218,19 @@
     react-textarea-autosize "8.5.3"
     type-fest "^4.12.0"
 
-"@mantine/hooks@^7.10.1":
+"@mantine/hooks@^7.13.4":
   version "7.13.4"
   resolved "https://registry.yarnpkg.com/@mantine/hooks/-/hooks-7.13.4.tgz#2e4a8aa910a1d9cfc8ad513b33d3a483a41c7f88"
   integrity sha512-B2QCegQyWlLdenVNaLNK8H9cTAjLW9JKJ3xWg+ShhpjZDHT2hjZz4L0Nt071Z7mPvyAaOwKGM0FyqTcTjdECfg==
 
+"@mantine/styles@^6.0.22":
+  version "6.0.22"
+  resolved "https://registry.yarnpkg.com/@mantine/styles/-/styles-6.0.22.tgz#d883823f910e9ab8a56fd80ef667b6f56f2e2bd5"
+  integrity sha512-Rud/IQp2EFYDiP4csRy2XBrho/Ct+W2/b+XbvCRTeQTmpFy/NfAKm/TWJa5zPvuv/iLTjGkVos9SHw/DteESpQ==
+  dependencies:
+    clsx "1.1.1"
+    csstype "3.0.9"
+
 "@mdx-js/mdx@^2.2.1", "@mdx-js/mdx@^2.3.0":
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-2.3.0.tgz#d65d8c3c28f3f46bb0e7cb3bf7613b39980671a9"
@@ -1968,6 +1976,11 @@ cliui@^6.0.0:
     strip-ansi "^6.0.0"
     wrap-ansi "^6.2.0"
 
+[email protected]:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
+  integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
+
 [email protected]:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.0.tgz#e851283bcb5c80ee7608db18487433f7b23f77cb"
@@ -2122,6 +2135,11 @@ cssesc@^3.0.0:
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
+[email protected]:
+  version "3.0.9"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.9.tgz#6410af31b26bd0520933d02cbc64fce9ce3fbf0b"
+  integrity sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw==
+
 [email protected], csstype@^3.0.2, csstype@^3.0.7:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
@@ -5662,7 +5680,12 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
   integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
 
-tslib@^2.0.0, tslib@^2.1.0, tslib@^2.3.1, tslib@^2.4.0:
+tslib@^2.0.0, tslib@^2.1.0:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
+  integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
+
+tslib@^2.3.1, tslib@^2.4.0:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.0.tgz#d124c86c3c05a40a91e6fdea4021bd31d377971b"
   integrity sha512-jWVzBLplnCmoaTr13V9dYbiQ99wvZRd0vNWaDRg+aVYRcjDF3nDksxFDE/+fkXnKhpnUUkmx5pK/v8mCtLVqZA==