Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: new docs structure (2/n) #164

Merged
merged 12 commits into from
Nov 7, 2024
Merged

feat: new docs structure (2/n) #164

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
54b13c9
init mv of getting started subdocs
salmad3 Oct 31, 2024
0763642
init token card component w/ calculator and data render
salmad3 Oct 31, 2024
9be2570
incorporate guide element in tokencard
salmad3 Oct 31, 2024
b90e357
distribute getting started content to associated sections; topbar cat…
salmad3 Nov 7, 2024
84afa6e
mv overview material to about sei, with improvements
salmad3 Nov 7, 2024
6e7ce9e
add homepage component
salmad3 Nov 7, 2024
06a9a2e
enh homepage and tokencard components
salmad3 Nov 7, 2024
c182c00
nested guides for tokencard
salmad3 Nov 7, 2024
5184c99
tokenfactory guide as example; to-do: recognize markdown syntax, repl…
salmad3 Nov 7, 2024
acdf5df
rmv 'copy' from codeblocks
salmad3 Nov 7, 2024
19bb736
update icon logic in homepage component
salmad3 Nov 7, 2024
8fbfefd
fix logo logic in appcard v2
salmad3 Nov 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
91 changes: 57 additions & 34 deletions components/AppCard/AppCard.v2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,42 +3,65 @@ import Image from 'next/image';
import { EcosystemItem } from '../../data/ecosystemData';

interface AppCardProps {
app: EcosystemItem;
app: EcosystemItem;
}

const AppCardV2 = ({ app }: AppCardProps) => {
if (!app) return null;
const fields = app.fieldData;
const { name, logo, link, 'integration-guide-link': integration, 'short-description': shortDescription } = fields;
return (
<div className='group flex flex-col'>
<div className='border dark:border-gray-800 rounded-lg overflow-hidden flex flex-row lg:flex-col grow h-ull'>
<div className='relative overflow-hidden grid place-items-center aspect-square border-r lg:border-b lg:border-r-0 dark:border-gray-800'>
<a href={link} rel='noopener noreferrer' target='_blank' className='group'>
<Image src={logo.url} alt={logo.alt} width={300} height={300} className='transition-all group-hover:scale-[1.15]' />
</a>
</div>
<div className='px-3 pt-2 pb-3 bg-gray-100 dark:bg-gray-800 w-full flex flex-col grow space-y-1'>
<h3 className='text-lg font-semibold inline-flex items-center gap-2' title={name}>
{name}
</h3>
{shortDescription && (
<p className='opacity-75 text-sm line-clamp-4' title={shortDescription}>
{shortDescription}
</p>
)}
{integration && (
<a
href={integration}
rel='noopener noreferrer'
target='_blank'
className='inline-flex items-center gap-2 bg-black text-white dark:bg-white dark:text-black px-3 py-1 self-start rounded-lg mt-2 text-sm font-medium tracking-tight'>
Integration <ExternalLinkIcon className='inline-block w-3 h-4 hover:underline' />
</a>
)}
</div>
</div>
</div>
);
if (!app || !app.fieldData) return null;

const fields = app.fieldData;
const {
name,
logo,
link,
'integration-guide-link': integration,
'short-description': shortDescription,
} = fields;

const defaultLogo = {
url: '/path/to/default-logo.png',
alt: 'Default Logo',
};

const displayLogo = logo && logo.url ? logo : defaultLogo;

return (
<div className='group flex flex-col'>
<div className='border dark:border-gray-800 rounded-lg overflow-hidden flex flex-row lg:flex-col grow h-full'>
<div className='relative overflow-hidden grid place-items-center aspect-square border-r lg:border-b lg:border-r-0 dark:border-gray-800'>
<a href={link} rel='noopener noreferrer' target='_blank' className='group'>
<Image
src={displayLogo.url}
alt={displayLogo.alt}
width={300}
height={300}
className='transition-all group-hover:scale-[1.15]'
/>
</a>
</div>
<div className='px-3 pt-2 pb-3 bg-gray-100 dark:bg-gray-800 w-full flex flex-col grow space-y-1'>
<h3 className='text-lg font-semibold inline-flex items-center gap-2' title={name}>
{name}
</h3>
{shortDescription && (
<p className='opacity-75 text-sm line-clamp-4' title={shortDescription}>
{shortDescription}
</p>
)}
{integration && (
<a
href={integration}
rel='noopener noreferrer'
target='_blank'
className='inline-flex items-center gap-2 bg-black text-white dark:bg-white dark:text-black px-3 py-1 self-start rounded-lg mt-2 text-sm font-medium tracking-tight'
>
Integration <ExternalLinkIcon className='inline-block w-3 h-4 hover:underline' />
</a>
)}
</div>
</div>
</div>
);
};

export default AppCardV2;
181 changes: 181 additions & 0 deletions components/Homepage/SeiIntro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,181 @@
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);
}, []);

// Styles
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,
display: 'flex',
alignItems: 'center',
gap: '0.5rem',
};

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}
component="a"
href="/users/user-quickstart"
>
Get Started <IconArrowRight size={18} />
</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;
Loading
Loading