fix responsive and github stars

src/components/Home/Hero/GetStarted/GetStartedWithDvcX.tsx

@@ -19,7 +19,7 @@ const GetStartedWithDvcX = () => {
         />
       </div>
       <DvcxSlides />
-      <div className={cn('flex md:justify-center')}>
+      <div className={cn('flex justify-center')}>
         <CTAButton className={cn('bg-purple text-light')}>
           Get on the waitlist
           <ArrowRight className="ml-4" />

src/components/Home/Hero/HeroSection.tsx

@@ -6,6 +6,9 @@ import { ReactComponent as ArrowDown } from '../../../../static/img/arrow-down-w
 import { ReactComponent as StarGithub } from '../../../../static/img/landing/star-github.svg'
 
 import * as styles from './styles.module.css'
+import shortenNumber from '../../../utils/format'
+import useStars from '../../../gatsby/hooks/stars'
+import Link from '@dvcorg/gatsby-theme-iterative/src/components/Link'
 
 interface ISectionProps {
   className?: string
@@ -32,8 +35,7 @@ const Section = ({ className, children }: ISectionProps) => (
 const Badge = ({ className, children }: ISectionProps) => (
   <div
     className={cn(
-      'mt-4',
-      'px-3 py-0 rounded-lg',
+      'px-1.5 md:px-3 py-0 rounded-lg',
       'w-fit',
       'mx-auto',
       'flex items-center justify-center gap-2',
@@ -48,8 +50,11 @@ const Badge = ({ className, children }: ISectionProps) => (
 export const CTAButton = ({ className, children }: ISectionProps) => (
   <button
     className={cn(
-      'py-4 px-5  rounded-lg',
-      'text-xl font-medium ',
+      'rounded-lg',
+      'py-1 px-2',
+      'md:py-4 md:px-5',
+      'text-base font-medium ',
+      'md:text-xl',
       'flex items-center',
       className
     )}
@@ -59,25 +64,36 @@ export const CTAButton = ({ className, children }: ISectionProps) => (
 )
 
 const HeroSection = () => {
+  const stars = useStars()
+
   return (
     <>
       {/* Title Section */}
       <SectionWrapper>
         <Section className="bg-dark text-light">
           <img src={'/img/logos/dvcx.svg'} alt="DVCx Logo" />
-          <div>
+          <div
+            className={cn('flex flex-col gap-4', 'lg:flex-row lg:items-center')}
+          >
             <h2 className="text-3xl font-medium">Dataset versioning</h2>
             <Badge className="bg-light text-dark">Coming soon</Badge>
           </div>
         </Section>
         <Section className="bg-light">
           <img src={'/img/logos/dvc.svg'} alt="DVC Logo" />
-          <div>
+          <div
+            className={cn('flex flex-col gap-4', 'lg:flex-row lg:items-center')}
+          >
             <h2 className="text-3xl font-medium">ML model versioning</h2>
-            <Badge className="bg-dark text-light">
-              11.4K
-              <StarGithub />
-            </Badge>
+            <Link
+              href="https://github.com/iterative/dvc"
+              className="no-underline"
+            >
+              <Badge className="bg-dark text-light">
+                {stars && shortenNumber(stars, 1)}
+                <StarGithub />
+              </Badge>
+            </Link>
           </div>
         </Section>
       </SectionWrapper>

src/components/Home/Hero/HeroTitleSection.tsx

@@ -6,8 +6,23 @@ import * as styles from './styles.module.css'
 const HeroTitleSection = ({ className }: { className?: string }) => {
   return (
     <div className={className}>
-      <div className="px-6 py-10 flex flex-col gap-6 text-center">
-        <div className="text-indigo">
+      <div
+        className={cn(
+          'text-center ',
+          'px-6 py-10 md:py-24',
+          'flex flex-col gap-6 md:flex-row md:gap-0',
+          'max-w-screen-lg'
+        )}
+      >
+        <div
+          className={cn(
+            'text-indigo',
+            'flex-1',
+            'md:border-r md:border-solid md:border-r-light',
+            'md:text-left',
+            'lg:mr-16'
+          )}
+        >
           <h1 className={cn('leading-10 font-extralight', styles.title)}>
             <span className="font-medium block sm:inline md:block">
               Data Version Control
@@ -18,8 +33,15 @@ const HeroTitleSection = ({ className }: { className?: string }) => {
             Free and open source, forever.
           </p>
         </div>
-        <div>
-          <p className="text-xl font-extralight">
+        <div
+          className={cn(
+            'md:border-l md:border-solid md:border-l-light',
+            'flex-1',
+            'md:text-justify',
+            'lg:pl-16'
+          )}
+        >
+          <p className="text-xl font-extralight md:pl-8 lg:pl-0 leading-10">
             Manage and version unstructured image, audio, video, and text files
             in storage and organize your ML modeling process into a reproducible
             workflow.

src/components/Home/Hero/styles.module.css

@@ -16,6 +16,18 @@
 .sectionViz {
   position: relative;
   height: 600px;
+
+  @media screen(xxsMax) {
+    height: 800px;
+  }
+
+  @media screen(lg) {
+    height: 400px;
+  }
+
+  @media screen(xl) {
+    height: 350px;
+  }
 }
 
 .gridContainer {
@@ -34,7 +46,7 @@
 }
 
 .heroDesc {
-  @apply pl-4 py-4 pr-6 text-2xl font-normal text-left;
+  @apply pl-4 py-4 pr-6 text-xl sm:text-2xl font-normal text-left;
 
   line-height: 3rem;
 }
@@ -52,10 +64,6 @@
 }
 
 @media screen(lg) {
-  .sectionViz {
-    height: 300px;
-  }
-
   .gridContainer {
     grid-template-columns: 1fr 2fr 1fr; /* Three columns */
     grid-template-rows: auto;

src/utils/format.ts

@@ -0,0 +1,21 @@
+export default function shortenNumber(num: number, precision: number = 2) {
+  if (num < 1000) {
+    return num
+  }
+  const map = [
+    { suffix: 'T', threshold: 1e12 },
+    { suffix: 'B', threshold: 1e9 },
+    { suffix: 'M', threshold: 1e6 },
+    { suffix: 'K', threshold: 1e3 },
+    { suffix: '', threshold: 1 }
+  ]
+
+  const found = map.find(x => Math.abs(num) >= x.threshold)
+  if (found) {
+    const formatted = (num / found.threshold).toFixed(precision) + found.suffix
+
+    return formatted
+  }
+
+  return num
+}