feat: new docs structure (3/n)

components/DocCard/DocCard.tsx

@@ -1,5 +1,6 @@
-import { ExternalLinkIcon } from 'lucide-react';
 import Image from 'next/image';
+import { ExternalLinkIcon } from 'lucide-react';
+import styles from '../../styles/DocCard.module.css';
 
 interface DocCardProps {
   doc: {
@@ -17,29 +18,45 @@ const DocCard = ({ doc }: DocCardProps) => {
   const { name, logo, link, 'short-description': shortDescription } = doc;
 
   return (
-    <div className="group flex flex-col bg-gray-50 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300">
-      <div className="relative w-full h-48 bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
+    <a
+      href={link}
+      className={`${styles.docCard} group flex flex-col md:flex-row items-center bg-gradient-to-r from-[#780000] to-[#001B2A] rounded-xl shadow-lg overflow-hidden hover:scale-105 transition-transform`}
+      rel="noopener noreferrer"
+    >
+      <div className={`${styles.imageContainer} w-1/3 relative h-36 md:h-48`}>
         {logo ? (
-          <Image src={logo.url} alt={logo.alt} layout="fill" objectFit="cover" className="transition-all duration-300 ease-in-out group-hover:scale-110" />
+          <Image
+            src={logo.url}
+            alt={logo.alt}
+            layout="fill"
+            objectFit="cover"
+            className="rounded-l-xl"
+          />
         ) : (
-          <span className="text-gray-400">No image available</span>
+          <div className="flex items-center justify-center text-gray-400 w-full h-full">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="w-10 h-10"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v-4a8 8 0 0116 0v4" />
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 20h8m-4-4v4" />
+            </svg>
+            <span>No image available</span>
+          </div>
         )}
       </div>
-      <div className="p-4 flex flex-col flex-grow">
-        <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">{name}</h3>
-        <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">{shortDescription}</p>
-        <div className="mt-auto">
-          <a
-            href={link}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-blue-600 dark:text-blue-400 inline-flex items-center font-medium hover:underline"
-          >
-            Learn more <ExternalLinkIcon className="ml-2 w-4 h-4" />
-          </a>
+      <div className="flex-grow p-4 flex flex-col justify-between">
+        <h3 className="text-lg font-semibold mb-2 tracking-tight text-[#ECEDEE]">{name}</h3>
+        <p className="text-sm text-[#8CABA9] mb-3">{shortDescription}</p>
+        <div className="flex items-center text-[#ECEDEE] font-medium group-hover:text-[#9E1F19]">
+          Explore
+          <ExternalLinkIcon className="ml-2 w-4 h-4 transition-transform group-hover:translate-x-1 group-hover:scale-110" />
         </div>
       </div>
-    </div>
+    </a>
   );
 };
 

components/Homepage/SeiIntro.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
 import {
-  Container,
   Title,
   Text,
   Button,
@@ -9,67 +8,104 @@ import {
   Transition,
 } from '@mantine/core';
 import { IconArrowRight, IconChevronDown } from '@tabler/icons-react';
-import v2BannerImg from '../../public/assets/sei-v2-banner.jpg';
+import v2BannerImg from '../../public/assets/sei-temp-gradient.png';
 
-const SeiIntro: React.FC = () => {
+interface SeiIntroProps {
+  onScrollToDocs: () => void;
+}
+
+const SeiIntro: React.FC<SeiIntroProps> = ({ onScrollToDocs }) => {
   const theme = useMantineTheme();
   const [mounted, setMounted] = useState(false);
+  const [activeDescription, setActiveDescription] = useState(0);
+  const descriptions = [
+    'The first parallelized EVM blockchain delivering unmatched scalability.',
+    'Built for developers, offering robust tools and support.',
+    'Experience unparalleled transaction speed and security.',
+  ];
 
   useEffect(() => {
     setMounted(true);
+    const descriptionInterval = setInterval(() => {
+      setActiveDescription((prev) => (prev + 1) % descriptions.length);
+    }, 4000); // Change every 4 seconds
+    return () => clearInterval(descriptionInterval);
   }, []);
 
-  // Styles
   const heroStyles = {
     position: 'relative' as const,
-    height: '80vh',
-    backgroundImage: `url(${v2BannerImg.src})`,
-    backgroundSize: 'cover',
-    backgroundPosition: 'center',
-    backgroundAttachment: 'fixed',
+    height: '70vh',
+    overflow: 'hidden',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
     color: theme.white,
     textShadow: '0 2px 4px rgba(0, 0, 0, 0.6)',
-    overflow: 'hidden',
+    padding: '0 20px',
   };
 
   const overlayStyles = {
     position: 'absolute' as const,
     inset: 0,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    background: 'linear-gradient(135deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.65)), radial-gradient(circle, rgba(0, 0, 0, 0.3) 10%, transparent 60%)',
+    backgroundBlendMode: 'overlay, normal',
+    animation: 'gradientShift 15s ease-in-out infinite',
+  };
+
+  const noiseOverlayStyles = {
+    position: 'absolute' as const,
+    inset: 0,
+    backgroundImage: 'url(/assets/noise-texture.png)',
+    opacity: 0.08,
+    zIndex: 1,
+    pointerEvents: 'none' as 'none',
   };
 
   const contentStyles = {
     position: 'relative' as const,
-    zIndex: 1,
+    zIndex: 2,
     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',
+    position: 'relative' as const,
+    display: 'inline-block',
+    marginBottom: theme.spacing.sm,
+    paddingBottom: '10px',
+    letterSpacing: '0.5px',
+  };
+
+  const underlineStyles = {
+    position: 'absolute' as const,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: '3px',
+    background: 'linear-gradient(90deg, #9E1F19, #780000)',
+    borderRadius: '1.5px',
+    boxShadow: '0px 0px 4px rgba(158, 31, 25, 0.4)',
   };
 
   const subtitleStyles = {
-    fontSize: '1.25rem',
+    fontSize: '1.1rem',
     marginBottom: theme.spacing.md,
-    lineHeight: 1.5,
+    lineHeight: 1.4,
     color: '#ECEDEE',
     fontWeight: 500,
+    padding: '0 10px',
   };
 
   const buttonsStyles = {
     marginTop: theme.spacing.md,
     justifyContent: 'center',
+    display: 'flex',
+    gap: '15px',
   };
 
   const buttonStyles = {
@@ -81,49 +117,69 @@ const SeiIntro: React.FC = () => {
     display: 'flex',
     alignItems: 'center',
     gap: '0.5rem',
+    transition: 'transform 0.3s ease, box-shadow 0.3s ease',
+    boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.1)',
+  };
+
+  const primaryButtonHoverStyles = {
+    background: 'linear-gradient(90deg, #780000, #9E1F19)',
   };
 
   const scrollIndicatorContainerStyles = {
     position: 'absolute' as const,
-    bottom: theme.spacing.lg,
+    bottom: theme.spacing.md,
     left: '50%',
     transform: 'translateX(-50%)',
     textAlign: 'center' as const,
     zIndex: 1,
+    display: 'flex',
+    flexDirection: 'column' as const,
+    alignItems: 'center',
+    justifyContent: 'center',
   };
 
   const scrollTextStyles = {
     color: '#ECEDEE',
     fontFamily: 'Satoshi, sans-serif',
-    fontSize: '1rem',
+    fontSize: '0.9rem',
     marginBottom: theme.spacing.xs,
   };
 
   const scrollIconStyles = {
-    animation: 'bounce 2s infinite',
     color: '#ECEDEE',
+    cursor: 'pointer',
+    transition: 'opacity 0.3s ease',
+    opacity: 0.8,
   };
 
-  const bounceAnimation = `
-    @keyframes bounce {
-      0%, 20%, 50%, 80%, 100% {
-        transform: translateY(0);
-      }
-      40% {
-        transform: translateY(-10px);
-      }
-      60% {
-        transform: translateY(-5px);
-      }
+  const animations = `
+    @keyframes gradientShift {
+      0% { background-position: 0% 50%; }
+      50% { background-position: 100% 50%; }
+      100% { background-position: 0% 50%; }
     }
   `;
 
-  const keyframesStyle = <style>{bounceAnimation}</style>;
+  const animationsStyle = <style>{animations}</style>;
 
   return (
     <section style={heroStyles}>
-      {keyframesStyle}
+      <img
+        src={v2BannerImg.src}
+        alt="Background"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: '100%',
+          objectFit: 'cover',
+          zIndex: 0,
+        }}
+      />
+      {animationsStyle}
       <div style={overlayStyles} />
+      <div style={noiseOverlayStyles} />
       <Transition
         mounted={mounted}
         transition="fade"
@@ -132,11 +188,11 @@ const SeiIntro: React.FC = () => {
       >
         {(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>
+            <Title style={titleStyles}>
+              Welcome to Sei Network
+              <div style={underlineStyles}></div>
+            </Title>
+            <Text style={subtitleStyles}>{descriptions[activeDescription]}</Text>
             <Group style={buttonsStyles}>
               <Button
                 variant="gradient"
@@ -145,6 +201,12 @@ const SeiIntro: React.FC = () => {
                 style={buttonStyles}
                 component="a"
                 href="/users/user-quickstart"
+                onMouseOver={(e) =>
+                  (e.currentTarget.style.background = primaryButtonHoverStyles.background)
+                }
+                onMouseOut={(e) =>
+                  (e.currentTarget.style.background = 'linear-gradient(90deg, #9E1F19, #780000)')
+                }
               >
                 Get Started <IconArrowRight size={18} />
               </Button>
@@ -169,9 +231,10 @@ const SeiIntro: React.FC = () => {
       <div style={scrollIndicatorContainerStyles}>
         <Text style={scrollTextStyles}>Find your starting point</Text>
         <IconChevronDown
-          size={32}
+          size={28}
           style={scrollIconStyles}
           aria-hidden="true"
+          onClick={onScrollToDocs}
         />
       </div>
     </section>