More features (#74)

* update ts config * updates docusaurus to v3 * Update Docusaurus configuration file * install all dependencies * change sidebar from js to ts * add tailwind config * test * add assets, constants and types for project * remove unused files from project * create banner component * create share button component * Add LegacyGateway component * Add Features component * Add ChooseTailcall component * Add Graph component to home page * Add GraphContainer component * Add MoreFeatures component * Add Partners component to display cloud partners' logos * Update Button component props * Add Discover component * Add Footer component * Add chooseTailcall constants * Refactor homepage component * Add ChooseTailcall type definition * Add home page components * Add key prop to ChooseTailcall component * Update import statements for GreaterThanUnderscoreIcon * Fix typo in ChooseTailcall component * Update Features component to include logo prop * Update partner image component names * Update partnerImages and features to use "logo" instead of "Svg" * Update GitHub logo import * Add new icons * Add HeroImage to Banner component * Update ChooseTailcall component styling * Fix styling in Features component * add assets * Add Founder type to index.d.ts * Add founders data to constants file * Add Hero component to About page * Add WhoWeAre component to About page * Add SectionTitle component * Add Founders component * Add about page component * Add AboutPage component * Add new tailwind utility classes for tiny display * Add assets * Add investors to constants file * Remove unused social media icons * Add new components to AboutPage * Add Investors component to About page * Add SocialBuzz component to About page * make hero component responsive * make who we are comp responsive * make founders responsive * make investors section responsive * Make SocialBuzz component responsive * create enterprise page * Add Hero component to enterprise section * Add EnterprisePage component * Add Partners component to EnterprisePage * add assets for enterprise features * Add enterprise features to constants * Add EnterpriseFeatures component to EnterprisePage * Add new tailwind utility classes for tiny display * Add additional enterprise features * Add MoreEnterpriseFeatures component * Add MoreEnterpriseFeatures component * Fix import order in MoreEnterpriseFeatures component * Add check-circle.svg icon * add pricing section * Fetching docs remotely * make enterprise features responsive * Make hero section responsive * make more features section responsive * make pricing section responsive * Add Grid to Footer * use correct font * add correct icon in footer * Add lottie-react package and new components * Add contact page component * Add ContactPage component * Add contact form component * Update package-lock.json and enterprise.tsx * make section responsive * Update Hello component layout * padding fix * Add Link component to Button and update props * Update banner buttons * remove unused assets * Add width prop to Button component * Fix button link in Graph component * Update MoreFeatures component and constants * Add flexbox layout to MoreFeatures component * Update Graph component's title width * Update button links in Discover component * Update GitHub link in Graph component * Fix footer links and grid alignment * Update social media links * Fix spacing in ChooseTailcall component * run counter only when in view * fix git overflow issue * update benchmark links * add key for loop * make home page tablet responsive * minor fixes * minor ui fixes * make about page tablet responsive * make enterprise section tablet responsive * make contact us tablet responsive * Add email and message state variables and update input and textarea elements * Add disabled prop to Button component * Add disabled attribute to Send message button * Fix alignment issue in Banner component * Add Grid component to Hero section * Update Pricing component styles * Design changes for docs * Add CheckCircle icon to MoreEnterpriseFeatures component * Update Graph component with visualizations * Update GraphContainer component * Update Button and Footer bg color * Add check-circle-broken.svg icon * add config section as per design * make section responsive * Update max-width in Discover component * Removed pat token * update url links * fix import statmt * run animation on view * change css for radio button * Add stage selection and send data to Zapier webhook * Add cursor pointer to radio buttons * Fix issue with resetting form fields * Update founder images * Changes in header * Mobile header changes * css changes * modify more features as per design * Update pricing plan buttons with href * Update MoreEnterpriseFeatures component styles and remove duplicate feature * Fix padding and margin in custom.css * minor fixes * Docs change * minor fixes * change file name * Deleted docs * Mobile header changes * Docs search * Commenting out header * remove unused assets * fix constants types * Fix link styling in Footer component * Refactor Button component styles * Refactor partner logo rendering in Partners component * Add useRef hook and animation control * Update Graph component with duration and delay props * Fix logo rendering in Features component * Update ChooseTailcall component * Update "Get Started" button link * Update font size in EnterpriseFeaturesCard * Commented out Investors component * Fix CSS formatting and styles * Update letter spacing in tailwind.config.ts * Update fetchGithubStars function to handle null response * Update ChooseTailcall component styling * minor fixes * Update button href in MoreFeatures component * Fix import statement in SearchBar.js and format copyright text in Footer.tsx * Update Configuration component styles * source docs from locally * bug fixes as per notion doc * Fix Marquee autoFill in Partners component * Update Footer styles * remove console errors by adding react-visibility-sensor * Update MoreFeatures component styling * Update Hello component styling * fix for issues raised by tushar * Github stars being fetched on runtime * Refactor GraphContainer component * update graph numbers * change js files to tsx/ts files * Add hover effect to GithubStarsButton * bug fixes * remove unused hooks * fix ts error * add google analytics for home page load * use js file instead of tsx * use tsx extn * use variable for colors in all places --------- Co-authored-by: Rajat <[email protected]>
tailcallhq · Jan 2, 2024 · f62e6e4 · f62e6e4
1 parent a4cfcc2
commit f62e6e4
Show file tree

Hide file tree

Showing 27 changed files with 598 additions and 130 deletions.
diff --git a/docusaurus.config.ts b/docusaurus.config.ts
@@ -4,7 +4,7 @@ import type * as Preset from "@docusaurus/preset-classic"
 
 const title = "Tailcall"
 const organization = "tailcallhq"
-const project = "tailcallhq.github.io"
+const project = "tailcall"
 
 function fetchLatestReleaseTagName(author = "tailcallhq", repo = "tailcall") {
   console.log(`Fetching latest release tag name from ${author}/${repo}`)
@@ -118,11 +118,11 @@ export default async function () {
           },
           docs: {
             // docRootComponent: require.resolve("./src/components/docs/Layout.tsx"),
-            sidebarPath: require.resolve("./sidebars.js"),
+            sidebarPath: require.resolve("./sidebars.ts"),
             sidebarCollapsible: false,
             // Please change this to your repo.
             // Remove this to remove the "edit this page" links.
-            editUrl: `https://github.com/${organization}/${project}/tree/develop`,
+            editUrl: `https://github.com/${organization}/${project}/blob/main/`,
           },
           blog: {
             showReadingTime: true,

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@docusaurus/core": "3.0.0",
+    "@docusaurus/plugin-google-gtag": "^3.0.1",
     "@docusaurus/preset-classic": "3.0.0",
     "@mdx-js/react": "^3.0.0",
     "autoprefixer": "^10.4.16",
@@ -28,6 +29,7 @@
     "react-countup": "^6.4.1",
     "react-dom": "^18.0.0",
     "react-fast-marquee": "^1.6.2",
+    "react-ga4": "^2.1.0",
     "react-on-screen": "^2.1.1",
     "tailwindcss": "^3.3.5"
   },

diff --git a/src/components/about/Founders.tsx b/src/components/about/Founders.tsx
@@ -45,7 +45,7 @@ const SocialIcon = ({social}) => {
             <g mask="url(#mask0_1387_3208)">
               <path
                 d="M8.17805 18.9997V9.55356H5.1769V18.9997H8.17805ZM6.6781 8.26408C7.72445 8.26408 8.37587 7.53873 8.37587 6.63224C8.35628 5.70511 7.72445 5 6.698 5C5.67085 5 5 5.70511 5 6.63216C5 7.53864 5.65118 8.26399 6.65844 8.26399L6.6781 8.26408ZM9.83923 18.9997H12.8401V13.7251C12.8401 13.4432 12.8597 13.1605 12.939 12.9591C13.1559 12.3948 13.6497 11.8107 14.4789 11.8107C15.5646 11.8107 15.9992 12.6768 15.9992 13.9468V18.9997H19V13.5836C19 10.6822 17.5196 9.3321 15.5452 9.3321C13.9264 9.3321 13.2154 10.2787 12.8204 10.9234H12.8404V9.55389H9.83939C9.87856 10.44 9.83923 18.9997 9.83923 18.9997Z"
-                fill={isHovered ? "#0A66C2" : "#B6B6B7"}
+                fill={isHovered ? "var(--ifm-color-linkedin)" : "var(--ifm-color-gray-800"}
               />
             </g>
           </svg>
@@ -60,7 +60,7 @@ const SocialIcon = ({social}) => {
             <g mask="url(#mask0_1387_3215)">
               <path
                 d="M18.9309 5.42515C17.6561 4.82111 16.2891 4.37607 14.8599 4.12118C14.8339 4.11627 14.8079 4.12856 14.7944 4.15315C14.6187 4.47606 14.4239 4.89732 14.2876 5.22844C12.7503 4.99076 11.221 4.99076 9.71526 5.22844C9.57887 4.88997 9.37706 4.47606 9.20047 4.15315C9.18706 4.12939 9.16106 4.11709 9.13504 4.12118C7.70659 4.37526 6.33963 4.82029 5.06411 5.42515C5.05306 5.43007 5.0436 5.43827 5.03732 5.44891C2.44449 9.44932 1.73421 13.3514 2.08265 17.2051C2.08422 17.2239 2.09447 17.2419 2.10866 17.2534C3.81934 18.5508 5.47642 19.3385 7.10273 19.8606C7.12875 19.8687 7.15633 19.8588 7.1729 19.8367C7.5576 19.2942 7.90053 18.7222 8.19456 18.1205C8.21191 18.0853 8.19535 18.0435 8.15988 18.0295C7.61594 17.8165 7.098 17.5567 6.59977 17.2617C6.56036 17.2379 6.55721 17.1796 6.59346 17.1517C6.69831 17.0706 6.80317 16.9863 6.9033 16.901C6.92141 16.8854 6.94664 16.8822 6.96794 16.8919C10.2411 18.4353 13.7847 18.4353 17.0191 16.8919C17.0404 16.8813 17.0657 16.8846 17.0846 16.9002C17.1847 16.9855 17.2896 17.0706 17.3952 17.1517C17.4314 17.1796 17.4291 17.2379 17.3897 17.2617C16.8914 17.5624 16.3734 17.8165 15.8288 18.0287C15.7933 18.0426 15.7776 18.0853 15.7949 18.1205C16.0952 18.7212 16.4381 19.2934 16.8158 19.8359C16.8316 19.8588 16.8599 19.8687 16.8859 19.8606C18.5201 19.3385 20.1772 18.5508 21.8879 17.2534C21.9029 17.2419 21.9123 17.2247 21.9139 17.2059C22.3309 12.7506 21.2154 8.88053 18.9569 5.44973C18.9513 5.43827 18.9419 5.43007 18.9309 5.42515ZM8.68335 14.8586C7.69791 14.8586 6.88594 13.9242 6.88594 12.7769C6.88594 11.6294 7.68216 10.6951 8.68335 10.6951C9.69239 10.6951 10.4966 11.6376 10.4808 12.7769C10.4808 13.9242 9.68451 14.8586 8.68335 14.8586ZM15.329 14.8586C14.3436 14.8586 13.5316 13.9242 13.5316 12.7769C13.5316 11.6294 14.3278 10.6951 15.329 10.6951C16.338 10.6951 17.1421 11.6376 17.1263 12.7769C17.1263 13.9242 16.338 14.8586 15.329 14.8586Z"
-                fill={isHovered ? "#5865F2" : "#B6B6B7"}
+                fill={isHovered ? "var(--ifm-color-discord)" : "var(--ifm-color-gray-800"}
               />
             </g>
           </svg>
@@ -71,7 +71,7 @@ const SocialIcon = ({social}) => {
           <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path
               d="M18.7447 6.42798H21.2748L15.7473 12.7456L22.25 21.3425H17.1584L13.1705 16.1285L8.60746 21.3425H6.07582L11.9881 14.585L5.75 6.42798H10.9708L14.5755 11.1937L18.7447 6.42798ZM17.8567 19.8281H19.2587L10.209 7.86283H8.7046L17.8567 19.8281Z"
-              fill={isHovered ? "#000" : "#B6B6B7"}
+              fill={isHovered ? "var(--ifm-color-black)" : "var(--ifm-color-gray-800"}
             />
           </svg>
         )

diff --git a/src/components/about/Investors.tsx b/src/components/about/Investors.tsx
@@ -12,7 +12,7 @@ const Investors = () => {
         <div
           className="flex items-center justify-center rounded-xl sm:rounded-2xl p-5 sm:p-10 shadow-lg w-52 h-28 sm:w-80 sm:h-40 bg-tailCall-light-100"
           style={{
-            border: "1px solid #CECECF",
+            border: "1px solid var(--ifm-color-gray-700)",
           }}
         >
           <img
@@ -28,7 +28,7 @@ const Investors = () => {
         <div
           className="flex items-center justify-center rounded-xl sm:rounded-2xl p-5 sm:p-10 shadow-lg w-52 h-28 sm:w-80 sm:h-40 bg-tailCall-light-100"
           style={{
-            border: "1px solid #CECECF",
+            border: "1px solid var(--ifm-color-gray-700)",
           }}
         >
           <img

diff --git a/src/components/about/SocialBuzz.tsx b/src/components/about/SocialBuzz.tsx
@@ -5,7 +5,7 @@ const SocialBuzz = () => {
   return (
     <section className="py-16 sm:py-24 relative flex items-center justify-center mx-4 sm:mx-10 lg:mx-12 lg:space-x-10 max-w-8xl">
       <div className="flex flex-col gap-6 lg:gap-y-44">
-        <div className="ml-4 lg:ml-20">
+        <div className="ml-4 lg:ml-32">
           <SectionTitle title="About Us" />
           <span className="text-title-semi-large sm:text-display-small">Social & Buzz</span>
         </div>
@@ -18,7 +18,7 @@ const SocialBuzz = () => {
           alt="tweet 2"
           className="rounded-3xl m-2 lg:hidden"
           style={{
-            border: "1px solid #CECECF",
+            border: "1px solid var(--ifm-color-gray-700)",
           }}
         />
 
@@ -30,7 +30,7 @@ const SocialBuzz = () => {
           alt=""
           className=" rounded-3xl m-2"
           style={{
-            border: "1px solid #CECECF",
+            border: "1px solid var(--ifm-color-gray-700)",
           }}
         />
       </div>
@@ -42,7 +42,7 @@ const SocialBuzz = () => {
         alt="tweet 2"
         className="rounded-3xl m-2 lg:block hidden"
         style={{
-          border: "1px solid #CECECF",
+          border: "1px solid var(--ifm-color-gray-700)",
         }}
       />
     </section>

diff --git a/src/components/contact/Hello.tsx b/src/components/contact/Hello.tsx
@@ -65,7 +65,7 @@ const Hello = () => {
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               style={{
-                border: "1px solid #CECECF",
+                border: "1px solid var(--ifm-color-gray-700)",
               }}
               className="rounded-lg font-space-grotesk h-11 w-[95%] sm:w-[480px] p-3 text-content-small outline-none focus:border-x-tailCall-light-700"
               placeholder="[email protected]"

diff --git a/src/components/enterprise/EnterpriseFeatures.tsx b/src/components/enterprise/EnterpriseFeatures.tsx
@@ -15,7 +15,7 @@ const EnterpriseFeaturesCard = ({feature}: EnterpriseFeaturesCardProps) => {
     <div
       className="rounded-3xl w-full sm:w-[450px] sm:h-60 p-8 flex flex-col items-start space-y-4"
       style={{
-        border: "1px solid #E7E7E7",
+        border: "1px solid var(--ifm-color-gray-600)",
       }}
     >
       <feature.logo className="h-5 w-5 sm:h-8 sm:w-8" />

diff --git a/src/components/enterprise/MoreEnterpriseFeatures.tsx b/src/components/enterprise/MoreEnterpriseFeatures.tsx
@@ -8,7 +8,7 @@ const MoreEnterpriseFeatures = () => {
     <section
       className="flex flex-col sm:flex-row items-center justify-center sm:px-10 lg:px-40 relative overflow-hidden"
       style={{
-        border: "1px solid #E5E5E5",
+        border: "1px solid var(--ifm-color-gray-500)",
       }}
     >
       <div className="w-full h-full p-4 sm:py-0 sm:pr-10">
@@ -25,14 +25,14 @@ const MoreEnterpriseFeatures = () => {
       <div
         className="flex items-start justify-start gap-4 flex-wrap p-4 overflow-x-auto h-full max-w-screen-md sm:pl-10 sm:py-10"
         style={{
-          borderLeft: "1px solid #E5E5E5",
+          borderLeft: "1px solid var(--ifm-color-gray-500)",
         }}
       >
         {additionalEnterpriseFeatures.map((feature) => (
           <div
             className="flex items-center p-2 sm:px-4 sm:py-3 rounded w-fit space-x-2 sm:space-x-4"
             style={{
-              border: "1px solid #E5E5E5",
+              border: "1px solid var(--ifm-color-gray-500)",
               minWidth: "150px",
             }}
             key={feature.id}

diff --git a/src/components/enterprise/Pricing.tsx b/src/components/enterprise/Pricing.tsx
@@ -16,7 +16,7 @@ const Pricing = () => {
           <div
             key={plan.id}
             style={{
-              border: plan.mostPopular ? "1px solid #000" : "1px solid #E7E7E7",
+              border: plan.mostPopular ? "1px solid black" : "1px solid var(--ifm-color-gray-600)",
             }}
             className="rounded-2xl flex flex-col items-center justify-between gap-y-7 sm:gap-y-0 py-4 sm:py-6 relative w-full h-auto sm:w-[384px] md:h-[520px] lg:h-[584px]"
           >

diff --git a/src/components/home/ChooseTailcall.tsx b/src/components/home/ChooseTailcall.tsx
@@ -14,7 +14,7 @@ const ChooseTailcall = () => {
             key={item.id}
             // TODO: Tailwind border not getting applied
             style={{
-              border: "1px solid #2C2C2C",
+              border: "1px solid var(--ifm-color-dark-900)",
             }}
           >
             <div className="h-16 w-16 sm:w-full sm:h-full">

diff --git a/src/components/home/Features.tsx b/src/components/home/Features.tsx
@@ -26,7 +26,7 @@ const Feature = ({feature}: FeatureProps) => {
         className="flex flex-col sm:flex-row p-4 sm:p-10  shadow-xl rounded-[20px] relative  sm:ml-0"
         style={{
           backgroundImage: `url(${require("@site/static/images/home/grid.jpg").default})`,
-          boxShadow: "0px 0px 0px 3px #F3F4F7",
+          boxShadow: "0px 0px 0px 3px var(--ifm-color-gray-300)",
         }}
       >
         <div className="bg-gradient-to-b from-tailCall-light-100 from-3% via-[#E4E5E9] via-67% to-tailCall-light-100 absolute -left-4 sm:-left-6 w-[2px] h-full" />

diff --git a/src/components/home/Graph.tsx b/src/components/home/Graph.tsx
@@ -30,6 +30,7 @@ const Graph = () => {
           <GraphContainer
             visual={RequestVisual}
             metricData={7442.01}
+            start={5000}
             metricTitle="Requests/sec"
             metricDesc="(Higher is better)"
             duration={1.6}
@@ -38,6 +39,7 @@ const Graph = () => {
           <GraphContainer
             visual={LatencyVisual}
             metricData={13.39}
+            start={1000}
             metricTitle="Latency (ms)"
             metricDesc="(Lower is better)"
             duration={1.6}

diff --git a/src/components/home/GraphContainer.tsx b/src/components/home/GraphContainer.tsx
@@ -10,9 +10,10 @@ type GraphContainerProps = {
   visual: any
   duration?: number
   delay?: number
+  start?: number
 }
 
-const GraphContainer = ({metricTitle, metricData, metricDesc, visual, delay, duration}: GraphContainerProps) => {
+const GraphContainer = ({metricTitle, metricData, metricDesc, visual, delay, duration, start}: GraphContainerProps) => {
   const lottieRef = useRef()
 
   const interactivity: any = {
@@ -35,7 +36,7 @@ const GraphContainer = ({metricTitle, metricData, metricDesc, visual, delay, dur
   return (
     <div
       style={{
-        border: "1px solid #2C2C2C",
+        border: "1px solid var(--ifm-color-dark-900)",
       }}
       className="h-[368px] lg:h-[400px] w-[95%] sm:w-[680px] rounded-3xl sm:rounded-[32px] flex flex-col relative"
     >
@@ -55,7 +56,7 @@ const GraphContainer = ({metricTitle, metricData, metricDesc, visual, delay, dur
               return (
                 <>
                   {isVisible ? (
-                    <CountUp start={2000} end={metricData} decimals={2} duration={duration} delay={delay} />
+                    <CountUp start={start} end={metricData} decimals={2} duration={duration} delay={delay} />
                   ) : null}
                 </>
               )

diff --git a/src/components/home/LegacyGateway.tsx b/src/components/home/LegacyGateway.tsx
@@ -24,7 +24,7 @@ const LegacyGateway = () => {
         </div>
       </div>
 
-      <div className="w-full flex items-center justify-center px-6 lg:px-0 mt-7">
+      <div className="w-full flex items-center justify-center px-0 mt-7">
         <Lottie
           animationData={SolutionGraphic}
           loop

diff --git a/src/components/home/MoreFeatures.tsx b/src/components/home/MoreFeatures.tsx
@@ -7,7 +7,7 @@ const FeatureBox = ({feature}) => {
   return (
     <div
       style={{
-        borderBottom: "1px solid #E4E4E4",
+        borderBottom: "1px solid var(--ifm-color-gray-400)",
       }}
       className="flex flex-col sm:flex-row items-start justify-start sm:items-center text-start space-y-2 sm:space-y-0 py-4 sm:py-8 lg:py-12 sm:space-x-4 text-content-tiny font-bold sm:text-title-small lg:text-title-medium text-tailCall-dark-500  sm:h-32 w-full border border-tailCall-dark-300"
     >

diff --git a/src/components/shared/Button.tsx b/src/components/shared/Button.tsx
@@ -20,23 +20,23 @@ const Button = ({title, Icon, theme, onClick, href, width, disabled}: ButtonProp
       case "light":
         return {
           classes: "text-tailCall-dark-500 bg-transparent",
-          styles: isHovered ? "2px solid #121315" : "1px solid #121315",
+          styles: isHovered ? "2px solid var(--ifm-color-dark-800)" : "1px solid var(--ifm-color-dark-800)",
           gridClasses:
             "absolute inset-0 -z-20 w-full h-full opacity-0 scale-90 group-hover:scale-100 group-hover:opacity-10 transform transition ease-out duration-150",
         }
 
       case "dark":
         return {
           classes: "text-tailCall-light-100 bg-white border-none",
-          styles: "2px solid #121315",
+          styles: "2px solid var(--ifm-color-dark-800)",
           gridClasses:
             "absolute inset-0 z-10 w-full h-full opacity-0 scale-90 group-hover:scale-95 group-hover:opacity-100 transform transition ease-out duration-150",
         }
 
       case "gray":
         return {
           classes: "text-tailCall-dark-100 bg-transparent text-tailCall-light-100",
-          styles: "2px solid #FFFFFF",
+          styles: "2px solid var(--ifm-color-white)",
           gridClasses: "hidden",
         }
 

diff --git a/src/components/shared/Footer.tsx b/src/components/shared/Footer.tsx
@@ -43,7 +43,9 @@ const Footer = () => {
       </div>
 
       <div className="flex flex-col-reverse sm:flex-row items-center gap-y-4 sm:justify-between w-[100%] max-w-7xl sm:mt-10 z-10">
-        <p className="text-content-tiny text-[#B4B4B4] font-space-mono font-normal">Copyright © 2023 Tailcall, Inc.</p>
+        <p className="text-content-tiny text-tailCall-light-700 font-space-mono font-normal">
+          Copyright © 2023 Tailcall, Inc.
+        </p>
         <div className="space-x-4">
           {socials.map((social) => (
             <Link href={social.href} className="cursor-pointer" key={social.id}>

diff --git a/src/components/shared/GithubStarsButton.tsx b/src/components/shared/GithubStarsButton.tsx
@@ -17,8 +17,16 @@ function GithubIcon() {
 
 export default function GithubStarsButton({className}) {
   const starsCount = useContext(GithubStarsContext)
+  const [isHovered, setIsHovered] = React.useState(false)
+
   return (
-    <a href={githubRepoURL} target="_blank" className={`${className} header-button header-button-github`}>
+    <a
+      href={githubRepoURL}
+      onMouseOver={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      target="_blank"
+      className={`${className} header-button header-button-github ${isHovered && "button-grid-bg-github"}`}
+    >
       <GithubIcon />
       <span>
         Star <span className="min-w-[3ch] inline-block">{starsCount}</span>
-Original file line number
+Diff line change
@@ Expand Up / @@ -24,7 +24,7 @@ const LegacyGateway = () => { @@
             </div>
           </div>
-          <div className="w-full flex items-center justify-center px-6 lg:px-0 mt-7">
+          <div className="w-full flex items-center justify-center px-0 mt-7">
             <Lottie
               animationData={SolutionGraphic}
               loop
@@ Expand Down @@