Skip to content

made a new PR for Hover effect #1896

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

made a new PR for Hover effect #1896

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
108 changes: 30 additions & 78 deletions pages/index.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -261,50 +261,36 @@ const Home = (props: any) => {
</p>
</div>
{/* Feature 4 section*/}
<div className='w-5/6 lg:w-3/5 grid grid-cols-1 md:grid-cols-2 gap-6 my-[85px] mx-auto '>
<div className='w-full shadow-3xl rounded-[10px] p-[20px] dark:shadow-slate-700'>
<h3 className='text-h5mobile md:text-h5 font-semibold mb-6 dark:text-slate-200'>
Streamline testing and validation
</h3>
<p className='dark:text-slate-300'>
Simplify your validation logic to reduce your code’s complexity
and save time on development. Define constraints for your data
structures to catch and prevent errors, inconsistencies, and
invalid data.
</p>
</div>
<div className='w-full shadow-3xl rounded-[10px] p-[20px] dark:shadow-slate-700'>
<h3 className='text-h5mobile md:text-h5 font-semibold mb-6 dark:text-slate-200'>
Exchange data seamlessly
</h3>
<p className='dark:text-slate-300'>
Establish a common language for data exchange, no matter the
scale or complexity of your project. Define precise validation
rules for your data structures to create shared understanding
and increase interoperability across different systems and
platforms.
</p>
</div>
<div className='w-full shadow-3xl rounded-[10px] p-[20px] dark:shadow-slate-700'>
<h3 className='text-h5mobile md:text-h5 font-semibold mb-6 dark:text-slate-200 '>
Document your data
</h3>
<p className='dark:text-slate-300'>
Create a clear, standardized representation of your data to
improve understanding and collaboration among developers,
stakeholders, and collaborators.
</p>
</div>
<div className='w-full shadow-3xl rounded-[10px] p-[20px] dark:shadow-slate-700'>
<h3 className='text-h5mobile md:text-h5 font-semibold mb-6 dark:text-slate-200'>
Vibrant tooling ecosystem
</h3>
<p className='dark:text-slate-300'>
Adopt JSON Schema with an expansive range of community-driven
tools, libraries, and frameworks across many programming
languages.
</p>
</div>
<div className='w-5/6 lg:w-3/5 grid grid-cols-1 md:grid-cols-2 gap-6 my-[85px] mx-auto'>
{[
{
title: 'Streamline testing and validation',
desc: 'Simplify your validation logic to reduce your code’s complexity and save time on development. Define constraints for your data structures to catch and prevent errors, inconsistencies, and invalid data.',
},
{
title: 'Exchange data seamlessly',
desc: 'Establish a common language for data exchange, no matter the scale or complexity of your project. Define precise validation rules for your data structures to create shared understanding and increase interoperability across systems.',
},
{
title: 'Document your data',
desc: 'Create a clear, standardized representation of your data to improve understanding and collaboration among developers, stakeholders, and collaborators.',
},
{
title: 'Vibrant tooling ecosystem',
desc: 'Adopt JSON Schema with an expansive range of community-driven tools, libraries, and frameworks across many programming languages.',
},
].map((item, index) => (
<div
key={index}
className='relative group overflow-hidden rounded-[10px] shadow-3xl dark:shadow-slate-700 p-[20px] transition-all duration-500 transform hover:-translate-y-2 hover:shadow-blue-400/40 hover:shadow-2xl cursor-pointer'
>
<div className='absolute inset-0 bg-blue-600/0 group-hover:bg-blue-600/10 transition-all duration-500 rounded-[10px]' />
<h3 className='relative text-h5mobile md:text-h5 font-semibold mb-6 dark:text-slate-200'>
{item.title}
</h3>
<p className='relative dark:text-slate-300'>{item.desc}</p>
</div>
))}
</div>
</section>

Expand All @@ -323,40 +309,6 @@ const Home = (props: any) => {
</div>
</section>

{/* SidebySide section*/}
<section className='max-w-[1400px] w-full lg:flex lg:gap-20 my-16 '>
{isClient && (
<>
<Image
src='/img/home-page/community-illustration.svg'
className='w-5/6 mx-auto lg:w-[600px] xl:w-[800px]'
alt='community'
height={600}
width={800}
/>
</>
)}
<div className='w-5/6 md:w-3/5 mx-auto mt-12'>
<h3 className=' text-center lg:text-left text-h3mobile md:text-h3 font-semibold mb-4 dark:text-slate-200'>
Explore the JSON Schema Ecosystem
</h3>
<p className='lg:pr-8 mb-4 text-center lg:text-left dark:text-slate-300'>
Discover JSON Schema tooling to help your organization leverage
the benefits of JSON Schema. Because JSON Schema is much more than
a Specification, it is a vibrant ecosystem of Validators,
Generators, Linters, and other JSON Schema Utilities made by this
amazing Community.
</p>
<Link
href='/tools/'
rel='noopener noreferrer'
className='w-full md:w-1/2 md:ml-28 lg:ml-0 mx-auto hover:bg-blue-700 transition-all duration-300 ease-in-out h-[45px] rounded border-2 bg-primary text-white dark:border-none flex items-center justify-center'
>
Explore
</Link>
</div>
</section>

{/* Join community */}
<h2 className='anchor'>
<span id='community'></span>
Expand Down
Loading