5 files changed, 173 insertions, 0 deletions
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
new file mode 100644
index 0000000..e57ed44
--- /dev/null
+++ b/src/pages/_app.tsx
@@ -0,0 +1,6 @@
+import '@prueba/styles/globals.css'
+import type { AppProps } from 'next/app'
+
+export default function App({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
new file mode 100644
index 0000000..54e8bf3
--- /dev/null
+++ b/src/pages/_document.tsx
@@ -0,0 +1,13 @@
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}
diff --git a/src/pages/api/hello.ts b/src/pages/api/hello.ts
new file mode 100644
index 0000000..f8bcc7e
--- /dev/null
+++ b/src/pages/api/hello.ts
@@ -0,0 +1,13 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+type Data = {
+  name: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+  res.status(200).json({ name: 'John Doe' })
+}
diff --git a/src/pages/browse/index.tsx b/src/pages/browse/index.tsx
new file mode 100644
index 0000000..1b85fd3
--- /dev/null
+++ b/src/pages/browse/index.tsx
@@ -0,0 +1,100 @@
+import { link } from 'fs'
+import Link from 'next/link'
+import { BellIcon, MagnifyingGlassIcon, PlayIcon, InformationCircleIcon, ArrowSmallDownIcon} from '@heroicons/react/24/solid'
+import { useEffect, useState } from 'react'
+import requests from '../../../services/requests'
+// import NetflixLogo from '../../../public/images/netflix_logo.svg'
+const baseURL ='https://api.themoviedb.org/3/'
+const imageURL = 'https://image.tmdb.org/t/p/original'
+
+export default function Home() {
+  const [heroMovie, setHeroMovie] = useState()
+  useEffect(() => {
+    fetch(`${baseURL}${requests.fetchTopRated}`).then(res => res.json()).then((data) => {
+      console.log('MOVIES', data.results[0])
+      setHeroMovie(data.results[0])
+    })
+  }, [])
+  return (
+    <div className="bg-transparent w-screen h-screen flex flex-col text-white">
+      <header className='flex justify-between pt-6 px-8'>
+        <div className='flex items-center gap-4'>
+          <img className='scale-75 mr-4' src="../images/netflix_logo.svg" alt="SVG image"/> 
+          <a className='text-white text-sm font-bold'>Home</a>
+          <a className='text-white text-sm'>TV Shows</a>
+          <a className='text-white text-sm'>Movies</a>
+          <a className='text-white text-sm'>News & Popular</a>
+          <a className='text-white text-sm'>My List</a>
+          <a className='text-white text-sm'>Browse by Language</a>
+        </div>
+        <div className='flex items-center gap-4'>
+          <MagnifyingGlassIcon className='h-6 w-6'/>
+          <a className='text-white text-sm'>Kids</a>
+          <BellIcon className='h-6 w-6'/>
+          <div></div>
+          <ArrowSmallDownIcon className='h-6 w-6'/>
+        </div>
+      </header>
+      <main className='w-screen'>
+        <section className='w-1/3 ml-10 mt-20'>
+          <div className='flex items-center'>
+            <img className='scale-75 mr-5' src="../images/N.svg" alt="SVG image"/> 
+            <h1 className='font-mono tracking-[.4rem]'>MOVIES</h1>
+          </div>
+          <div className='h-fit text-[4rem]'>
+              {heroMovie?.original_title}
+          </div>
+          <div className='flex items-center'>
+            <img className='scale-50' src="../images/Top10.svg" alt="SVG image"/> 
+            <h2 className='text-xl font-bold'>#1 in TV Shows Today</h2>
+          </div>
+          <div>
+            <p className='break-words text-justify'>
+              {heroMovie?.overview}
+            </p>
+          </div>
+          <div className='flex gap-4 mt-5'>
+            <button className='flex items-center w-28 h-10 bg-white text-black text-2xl justify-center font-semibold ring-black ring-offset-10 hover:ring-4 rounded'><PlayIcon className='h-8 w-8 mr-2'/>Play</button>
+            <button className='flex items-center w-36 h-10 bg-gray-700/80 justify-center ring-white hover:ring-4 rounded'><InformationCircleIcon className='h-8 w-8 mr-2'/>More Info</button>
+          </div>
+        </section>
+        <section className=' ml-10 mt-10'>
+          <h2>Popular on Netflix</h2>
+          <div className='flex gap-6'>
+            {
+              MOVIES.map((movie, index) => (
+                <div key={index}>
+                <img src={movie.link} className='h-20 w-20 bg-green'>
+                  </img>
+                </div>
+            ))}
+          </div>
+        </section>
+      </main>
+      <div className='absolute h-full w-full bg-cover bg-center -z-10' style={{backgroundImage: `url(${imageURL}${heroMovie?.backdrop_path})`}}></div>
+    </div>
+  )
+}
+
+
+
+const MOVIES = [
+  {
+    link:'../images/Card.png',
+  },
+  {
+    link:'../images/Card.png',
+  },
+  {
+    link:'../images/Card.png',
+  },
+  {
+    link:'../images/Card.png',
+  },
+  {
+    link:'../images/Card.png',
+  },
+  {
+    link:'../images/Card.png',
+  }
+]
+\ No newline at end of file
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
new file mode 100644
index 0000000..0a21d32
--- /dev/null
+++ b/src/pages/index.tsx
@@ -0,0 +1,41 @@
+import Link from "next/link"
+import Image from "next/image"
+
+export default function Home() {
+  return (
+    <div className="bg-black w-screen h-screen flex flex-col items-center justify-center">
+      <h1>Netflix</h1>
+      <p className="text-white text-[3.5vw]">Who's watching?</p>
+      <div className="flex flex-row gap-3 mt-6">
+        {
+          USERS.map((user, index) => (
+            <div key={index} className="flex flex-col items-center justify-center">
+              <Link href={user.link} className="w-[128px] h-[128px] rounded-xl overflow-hidden bg-white">
+                <Image src={user.avatar} width={128} height={128} alt=""/>
+              </Link>
+              <p className="text-gray-400 text-xs">{user.name}</p>
+            </div>
+          ))}
+      </div>
+    </div>
+  )
+}
+
+const USERS = [
+  {
+    name:'Alberto',
+    link:'/browse',
+    avatar:'https://avatars.dicebear.com/api/male/124.svg'
+  },
+  {
+    name:'Kids',
+    link:'/',
+    avatar:'https://avatars.dicebear.com/api/male/122.svg'
+  },
+  {
+    name:'Add profile',
+    link:'/',
+    avatar:'https://avatars.dicebear.com/api/female/12.svg'
+    // icon:'...'
+  }
+]
+\ No newline at end of file