Make the hero section work nicer on mobile screens

graphql-hive · Aug 22, 2024 · 7362cf7 · 7362cf7
1 parent 3c61f0b
commit 7362cf7
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 8 deletions.
diff --git a/packages/web/docs/src/components/call-to-action.tsx b/packages/web/docs/src/components/call-to-action.tsx
@@ -37,7 +37,7 @@ export function CallToAction({ className, variant, ...rest }: CallToActionProps)
   return (
     <Anchor
       className={cn(
-        'relative block w-fit rounded-lg' +
+        'relative block rounded-lg sm:w-fit' +
           ' text-green-1000 px-6 py-3 font-medium leading-6' +
           ' relative flex flex-row items-center justify-center gap-2',
         'focus-visible:ring-0 focus-visible:ring-offset-0',

diff --git a/packages/web/docs/src/components/decorations.tsx b/packages/web/docs/src/components/decorations.tsx
@@ -1,6 +1,12 @@
 export function ArchDecoration(props: React.SVGProps<SVGSVGElement>) {
   return (
-    <svg width="432" height="432" {...props}>
+    <svg
+      width="432"
+      height="432"
+      viewBox="0 0 432 432"
+      preserveAspectRatio="xMidYMid meet"
+      {...props}
+    >
       <path
         d="M.75 431v.25h90.24V160.868c0-38.596 31.282-69.878 69.878-69.878H431.25V.75H191.864a47.017 47.017 0 0 0-33.23 13.771l-68.07 68.071-7.972 7.971-68.07 68.071A47.018 47.018 0 0 0 .75 191.864V431Z"
         fill="url(#arch-decoration-a)"
@@ -13,7 +19,7 @@ export function ArchDecoration(props: React.SVGProps<SVGSVGElement>) {
 
 export function ArchDecorationGradientDefs() {
   return (
-    <svg width="432" height="432" className="absolute -z-10">
+    <svg width="432" height="432" viewBox="0 0 432 432" className="absolute -z-10">
       <defs>
         <linearGradient
           id="arch-decoration-a"

diff --git a/packages/web/docs/src/components/hero.tsx b/packages/web/docs/src/components/hero.tsx
@@ -6,12 +6,12 @@ export function Hero(props: { children: ReactNode; className?: string }) {
   return (
     <div
       className={cn(
-        'bg-green-1000 relative flex max-w-[90rem] flex-col gap-8 overflow-hidden rounded-3xl pb-[168px] pt-24',
+        'bg-green-1000 relative flex max-w-[90rem] flex-col gap-6 overflow-hidden rounded-3xl px-4 py-6 sm:pb-28 sm:pt-12 md:gap-8 lg:pb-[168px] lg:pt-24',
         props.className,
       )}
     >
-      <ArchDecoration className="pointer-events-none absolute left-[-186px] top-[-76px] rotate-180" />
-      <ArchDecoration className="pointer-events-none absolute bottom-0 right-[-72px]" />
+      <ArchDecoration className="pointer-events-none absolute left-[-46px] top-[-20px] size-[200px] rotate-180 md:left-[-186px] md:top-[-76px] md:size-auto" />
+      <ArchDecoration className="pointer-events-none absolute bottom-0 right-[-53px] size-[200px] md:-bottom-32 md:size-auto lg:bottom-0 lg:right-[-72px]" />
       <ArchDecorationGradientDefs />
       {props.children}
       <HighlightDecoration className="pointer-events-none absolute right-0 top-[-22px] overflow-visible" />
@@ -21,7 +21,9 @@ export function Hero(props: { children: ReactNode; className?: string }) {
 
 export function HeroLinks(props: { children: ReactNode }) {
   return (
-    <div className="relative z-10 flex flex-row justify-center gap-4 px-0.5">{props.children}</div>
+    <div className="relative z-10 flex flex-col justify-center gap-2 px-0.5 sm:flex-row sm:gap-4">
+      {props.children}
+    </div>
   );
 }
 

diff --git a/packages/web/docs/src/components/landing-page.tsx b/packages/web/docs/src/components/landing-page.tsx
@@ -110,7 +110,7 @@ function GetStartedTodaySection({ className }: { className?: string }) {
         30&nbsp;days trial period.
       </p>
       <CallToAction
-      variant="primary-inverted"
+        variant="primary-inverted"
         className="mx-auto mt-8"
         href="https://app.graphql-hive.com/"
       >