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

fix(responsive for wide screen) #34

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

fix(responsive for wide screen) #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
88ef518
fix(responsive)
conveyGhost Oct 31, 2024
103f808
Merge remote-tracking branch 'offical/main' into issue/responsive
hanabi1224 Nov 27, 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
4,649 changes: 0 additions & 4,649 deletions package-lock.json
View file
Open in desktop

This file was deleted.

176 changes: 89 additions & 87 deletions src/components/Footer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,12 +56,12 @@ export const navigation = {
</svg>
),
},

{
name: 'Filecoin Slack',
href: 'https://filecoinproject.slack.com/join/shared_invite/zt-1yxenlrc1-dwCCX7Mv3h9BHr~rQ6uUPw#/shared-invite/email',
icon: (props: any) => (
<svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-brand-slack" width="38" height="38" viewBox="0 0 32 32" strokeWidth="1.75" stroke="white" fill="none" strokeLinejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12v-6a2 2 0 0 1 4 0v6m0 -2a2 2 0 1 1 2 2h-6" /><path d="M12 12h6a2 2 0 0 1 0 4h-6m2 0a2 2 0 1 1 -2 2v-6" /><path d="M12 12v6a2 2 0 0 1 -4 0v-6m0 2a2 2 0 1 1 -2 -2h6" /><path d="M12 12h-6a2 2 0 0 1 0 -4h6m-2 0a2 2 0 1 1 2 -2v6" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-brand-slack" width="38" height="38" viewBox="0 0 32 32" strokeWidth="1.75" stroke="white" fill="none" strokeLinejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M12 12v-6a2 2 0 0 1 4 0v6m0 -2a2 2 0 1 1 2 2h-6" /><path d="M12 12h6a2 2 0 0 1 0 4h-6m2 0a2 2 0 1 1 -2 2v-6" /><path d="M12 12v6a2 2 0 0 1 -4 0v-6m0 2a2 2 0 1 1 -2 -2h6" /><path d="M12 12h-6a2 2 0 0 1 0 -4h6m-2 0a2 2 0 1 1 2 -2v6" /></svg>
),
},
],
Expand All @@ -70,96 +70,98 @@ export const navigation = {
export default function Footer() {
return (
<footer className='bg-neutral-900' aria-labelledby='footer-heading'>
<h2 id='footer-heading' className='sr-only'>
Footer
</h2>
<img src="/banner.png" alt="Forest patterned banner" />
<div className='mx-auto max-w-7xl px-6 pb-8 pt-16 sm:pt-24 lg:px-8 lg:pt-32'>
<div className='xl:grid xl:grid-cols-3 xl:gap-8'>
<div className='space-y-8'>
<img
className='w-[150px]'
src='/full-mark.png'
alt='Forest'
/>
<p className='text-lg leading-6 text-neutral-400'>
The Filecoin implementation in Rust.
</p>
<div className='flex space-x-6'>
{navigation.social.map((item) => (
<Link
target="_blank"
key={item.name}
href={item.href}
className='hover:brightness-50'>
<span className='sr-only'>{item.name}</span>
<item.icon className='h-7 w-7' aria-hidden='true' />
</Link>
))}
</div>
</div>
<div className='mt-16 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0'>
<div className='md:grid md:grid-cols-2 md:gap-8'>
<div>
<h3 className='text-lg font-semibold leading-6 text-white'>
Project
</h3>
<ul role='list' className='mt-6 space-y-4'>
{navigation.product.map((item) => (
<li key={item.name}>
<Link
target="_blank"
href={item.href}
className='text-lg leading-6 text-neutral-400 hover:text-brand-400'>
{item.name}
</Link>
</li>
))}
</ul>
</div>
<div className='mt-10 md:mt-0'>
<h3 className='text-lg font-semibold leading-6 text-white'>
Resources
</h3>
<ul role='list' className='mt-6 space-y-4'>
{navigation.resources.map((item) => (
<li key={item.name}>
<Link
target="_blank"
href={item.href}
className='text-lg leading-6 text-neutral-400 hover:text-brand-400'>
{item.name}
</Link>
</li>
))}
</ul>
<div className="container mx-auto">
<h2 id='footer-heading' className='sr-only'>
Footer
</h2>
<img src="/banner.png" alt="Forest patterned banner" />
<div className='mx-auto max-w-7xl px-6 pb-8 pt-16 sm:pt-24 lg:px-8 lg:pt-32'>
<div className='xl:grid xl:grid-cols-3 xl:gap-8'>
<div className='space-y-8'>
<img
className='w-[150px]'
src='/full-mark.png'
alt='Forest'
/>
<p className='text-lg leading-6 text-neutral-400'>
The Filecoin implementation in Rust.
</p>
<div className='flex space-x-6'>
{navigation.social.map((item) => (
<Link
target="_blank"
key={item.name}
href={item.href}
className='hover:brightness-50'>
<span className='sr-only'>{item.name}</span>
<item.icon className='h-7 w-7' aria-hidden='true' />
</Link>
))}
</div>
</div>
<div className='md:grid md:grid-cols-2 md:gap-8'>
<div>
<h3 className='text-lg font-semibold leading-6 text-white'>
Reach us
</h3>
<ul role='list' className='mt-6 space-y-4'>
{navigation.reach.map((item) => (
<li key={item.name}>
<a
href={item.href}
target="_blank"
className='text-lg leading-6 text-neutral-400 hover:text-brand-400'>
{item.name}
</a>
</li>
))}
</ul>
<div className='mt-16 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0'>
<div className='md:grid md:grid-cols-2 md:gap-8'>
<div>
<h3 className='text-lg font-semibold leading-6 text-white'>
Project
</h3>
<ul role='list' className='mt-6 space-y-4'>
{navigation.product.map((item) => (
<li key={item.name}>
<Link
target="_blank"
href={item.href}
className='text-lg leading-6 text-neutral-400 hover:text-brand-400'>
{item.name}
</Link>
</li>
))}
</ul>
</div>
<div className='mt-10 md:mt-0'>
<h3 className='text-lg font-semibold leading-6 text-white'>
Resources
</h3>
<ul role='list' className='mt-6 space-y-4'>
{navigation.resources.map((item) => (
<li key={item.name}>
<Link
target="_blank"
href={item.href}
className='text-lg leading-6 text-neutral-400 hover:text-brand-400'>
{item.name}
</Link>
</li>
))}
</ul>
</div>
</div>
<div className='md:grid md:grid-cols-2 md:gap-8'>
<div>
<h3 className='text-lg font-semibold leading-6 text-white'>
Reach us
</h3>
<ul role='list' className='mt-6 space-y-4'>
{navigation.reach.map((item) => (
<li key={item.name}>
<a
href={item.href}
target="_blank"
className='text-lg leading-6 text-neutral-400 hover:text-brand-400'>
{item.name}
</a>
</li>
))}
</ul>
</div>
</div>
</div>
</div>
</div>
<div className='mt-16 border-t border-green-400/10 pt-8 sm:mt-20 lg:mt-24'>
<p className='text-sm leading-5 text-neutral-500'>
&copy; 2023 ChainSafe
</p>
<div className='mt-16 border-t border-green-400/10 pt-8 sm:mt-20 lg:mt-24'>
<p className='text-sm leading-5 text-neutral-500'>
&copy; 2023 ChainSafe
</p>
</div>
</div>
</div>
</footer>
Expand Down
14 changes: 8 additions & 6 deletions src/sections/AccessingFilecoinData/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,14 @@ import SnapshotService from "@/components/SnapshotService"
export default function AccessingFilecoinData() {
return (
<div className="relative h-full w-full py-14" id="snapshot-service">
<div className="relative flex flex-col justify-center pt-16 pb-4 px-8">
<h2 className='mt-7 text-stone-200 text-5xl text-center'>
Accessing Filecoin Data
</h2>
<SnapshotService />
<DownloadArchive />
<div className="container mx-auto">
<div className="relative flex flex-col justify-center pt-16 pb-4 px-8">
<h2 className='mt-7 text-stone-200 text-5xl text-center'>
Accessing Filecoin Data
</h2>
<SnapshotService />
<DownloadArchive />
</div>
</div>
</div>
)
Expand Down
40 changes: 21 additions & 19 deletions src/sections/BetaTesters/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,33 +39,35 @@ export default function BetaTesters() {


const splitSentence = splitText(`Join our beta program to help make Forest the best it can be. Let us know how we can support your needs.`)

return (
<div ref={ref} className="relative w-full md:min-h-[70vh]" id="beta-program">
<div className="relative flex flex-col justify-center py-14 lg:pt-32 px-8">
<h2 className='mt-7 text-brand-400 text-5xl font-normal'>
The Forest beta awaits testers
</h2>
<motion.h2 className='mt-3 md:max-w-[600px] text-neutral-200 text-2xl font-normal' initial="hidden" viewport={{ once: true }} animate={controls} variants={sentenceVariant}>
{splitSentence.map((char, index) => (
<div className="container mx-auto">
<div className="relative flex flex-col justify-center py-14 lg:pt-32 px-8">
<h2 className='mt-7 text-brand-400 text-5xl font-normal'>
The Forest beta awaits testers
</h2>
<motion.h2 className='mt-3 md:max-w-[600px] text-neutral-200 text-2xl font-normal' initial="hidden" viewport={{ once: true }} animate={controls} variants={sentenceVariant}>
{splitSentence.map((char, index) => (
<motion.span key={index} variants={letterVariant}>
{char}{' '}
</motion.span>
))}
</motion.h2>
<img className='hidden lg:inline-block absolute z-0 h-[80%] right-1 top-[15%]' src="/symbol-cropped.png" alt="" />
</motion.h2>
<img className='hidden lg:inline-block absolute z-0 h-[80%] right-1 top-[15%]' src="/symbol-cropped.png" alt="" />
<div className='grid md:grid-cols-2 gap-y-2 lg:grid-cols-4 py-8 gap-x-2 z-10 max-w-[85%] '>
{cards.map((card, index) => (
<a href={card.link} key={index} className='transition-all py-10 flex flex-col justify-start px-5 bg-neutral-900 rounded-3xl cursor-pointer hover:-translate-y-1 hover:brightness-75 opacity-90' rel="noopener noreferrer" target="_blank">
<div className='flex justify-between'>
<p className='text-xl text-green-500'>{index + 1}</p>
<Button href={card.link} type="link"><IconArrowUpRight stroke={1.5} className="text-brand-400" width={24}/></Button>
</div>
<h3 className='mt-2 md:mt-7 text-neutral-300 text-xl leading-6 max-w-[80%]'>{card.desc}</h3>
</a>
))}
</div>
{cards.map((card, index) => (
<a href={card.link} key={index} className='transition-all py-10 flex flex-col justify-start px-5 bg-neutral-900 rounded-3xl cursor-pointer hover:-translate-y-1 hover:brightness-75 opacity-90' rel="noopener noreferrer" target="_blank">
<div className='flex justify-between'>
<p className='text-xl text-green-500'>{index + 1}</p>
<Button href={card.link} type="link"><IconArrowUpRight stroke={1.5} className="text-brand-400" width={24} /></Button>
</div>
<h3 className='mt-2 md:mt-7 text-neutral-300 text-xl leading-6 max-w-[80%]'>{card.desc}</h3>
</a>
))}
</div>
</div>
</div>
</div>
)
}
26 changes: 14 additions & 12 deletions src/sections/Binaries/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,26 +26,28 @@ const properties = [
export default function Binaries() {
return (
<div className="relative h-full w-full bg-no-repeat bg-cover md:min-h-[70vh] bg-diamond-gradient py-8">
<div className="pt-8 md:pl-8 lg:pl-0 relative flex flex-col justify-center md:items-center md:pt-24 pb-4 px-8 max-w-8xl">
<h2 className='mt-7 text-neutral-200 text-4xl md:text-5xl'>
Forest comes with different command-line binaries.
<div className="container mx-auto">
<div className="pt-8 md:pl-8 lg:pl-0 relative flex flex-col justify-center md:items-center md:pt-24 pb-4 px-8 max-w-8xl">
<h2 className='mt-7 text-neutral-200 text-4xl md:text-5xl'>
Forest comes with different command-line binaries.
</h2>
<motion.div
variants={parentVariant}
initial='offscreen'
whileInView='onscreen'
transition={{ duration: 1.2, delay: 0.8 }} className='grid md:grid-cols-2 lg:grid-cols-4 gap-x-2 md:px-12 md:py-20'>
{properties.map((card, index) => (
<motion.div key={index} variants={childVariants} className='py-4 flex flex-col justify-start md:justify-self-center'>
<div className='rounded-xl px-6 py-3 text-xl bg-neutral-950 bg-opacity-60 text-brand-200 font-mono w-48 text-center'>
{card.title}
</div>
<h3 className='mt-2 md:mt-7 text-gray-300 text-xl leading-6 max-w-[85%]'>{card.desc}</h3>
</motion.div>
))}
{properties.map((card, index) => (
<motion.div key={index} variants={childVariants} className='py-4 flex flex-col justify-start md:justify-self-center'>
<div className='rounded-xl px-6 py-3 text-xl bg-neutral-950 bg-opacity-60 text-brand-200 font-mono w-48 text-center'>
{card.title}
</div>
<h3 className='mt-2 md:mt-7 text-gray-300 text-xl leading-6 max-w-[85%]'>{card.desc}</h3>
</motion.div>
))}
</motion.div>

</div>
</div>
</div>
)
}
34 changes: 18 additions & 16 deletions src/sections/Documentation/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,28 +19,30 @@ const cards = [
desc: 'The full API documentation is available as a rust-doc book. ',
link: 'https://docs.rs/forest-filecoin/',
},

]

export default function Documentation() {
return (
<div className="relative h-full w-full md:min-h-[50vh]" id="documentation">
<div className="relative flex flex-col justify-center py-14 px-8">
<h2 className='mt-7 text-white text-5xl font-normal'>
Learn More
</h2>
<div className='grid md:grid-cols-2 gap-y-2 lg:grid-cols-3 py-8 gap-x-2 '>
{cards.map((card, index) => (
<a href={card.link} key={index} className='transition-all py-10 flex flex-col justify-start px-5 bg-neutral-900 rounded-3xl cursor-pointer hover:-translate-y-1 hover:brightness-75 opacity-80' rel="noopener noreferrer" target="_blank">
<div className='flex justify-between'>
<h2 className='text-3xl font-light text-white'>{card.title}</h2>
<Button href={card.link} type="link"><IconArrowUpRight stroke={1.5} className="text-brand-400" width={24}/></Button>
</div>
<h3 className='mt-8 md:mt-16 text-gray-100 text-xl leading-7 max-w-[80%]'>{card.desc}</h3>
</a>
))}
</div>
<div className="container mx-auto">
<div className="relative flex flex-col justify-center py-14 px-8">
<h2 className='mt-7 text-white text-5xl font-normal'>
Learn More
</h2>
<div className='grid md:grid-cols-2 gap-y-2 lg:grid-cols-3 py-8 gap-x-2 '>
{cards.map((card, index) => (
<a href={card.link} key={index} className='transition-all py-10 flex flex-col justify-start px-5 bg-neutral-900 rounded-3xl cursor-pointer hover:-translate-y-1 hover:brightness-75 opacity-80' rel="noopener noreferrer" target="_blank">
<div className='flex justify-between'>
<h2 className='text-3xl font-light text-white'>{card.title}</h2>
<Button href={card.link} type="link"><IconArrowUpRight stroke={1.5} className="text-brand-400" width={24} /></Button>
</div>
<h3 className='mt-8 md:mt-16 text-gray-100 text-xl leading-7 max-w-[80%]'>{card.desc}</h3>
</a>
))}
</div>
</div>
</div>
</div>
)
}
Loading