docs: Fix responsive issues.

moonrepo · Jul 27, 2024 · ff89165 · ff89165
1 parent 203e304
commit ff89165
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 6 deletions.
diff --git a/website/src/components/Products/HeroIcon.tsx b/website/src/components/Products/HeroIcon.tsx
@@ -1,16 +1,19 @@
+import clsx from 'clsx';
+
 export interface HeroIconProps {
 	icon: React.ReactNode;
 	text: React.ReactNode;
+	textClass?: string;
 }
 
-export default function HeroIcon({ icon, text }: HeroIconProps) {
+export default function HeroIcon({ icon, text, textClass }: HeroIconProps) {
 	return (
 		<h1
 			className="text-white flex justify-center md:justify-start items-stretch gap-3"
 			style={{ height: 85 }}
 		>
 			<div className="relative">{icon}</div>
-			<div className="relative">{text}</div>
+			<div className={clsx('relative', textClass)}>{text}</div>
 		</h1>
 	);
 }
diff --git a/website/src/components/Products/Moon/Hero.tsx b/website/src/components/Products/Moon/Hero.tsx
@@ -20,7 +20,8 @@ export default function Hero() {
 				<div className="text-center md:text-left md:w-6/12">
 					<HeroIcon
 						icon={<LogoIcon height={75} style={{ marginTop: 1 }} />}
-						text={<TextVector height={51} style={{ top: 19 }} className="absolute" />}
+						text={<TextVector height={51} />}
+						textClass="pt-2"
 					/>
 
 					<p className="mt-1 mb-0 text-base text-white sm:text-lg sm:max-w-xl sm:mx-auto md:text-xl md:mx-0 md:pr-4">

diff --git a/website/src/components/Products/Proto/Hero.tsx b/website/src/components/Products/Proto/Hero.tsx
@@ -31,7 +31,7 @@ export default function Hero() {
 				<div className="text-center md:text-left md:w-6/12">
 					<HeroIcon
 						icon={<LogoIcon height={75} style={{ marginTop: 5 }} />}
-						text={<TextVector height={90} className="absolute top-0 left-0" />}
+						text={<TextVector height={90} />}
 					/>
 
 					<p className="mt-1 mb-0 text-base text-white sm:text-lg sm:max-w-xl sm:mx-auto md:text-xl md:mx-0 md:w-[80%]">

diff --git a/website/src/pages/moonbase.tsx b/website/src/pages/moonbase.tsx
@@ -68,7 +68,7 @@ export default function ProductMoonbase() {
 				<div className="bg-gradient-to-b from-slate-600 via-teal-800 to-white">
 					<Features
 						header="Continuous integration"
-						description="Highly efficient pipelines"
+						description="Efficient pipelines"
 						features={ciFeatures}
 						tier={3}
 					/>

diff --git a/website/src/pages/proto.tsx b/website/src/pages/proto.tsx
@@ -73,7 +73,7 @@ export default function ProductProto() {
 					<div className="relative py-4 sm:py-5 lg:py-6">
 						<div className="mx-auto max-w-md px-2 sm:max-w-3xl sm:px-3 lg:max-w-7xl lg:px-4">
 							<div className="bg-white rounded-lg p-6 drop-shadow">
-								<div className="grid grid-cols-2 gap-4 text-gray-900">
+								<div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-gray-900">
 									<div>
 										<Heading level={3} className="mb-2">
 											Get started