Fix landing style

AfipSDK · Jul 17, 2024 · 25b8316 · 25b8316
1 parent 730c518
commit 25b8316
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 35 deletions.
diff --git a/src/components/code-sample.scss b/src/components/code-sample.scss
@@ -1,6 +1,8 @@
 .tabs {
 	margin-left: 0;
 	text-align: left;
+	overflow-x: scroll;
+	white-space: nowrap;
 }
 
 .code-tabs {
@@ -113,32 +115,32 @@
 	height: auto;
 }
 
-.hero-figure::before,
-.hero-figure::after {
-	content: "";
-	position: absolute;
-	background-repeat: no-repeat;
-	background-size: 100%;
-}
-
-.has-animations .hero-figure::before,
-.has-animations .hero-figure::after {
-	opacity: 0;
-	-webkit-transition: opacity 2s ease;
-	transition: opacity 2s ease;
-}
-
-.anime-ready .has-animations .hero-figure::before,
-.anime-ready .has-animations .hero-figure::after {
-	opacity: 1;
-}
-
-.hero-figure::before {
-	top: -57.8%;
-	left: -1.3%;
-	width: 152.84%;
-	height: 178.78%;
-}
+// .hero-figure::before,
+// .hero-figure::after {
+// 	content: "";
+// 	position: absolute;
+// 	background-repeat: no-repeat;
+// 	background-size: 100%;
+// }
+
+// .has-animations .hero-figure::before,
+// .has-animations .hero-figure::after {
+// 	opacity: 0;
+// 	-webkit-transition: opacity 2s ease;
+// 	transition: opacity 2s ease;
+// }
+
+// .anime-ready .has-animations .hero-figure::before,
+// .anime-ready .has-animations .hero-figure::after {
+// 	opacity: 1;
+// }
+
+// .hero-figure::before {
+// 	top: -57.8%;
+// 	left: -1.3%;
+// 	width: 152.84%;
+// 	height: 178.78%;
+// }
 
 /* .hero-figure::after {
 top: -35.6%;

diff --git a/src/components/code-sample.tsx b/src/components/code-sample.tsx
@@ -52,20 +52,20 @@ export default function CodeSample() {
 			></div>
 			<div className="code-sample hero-figure-box hero-figure-box-code">
 				<div className="code-tabs">
-					<div className="row tabs">
-						<div className={`col-6 ${activeLang === 'js' && 'active'}`} onClick={() => setActiveLang('js')}>
+					<div className="tabs">
+						<div className={`${activeLang === 'js' && 'active'}`} onClick={() => setActiveLang('js')}>
 						<img className="max-w-[20px]" src="/images/icons/js.svg" alt="js" /><span className="file">Factura.js</span>
 						</div>
-						<div className={`col-6 ${activeLang === 'php' && 'active'}`} onClick={() => setActiveLang('php')}>
+						<div className={`${activeLang === 'php' && 'active'}`} onClick={() => setActiveLang('php')}>
 						<img className="max-w-[20px]" src="/images/icons/php.svg" alt="php" /><span className="file">Factura.php</span>
 						</div>
-						<div className={`col-6 ${activeLang === 'ruby' && 'active'}`} onClick={() => setActiveLang('ruby')}>
+						<div className={`${activeLang === 'ruby' && 'active'}`} onClick={() => setActiveLang('ruby')}>
 						<img className="max-w-[20px]" src="/images/icons/ruby.svg" alt="ruby" /><span className="file">Factura.rb</span>
 						</div>
-						<div className={`col-6 ${activeLang === 'python' && 'active'}`} onClick={() => setActiveLang('python')}>
+						<div className={`${activeLang === 'python' && 'active'}`} onClick={() => setActiveLang('python')}>
 						<img className="max-w-[20px]" src="/images/icons/python.svg" alt="python" /><span className="file">Factura.py</span>
 						</div>
-						<div className={`col-6 ${activeLang === 'api' && 'active'}`} onClick={() => setActiveLang('api')}>
+						<div className={`${activeLang === 'api' && 'active'}`} onClick={() => setActiveLang('api')}>
 						<img className="max-w-[20px]" src="/images/icons/api.svg" alt="api" /><span className="file">Factura</span>
 						</div>
 					</div>

diff --git a/src/components/home-hero.tsx b/src/components/home-hero.tsx
@@ -100,21 +100,21 @@ export default function HomeHero() {
 			</a>
 			</div>
 
-			<div className="flex items-center space-x-2 md:space-x-4">
+			<div className="flex items-left lg:items-center space-y-4 flex-col lg:flex-row lg:space-x-4 lg:space-y-0">
 				<a
 					href={siteConfig.links.docs}
 					target="_blank"
 					rel="noreferrer"
 					aria-label="documentacion"
-					className={cn(buttonVariants({ size: "lg" }))}
+					className={'w-fit ' + cn(buttonVariants({ size: "lg" }))}
 				>
 					Comenzar gratis
 				</a><a
 					href={siteConfig.links.discord}
 					target="_blank"
 					rel="noreferrer"
 					aria-label="documentacion"
-					className={cn(buttonVariants({ size: "lg", variant: 'secondary' }))}
+					className={'w-fit ' + cn(buttonVariants({ size: "lg", variant: 'secondary' }))}
 				>
 					<svg className="h-[20px]"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" fill="currentColor"><path fill="currentColor" d="M524.5 69.8a1.5 1.5 0 0 0 -.8-.7A485.1 485.1 0 0 0 404.1 32a1.8 1.8 0 0 0 -1.9 .9 337.5 337.5 0 0 0 -14.9 30.6 447.8 447.8 0 0 0 -134.4 0 309.5 309.5 0 0 0 -15.1-30.6 1.9 1.9 0 0 0 -1.9-.9A483.7 483.7 0 0 0 116.1 69.1a1.7 1.7 0 0 0 -.8 .7C39.1 183.7 18.2 294.7 28.4 404.4a2 2 0 0 0 .8 1.4A487.7 487.7 0 0 0 176 479.9a1.9 1.9 0 0 0 2.1-.7A348.2 348.2 0 0 0 208.1 430.4a1.9 1.9 0 0 0 -1-2.6 321.2 321.2 0 0 1 -45.9-21.9 1.9 1.9 0 0 1 -.2-3.1c3.1-2.3 6.2-4.7 9.1-7.1a1.8 1.8 0 0 1 1.9-.3c96.2 43.9 200.4 43.9 295.5 0a1.8 1.8 0 0 1 1.9 .2c2.9 2.4 6 4.9 9.1 7.2a1.9 1.9 0 0 1 -.2 3.1 301.4 301.4 0 0 1 -45.9 21.8 1.9 1.9 0 0 0 -1 2.6 391.1 391.1 0 0 0 30 48.8 1.9 1.9 0 0 0 2.1 .7A486 486 0 0 0 610.7 405.7a1.9 1.9 0 0 0 .8-1.4C623.7 277.6 590.9 167.5 524.5 69.8zM222.5 337.6c-29 0-52.8-26.6-52.8-59.2S193.1 219.1 222.5 219.1c29.7 0 53.3 26.8 52.8 59.2C275.3 311 251.9 337.6 222.5 337.6zm195.4 0c-29 0-52.8-26.6-52.8-59.2S388.4 219.1 417.9 219.1c29.7 0 53.3 26.8 52.8 59.2C470.7 311 447.5 337.6 417.9 337.6z"/></svg>
 					&nbsp;Comunidad Afip SDK