style: 💄 Minor UI changes

growupanand · Apr 22, 2024 · 957fbec · 957fbec
1 parent 2e1e079
commit 957fbec
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 23 deletions.
diff --git a/apps/web/src/app/(landingPage)/_components/githubStar.tsx b/apps/web/src/app/(landingPage)/_components/githubStar.tsx
@@ -9,7 +9,7 @@ async function GithubStars() {
   return (
     <Badge
       variant="secondary"
-      className="group gap-1 rounded-full active:scale-125"
+      className="group gap-1 rounded-full bg-transparent px-1 active:scale-125"
     >
       <Star
         size={15}

diff --git a/apps/web/src/app/(landingPage)/_components/hero.tsx b/apps/web/src/app/(landingPage)/_components/hero.tsx
@@ -19,16 +19,12 @@ export function Hero() {
   const demoFormLink = getFrontendBaseUrl() + "/view/demo";
 
   return (
-    <section className="md:my-15 my-10 flex w-full flex-col justify-center gap-1 text-center">
-      <div className="flex flex-col items-center justify-center gap-3">
-        <Link
-          href="https://github.com/growupanand/ConvoForm"
-          target="_blank"
-          rel="noreferrer nofollow noopener"
+    <section className="flex w-full flex-col justify-center gap-1 text-center">
+      <div className="mb-3 flex flex-col items-center justify-center gap-3 lg:mb-5">
+        <Badge
+          variant="outline"
+          className="group text-sm font-medium lg:px-4 lg:py-3 lg:text-base"
         >
-          <GithubStars />
-        </Link>
-        <Badge variant="outline" className="group text-sm font-normal">
           <Link
             href="https://github.com/growupanand/ConvoForm"
             target="_blank"
@@ -43,17 +39,29 @@ export function Hero() {
               className="ml-1 transition-all group-hover:translate-x-0.5"
               size="15px"
             />
+            <Link
+              href="https://github.com/growupanand/ConvoForm"
+              target="_blank"
+              rel="noreferrer nofollow noopener"
+            >
+              <GithubStars />
+            </Link>
           </Link>
         </Badge>
       </div>
-      <Card className="border-none bg-transparent shadow-none">
-        <CardHeader>
-          <h1 className="text-3xl font-semibold text-gray-700 lg:text-6xl ">
-            Create <span className="text-brand-500">Convo</span> Form
+      <Card className="border-none bg-transparent shadow-none lg:mb-12">
+        <CardHeader className="mb-6">
+          <h1 className="text-3xl font-normal leading-6 text-gray-700 lg:text-7xl">
+            Create{" "}
+            <span className="bg-brand-500 convo-word rounded-full px-5 py-1 text-white lg:pe-5 lg:ps-8 ">
+              Convo
+              <span className="convo-arrow bg-brand-500"></span>
+            </span>{" "}
+            Form
           </h1>
         </CardHeader>
         <CardContent>
-          <p className="text-muted-foreground mx-auto text-lg lg:text-2xl">
+          <p className="text-muted-foreground mx-auto text-xl font-normal leading-7">
             Build your own AI-Powered conversational form, Which are engaging
             and interactive forms that are easy to build and fun to answer.
           </p>
@@ -63,7 +71,10 @@ export function Hero() {
       <div className="flex items-center justify-center gap-3">
         <Button
           size="lg"
-          className={cn("rounded-full lg:text-lg", montserrat.className)}
+          className={cn(
+            "rounded-full lg:py-7 lg:text-lg",
+            montserrat.className,
+          )}
           asChild
         >
           <LinkN href="/auth/register" rel="noreferrer nofollow noopener">
@@ -73,7 +84,10 @@ export function Hero() {
         <Button
           size="lg"
           variant="outline"
-          className={cn("rounded-full  lg:text-lg", montserrat.className)}
+          className={cn(
+            "rounded-full lg:py-7 lg:text-lg",
+            montserrat.className,
+          )}
           asChild
         >
           <LinkN href={demoFormLink} target="_blank">

diff --git a/apps/web/src/app/(landingPage)/page.tsx b/apps/web/src/app/(landingPage)/page.tsx
@@ -10,7 +10,7 @@ import { SectionShell } from "./_components/sectionShell";
 
 export default function Home() {
   return (
-    <div className="grid space-y-5 lg:space-y-20 ">
+    <div className="mt-5 grid space-y-5 lg:mt-10 lg:space-y-20">
       <SectionShell>
         <Hero />
       </SectionShell>

diff --git a/apps/web/src/components/formViewer/formFields.tsx b/apps/web/src/components/formViewer/formFields.tsx
@@ -66,7 +66,7 @@ export const FormFieldsViewer = ({
             type="button"
             variant="ghost"
             className={cn(
-              "rounded-full ps-1 text-base font-semibold uppercase lg:text-xl",
+              "rounded-full ps-1  text-base font-semibold uppercase",
               montserrat.className,
             )}
             onClick={goToPrevQuestion}
@@ -77,7 +77,7 @@ export const FormFieldsViewer = ({
           </Button>
         </div>
         <div className="flex min-h-full w-full flex-col justify-center px-3 ">
-          <h1 className="mb-8 w-full whitespace-break-spaces text-justify text-xl lg:text-2xl">
+          <h1 className="mb-8 w-full whitespace-break-spaces text-justify text-xl leading-6 lg:text-2xl lg:leading-7">
             <span>
               {currentQuestion}
               {isFormBusy && <Tally1 className="ml-2 inline animate-ping" />}
@@ -94,7 +94,8 @@ export const FormFieldsViewer = ({
                     <FormControl>
                       <Textarea
                         autoFocus
-                        className="w-full rounded-none border-0 border-b bg-transparent ps-0	text-xl font-medium focus-visible:ring-0 focus-visible:ring-transparent  focus-visible:ring-offset-0 lg:text-2xl"
+                        rows={1}
+                        className="w-full rounded-none border-0 border-b bg-transparent ps-0	text-xl focus-visible:ring-0 focus-visible:ring-transparent  focus-visible:ring-offset-0 lg:text-2xl"
                         placeholder="Type answer here..."
                         disabled={isFormBusy}
                         onKeyDown={(event) => {
@@ -117,7 +118,7 @@ export const FormFieldsViewer = ({
                 )}
               >
                 Press{" "}
-                <span className="mx-1 flex items-center font-bold">
+                <span className="mx-1 flex items-center font-semibold">
                   Shift + Enter <CornerDownLeft className="h-3 w-3 " />
                 </span>{" "}
                 for new line

diff --git a/apps/web/src/globals.css b/apps/web/src/globals.css
@@ -74,3 +74,35 @@
     @apply bg-background text-foreground;
   }
 }
+
+.convo-word {
+  position: relative;
+  z-index: 1;
+}
+
+.convo-arrow {
+  z-index: -1;
+  position: absolute;
+  bottom: -12px;
+  left: -10px;
+  width: 50px;
+  height: 30px;
+  clip-path: polygon(
+    37.9% 0%,
+    100% 30%,
+    72.7% 51.5%,
+    36.9% 77.5%,
+    0% 100%,
+    21% 55%,
+    30.6% 28%
+  );
+}
+
+@media only screen and (max-width: 1024px) {
+  .convo-arrow {
+    width: 25px;
+    height: 15px;
+    bottom: -8px;
+    left: -4px;
+  }
+}
diff --git a/packages/ui/src/components/ui/textarea.tsx b/packages/ui/src/components/ui/textarea.tsx
@@ -10,7 +10,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          "border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[80px] w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className,
         )}
         ref={ref}