refactor: some name and styling changes

components/custom/background/background.tsx

@@ -1,4 +1,4 @@
-import { Tiles } from './components/tiles';
+import { Tiles } from './tile/tiles';
 
 type BackgroundProps = {
   children: React.ReactNode;

components/custom/background/tile/tile.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { z } from 'zod';
-import { NewsSchema } from '../../../../utils/types';
-import { CardContent } from './cardContent';
+import { NewsSchema } from '../../../../utils/schemas';
+import { TileContent } from './tileContent';
 
 type CardProps = {
   newsA?: z.infer<typeof NewsSchema>;
@@ -10,7 +10,7 @@ type CardProps = {
   height: number;
 };
 
-export function Card({ newsA, newsB, width, height }: CardProps) {
+export function Tile({ newsA, newsB, width, height }: CardProps) {
   const [switched, setSwitched] = useState(false);
   const [active, setActive] = useState(Math.random() < 0.5);
   const [delayed, setDelayed] = useState(true);
@@ -41,8 +41,8 @@ export function Card({ newsA, newsB, width, height }: CardProps) {
       <div className='transform-gpu'>
         <div className={`absolute left-0 top-0 w-full ${''}`}>
           {active
-            ? CardContent({ story: newsA, width, height, side: true })
-            : CardContent({ story: newsB, width, height, side: false })}
+            ? TileContent({ story: newsA, width, height, side: true })
+            : TileContent({ story: newsB, width, height, side: false })}
         </div>
       </div>
     </div>

components/custom/background/tile/tileContent.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { z } from 'zod';
-import { NewsSchema } from '../../../../utils/types';
+import { NewsSchema } from '../../../../utils/schemas';
 
 type CardContentProps = {
   story: z.infer<typeof NewsSchema>;
@@ -18,7 +18,7 @@ function getRandomColor() {
   return color;
 }
 
-export function CardContent({ story, width, height, side }: CardContentProps) {
+export function TileContent({ story, width, height, side }: CardContentProps) {
   const [firstColor, setFirstColor] = useState(getRandomColor());
   const [secondColor, setSecondColor] = useState(getRandomColor());
   const [switched, setSwitched] = useState(true);

components/custom/background/tile/tiles.tsx

@@ -3,8 +3,8 @@
 import { usePathname } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { z } from 'zod';
-import { NewsSchema } from '../../../../utils/types';
-import { Card } from './card';
+import { NewsSchema } from '../../../../utils/schemas';
+import { Tile } from './tile';
 
 type TilesProps = {
   children: React.ReactNode;
@@ -74,7 +74,7 @@ export const Tiles = ({ children }: TilesProps) => {
           width: `${baseWidth * 4}px`
         }}
       >
-        <Card
+        <Tile
           newsA={news[randomA]}
           newsB={news[randomB]}
           width={baseHeight}
@@ -110,5 +110,5 @@ export const Tiles = ({ children }: TilesProps) => {
     );
   }
 
-  return <div className='flex flex-col justify-between'>{renderGrid()}</div>;
+  return <div className='flex h-[100vh] overflow-hidden'>{renderGrid()}</div>;
 };

components/custom/footer.tsx

@@ -1,27 +1,39 @@
 import { usePathname } from 'next/navigation';
 import { Link } from './link';
 
-const links = [
-  { name: 'Subscribe', path: '/' },
-  { name: 'Privacy Policy', path: '/privacy' },
-];
+const links = [{ name: 'Subscribe', path: '/' }];
 
 function Footer() {
   const pathname = usePathname();
 
   return (
-    <ul className="flex justify-center space-x-4">
-      {links.map(
-        (link) =>
-          pathname !== link.path &&
-          !(pathname === '/confirmation' && link.path === '/subscribe') && (
-            <Link key={link.path} path={link.path} text={link.name} />
-          )
+    <div>
+      {pathname === '/' ? (
+        <p className='text-center text-xs text-gray-600'>
+          By subscribing, you agree to our{' '}
+          <a
+            className='font-medium text-indigo-600 hover:text-indigo-500'
+            href='/privacy'
+          >
+            Privacy Policy
+          </a>
+          .
+        </p>
+      ) : (
+        <ul className='flex justify-center space-x-4'>
+          {links.map(
+            link =>
+              pathname !== link.path &&
+              !(pathname === '/confirmation' && link.path === '/') && (
+                <Link key={link.path} path={link.path} text={link.name} />
+              )
+          )}
+          {pathname === '/privacy' && (
+            <Link path='/unsubscribe' text='Unsubscribe' />
+          )}
+        </ul>
       )}
-      {pathname === '/privacy' && (
-        <Link path="/unsubscribe" text="Unsubscribe" />
-      )}
-    </ul>
+    </div>
   );
 }