picture

backend/src/config.js

@@ -69,7 +69,7 @@ const config = {
 
 config.pexelsKey = process.env.PEXELS_KEY || '';
 
-config.pexelsQuery = 'Neon-lit cinema hallway';
+config.pexelsQuery = 'cozy home cinema tv popcorn';
 config.host = process.env.NODE_ENV === "production" ? config.remote : "http://localhost";
 config.apiUrl = `${config.host}${config.port ? `:${config.port}` : ``}/api`;
 config.swaggerUrl = `${config.swaggerUI}${config.swaggerPort}`;

frontend/src/pages/login.tsx

@@ -20,7 +20,7 @@ import { findMe, loginUser, resetAction } from '../stores/authSlice';
 import { useAppDispatch, useAppSelector } from '../stores/hooks';
 import Link from 'next/link';
 import {toast, ToastContainer} from "react-toastify";
-import { getPexelsImage, getPexelsVideo } from '../helpers/pexels'
+import { getPexelsImage } from '../helpers/pexels'
 
 export default function Login() {
   const router = useRouter();
@@ -28,15 +28,13 @@ export default function Login() {
   const textColor = useAppSelector((state) => state.style.linkColor);
   const iconsColor = useAppSelector((state) => state.style.iconsColor);
   const notify = (type, msg) => toast(msg, { type });
-  const [ illustrationImage, setIllustrationImage ] = useState({
+  const [illustrationImage, setIllustrationImage] = useState({
-      src: undefined,
+    src: undefined,
-      photographer: undefined,
+    photographer: undefined,
-      photographer_url: undefined,
+    photographer_url: undefined,
-  })
+  });
-  const [ illustrationVideo, setIllustrationVideo ] = useState({video_files: []})
+  const contentPosition = 'left';
-    const [contentType, setContentType] = useState('video');
+  const [showPassword, setShowPassword] = useState(false);
-    const [contentPosition, setContentPosition] = useState('left');
-    const [showPassword, setShowPassword] = useState(false);
   const { currentUser, isFetching, errorMessage, token, notify:notifyState } = useAppSelector(
     (state) => state.auth,
   );
@@ -46,15 +44,14 @@ export default function Login() {
 
   const title = 'Movies & TV Tracker'
 
-  // Fetch Pexels image/video
+  // Fetch a single movie-themed illustration for the login page
-  useEffect( () => {
+  useEffect(() => {
-      async function fetchData() {
+    async function fetchData() {
-          const image = await getPexelsImage()
+      const image = await getPexelsImage();
-          const video = await getPexelsVideo()
+      setIllustrationImage(image);
-          setIllustrationImage(image);
+    }
-          setIllustrationVideo(video);
+
-      }
+    fetchData();
-      fetchData();
   }, []);
   // Fetch user data
   useEffect(() => {
@@ -101,46 +98,44 @@ export default function Login() {
   };
 
   const imageBlock = (image) => (
-      <div className="hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3"
+    <div
-           style={{
+      className="hidden md:flex relative flex-grow-0 flex-shrink-0 w-1/3 overflow-hidden"
-               backgroundImage: `${image ? `url(${image.src?.original})` : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'}`,
+      style={{
-               backgroundSize: 'cover',
+        backgroundImage: image?.src?.original
-               backgroundPosition: 'left center',
+          ? `linear-gradient(180deg, rgba(7, 8, 13, 0.18) 0%, rgba(7, 8, 13, 0.76) 100%), url(${image.src.original})`
-               backgroundRepeat: 'no-repeat',
+          : 'linear-gradient(135deg, #07080D 0%, #11131C 50%, #312E81 100%)',
-           }}>
+        backgroundSize: 'cover',
-          <div className="flex justify-center w-full bg-blue-300/20">
+        backgroundPosition: 'center',
-              <a className="text-[8px]" href={image?.photographer_url} target="_blank" rel="noreferrer">Photo
+        backgroundRepeat: 'no-repeat',
-                  by {image?.photographer} on Pexels</a>
+      }}
-          </div>
+    >
+      <div className="relative z-10 flex h-full flex-col justify-between p-8 text-white">
+        <div className="max-w-xs">
+          <span className="inline-flex rounded-full border border-white/20 bg-white/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.3em] text-white/80">
+            Movie Night Ready
+          </span>
+          <h1 className="mt-6 text-4xl font-semibold leading-tight">
+            Track every movie and series in one cinematic hub.
+          </h1>
+          <p className="mt-4 text-sm leading-6 text-white/75">
+            Save your watchlist, discover what to stream next, and keep your entertainment world organized.
+          </p>
+        </div>
+        <div className="rounded-2xl border border-white/10 bg-black/30 p-4 backdrop-blur-sm">
+          <p className="text-xs uppercase tracking-[0.25em] text-amber-300/90">Tonight&apos;s vibe</p>
+          <p className="mt-2 text-lg font-medium">Big screen energy with a premium streaming feel.</p>
+          <p className="mt-3 text-[10px] text-white/60">
+            Photo by{' '}
+            <a className="underline decoration-white/30 underline-offset-2" href={image?.photographer_url} target="_blank" rel="noreferrer">
+              {image?.photographer || 'Pexels'}
+            </a>
+            {' '}on Pexels
+          </p>
+        </div>
       </div>
-  )
+    </div>
+  );
 
-  const videoBlock = (video) => {
-      if (video?.video_files?.length > 0) {
-          return (
-              <div className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'>
-                  <video
-                      className='absolute top-0 left-0 w-full h-full object-cover'
-                      autoPlay
-                      loop
-                      muted
-                  >
-                      <source src={video.video_files[0]?.link} type='video/mp4'/>
-                      Your browser does not support the video tag.
-                  </video>
-                  <div className='flex justify-center w-full bg-blue-300/20 z-10'>
-                      <a
-                          className='text-[8px]'
-                          href={video.user.url}
-                          target='_blank'
-                          rel='noreferrer'
-                      >
-                          Video by {video.user.name} on Pexels
-                      </a>
-                  </div>
-              </div>)
-      }
-  };
 
   return (
       <div style={contentPosition === 'background' ? {
@@ -159,8 +154,7 @@ export default function Login() {
 
         <SectionFullScreen bg='violet'>
           <div className={`flex ${contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'} min-h-screen w-full`}>
-            {contentType === 'image' && contentPosition !== 'background' ? imageBlock(illustrationImage) : null}
+            {contentPosition !== 'background' ? imageBlock(illustrationImage) : null}
-            {contentType === 'video' && contentPosition !== 'background' ? videoBlock(illustrationVideo) : null}
             <div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
               
                 <CardBox id="loginRoles" className='w-full md:w-3/5 lg:w-2/3'>