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

Text Overflow Issue in UI Component on Home Page (Mobile View) #1514

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
+89 −64
Open

Text Overflow Issue in UI Component on Home Page (Mobile View) #1514

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5c16d49
[Refactor] : button-refactor
Yashwanth1906 Mar 10, 2025
3274903
[BUG] : Made the component flexible
Yashwanth1906 Mar 10, 2025
a051309
[FIX] : Changed all the <a/> to Native NextJS <Link/>
Yashwanth1906 Mar 18, 2025
93053e7
[FIX]: Changed all the <a/> with the <Link/>
Yashwanth1906 Mar 18, 2025
8d4b31f
Merge branch 'main' into button-ui-change
Yashwanth1906 Mar 18, 2025
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
153 changes: 89 additions & 64 deletions pages/index.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -225,12 +225,12 @@ const Home = (props: any) => {

<p className='text-white mx-4 my-5 dark:text-slate-400'>
Please visit the JSON Schema{' '}
<a
<Link
className='underline'
href='https://landscape.json-schema.org/'
>
Landscape
</a>{' '}
</Link>{' '}
and discover more companies using JSON Schema.
</p>
</div>
Expand Down Expand Up @@ -302,7 +302,7 @@ const Home = (props: any) => {
Start learning JSON Schema
</h2>
<button className='w-[170px] h-[45px] mx-auto hover:bg-blue-700 transition-all duration-300 ease-in-out rounded border-2 bg-primary text-white font-semibold dark:border-none'>
<a href='/docs '>Read the docs</a>
<Link href='/docs '>Read the docs</Link>
</button>
</div>
</section>
Expand Down Expand Up @@ -332,7 +332,7 @@ const Home = (props: any) => {
amazing Community.
</p>
<button 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'>
<a href='/tools/'>Explore</a>
<Link href='/tools/'>Explore</Link>
</button>
</div>
</section>
Expand Down Expand Up @@ -389,7 +389,7 @@ const Home = (props: any) => {
</p>
</Link>
<button className='w-full lg:w-1/2 rounded border-2 bg-primary hover:bg-blue-700 transition-all duration-300 ease-in-out text-white h-[40px] flex items-center justify-center mx-auto dark:border-none'>
<a
<Link
href='https://json-schema.org/slack'
className='flex items-center '
>
Expand All @@ -405,7 +405,7 @@ const Home = (props: any) => {
</>
)}
Join Slack
</a>
</Link>
</button>
</div>
{/* BlogPost Data */}
Expand Down Expand Up @@ -503,16 +503,22 @@ const Home = (props: any) => {
and by appointment. Open Community Working Meetings are every
third Monday of the month at 12:00 PT.
</p>
<div className=''>
<button className='max-w-[300px] w-full text-center rounded border-2 bg-primary hover:bg-blue-700 transition-all duration-300 ease-in-out text-white h-[40px] mb-4 flex items-center justify-center mx-auto dark:border-none'>
<a href='https://github.com/orgs/json-schema-org/discussions/35'>
<div className='w-full flex flex-col items-center'>
<button className='w-full max-w-[385px] min-w-[252px] text-center rounded border-2 bg-primary hover:bg-blue-700 transition-all duration-300 ease-in-out text-white h-auto py-2 px-4 mb-4 flex items-center justify-center dark:border-none'>
<Link
href='https://github.com/orgs/json-schema-org/discussions/35'
className='text-center'
>
Open Community Working Meetings
</a>
</Link>
</button>
<button className='max-w-[200px] w-full text-center rounded border-2 bg-primary hover:bg-blue-700 transition-all duration-300 ease-in-out text-white h-[40px] flex items-center justify-center mx-auto dark:border-none'>
<a href='https://github.com/orgs/json-schema-org/discussions/34/'>
<button className='w-full max-w-[385px] min-w-[252px] text-center rounded border-2 bg-primary hover:bg-blue-700 transition-all duration-300 ease-in-out text-white h-[40px] flex items-center justify-center dark:border-none'>
<Link
href='https://github.com/orgs/json-schema-org/discussions/34'
className='text-center'
>
Office Hours
</a>
</Link>
</button>
</div>
</div>
Expand Down Expand Up @@ -540,14 +546,14 @@ const Home = (props: any) => {
</div>
</div>

<a
<Link
href='https://calendar.google.com/calendar/embed?src=json.schema.community%40gmail.com&ctz=Europe%2FLondon'
className='w-full lg:w-1/2 rounded border-2 bg-primary text-white hover:bg-blue-700 transition-all duration-300 ease-in-out h-[40px] text-center flex items-center justify-center mx-auto dark:border-none'
target='_blank'
rel='noopener noreferrer'
>
View Calendar
</a>
</Link>
</div>
</div>
</div>
Expand All @@ -561,9 +567,9 @@ const Home = (props: any) => {
Start contributing to JSON Schema
</h2>
<button className='w-[170px] h-[45px] mx-auto rounded border-2 bg-primary hover:bg-blue-700 transition-all duration-300 ease-in-out text-white font-semibold dark:border-none'>
<a href='https://github.com/json-schema-org#-contributing-to-json-schema'>
<Link href='https://github.com/json-schema-org#-contributing-to-json-schema'>
Contribute
</a>
</Link>
</button>
</div>
</section>
Expand All @@ -577,35 +583,42 @@ const Home = (props: any) => {
</h2>
<p className='w-5/6 lg:w-3/5 mx-auto dark:text-slate-300'>
If you ❤️ JSON Schema consider becoming a{' '}
<a
<Link
href='https://json-schema.org/overview/sponsors'
className='border-b border-black dark:border-white'
>
sponsor
</a>
or a{' '}
<a
</Link>
, a{' '}
<Link
href='https://json-schema.org/overview/sponsors#benefits-of-being-an-individual-backer'
className='border-b border-black dark:border-white'
>
backer
</a>{' '}
</Link>{' '}
or hiring our{' '}
<Link
href='/pro-help'
className='border-b border-black dark:border-white'
>
pro services
</Link>
.
</p>
<p className='w-5/6 lg:w-3/5 mx-auto'>
<a
<Link
href='https://opencollective.com/json-schema'
className='border-b border-black dark:border-white'
>
Support us!
</a>
</Link>
</p>
</div>
<div className=' text-center mb-12 '>
<h3 className='p-4 text-h4mobile md:text-h4 font-semibold my-4 dark:text-slate-200'>
Gold Sponsors
</h3>
<a
<Link
href='https://opencollective.com/json-schema/contribute/golden-sponsor-68354/checkout?interval=month&amount=1000&name=&legalName=&email='
target='_blank'
rel='noreferrer'
Expand All @@ -626,11 +639,11 @@ const Home = (props: any) => {
/>
</svg>
<p className='block'>Your logo here</p>
</a>
</Link>
<h3 className='p-4 text-h4mobile md:text-h4 font-semibold my-4 dark:text-slate-200'>
Silver Sponsors
</h3>
<a
<Link
href='https://opencollective.com/json-schema/contribute/silver-sponsor-68353/checkout?interval=month&amount=500&name=&legalName=&email='
target='_blank'
rel='noreferrer'
Expand All @@ -651,12 +664,12 @@ const Home = (props: any) => {
/>
</svg>
<p>Your logo here</p>
</a>
</Link>
<h3 className='p-4 text-h4mobile md:text-h4 font-semibold my-4 dark:text-slate-200'>
Bronze Sponsors
</h3>
<div className='grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-12 items-center mx-auto md:mx-0 px-4 '>
<a
<Link
href=' https://www.asyncapi.com/'
target='_blank'
rel='noreferrer'
Expand All @@ -672,8 +685,8 @@ const Home = (props: any) => {
/>
</>
)}
</a>
<a
</Link>
<Link
href='https://www.airbnb.com/'
target='_blank'
rel='noreferrer'
Expand All @@ -689,8 +702,8 @@ const Home = (props: any) => {
/>
</>
)}
</a>
<a
</Link>
<Link
href='https://www.postman.com/'
target='_blank'
rel='noreferrer'
Expand All @@ -706,8 +719,8 @@ const Home = (props: any) => {
/>
</>
)}
</a>
<a href='https://endjin.com/' target='_blank' rel='noreferrer'>
</Link>
<Link href='https://endjin.com/' target='_blank' rel='noreferrer'>
{isClient && (
<>
<Image
Expand All @@ -719,8 +732,12 @@ const Home = (props: any) => {
/>
</>
)}
</a>
<a href='https://www.llc.org/' target='_blank' rel='noreferrer'>
</Link>
<Link
href='https://www.llc.org/'
target='_blank'
rel='noreferrer'
>
{isClient && (
<>
<Image
Expand All @@ -732,8 +749,8 @@ const Home = (props: any) => {
/>
</>
)}
</a>
<a
</Link>
<Link
href='https://www.vpsserver.com/en-us/'
target='_blank'
rel='noreferrer'
Expand All @@ -749,8 +766,8 @@ const Home = (props: any) => {
/>
</>
)}
</a>
<a
</Link>
<Link
href='https://www.itflashcards.com/'
target='_blank'
rel='noreferrer'
Expand All @@ -766,8 +783,8 @@ const Home = (props: any) => {
/>
</>
)}
</a>
<a
</Link>
<Link
href='https://www.route4me.com/'
target='_blank'
rel='noreferrer'
Expand All @@ -783,8 +800,8 @@ const Home = (props: any) => {
/>
</>
)}
</a>
<a href='https://n8n.io/' target='_blank' rel='noreferrer'>
</Link>
<Link href='https://n8n.io/' target='_blank' rel='noreferrer'>
{isClient && (
<>
<Image
Expand All @@ -796,8 +813,12 @@ const Home = (props: any) => {
/>
</>
)}
</a>
<a href='https://copycopter.ai/' target='_blank' rel='noreferrer'>
</Link>
<Link
href='https://copycopter.ai/'
target='_blank'
rel='noreferrer'
>
{isClient && (
<>
<Image
Expand All @@ -809,11 +830,15 @@ const Home = (props: any) => {
/>
</>
)}
</a>
<a href='https://www.octue.com/' target='_blank' rel='noreferrer'>
</Link>
<Link
href='https://www.octue.com/'
target='_blank'
rel='noreferrer'
>
<img src={octue_logo} className=' w-44' />
</a>
<a
</Link>
<Link
href='https://www.apideck.com/'
target='_blank'
rel='noreferrer'
Expand All @@ -824,8 +849,8 @@ const Home = (props: any) => {
alt='The Realtime Unified API
for Accounting integrations'
/>
</a>
<a
</Link>
<Link
href='https://rxdb.info/?utm_source=sponsor&utm_medium=json-schema&utm_campaign=json-schema'
target='_blank'
rel='noreferrer'
Expand All @@ -835,8 +860,8 @@ for Accounting integrations'
className=' w-44'
alt='The local Database for JavaScript Applications'
/>
</a>
<a
</Link>
<Link
href='https://topagency.webflow.io'
target='_blank'
rel='noreferrer'
Expand All @@ -846,8 +871,8 @@ for Accounting integrations'
className=' w-44'
alt='best website design agencies'
/>
</a>
<a
</Link>
<Link
href='https://opencollective.com/json-schema/contribute/sponsor-10816/checkout?interval=month&amount=100&name=&legalName=&email='
target='_blank'
rel='noreferrer'
Expand All @@ -868,7 +893,7 @@ for Accounting integrations'
/>
</svg>
<p className='text-sm md:text-base'>Your logo here</p>
</a>
</Link>
</div>
</div>
</section>
Expand All @@ -884,17 +909,17 @@ for Accounting integrations'
The following companies support us by letting us use their
products.
<br />
<a
<Link
href='mailto:[email protected]'
className='border-b border-black dark:border-white'
>
Email us
</a>{' '}
</Link>{' '}
for more info!
</p>
</div>
<div className='flex flex-col items-center md:flex-row justify-center text-center gap-x-14 gap-y-4'>
<a href='https://www.commonroom.io'>
<Link href='https://www.commonroom.io'>
{isClient && (
<>
<Image
Expand All @@ -906,8 +931,8 @@ for Accounting integrations'
/>
</>
)}
</a>
<a href='https://json-schema.org/slack'>
</Link>
<Link href='https://json-schema.org/slack'>
{isClient && (
<>
<Image
Expand All @@ -919,7 +944,7 @@ for Accounting integrations'
/>
</>
)}
</a>
</Link>
</div>{' '}
</section>
</div>
Expand Down