Merge branch 'clean' into feat-Hgn-email-template

src/app/(auth-routes)/register/organisation/page.tsx

@@ -66,14 +66,16 @@ function Organisation() {
   return (
     <>
       <div>
-        <div className="flex flex-col items-center gap-2">
-          <h1 className="text-2xl font-bold">Create Organisation Account</h1>
+        <div className="flex-col items-center gap-2 py-4 md:flex">
+          <h1 className="text-xl font-bold md:text-2xl">
+            Create Organisation Account
+          </h1>
           <p className="text-gray-500">
             Create an account to get started with us.
           </p>
         </div>
 
-        <div className="mx-auto w-2/4">
+        <div className="mx-auto md:w-2/4">
           <Form {...form}>
             <form className="space-y-6">
               <FormField
@@ -112,7 +114,7 @@ function Organisation() {
                   </FormItem>
                 )}
               />
-              <div className="flex gap-4">
+              <div className="flex flex-col gap-4 md:flex-row">
                 <FormField
                   control={form.control}
                   name="industry"
@@ -170,7 +172,7 @@ function Organisation() {
               </div>
               <div className="flex flex-col gap-2">
                 <h1 className="text-md">Company Address</h1>
-                <div className="flex gap-4">
+                <div className="flex flex-col gap-4 md:flex-row">
                   <FormField
                     control={form.control}
                     name="country"

src/app/(auth-routes)/register/page.tsx

@@ -2,12 +2,12 @@
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import { DialogContent, DialogTitle } from "@radix-ui/react-dialog";
+import Image from "next/image";
 import Link from "next/link";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
-import AuthProvider from "~/components/authproviders/AuthProvider";
 import { DialogDemo } from "~/components/common/Dialog";
 import { Button } from "~/components/ui/button";
 import {
@@ -24,8 +24,6 @@ import {
   InputOTPGroup,
   InputOTPSlot,
 } from "~/components/ui/input-otp";
-import Facebook from "../../../../public/images/facebook.svg";
-import Google from "../../../../public/images/google.svg";
 
 const formSchema = z.object({
   fullname: z.string().min(2, {
@@ -67,11 +65,35 @@ const SignUp = () => {
           Create an account to get started with us.
         </p>
       </div>
-      <div className="flex justify-center gap-4 p-4">
-        <AuthProvider title="Sign in with Google" icon={Google} />
-        <AuthProvider title="Sign in with Facebook" icon={Facebook} />
+      <div className="flex flex-col justify-center space-y-4 sm:flex-row sm:space-x-6 sm:space-y-0">
+        <Button
+          disabled
+          className="flex items-center rounded-md border border-gray-300 bg-white px-4 py-4 text-gray-700 shadow-sm hover:bg-gray-50"
+        >
+          <Image
+            src="/images/goggle.png"
+            width={20}
+            height={20}
+            alt="Goggle"
+            className="mr-2"
+          />
+          Sign in with Google
+        </Button>
+        <Button
+          disabled
+          className="flex items-center rounded-md border border-gray-300 bg-white p-4 px-4 text-gray-700 shadow-sm hover:bg-gray-50"
+        >
+          <Image
+            src="/images/facebook.svg"
+            width={20}
+            height={20}
+            alt="Facebook"
+            className="mr-2"
+          />
+          Sign in with Google
+        </Button>
       </div>
-      <div className="mx-auto w-2/4">
+      <div className="mx-auto py-4 md:w-2/4">
         <Form {...form}>
           <form
             className="space-y-8"

src/components/authproviders/AuthProvider.tsx

@@ -1,10 +1,7 @@
-import Image from "next/image";
-
-function AuthProvider({ title, icon }: { title: string; icon: string }) {
+function AuthProvider({ title }: { title: string }) {
   return (
     <>
       <button className="flex items-center gap-2 rounded-md border border-gray-200 p-4">
-        <Image src={icon} width={24} height={24} alt="img" />
         {title}
       </button>
     </>

src/components/extDynamicPages/blogCollection/BlogPageHero.tsx

@@ -14,8 +14,8 @@ const HeroSection: React.FC = () => {
         alt="Hero Background"
       />
       <div className="relative z-30 flex h-full flex-col items-start justify-end px-[5%] pb-16 text-center md:text-left">
-        <div className="w-full py-5 md:w-[50%]">
-          <h1 className="mb-4 text-left text-3xl font-bold leading-[2.3rem] lg:leading-[2.4rem] 2xl:text-6xl">
+        <div className="w-full py-5 pr-6 md:w-[55%]">
+          <h1 className="mb-4 text-left text-3xl font-bold leading-[2.3rem] md:leading-[2.6rem] 2xl:text-5xl">
             Unlock Industry Insights: Get Essential Tips & Boilerplate Hacks
           </h1>
         </div>

src/components/layouts/footer/index.tsx

@@ -28,7 +28,7 @@ const Footer = () => {
       links: [
         { route: "Help center", link: "/help-center" },
         { route: "FAQ", link: "/faqs" },
-        { route: "waiting list", link: "/waitlist" },
+        { route: "Waiting List", link: "/waitlist" },
         { route: "Pricing Experience", link: "/pricing" },
         { route: "Contact Us", link: "/contact-us" },
       ],
@@ -75,21 +75,21 @@ const Footer = () => {
         <div className="mx-auto w-full max-w-[1200px] items-start justify-between gap-[60px] pb-[130px] pt-[28px] sm:grid-cols-2 md:gap-4 md:pb-[46px] md:pt-[72px] lg:flex">
           <div className="mb-[100px] lg:mb-0">
             <div className="mb-[47px] flex w-full flex-col items-center justify-center sm:mb-[60px] md:block md:max-w-[254px] lg:mb-0">
-              <h5 className="text-nuetral-dark-2 mb-[34px] text-center text-xl font-bold sm:text-left">
+              <h5 className="text-nuetral-dark-2 text-md mb-[34px] text-center font-bold sm:text-left">
                 Boiler plate
               </h5>
-              <p className="text-nuetral-dark-2 text-center text-[16px] font-medium sm:text-left">
+              <p className="text-nuetral-dark-2 text-center text-[12px] font-medium sm:text-left">
                 Logo subject details and address
               </p>
             </div>
             <div className="flex flex-col items-center justify-center md:block lg:hidden">
-              <h5 className="text-neurtal-dark-2 mb-4 text-center text-[20px] font-semibold sm:text-left md:mb-[36px]">
+              <h5 className="text-neurtal-dark-2 text-md mb-4 text-center font-semibold sm:text-left md:mb-[36px]">
                 Sign Up For Newsletter
               </h5>
               <div className="item flex h-[46px] w-full items-center justify-start md:max-w-[283px]">
                 <Input
                   placeholder="Enter your email"
-                  className="border-r-none h-[46px] rounded-r-none border-r-0 border-r-transparent bg-transparent active:border-transparent"
+                  className="border-r-none text-md h-[46px] rounded-r-none border-r-0 border-r-transparent bg-transparent active:border-transparent"
                 />
                 <CustomButton variant="primary" className="h-full">
                   Subscibe
@@ -101,7 +101,7 @@ const Footer = () => {
             {footerLinks.map((item, index) => {
               return (
                 <div key={index}>
-                  <h5 className="text-neurtal-dark-2 mb-[37px] text-[20px] font-semibold">
+                  <h5 className="text-neurtal-dark-2 mb-[37px] text-[16px] font-semibold">
                     {item.title}
                   </h5>
                   <ul className="flex flex-col gap-4">
@@ -110,7 +110,7 @@ const Footer = () => {
                         <li key={index}>
                           <Link
                             href={item.link}
-                            className="cursor-pointer text-lg text-neutral-dark-2 transition-colors duration-300 hover:text-primary hover:underline dark:text-white"
+                            className="cursor-pointer text-sm text-neutral-dark-2 transition-colors duration-300 hover:text-primary hover:underline dark:text-white"
                           >
                             {item.route}
                           </Link>
@@ -122,7 +122,7 @@ const Footer = () => {
               );
             })}
             <div className="hidden lg:block">
-              <h5 className="text-neurtal-dark-2 mb-4 text-[20px] font-semibold md:mb-[36px]">
+              <h5 className="text-neurtal-dark-2 text-md mb-4 font-semibold md:mb-[36px]">
                 Sign Up For Newsletter
               </h5>
               <div className="item flex h-[46px] w-full max-w-[283px] items-center justify-start">

src/components/layouts/navbar/index.tsx

@@ -34,7 +34,7 @@ const Navbar = ({ is_auth_path = false }: { is_auth_path?: boolean }) => {
   });
   return (
     <nav
-      className={`${scrolling ? "shadow-md" : "shadow-none"} sticky left-0 right-0 top-0 z-10 bg-background px-4`}
+      className={`${scrolling ? "shadow-md" : "shadow-none"} sticky left-0 right-0 top-0 z-40 bg-background px-4`}
     >
       <div
         className={`${scrolling ? "py-2" : "py-4 md:py-9"} mx-auto flex w-full max-w-[1200px] items-center justify-between gap-x-4 transition-all duration-500`}