Review adjustments (#11)

app/globals.css

@@ -77,3 +77,80 @@
 .styledH4 {
   @apply text-base font-medium;
 }
+
+/* Card border gradient */
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background: #222;
+}
+
+.gradient-border {
+  --radius: 5px;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  background: #222;
+  border-radius: var(--radius);
+
+  &::after {
+    position: absolute;
+    content: '';
+    top: calc(-1 * var(--radius));
+    left: calc(-1 * var(--radius));
+    z-index: -1;
+    width: calc(100% + var(--radius) * 2);
+    height: calc(100% + var(--radius) * 2);
+    background: linear-gradient(
+      60deg,
+      hsl(224, 85%, 66%),
+      hsl(269, 85%, 66%),
+      hsl(314, 85%, 66%),
+      hsl(359, 85%, 66%),
+      hsl(44, 85%, 66%),
+      hsl(89, 85%, 66%),
+      hsl(134, 85%, 66%),
+      hsl(179, 85%, 66%)
+    );
+    background-size: 300% 300%;
+    background-position: 0 50%;
+    border-radius: calc(2 * var(--radius));
+    animation: moveGradient 4s alternate infinite;
+  }
+}
+
+@keyframes moveGradient {
+  50% {
+    background-position: 100% 50%;
+  }
+}
+
+/* Button gradient */
+.btn-grad {
+  background-image: linear-gradient(
+    to right,
+    #da22ff 0%,
+    #9733ee 51%,
+    #da22ff 100%
+  );
+  padding: 10px;
+  width: 100%;
+  text-align: center;
+  text-transform: uppercase;
+  transition: 0.5s;
+  background-size: 200% auto;
+  color: white;
+  box-shadow: 0 0 20px #eee;
+  border-radius: 10px;
+  display: block;
+}
+
+.btn-grad:hover {
+  background-position: right center;
+  color: #fff;
+  text-decoration: none;
+}

app/layout.tsx

@@ -30,7 +30,9 @@ export default function RootLayout({
           fontSans.variable
         )}
       >
-        <Background>{children}</Background>
+        <Background>
+          <div style={{ zIndex: 2 }}>{children}</div>
+        </Background>
         <Analytics />
       </body>
     </html>

app/page.tsx

@@ -80,21 +80,27 @@ export default function Home() {
     }
 
     return (
-      <div className='h-12 align-top'>
+      <div className='mx-2 h-44'>
         <Form {...form}>
           <form
             onSubmit={form.handleSubmit(handleSubmit)}
-            className='flex space-x-4'
+            className='flex flex-col space-y-4'
           >
             <FormField
               control={form.control}
               name='email'
               render={({ field }) => (
                 <FormItem>
+                  <div className='h-4'>
+                    <FormMessage className='text-center' />
+                  </div>
                   <FormControl>
-                    <Input placeholder='example@example.com' {...field} />
+                    <Input
+                      placeholder='example@example.com'
+                      className='text-center'
+                      {...field}
+                    />
                   </FormControl>
-                  <FormMessage />
                 </FormItem>
               )}
             />
@@ -103,15 +109,19 @@ export default function Home() {
             </div>
           </form>
         </Form>
+        <p className='py-1 text-center text-xs text-gray-600'>
+          You can rest assured that we will fill your inbox with spam. We
+          don&apos;t like it either! 🙂
+        </p>
       </div>
     );
   }
 
   return (
     <Card
-      style='text-center'
-      title='Hackernews + newsletter'
-      description='Top stories from Hackernews. Once a day. Every day.'
+      style='text-center max-w-96'
+      title='Interested in keeping up with the latest from the tech world? 👩‍💻'
+      description='Subscribe to our newsletter! The top stories from Hackernews for you. Once a day. Every day.'
       content={render()}
     />
   );

app/privacy/page.tsx

@@ -3,7 +3,7 @@ import { Card } from '../../components/custom/card';
 
 export default function Privacy() {
   const body = (
-    <div>
+    <div className='my-2 max-h-[60vh] overflow-auto'>
       <p>
         This Privacy Policy describes Our policies and procedures on the
         collection, use and disclosure of Your information when You use the
@@ -430,10 +430,10 @@ export default function Privacy() {
 
   return (
     <Card
+      style='max-h-[90vh] max-w-[90vw]'
       title='Privacy Policy'
       description='Last updated: December 03, 2023'
       content={body}
-      style='w-2/3 h-[90vh]'
     />
   );
 }

app/unsubscribe/page.tsx

@@ -80,21 +80,23 @@ export default function Unsubscribe() {
     }
 
     return (
-      <div className='h-12 align-top'>
+      <div className='mb-5 h-32'>
         <Form {...form}>
           <form
             onSubmit={form.handleSubmit(handleSubmit)}
-            className='flex space-x-4'
+            className='flex flex-col space-y-4'
           >
             <FormField
               control={form.control}
               name='email'
               render={({ field }) => (
                 <FormItem>
+                  <div className='h-4'>
+                    <FormMessage className='text-center' />
+                  </div>
                   <FormControl>
                     <Input placeholder='example@example.com' {...field} />
                   </FormControl>
-                  <FormMessage />
                 </FormItem>
               )}
             />
@@ -109,7 +111,7 @@ export default function Unsubscribe() {
 
   return (
     <Card
-      style='text-center'
+      style='text-center max-w-80'
       title='Unsubscribe'
       description='You sure you want to leave? :('
       content={render()}