New landing page

components/Button.tsx

@@ -10,7 +10,7 @@ export function Button({ name, ...props }: ButtonProps) {
     <button
       {...props}
       className={twMerge(
-        "inline-flex items-center rounded-md justify-center border border-transparent bg-amber-600 px-3 py-2 text-sm font-medium leading-4 text-white shadow-sm hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2",
+        "inline-flex items-center rounded-md justify-center border border-transparent rounded-[50px] bg-gradient-to-tr from-sanahPurple to-sanahBlue px-3 py-2 text-sm font-medium text-white",
         props.className
       )}
     >

components/Dialog.tsx

@@ -16,7 +16,7 @@ export function Dialog({ button, children, description, title }: DialogProps) {
             </RadDialog.Trigger>
             <RadDialog.Portal>
             <RadDialog.Overlay className='DialogOverlay backdrop-blur fixed inset-0' />
-            <RadDialog.Content className='DialogContent absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-zinc-800 py-5 pl-5 pr-8 text-white rounded-md drop-shadow-xl'>
+            <RadDialog.Content className='DialogContent fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-[#111329] py-5 pl-5 pr-8 text-white rounded-md drop-shadow-xl'>
                 <div className='mb-8'>
                     <RadDialog.Title className='font-bold text-xl'>{title}</RadDialog.Title>
                     <RadDialog.Description className="text-gray-300">

components/Input.tsx

@@ -10,10 +10,10 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
 const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
   const { name, label, className } = props;
   return (
-    <fieldset className="border-gray-500 relative rounded-md border px-3 py-2 shadow-sm focus-within:ring-1 focus-within:ring-gray-200">
+    <fieldset className="border-none bg-white/20 rounded-[50px] relative rounded-md border px-3 py-2 shadow-sm">
       <label
         htmlFor={name}
-        className="absolute -top-2 left-2 -mt-px inline-block bg-zinc-800 px-1 text-xs font-medium text-white"
+        className="absolute -top-2 left-2 -mt-px inline-block bg-transparent px-1 text-xs font-medium text-white"
       >
         {label}
       </label>
@@ -22,7 +22,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
         ref={ref}
         name={name}
         className={twMerge(
-          "block w-full border-0 outline-0 p-0 text-white bg-inherit placeholder-gray-500 focus:ring-0 sm:text-sm",
+          "block w-full border-0 outline-0 p-0 text-white bg-transparent focus:ring-0 sm:text-sm",
           className
         )}
       />

components/TextArea.tsx

@@ -11,10 +11,10 @@ interface TextAreaProps
 const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>((props, ref) => {
   const { name, label, className } = props;
   return (
-    <fieldset className="border-gray-500 relative rounded-md border px-2 shadow-sm focus-within:ring-1 focus-within:ring-gray-200">
+    <fieldset className="border-none bg-white/20 relative rounded-md border px-2 shadow-sm focus-within:ring-">
       <label
         htmlFor={name}
-        className="absolute -top-2 left-2 -mt-px inline-block bg-zinc-800 px-1 text-xs font-medium text-white"
+        className="absolute -top-2 left-2 -mt-px inline-block  px-1 text-xs font-medium text-white"
       >
         {label}
       </label>
@@ -23,7 +23,7 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>((props, ref) =>
         ref={ref}
         name={name}
         className={twMerge(
-          "block w-full border-0 outline-0 p-0 text-white bg-inherit placeholder-gray-500 focus:ring-0 sm:text-sm",
+          "block w-full border-0 outline-0 p-0 text-white bg-transparent focus:ring-0 sm:text-sm",
           className
         )}
       />

features/auth/AuthForm.tsx

@@ -8,7 +8,18 @@ export function AuthForm() {
     const supabaseClient = useSupabaseClient<Database>()
 
     return (
-        <div className='w-96 px-3 border-solid border-[#3fcf8e] border-2 rounded-lg drop-shadow-lg'>
+        <div 
+        className='w-96 
+        px-3 
+        border-solid 
+        bg-[#111329]/90 
+        rounded-lg 
+        fixed 
+        right-0 
+        top-[60px]
+
+        max-[600px]:w-72
+        max-[600px]:right-[20px]'>
             <h1 className='text-center mt-4 text-xl'>{t('loginForm.title')}</h1>
             <Auth 
                 view='magic_link'
@@ -33,7 +44,9 @@ export function AuthForm() {
                     variables: {
                         default: {
                             colors: {
-                                inputText: 'white'
+                                inputText: 'white',
+                                brand: '#7450F0',
+                                brandAccent: '#7450F0'
                             }
                         }
                     }

features/landing-page/Footer.tsx

@@ -0,0 +1,70 @@
+import GitHubIcon from '@mui/icons-material/GitHub';
+import { SupportForm } from 'features/support-form/components/SupportForm';
+import { useTranslation } from "next-i18next";
+
+export default function Footer() {
+
+    const { t } = useTranslation("common");
+
+    return (
+        <footer 
+        className="w-full 
+        max-w-[1200px]
+        h-[250px] 
+        mt-[100px] 
+        pt-[20px] 
+        flex 
+        justify-between 
+        border-t-[0.5px] 
+        border-white/40 
+        font-sans
+        flex-wrap
+        relative
+
+        max-[768px]:flex-col
+        max-[768px]:items-center
+        max-[768px]:justify-even
+        max-[768px]:h-[300px]">
+            <p 
+            className="text-[24px] 
+            cursor-pointer 
+            font-bold">{t('projectName')}</p>
+            <ul 
+            className="list-none 
+            text-center 
+            flex 
+            flex-col 
+            gap-[20px]
+
+            max-[768px]:gap-0">
+                <li 
+                className="text-[20px] 
+                cursor-pointer 
+                font-regular">{t('team')}</li>
+                <li 
+                className="cursor-pointer 
+                font-thin">{t('footer.aboutUs')}</li>
+            </ul>
+            <SupportForm />
+            <ul 
+            className="absolute 
+            bottom-0
+
+            max-[768px]:flex
+            max-[768px]:flex-col
+            max-[768px]:items-center
+            max-[768px]:relative">
+                <li className='text-[36px]'><GitHubIcon 
+                className="text-[36px]
+                duration-300  
+                cursor-pointer 
+                hover:drop-shadow-[0_0_10px_rgba(116,18,240,.8)]" fontSize='inherit'/></li>
+                <li 
+                className='text-[16px] 
+                text-white/40 
+                cursor-default'>{t('footer.createdBy')}</li>
+            </ul>
+
+        </footer>
+    )
+}