Style team section for tablets

graphql-hive · Aug 22, 2024 · c3ddcc1 · c3ddcc1
1 parent e49622e
commit c3ddcc1
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 15 deletions.
diff --git a/packages/web/docs/src/components/landing-page.tsx b/packages/web/docs/src/components/landing-page.tsx
@@ -99,7 +99,7 @@ function GetStartedTodaySection({ className }: { className?: string }) {
         className,
       )}
     >
-      <ArchDecoration className="absolute -left-1/2 -top-1/2 rotate-180 md:left-[-105px] md:top-[-109px] [&>path]:fill-none" />
+      <ArchDecoration className="absolute -left-1/2 -top-1/2 rotate-180 sm:-left-1/4 md:left-[-105px] md:top-[-109px] [&>path]:fill-none" />
       <HighlightDecoration className="absolute -left-1 -top-16 size-[600px] -scale-x-100 overflow-visible" />
       <LargeHiveIconDecoration className="absolute bottom-0 right-8 hidden lg:block" />
       <Heading as="h3" size="md" className="text-white">
@@ -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/"
       >
@@ -169,7 +169,7 @@ function EnterpriseFocusedCards({ className }: { className?: string }) {
 
 function UltimatePerformanceCards() {
   return (
-    <section className="px-4 py-6 sm:py-24 md:px-6 md:py-12">
+    <section className="px-4 py-6 sm:py-12 md:px-6">
       <Heading as="h3" size="md" className="text-balance text-center">
         GraphQL for the ultimate performance
       </Heading>

diff --git a/packages/web/docs/src/components/team-section.tsx b/packages/web/docs/src/components/team-section.tsx
@@ -1,3 +1,4 @@
+import { Fragment } from 'react';
 import { GlobeIcon } from '@radix-ui/react-icons';
 import { DiscordIcon, GitHubIcon, TwitterIcon } from '@theguild/components';
 import { cn } from '../lib';
@@ -9,12 +10,12 @@ export function TeamSection({ className }: { className?: string }) {
   return (
     <section
       className={cn(
-        'flex flex-col flex-wrap justify-center bg-blue-400 lg:h-[748px]' +
-          ' grid-cols-1 rounded-3xl px-4 py-6 md:grid-cols-[467px_1fr] lg:px-24 lg:py-[120px]',
+        'flex flex-col flex-wrap justify-center bg-blue-400 xl:h-[748px]' +
+          ' grid-cols-1 rounded-3xl px-4 py-6 lg:px-8 lg:py-16 xl:px-24 xl:py-[120px]',
         className,
       )}
     >
-      <Heading as="h3" size="md" className="text-green-1000 w-[468px] max-w-full text-balance">
+      <Heading as="h3" size="md" className="text-green-1000 max-w-full text-balance xl:w-[468px]">
         Built by The Guild. Industry veterans.
       </Heading>
 
@@ -29,14 +30,14 @@ export function TeamSection({ className }: { className?: string }) {
         href="https://the-guild.dev/"
         target="_blank"
         rel="noreferrer"
-        className="max-lg:order-1 max-md:w-full lg:mt-12"
+        className="max-xl:order-1 max-md:w-full xl:mt-12"
       >
         Visit The Guild
         <ArrowIcon />
       </CallToAction>
 
       <TeamGallery
-        className="w-[calc(100%+2rem)] max-lg:-mx-4 max-lg:px-4 max-lg:py-6 lg:w-[636px]"
+        className="w-[calc(100%+2rem)] max-xl:-mx-4 max-xl:px-4 max-xl:py-6 xl:w-[636px]"
         style={{
           '--size': '120px',
         }}
@@ -68,8 +69,9 @@ function TeamGallery(props: React.HTMLAttributes<HTMLElement>) {
     <ul
       {...props}
       className={cn(
-        'flex flex-row gap-2 overflow-auto lg:flex-wrap lg:gap-8' +
-          ' shrink-0 lg:[&>:nth-child(8n-7)]:ml-[calc(var(--size)/2)]',
+        'flex flex-row gap-2 max-lg:overflow-auto lg:flex-wrap lg:gap-4 xl:gap-8' +
+          ' shrink-0 xl:[&>:nth-child(8n-7)]:ml-[calc(var(--size)/2)]' +
+          ' grid-cols-6 items-stretch justify-items-stretch lg:max-xl:grid',
         props.className,
       )}
     >
@@ -85,9 +87,9 @@ function TeamAvatar({ data: [name, avatar, social] }: { data: TeamMember }) {
     <div className="relative">
       <a
         className={
-          'absolute right-0 top-0 rounded-2xl border-2 bg-[#222530] p-[9px] text-white hover:border-[#222530] lg:rounded-full' +
-          ' border-transparent lg:-translate-y-1/2 lg:translate-x-1/2' +
-          ' max-lg:size-[var(--size)] max-lg:opacity-0'
+          'absolute right-0 top-0 rounded-2xl border-2 bg-[#222530] p-[9px] text-white hover:border-[#222530] xl:rounded-full' +
+          ' border-transparent xl:-translate-y-1/2 xl:translate-x-1/2' +
+          ' max-xl:min-size-[var(--size)] max-xl:opacity-0'
         }
         href={social}
       >
@@ -103,13 +105,15 @@ function TeamAvatar({ data: [name, avatar, social] }: { data: TeamMember }) {
       </a>
       <div
         role="presentation"
-        className="size-[var(--size)] rounded-2xl bg-['linear-gradient(0deg,#A2C1C4_0%,#A2C1C4_100%),url(var(--src))_lightgray_50%_/_cover_no-repeat'] bg-blue-300"
+        className="aspect-square min-h-[var(--size)] min-w-[var(--size)] rounded-2xl bg-['linear-gradient(0deg,#A2C1C4_0%,#A2C1C4_100%),url(var(--src))_lightgray_50%_/_cover_no-repeat'] bg-blue-300"
         style={{
           '--src': 'https://place.dog/120/120' + '?' + 'name=' + avatar,
           backgroundBlendMode: 'multiply, normal',
         }}
       />
-      <span className="text-green-1000 mt-2 text-sm font-medium leading-5">{name}</span>
+      <span className="text-green-1000 mt-2 block text-sm font-medium leading-5 lg:max-xl:block lg:max-xl:text-base">
+        {name}
+      </span>
     </div>
   );
 }