Allow users to browse before having to signup/login

app/(auth)/login/page.tsx

@@ -20,10 +20,7 @@ export default function Login({
       password,
     });
 
-    if (error) {
-      return redirect('/login?message=Could not authenticate user');
-    }
-    return redirect('/home-page');
+    return redirect(error ? '/login?message=Could not authenticate user' : '/');
   };
 
   return (

app/(dashboard)/add-item/page.tsx

@@ -42,6 +42,8 @@ const AddItemPage = () => {
       const user = userData.session?.user.id;
       if (user) {
         setUserId(user);
+      } else {
+        router.replace('/login');
       }
     };
     getUserId();

app/(dashboard)/conversations/page.tsx

@@ -2,15 +2,18 @@
 
 import ConversationsWrapper from '@/components/messaging/ConversationWrapper';
 import newServerClient from '@/supabase/utils/newServerClient';
+import { redirect } from 'next/navigation';
 
 const Conversations = async () => {
   const supabase = newServerClient();
   const {
     data: { user },
   } = await supabase.auth.getUser();
   const userId = user?.id;
-
-  return userId && <ConversationsWrapper userId={userId} />;
+  if (!userId) {
+    redirect('/login');
+  }
+  return <ConversationsWrapper userId={userId} />;
 };
 
 export default Conversations;

app/(dashboard)/item/[id]/page.tsx

@@ -28,6 +28,7 @@ const DisplayItemDetails = async ({ params }: { params: { id: string } }) => {
       const donerId: string = item.profiles?.id;
       const title = item.item_name;
       if (
+        !user ||
         userProfile?.data.refugee === false ||
         item?.profiles?.id === userProfile?.data.id
       ) {

app/(dashboard)/layout.tsx

@@ -1,7 +1,4 @@
 import Header from '@/components/Header';
-import { createServerComponentClient } from '@supabase/auth-helpers-nextjs';
-import { redirect } from 'next/navigation';
-import { cookies } from 'next/headers';
 import Footer from '@/components/Footer';
 import Providers from '@/context/Providers';
 import FullHeightContainer from '@/components/layout/FullHeightComponent';
@@ -11,11 +8,6 @@ export default async function DashBoardLayout({
 }: {
   children: React.ReactNode;
 }) {
-  const supabase = createServerComponentClient({ cookies });
-  const { data } = await supabase.auth.getSession();
-  if (!data.session) {
-    redirect('/login');
-  }
   return (
     <>
       <Providers>

app/(dashboard)/profile/page.tsx

@@ -3,13 +3,17 @@ import LogOutButton from '@/components/LogOutButton';
 import { ProfileEdit } from '@/components/form/ProfileEdit';
 import newServerClient from '@/supabase/utils/newServerClient';
 import DonatedItemsList from '@/components/DonatedItemsList';
+import { redirect } from 'next/navigation';
 
 const ProfilePage = async () => {
+  const supabase = newServerClient();
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+  if (!user) {
+    redirect('/login');
+  }
   try {
-    const supabase = newServerClient();
-    const {
-      data: { user },
-    } = await supabase.auth.getUser();
     const userProfile = await getProfile(user?.id);
 
     if (!userProfile?.data || !userProfile?.data.username || !user?.id) {

app/page.tsx

@@ -1,77 +1,121 @@
-import Link from 'next/link';
+/* eslint-disable react/no-unescaped-entities */
+import Providers from '@/context/Providers';
+import FullHeightContainer from '@/components/layout/FullHeightComponent';
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
+import { getRecentItems } from '@/supabase/models/getRecentItems';
 import Image from 'next/image';
+import giveKindly from '@/public/giveKindly.png';
+import Link from 'next/link';
+import React from 'react';
 
 export default async function Index() {
+  const lastItems = await getRecentItems();
   return (
-    <>
-      <header className=' flex justify-center bg-background py-2' role='banner'>
-        <Image
-          src='/KINDLY_LOGO.png'
-          alt='Kindly clothes donations'
-          height={108}
-          width={329}
-        />
-      </header>
-      <main
-        className='grid items-center justify-items-center gap-5 p-4'
-        role='main'
-      >
-        <h1 className='italic'>A place to support Ukrainian refugees</h1>
-        <div className='flex'>
-          <p className='font-extrabold'>I would like to donate items</p>
-          <svg
-            width='88'
-            height='130'
-            viewBox='0 0 88 130'
-            fill='none'
-            xmlns='http://www.w3.org/2000/svg'
-          >
-            <path
-              d='M2 11.4408C115.392 -13.8709 102.294 17.8254 27 105.441'
-              stroke='#BBE3C3'
-              strokeWidth='5'
-            />
-            <path
-              d='M10.8446 115.424L22.0551 87.2624L40.8385 111.052L10.8446 115.424Z'
-              fill='#BBE3C3'
+    <Providers>
+      <FullHeightContainer>
+        <Header />
+        <main className='flex flex-grow flex-col'>
+          <div className='m-auto max-w-lg'>
+            <Image
+              alt='give kindly image'
+              src={giveKindly}
+              height={300}
+              className='m-auto'
             />
-          </svg>
-        </div>
-        <Link
-          href='/signup'
-          className='text-3xl font-extrabold italic text-primaryOrange'
-        >
-          Register here
-        </Link>
-        <div>
-          <svg
-            width='115'
-            height='165'
-            viewBox='0 0 115 165'
-            fill='none'
-            xmlns='http://www.w3.org/2000/svg'
-          >
-            <path
-              d='M85.5 160.5C-33.984 170.766 -17.7625 132.009 96 17.5'
-              stroke='#BBE3C3'
-              strokeWidth='5'
-            />
-            <path
-              d='M103.81 14.416L92.1209 42.6195L73.4517 17.6502L103.81 14.416Z'
-              fill='#BBE3C3'
-            />
-          </svg>
-          <p className='text-center font-extrabold'>
-            I’m a Ukrainian refugee and I would like to receive or donate items
-          </p>
-        </div>
-        <div className='flex space-x-2'>
-          <p>Already have an account?</p>
-          <Link href='/login' className='font-extrabold text-primaryOrange'>
-            Log in
-          </Link>
-        </div>
-      </main>
-    </>
+          </div>
+          <div className='lg:gap-30 mt-16 grid gap-10 px-12 md:px-40 lg:p-20 xl:grid-cols-2'>
+            <div className='flex flex-col gap-8 lg:px-10'>
+              <h1 className='text-center text-4xl font-extrabold'>
+                What do we do?
+              </h1>
+              <p className='mt-5 md:px-16 lg:px-0'>
+                Welcome to KINDLY, the giving platform where compassion meets
+                sustainability! Please help us in our mission supplying clothes
+                and other personal items to Ukrainian refugees. By donating you
+                won’t just be providing warmth and dignity to people in need,
+                you’ll be contributing to a greener planet too!
+              </p>
+              <p className='mt-5 md:px-16 lg:px-0'>
+                The KINDLY team are asking for donations of clothes and shoes
+                (adults and kids sizes) as well as books, toys, and household
+                items. We encourage you to share what you can spare, declutter
+                your life, and work toward a more mindful and eco-conscious
+                future. Together, let's weave a tapestry of kindness and
+                sustainability!
+              </p>
+            </div>
+            <div className='flex flex-col gap-8 lg:px-10'>
+              <h2 className='mt-10 text-center text-4xl font-extrabold'>
+                Added this week
+              </h2>
+              <div className='lastItems'>
+                {lastItems && (
+                  <ul className='flex flex-wrap items-center justify-center gap-10'>
+                    {' '}
+                    {lastItems.map((item) => (
+                      <li key={item.id}>
+                        <Link href={`/item/${item.id}`}>
+                          <div
+                            data-testid='item-div'
+                            className='relative h-36 w-28 shadow-md'
+                          >
+                            <Image
+                              alt={`Image of ${item.item_name}`}
+                              src={item.imageSrc}
+                              fill={true}
+                              objectFit='cover'
+                              className='rounded-lg'
+                            />
+                          </div>
+                        </Link>
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </div>
+            </div>
+
+            <div className='flex flex-col gap-8 lg:px-60 xl:col-span-2 xl:mt-20'>
+              <h2 className='mt-10 text-center text-4xl font-extrabold'>
+                Blog
+              </h2>
+              <p className='mt-5 md:px-16 lg:px-0'>
+                Hello and welcome! We’re very excited to be launching KINDLY, a
+                platform which lets you donate unwanted items to Ukrainian
+                refugees. In the future we hope to expand KINDLY to serve the
+                wider refugee community.
+              </p>
+              <p className='mt-5 md:px-16 lg:px-0'>
+                KINDLY is a sister project to{' '}
+                <Link
+                  className='font-extrabold text-primaryOrange'
+                  href='https://linktr.ee/trafalgargirls'
+                >
+                  Trafalgar Girls
+                </Link>
+                , a volunteer initiative that’s helped thousands of Ukrainian
+                refugees since the war began in February 2022. The KINDLY site
+                was created through the{' '}
+                <Link
+                  className='font-extrabold text-primaryOrange'
+                  href='https://www.foundersandcoders.com/tech-for-better/'
+                >
+                  Tech for Better programme
+                </Link>{' '}
+                by <span className='font-extrabold'>Founders and Coders</span>.
+              </p>
+              <p className='mt-5 md:px-16 lg:px-0'>
+                So let the KINDLY journey begin! Do you have unwanted clothes or
+                shoes (adults and kids sizes), toys, books, or household items?
+                Upload the details to KINDLY, spread some kindness, and help the
+                planet! Thank you KINDLY.
+              </p>
+            </div>
+          </div>
+        </main>
+        <Footer />
+      </FullHeightContainer>
+    </Providers>
   );
 }