fix: concierge cards (#1263)

Co-authored-by: Johannes <johannes@formbricks.com>
Co-authored-by: Johannes <72809645+jobenjada@users.noreply.github.com>

apps/formbricks-com/components/shared/Header.tsx

@@ -1,5 +1,6 @@
 import GitHubMarkWhite from "@/images/github-mark-white.svg";
 import GitHubMarkDark from "@/images/github-mark.svg";
+import { Button } from "@formbricks/ui/Button";
 import {
   BaseballIcon,
   CancelSubscriptionIcon,
@@ -10,7 +11,6 @@ import {
   OnboardingIcon,
   PMFIcon,
 } from "@formbricks/ui/icons";
-import { Button } from "@formbricks/ui/Button";
 import { Popover, Transition } from "@headlessui/react";
 import { Bars3Icon, ChevronDownIcon, ChevronRightIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import clsx from "clsx";
@@ -121,7 +121,7 @@ export default function Header() {
   return (
     <Popover className={`${stickyNavClass}`} as="header">
       <a href="https://www.producthunt.com/products/formbricks" target="_blank">
-        <div className="bg-[#ff6154] text-center text-sm text-white">
+        <div className="bg-[#ff6154] px-4 py-2 text-center text-sm text-white lg:py-0">
           We&apos;re launching soon on Product Hunt - get notified 🚀
         </div>
       </a>

apps/formbricks-com/pages/concierge.tsx

@@ -55,7 +55,7 @@ const ConciergePage = () => {
         headingPt2="Service"
         subheading="Let's set up your system for continuous user discovery together."
       />
-      <div className="-mt-16 grid grid-cols-1 space-y-4 px-4 md:grid-cols-2 md:gap-8 md:px-16">
+      <div className="-mt-16 grid grid-cols-1 space-y-4 px-4 md:gap-8 md:px-16 lg:grid-cols-2">
         <div className="rounded-xl bg-slate-100 p-12">
           {XMOffer.map((offer) => (
             <div key={offer.step} className="mb-8 flex items-center gap-x-4">
@@ -68,22 +68,8 @@ const ConciergePage = () => {
               </div>
             </div>
           ))}
-          {/*           <div className="border-b border-t border-slate-300 p-6  text-4xl font-semibold text-slate-800">
-            <p className="mr-2 font-light">$1.290</p>
-          </div>
-{          <div className="border-t border-slate-300 p-6 text-sm text-slate-800">
-            <p>
-              <CheckBadgeIcon className="mr-1 inline h-5 w-5 text-slate-800" />
-              100% Risk-free: Pay after the kick-off call, if you liked it.
-            </p>
-            <p>
-              <CheckBadgeIcon className="mr-1 inline h-5 w-5 text-slate-800" />
-              Money-back: If you&apos;re not happy, get a full refund.
-            </p>
-          </div> */}
           <div className="px-6">
             <Button
-              // variant="darkCTA"
               className="w-full justify-center bg-gray-800 text-gray-300 hover:text-white"
               href="https://cal.com/johannes/kick-off"
               target="_blank">
@@ -91,13 +77,12 @@ const ConciergePage = () => {
             </Button>
           </div>
         </div>
-        <div className="!mt-0 rounded-xl">
+        <div className="ml-2 w-full rounded-xl md:!mt-0 lg:ml-0">
           <Cal
             calLink="johannes/kick-off"
             style={{
               width: "100%",
               height: "100%",
-              overflow: "scroll",
               borderRadius: "0.5rem",
             }}
             config={{ layout: "month_view" }}