From 3bb4a34e4cf4ddd8708a06ec216d13d642c7a572 Mon Sep 17 00:00:00 2001
From: ShubhamPalriwala <spalriwalau@gmail.com>
Date: Tue, 18 Jul 2023 17:15:18 +0530
Subject: [PATCH] fix: hero component padding for smaller screen & github div
 conditional horizontal margin

---
 apps/formbricks-com/components/home/GitHubSponsorship.tsx | 5 ++++-
 apps/formbricks-com/components/home/Hero.tsx              | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/apps/formbricks-com/components/home/GitHubSponsorship.tsx b/apps/formbricks-com/components/home/GitHubSponsorship.tsx
index c26ee3c187..e59ed548e9 100644
--- a/apps/formbricks-com/components/home/GitHubSponsorship.tsx
+++ b/apps/formbricks-com/components/home/GitHubSponsorship.tsx
@@ -5,7 +5,10 @@ import Link from "next/link";
 
 export const GitHubSponsorship: React.FC = () => {
   return (
-    <div className="xs:mx-auto xs:w-full relative mx-auto my-4 mb-12 mt-12 rounded-xl bg-gradient-to-br from-slate-100 to-slate-200 px-4 py-8 dark:from-slate-800 dark:via-slate-800 dark:to-slate-700  sm:px-6 sm:pb-12 sm:pt-8  md:max-w-none lg:mt-6 lg:px-8 lg:pt-8 ">
+    <div className="mx-4 my-4 mb-12 mt-12 rounded-xl bg-gradient-to-br from-slate-100 to-slate-200 px-4 py-8 dark:from-slate-800 dark:via-slate-800 dark:to-slate-700 sm:px-6 sm:pb-12 sm:pt-8 md:max-w-none lg:mt-6 lg:px-8 lg:pt-8">
+      <style jsx>{`
+        @media (min-width: 426px);
+      `}</style>
       <div className="right-10 lg:absolute">
         <Image
           src={GitHubMarkDark}
diff --git a/apps/formbricks-com/components/home/Hero.tsx b/apps/formbricks-com/components/home/Hero.tsx
index 5166465de4..01de31a8a5 100644
--- a/apps/formbricks-com/components/home/Hero.tsx
+++ b/apps/formbricks-com/components/home/Hero.tsx
@@ -22,7 +22,7 @@ export const Hero: React.FC = ({}) => {
         <a
           href="https://github.com/formbricks/formbricks"
           target="_blank"
-          className="border-brand-dark rounded-full border px-6 py-1.5 text-sm text-slate-500 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800">
+          className="border-brand-dark rounded-full border px-4 py-1.5 text-sm text-slate-500 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800">
           We&apos;re Open-Source | Star us on GitHub{" "}
           <ChevronRightIcon className="inline h-5 w-5 text-slate-300" />
         </a>