Skip to content

Commit 914e3c9

Browse files
Merge pull request #1904 from Adityakumar37/hover
Added smooth hover animations to sponsor and media partner logos for a more interactive and modern user experience.
2 parents 07611b3 + d7b3a85 commit 914e3c9

File tree

3 files changed

+35
-29
lines changed

3 files changed

+35
-29
lines changed

components/TableOfContentMarkdown.tsx

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -175,11 +175,8 @@ export const TableOfContent = ({ depth }: TableOfContentProps) => {
175175
<span>Table of Contents</span>
176176
</div>
177177
<div className='mt-2 bg-slate-50 dark:bg-slate-900 pt-6 pb-3 pr-3 border border-r-0 border-y-0 border-l-blue-400/40 border-l-[2.5px]'>
178-
<TableOfContentMarkdown
179-
markdown={fullMarkdown}
180-
depth={depth}
181-
/>
178+
<TableOfContentMarkdown markdown={fullMarkdown} depth={depth} />
182179
</div>
183180
</>
184181
);
185-
};
182+
};

pages/index.page.tsx

Lines changed: 29 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -637,7 +637,7 @@ const Home = (props: any) => {
637637
href='https://opencollective.com/json-schema/contribute/golden-sponsor-68354/checkout?interval=month&amount=1000&name=&legalName=&email='
638638
target='_blank'
639639
rel='noreferrer'
640-
className='w-[310px] h-[180px] mx-auto rounded-lg bg-primary text-white font-semibold flex items-center justify-center space-x-2 cursor-pointer px-3'
640+
className='w-[310px] h-[180px] mx-auto rounded-lg bg-primary text-white font-semibold flex items-center justify-center space-x-2 cursor-pointer px-3 transition-transform duration-300 hover:scale-105'
641641
>
642642
<svg
643643
xmlns='http://www.w3.org/2000/svg'
@@ -662,7 +662,7 @@ const Home = (props: any) => {
662662
href='https://opencollective.com/json-schema/contribute/silver-sponsor-68353/checkout?interval=month&amount=500&name=&legalName=&email='
663663
target='_blank'
664664
rel='noreferrer'
665-
className='w-[200px] h-[120px] mx-auto rounded-lg bg-primary text-white font-semibold flex items-center justify-center space-x-2 cursor-pointer px-3'
665+
className='w-[200px] h-[120px] mx-auto rounded-lg bg-primary text-white font-semibold flex items-center justify-center space-x-2 cursor-pointer px-3 transition-transform duration-300 hover:scale-105'
666666
>
667667
<svg
668668
xmlns='http://www.w3.org/2000/svg'
@@ -693,7 +693,7 @@ const Home = (props: any) => {
693693
<>
694694
<Image
695695
src={asyncapi_logo}
696-
className=' w-44'
696+
className='w-44 transition-transform duration-300 hover:scale-105'
697697
width={176}
698698
height={100}
699699
alt='asyncapi'
@@ -710,7 +710,7 @@ const Home = (props: any) => {
710710
<>
711711
<Image
712712
src={airbnb_logo}
713-
className=' w-44'
713+
className='w-44 transition-transform duration-300 hover:scale-105'
714714
width={176}
715715
height={100}
716716
alt='airbnb'
@@ -727,7 +727,7 @@ const Home = (props: any) => {
727727
<>
728728
<Image
729729
src={postman_logo}
730-
className=' w-44'
730+
className='w-44 transition-transform duration-300 hover:scale-105'
731731
width={176}
732732
height={100}
733733
alt='postman'
@@ -740,7 +740,7 @@ const Home = (props: any) => {
740740
<>
741741
<Image
742742
src={endjin_logo}
743-
className=' w-44'
743+
className='w-44 transition-transform duration-300 hover:scale-105'
744744
width={176}
745745
height={100}
746746
alt='endjin'
@@ -753,7 +753,7 @@ const Home = (props: any) => {
753753
<>
754754
<Image
755755
src={llc_logo}
756-
className=' w-44'
756+
className='w-44 transition-transform duration-300 hover:scale-105'
757757
width={176}
758758
height={100}
759759
alt='llc'
@@ -770,7 +770,7 @@ const Home = (props: any) => {
770770
<>
771771
<Image
772772
src={vpsserver_logo}
773-
className=' w-44'
773+
className='w-44 transition-transform duration-300 hover:scale-105'
774774
width={176}
775775
height={100}
776776
alt='vpsserver'
@@ -787,7 +787,7 @@ const Home = (props: any) => {
787787
<>
788788
<Image
789789
src={itflashcards_logo}
790-
className=' w-44'
790+
className='w-44 transition-transform duration-300 hover:scale-105'
791791
width={176}
792792
height={100}
793793
alt='itflashcards'
@@ -804,7 +804,7 @@ const Home = (props: any) => {
804804
<>
805805
<Image
806806
src={route4me_logo}
807-
className=' w-44'
807+
className='w-44 transition-transform duration-300 hover:scale-105'
808808
width={176}
809809
height={100}
810810
alt='route4me'
@@ -817,7 +817,7 @@ const Home = (props: any) => {
817817
<>
818818
<Image
819819
src={n8n_logo}
820-
className=' w-44'
820+
className='w-44 transition-transform duration-300 hover:scale-105'
821821
width={176}
822822
height={100}
823823
alt='n8n'
@@ -830,7 +830,7 @@ const Home = (props: any) => {
830830
<>
831831
<Image
832832
src={ccopter_logo}
833-
className=' w-44'
833+
className='w-44 transition-transform duration-300 hover:scale-105'
834834
width={176}
835835
height={100}
836836
alt='ccopter'
@@ -839,7 +839,10 @@ const Home = (props: any) => {
839839
)}
840840
</a>
841841
<a href='https://www.octue.com/' target='_blank' rel='noreferrer'>
842-
<img src={octue_logo} className=' w-44' />
842+
<img
843+
src={octue_logo}
844+
className='w-44 transition-transform duration-300 hover:scale-105'
845+
/>
843846
</a>
844847
<a
845848
href='https://www.apideck.com/'
@@ -848,7 +851,7 @@ const Home = (props: any) => {
848851
>
849852
<img
850853
src={apideck_logo}
851-
className=' w-44'
854+
className='w-44 transition-transform duration-300 hover:scale-105'
852855
alt='The Realtime Unified API
853856
for Accounting integrations'
854857
/>
@@ -860,7 +863,7 @@ for Accounting integrations'
860863
>
861864
<img
862865
src={rxdb_logo}
863-
className=' w-44'
866+
className='w-44 transition-transform duration-300 hover:scale-105'
864867
alt='The local Database for JavaScript Applications'
865868
/>
866869
</a>
@@ -871,7 +874,7 @@ for Accounting integrations'
871874
>
872875
<img
873876
src={wda_logo}
874-
className=' w-44'
877+
className='w-44 transition-transform duration-300 hover:scale-105'
875878
alt='best website design agencies'
876879
/>
877880
</a>
@@ -882,19 +885,23 @@ for Accounting integrations'
882885
>
883886
<img
884887
src={anon_logo}
885-
className=' w-44'
888+
className='w-44 transition-transform duration-300 hover:scale-105'
886889
alt='Instagram Story Viewer'
887890
/>
888891
</a>
889892
<a href='https://supadata.ai/' target='_blank' rel='noreferrer'>
890893
<img
891894
src={supadata_logo}
892-
className=' w-44'
895+
className='w-44 transition-transform duration-300 hover:scale-105'
893896
alt='supadata logo'
894897
/>
895898
</a>
896899
<a href='https://dottxt.ai/' target='_blank' rel='noreferrer'>
897-
<img src={dottxt_logo} className=' w-44' alt='dottxt logo' />
900+
<img
901+
src={dottxt_logo}
902+
className='w-44 transition-transform duration-300 hover:scale-105'
903+
alt='dottxt logo'
904+
/>
898905
</a>
899906
<a
900907
href='https://www.sourcemeta.com/'
@@ -903,15 +910,15 @@ for Accounting integrations'
903910
>
904911
<img
905912
src={sourcemeta_logo}
906-
className=' w-44'
913+
className='w-44 transition-transform duration-300 hover:scale-105'
907914
alt='dottxt logo'
908915
/>
909916
</a>
910917
<a
911918
href='https://opencollective.com/json-schema/contribute/sponsor-10816/checkout?interval=month&amount=100&name=&legalName=&email='
912919
target='_blank'
913920
rel='noreferrer'
914-
className='w-[155px] md:w-[176px] h-[44px] mx-auto rounded-lg bg-primary text-white font-semibold flex items-center justify-center space-x-2 cursor-pointer px-3'
921+
className='w-[155px] md:w-[176px] h-[44px] mx-auto rounded-lg bg-primary text-white font-semibold flex items-center justify-center space-x-2 cursor-pointer px-3 transition-transform duration-300 hover:scale-105'
915922
>
916923
<svg
917924
xmlns='http://www.w3.org/2000/svg'
@@ -953,7 +960,7 @@ for Accounting integrations'
953960
<>
954961
<Image
955962
src={devevents_logo}
956-
className='w-48 md:w-56'
963+
className='w-48 md:w-56 transition-transform duration-300 hover:scale-105'
957964
width={192}
958965
height={224}
959966
alt='dev events'

styles/globals.css

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -108,11 +108,13 @@ border-radius: 4px; */
108108
) !important;
109109
}
110110
.keyshadow {
111-
--docsearch-key-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff,
111+
--docsearch-key-shadow:
112+
inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff,
112113
0 1px 2px 1px rgba(30, 35, 90, 0.4) !important;
113114
}
114115
.keyshadow[data-theme='dark'] {
115-
--docsearch-key-shadow: inset 0 -2px 0 0 #ffffff, inset 0 0 1px 1px #ffffff,
116+
--docsearch-key-shadow:
117+
inset 0 -2px 0 0 #ffffff, inset 0 0 1px 1px #ffffff,
116118
0 2px 2px 0 rgba(3, 4, 9, 0.3) !important;
117119
}
118120

0 commit comments

Comments
 (0)