+
+ )
+}
diff --git a/netflix/src/app/detail/[id]/page.tsx b/netflix/src/app/detail/[id]/page.tsx
new file mode 100644
index 0000000..1f5a4cc
--- /dev/null
+++ b/netflix/src/app/detail/[id]/page.tsx
@@ -0,0 +1,52 @@
+"use client";
+import NavBar from "@/components/common/navBar";
+import { useParams } from "next/navigation";
+import { PlayButton } from "@/components/detail/PlayButton";
+import { page } from "@/styles/globalTheme.css";
+import { useEffect, useState } from "react";
+import { Movie } from "@/types/movieInterface";
+import * as styles from "@/styles/detail/text.css";
+import Image from "next/image";
+import { fetchSearch } from "@/api/searchApi";
+
+const IMAGE_BASE_URL = "https://image.tmdb.org/t/p/w500/";
+
+export default function Detail() {
+ const { id } = useParams();
+ const [movie, setMovie] = useState
+
+ );
+}
diff --git a/netflix/src/app/downloads/page.tsx b/netflix/src/app/downloads/page.tsx
new file mode 100644
index 0000000..0327a00
--- /dev/null
+++ b/netflix/src/app/downloads/page.tsx
@@ -0,0 +1,9 @@
+import NavBar from '@/components/common/navBar'
+
+export default function Downloads() {
+ return (
+ {movie?.title}
+{movie?.overview}
+
+
+ )
+}
diff --git a/netflix/src/app/favicon.ico b/netflix/src/app/favicon.ico
new file mode 100644
index 0000000..718d6fe
Binary files /dev/null and b/netflix/src/app/favicon.ico differ
diff --git a/netflix/src/app/home/page.tsx b/netflix/src/app/home/page.tsx
new file mode 100644
index 0000000..d331d01
--- /dev/null
+++ b/netflix/src/app/home/page.tsx
@@ -0,0 +1,30 @@
+import NavBar from '@/components/common/navBar'
+import Header from '@/components/common/header'
+import TopTen from '@/components/home/TopTen'
+import PlayBar from '@/components/home/PlayBar'
+import Preview from '@/components/home/Preview'
+import MovieList from '@/components/home/MovieList'
+import PopularList from '@/components/home/PopularList'
+import TrendingList from '@/components/home/TrendingList'
+import TopRatedList from '@/components/home/TopRated'
+import * as style from '@/styles/globalTheme.css'
+
+export default function Home() {
+ return (
+
+
+ )
+}
diff --git a/netflix/src/app/layout.tsx b/netflix/src/app/layout.tsx
new file mode 100644
index 0000000..c743aca
--- /dev/null
+++ b/netflix/src/app/layout.tsx
@@ -0,0 +1,19 @@
+import type { Metadata } from "next";
+import "@/styles/globalTheme.css";
+
+export const metadata: Metadata = {
+ title: "netflix",
+ description: "헤헤",
+};
+
+export default function RootLayout({
+ children,
+}: Readonly<{
+ children: React.ReactNode;
+}>) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/netflix/src/app/more/page.tsx b/netflix/src/app/more/page.tsx
new file mode 100644
index 0000000..e393904
--- /dev/null
+++ b/netflix/src/app/more/page.tsx
@@ -0,0 +1,11 @@
+import NavBar from "@/components/common/navBar";
+import { PlayButton } from "@/components/detail/PlayButton";
+
+export default function More() {
+ return (
+
+
+
+
+
+
+ );
+}
diff --git a/netflix/src/app/page.tsx b/netflix/src/app/page.tsx
new file mode 100644
index 0000000..a58c292
--- /dev/null
+++ b/netflix/src/app/page.tsx
@@ -0,0 +1,9 @@
+import Landing from '@/components/landing/Landing';
+
+export default function Home() {
+ return (
+
+
+ );
+}
diff --git a/netflix/src/app/search/page.tsx b/netflix/src/app/search/page.tsx
new file mode 100644
index 0000000..96b7ce5
--- /dev/null
+++ b/netflix/src/app/search/page.tsx
@@ -0,0 +1,14 @@
+import NavBar from "@/components/common/navBar";
+import { ContentList } from "@/components/search/ContentList";
+import { SearchBar } from "@/components/search/SearchBar";
+import { page } from "@/styles/globalTheme.css";
+
+export default function Search() {
+ return (
+
+
+ );
+}
diff --git a/netflix/src/components/common/header.tsx b/netflix/src/components/common/header.tsx
new file mode 100644
index 0000000..0895d26
--- /dev/null
+++ b/netflix/src/components/common/header.tsx
@@ -0,0 +1,17 @@
+import Image from 'next/image';
+// import Link from 'next/link';
+import logo from '../../../public/svgs/netflix_logo.svg';
+import * as styles from '@/styles/Header.css';
+
+const Header = () => {
+ return (
+
+
+ );
+};
+
+export default Header;
diff --git a/netflix/src/components/common/navBar.tsx b/netflix/src/components/common/navBar.tsx
new file mode 100644
index 0000000..2ed0773
--- /dev/null
+++ b/netflix/src/components/common/navBar.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import React, { useState } from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+import home from '../../../public/svgs/navbar/home_icon.svg';
+import search from '../../../public/svgs/navbar/search_icon.svg';
+import coming from '../../../public/svgs/navbar/coming_icon.svg';
+import downloads from '../../../public/svgs/navbar/downloads_icon.svg';
+import more from '../../../public/svgs/navbar/more_icon.svg';
+import * as styles from '@/styles/Navbar.css';
+
+const NavBar: React.FC = () => {
+ const [activeTab, setActiveTab] = useStateTV shows
+Movies
+My List
+
+
+ );
+};
diff --git a/netflix/src/components/home/MovieList.tsx b/netflix/src/components/home/MovieList.tsx
new file mode 100644
index 0000000..728e39f
--- /dev/null
+++ b/netflix/src/components/home/MovieList.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import { useEffect, useState } from 'react';
+import { fetchMovies } from '@/api/MovieList';
+import * as styles from '@/styles/MovieList.css';
+
+// 와 진짜 레전드 노가다
+// todo: list 코드들 모듈화시키기
+
+interface Movie {
+ id: number;
+ title: string;
+ poster_path: string;
+}
+
+const MovieList = () => {
+ const [movies, setMovies] = useState
+
+ );
+};
+
+export default MovieList;
\ No newline at end of file
diff --git a/netflix/src/components/home/PlayBar.tsx b/netflix/src/components/home/PlayBar.tsx
new file mode 100644
index 0000000..e5378f1
--- /dev/null
+++ b/netflix/src/components/home/PlayBar.tsx
@@ -0,0 +1,29 @@
+import Image from 'next/image';
+import myList from '../../../public/svgs/home/myListIcon.svg';
+import info from '../../../public/svgs/home/infoIcon.svg';
+import play from '../../../public/svgs/home/play.svg';
+import * as styles from '@/styles/PlayBar.css';
+
+const PlayBar = () => {
+
+ return (
+ Continue Watching for Emenalo
+
+ {movies.length > 0 ? (
+ movies.map((movie) => (
+
+
+ 
+
+ ))
+ ) : (
+
+ Loading movies...
+ )} +
+
+ );
+};
+
+export default PlayBar;
\ No newline at end of file
diff --git a/netflix/src/components/home/PopularList.tsx b/netflix/src/components/home/PopularList.tsx
new file mode 100644
index 0000000..87197fb
--- /dev/null
+++ b/netflix/src/components/home/PopularList.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { fetchPopular } from "@/api/MovieList";
+import * as styles from "@/styles/MovieList.css";
+
+interface Movie {
+ id: number;
+ title: string;
+ poster_path: string;
+}
+
+const PopularList = () => {
+ const [movies, setMovies] = useState
+
+
+
+
+ My List
+
+
+ Info
+
+
+ );
+};
+
+export default PopularList;
diff --git a/netflix/src/components/home/Preview.tsx b/netflix/src/components/home/Preview.tsx
new file mode 100644
index 0000000..aabf996
--- /dev/null
+++ b/netflix/src/components/home/Preview.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import { useEffect, useState } from 'react';
+import { fetchTV } from '@/api/MovieList';
+import * as styles from '@/styles/Preview.css';
+
+interface TV {
+ id: number;
+ title: string;
+ poster_path: string;
+}
+
+const Preview = () => {
+ const [TV, setTV] = useStatePopular on Netflix
+
+ {movies.length > 0 ? (
+ movies.map((movie) => (
+
+
+ 
+
+ ))
+ ) : (
+ Loading movies...
+ )} +
+
+ );
+};
+
+export default Preview;
\ No newline at end of file
diff --git a/netflix/src/components/home/TopRated.tsx b/netflix/src/components/home/TopRated.tsx
new file mode 100644
index 0000000..06447e8
--- /dev/null
+++ b/netflix/src/components/home/TopRated.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import { useEffect, useState } from 'react';
+import { fetchTopRated } from '@/api/MovieList';
+import * as styles from '@/styles/MovieList.css';
+
+interface Movie {
+ id: number;
+ title: string;
+ poster_path: string;
+}
+
+const TopRatedList = () => {
+ const [movies, setMovies] = useStatePreviews
+
+ {TV.length > 0 ? (
+ TV.map((tv) => (
+
+
+ 
+
+ ))
+ ) : (
+
+ Loading TVs...
+ )} +
+
+ );
+};
+
+export default TopRatedList;
\ No newline at end of file
diff --git a/netflix/src/components/home/TopTen.tsx b/netflix/src/components/home/TopTen.tsx
new file mode 100644
index 0000000..19eb060
--- /dev/null
+++ b/netflix/src/components/home/TopTen.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import { useEffect, useState } from 'react';
+import Image from 'next/image';
+import topTenIcon from '../../../public/svgs/home/TopTenIcon.svg';
+import { fetchTopRated } from '@/api/MovieList';
+import * as styles from '@/styles/TopTen.css';
+
+interface Movie {
+ id: number;
+ title: string;
+ poster_path: string;
+ rank: number;
+}
+
+const TopTen = () => {
+ const [movie, setMovie] = useStateTop Rated
+
+ {movies.length > 0 ? (
+ movies.map((movie) => (
+
+
+
+
+ ))
+ ) : (
+
+ Loading movies...
+ )} +
+ {movie ? (
+ <>
+
+ );
+};
+
+export default TopTen;
\ No newline at end of file
diff --git a/netflix/src/components/home/TrendingList.tsx b/netflix/src/components/home/TrendingList.tsx
new file mode 100644
index 0000000..99184fd
--- /dev/null
+++ b/netflix/src/components/home/TrendingList.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import { useEffect, useState } from 'react';
+import { fetchTrending } from '@/api/MovieList';
+import * as styles from '@/styles/MovieList.css';
+
+interface Movie {
+ id: number;
+ title: string;
+ poster_path: string;
+}
+
+const TrendingList = () => {
+ const [movies, setMovies] = useState
+
+
+
+
+ ) : (
+ #{movie.rank} in Korea Today
+Loading...
+ )} +
+
+ );
+};
+
+export default TrendingList;
\ No newline at end of file
diff --git a/netflix/src/components/landing/Landing.tsx b/netflix/src/components/landing/Landing.tsx
new file mode 100644
index 0000000..2180fd7
--- /dev/null
+++ b/netflix/src/components/landing/Landing.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import Lottie from 'lottie-react';
+import netflixLanding from './json/netflixLanding.json';
+import { useRouter } from 'next/navigation';
+
+export default function Landing() {
+ const router = useRouter();
+ return (
+ Trending Now
+
+ {movies.length > 0 ? (
+ movies.map((movie) => (
+
+
+
+
+ ))
+ ) : (
+
+ Loading movies...
+ )} +
+ router.push('/home')}
+ />
+
+ );
+}
diff --git a/netflix/src/components/landing/json/netflixLanding.json b/netflix/src/components/landing/json/netflixLanding.json
new file mode 100644
index 0000000..b23b10e
--- /dev/null
+++ b/netflix/src/components/landing/json/netflixLanding.json
@@ -0,0 +1,2222 @@
+{
+ "v": "5.5.7",
+ "meta": {
+ "g": "LottieFiles AE 0.1.20",
+ "a": "",
+ "k": "",
+ "d": "",
+ "tc": "#FFFFFF"
+ },
+ "fr": 30,
+ "ip": 0,
+ "op": 138,
+ "w": 512,
+ "h": 512,
+ "nm": "Nettflix",
+ "ddd": 0,
+ "assets": [],
+ "layers": [
+ {
+ "ddd": 0,
+ "ind": 1,
+ "ty": 4,
+ "nm": "Big N 1",
+ "sr": 1,
+ "ks": {
+ "o": {
+ "a": 1,
+ "k": [
+ {
+ "i": { "x": [0.667], "y": [1] },
+ "o": { "x": [0.333], "y": [0] },
+ "t": 9,
+ "s": [0]
+ },
+ {
+ "i": { "x": [0.833], "y": [1] },
+ "o": { "x": [0.167], "y": [0] },
+ "t": 14.333,
+ "s": [100]
+ },
+ {
+ "i": { "x": [1], "y": [1] },
+ "o": { "x": [0.612], "y": [0] },
+ "t": 57,
+ "s": [100]
+ },
+ { "t": 83, "s": [0] }
+ ],
+ "ix": 11
+ },
+ "r": { "a": 0, "k": 0, "ix": 10 },
+ "p": {
+ "a": 1,
+ "k": [
+ {
+ "i": { "x": 0.455, "y": 1 },
+ "o": { "x": 0.684, "y": 0 },
+ "t": 52,
+ "s": [256, 256, 0],
+ "to": [-24.667, 0, 0],
+ "ti": [24.667, 0, 0]
+ },
+ { "t": 77.373046875, "s": [108, 256, 0] }
+ ],
+ "ix": 2
+ },
+ "a": { "a": 0, "k": [0.209, 0.143, 0], "ix": 1 },
+ "s": {
+ "a": 1,
+ "k": [
+ {
+ "i": { "x": [0.461, 0.461, 0.667], "y": [1, 1, 1] },
+ "o": { "x": [0.655, 0.655, 0.333], "y": [0, 0, 0] },
+ "t": 23,
+ "s": [66, 66, 100]
+ },
+ { "t": 52, "s": [21, 21, 100] }
+ ],
+ "ix": 6
+ }
+ },
+ "ao": 0,
+ "shapes": [
+ {
+ "ty": "gr",
+ "it": [
+ {
+ "ind": 0,
+ "ty": "sh",
+ "ix": 1,
+ "ks": {
+ "a": 1,
+ "k": [
+ {
+ "i": { "x": 0.252, "y": 1 },
+ "o": { "x": 0.434, "y": 0 },
+ "t": 9,
+ "s": [
+ {
+ "i": [
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [0, 0]
+ ],
+ "o": [
+ [0, 0],
+ [0, 0],
+ [42.684, 1.078],
+ [0, 0]
+ ],
+ "v": [
+ [120.607, 218.722],
+ [31.805, 211.525],
+ [31.977, 211.212],
+ [120.318, 218.496]
+ ],
+ "c": true
+ }
+ ]
+ },
+ {
+ "i": { "x": 0.833, "y": 1 },
+ "o": { "x": 0.167, "y": 0 },
+ "t": 23,
+ "s": [
+ {
+ "i": [
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [0, 0]
+ ],
+ "o": [
+ [0, 0],
+ [0, 0],
+ [42.684, 1.078],
+ [0, 0]
+ ],
+ "v": [
+ [-34.128, -218.21],
+ [-119.9, -218.21],
+ [31.977, 211.212],
+ [120.318, 218.496]
+ ],
+ "c": true
+ }
+ ]
+ },
+ {
+ "i": { "x": 0.833, "y": 1 },
+ "o": { "x": 0.167, "y": 0 },
+ "t": 62,
+ "s": [
+ {
+ "i": [
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [0, 0]
+ ],
+ "o": [
+ [0, 0],
+ [0, 0],
+ [42.684, 1.078],
+ [0, 0]
+ ],
+ "v": [
+ [-34.128, -218.21],
+ [-119.9, -218.21],
+ [31.977, 211.212],
+ [120.318, 218.496]
+ ],
+ "c": true
+ }
+ ]
+ },
+ {
+ "t": 78,
+ "s": [
+ {
+ "i": [
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [0, 0]
+ ],
+ "o": [
+ [0, 0],
+ [0, 0],
+ [44.422, -6.307],
+ [0, 0]
+ ],
+ "v": [
+ [-47.223, -218.706],
+ [-102.043, -218.706],
+ [41.501, 198.117],
+ [102.46, 192.802]
+ ],
+ "c": true
+ }
+ ]
+ }
+ ],
+ "ix": 2
+ },
+ "nm": "Path 1",
+ "mn": "ADBE Vector Shape - Group",
+ "hd": false
+ },
+ {
+ "ty": "fl",
+ "c": {
+ "a": 0,
+ "k": [0.898039215686, 0.035294117647, 0.078431372549, 1],
+ "ix": 4
+ },
+ "o": { "a": 0, "k": 100, "ix": 5 },
+ "r": 1,
+ "bm": 0,
+ "nm": "Fill 1",
+ "mn": "ADBE Vector Graphic - Fill",
+ "hd": false
+ },
+ {
+ "ty": "tr",
+ "p": { "a": 0, "k": [0, 0], "ix": 2 },
+ "a": { "a": 0, "k": [0, 0], "ix": 1 },
+ "s": { "a": 0, "k": [100, 100], "ix": 3 },
+ "r": { "a": 0, "k": 0, "ix": 6 },
+ "o": { "a": 0, "k": 100, "ix": 7 },
+ "sk": { "a": 0, "k": 0, "ix": 4 },
+ "sa": { "a": 0, "k": 0, "ix": 5 },
+ "nm": "Transform"
+ }
+ ],
+ "nm": "Big N 1",
+ "np": 2,
+ "cix": 2,
+ "bm": 0,
+ "ix": 1,
+ "mn": "ADBE Vector Group",
+ "hd": false
+ }
+ ],
+ "ip": 0,
+ "op": 1948,
+ "st": 0,
+ "bm": 0
+ },
+ {
+ "ddd": 0,
+ "ind": 2,
+ "ty": 4,
+ "nm": "Big N 2 matte",
+ "parent": 1,
+ "td": 1,
+ "sr": 1,
+ "ks": {
+ "o": {
+ "a": 1,
+ "k": [
+ {
+ "i": { "x": [0.667], "y": [1] },
+ "o": { "x": [0.333], "y": [0] },
+ "t": 0,
+ "s": [0]
+ },
+ {
+ "i": { "x": [0.833], "y": [1] },
+ "o": { "x": [0.333], "y": [0] },
+ "t": 5.333,
+ "s": [100]
+ },
+ {
+ "i": { "x": [1], "y": [1] },
+ "o": { "x": [0.612], "y": [0] },
+ "t": 57,
+ "s": [100]
+ },
+ { "t": 83, "s": [0] }
+ ],
+ "ix": 11
+ },
+ "r": { "a": 0, "k": 0, "ix": 10 },
+ "p": { "a": 0, "k": [77.223, 0, 0], "ix": 2 },
+ "a": { "a": 0, "k": [77.223, 0, 0], "ix": 1 },
+ "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
+ },
+ "ao": 0,
+ "shapes": [
+ {
+ "ty": "gr",
+ "it": [
+ {
+ "ind": 0,
+ "ty": "sh",
+ "ix": 1,
+ "ks": {
+ "a": 1,
+ "k": [
+ {
+ "i": { "x": 0.252, "y": 1 },
+ "o": { "x": 0.434, "y": 0 },
+ "t": 0,
+ "s": [
+ {
+ "i": [
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [1.198, 0]
+ ],
+ "o": [
+ [0, 0],
+ [0, 0],
+ [-0.901, 0],
+ [0, 0]
+ ],
+ "v": [
+ [34.099, -359.119],
+ [120.288, -359.43],
+ [120.49, -359.888],
+ [33.164, -359.117]
+ ],
+ "c": true
+ }
+ ]
+ },
+ {
+ "i": { "x": 0.833, "y": 1 },
+ "o": { "x": 0.167, "y": 0 },
+ "t": 12,
+ "s": [
+ {
+ "i": [
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [28.673, 0.875]
+ ],
+ "o": [
+ [0, 0],
+ [0, 0],
+ [-28.673, -3.601],
+ [0, 0]
+ ],
+ "v": [
+ [34.128, -218.21],
+ [120.318, -218.521],
+ [120.318, 218.521],
+ [34.128, 211.337]
+ ],
+ "c": true
+ }
+ ]
+ },
+ {
+ "i": { "x": 0.833, "y": 1 },
+ "o": { "x": 0.167, "y": 0 },
+ "t": 62,
+ "s": [
+ {
+ "i": [
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [28.673, 0.875]
+ ],
+ "o": [
+ [0, 0],
+ [0, 0],
+ [-28.673, -3.601],
+ [0, 0]
+ ],
+ "v": [
+ [34.128, -218.21],
+ [120.318, -218.521],
+ [120.318, 218.521],
+ [34.128, 211.337]
+ ],
+ "c": true
+ }
+ ]
+ },
+ {
+ "t": 78,
+ "s": [
+ {
+ "i": [
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [28.249, -4.53]
+ ],
+ "o": [
+ [0, 0],
+ [0, 0],
+ [-27.545, 1.34],
+ [0, 0]
+ ],
+ "v": [
+ [48.414, -218.706],
+ [114.365, -217.965],
+ [116.869, 194.041],
+ [44.408, 201.102]
+ ],
+ "c": true
+ }
+ ]
+ }
+ ],
+ "ix": 2
+ },
+ "nm": "Path 1",
+ "mn": "ADBE Vector Shape - Group",
+ "hd": false
+ },
+ {
+ "ty": "fl",
+ "c": {
+ "a": 0,
+ "k": [0.694117647059, 0.023529411765, 0.058823529412, 1],
+ "ix": 4
+ },
+ "o": { "a": 0, "k": 100, "ix": 5 },
+ "r": 1,
+ "bm": 0,
+ "nm": "Fill 1",
+ "mn": "ADBE Vector Graphic - Fill",
+ "hd": false
+ },
+ {
+ "ty": "tr",
+ "p": { "a": 0, "k": [0, 0], "ix": 2 },
+ "a": { "a": 0, "k": [0, 0], "ix": 1 },
+ "s": { "a": 0, "k": [100, 100], "ix": 3 },
+ "r": { "a": 0, "k": 0, "ix": 6 },
+ "o": { "a": 0, "k": 100, "ix": 7 },
+ "sk": { "a": 0, "k": 0, "ix": 4 },
+ "sa": { "a": 0, "k": 0, "ix": 5 },
+ "nm": "Transform"
+ }
+ ],
+ "nm": "Big N 2",
+ "np": 2,
+ "cix": 2,
+ "bm": 0,
+ "ix": 1,
+ "mn": "ADBE Vector Group",
+ "hd": false
+ }
+ ],
+ "ip": 0,
+ "op": 1948,
+ "st": 0,
+ "bm": 0
+ },
+ {
+ "ddd": 0,
+ "ind": 3,
+ "ty": 4,
+ "nm": "Big N 1 shadow 2",
+ "tt": 1,
+ "sr": 1,
+ "ks": {
+ "o": {
+ "a": 1,
+ "k": [
+ {
+ "i": { "x": [0.667], "y": [1] },
+ "o": { "x": [0.333], "y": [0] },
+ "t": 9,
+ "s": [0]
+ },
+ {
+ "i": { "x": [0.833], "y": [1] },
+ "o": { "x": [0.167], "y": [0] },
+ "t": 14.333,
+ "s": [100]
+ },
+ {
+ "i": { "x": [1], "y": [1] },
+ "o": { "x": [0.612], "y": [0] },
+ "t": 57,
+ "s": [100]
+ },
+ { "t": 83, "s": [0] }
+ ],
+ "ix": 11
+ },
+ "r": { "a": 0, "k": 0, "ix": 10 },
+ "p": {
+ "a": 1,
+ "k": [
+ {
+ "i": { "x": 0.455, "y": 1 },
+ "o": { "x": 0.684, "y": 0 },
+ "t": 52,
+ "s": [256, 256, 0],
+ "to": [-24.667, 0, 0],
+ "ti": [24.667, 0, 0]
+ },
+ { "t": 77.373046875, "s": [108, 256, 0] }
+ ],
+ "ix": 2
+ },
+ "a": { "a": 0, "k": [0.209, 0.143, 0], "ix": 1 },
+ "s": {
+ "a": 1,
+ "k": [
+ {
+ "i": { "x": [0.461, 0.461, 0.667], "y": [1, 1, 1] },
+ "o": { "x": [0.655, 0.655, 0.333], "y": [0, 0, 0] },
+ "t": 23,
+ "s": [66, 66, 100]
+ },
+ { "t": 52, "s": [21, 21, 100] }
+ ],
+ "ix": 6
+ }
+ },
+ "ao": 0,
+ "ef": [
+ {
+ "ty": 25,
+ "nm": "Drop Shadow",
+ "np": 8,
+ "mn": "ADBE Drop Shadow",
+ "ix": 1,
+ "en": 1,
+ "ef": [
+ {
+ "ty": 2,
+ "nm": "Shadow Color",
+ "mn": "ADBE Drop Shadow-0001",
+ "ix": 1,
+ "v": {
+ "a": 0,
+ "k": [0.086274512112, 0, 0.0074725952, 1],
+ "ix": 1
+ }
+ },
+ {
+ "ty": 0,
+ "nm": "Opacity",
+ "mn": "ADBE Drop Shadow-0002",
+ "ix": 2,
+ "v": { "a": 0, "k": 178.5, "ix": 2 }
+ },
+ {
+ "ty": 0,
+ "nm": "Direction",
+ "mn": "ADBE Drop Shadow-0003",
+ "ix": 3,
+ "v": { "a": 0, "k": 0, "ix": 3 }
+ },
+ {
+ "ty": 0,
+ "nm": "Distance",
+ "mn": "ADBE Drop Shadow-0004",
+ "ix": 4,
+ "v": { "a": 0, "k": 0, "ix": 4 }
+ },
+ {
+ "ty": 0,
+ "nm": "Softness",
+ "mn": "ADBE Drop Shadow-0005",
+ "ix": 5,
+ "v": { "a": 0, "k": 100, "ix": 5 }
+ },
+ {
+ "ty": 7,
+ "nm": "Shadow Only",
+ "mn": "ADBE Drop Shadow-0006",
+ "ix": 6,
+ "v": { "a": 0, "k": 0, "ix": 6 }
+ }
+ ]
+ }
+ ],
+ "shapes": [
+ {
+ "ty": "gr",
+ "it": [
+ {
+ "ind": 0,
+ "ty": "sh",
+ "ix": 1,
+ "ks": {
+ "a": 1,
+ "k": [
+ {
+ "i": { "x": 0.252, "y": 1 },
+ "o": { "x": 0.434, "y": 0 },
+ "t": 9,
+ "s": [
+ {
+ "i": [
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [0, 0]
+ ],
+ "o": [
+ [0, 0],
+ [0, 0],
+ [42.684, 1.078],
+ [0, 0]
+ ],
+ "v": [
+ [120.607, 218.722],
+ [31.805, 211.525],
+ [31.977, 211.212],
+ [120.318, 218.496]
+ ],
+ "c": true
+ }
+ ]
+ },
+ {
+ "i": { "x": 0.833, "y": 1 },
+ "o": { "x": 0.167, "y": 0 },
+ "t": 23,
+ "s": [
+ {
+ "i": [
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [0, 0]
+ ],
+ "o": [
+ [0, 0],
+ [0, 0],
+ [42.684, 1.078],
+ [0, 0]
+ ],
+ "v": [
+ [-34.128, -218.21],
+ [-119.9, -218.21],
+ [31.977, 211.212],
+ [120.318, 218.496]
+ ],
+ "c": true
+ }
+ ]
+ },
+ {
+ "i": { "x": 0.833, "y": 1 },
+ "o": { "x": 0.167, "y": 0 },
+ "t": 62,
+ "s": [
+ {
+ "i": [
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [0, 0]
+ ],
+ "o": [
+ [0, 0],
+ [0, 0],
+ [42.684, 1.078],
+ [0, 0]
+ ],
+ "v": [
+ [-34.128, -218.21],
+ [-119.9, -218.21],
+ [31.977, 211.212],
+ [120.318, 218.496]
+ ],
+ "c": true
+ }
+ ]
+ },
+ {
+ "t": 78,
+ "s": [
+ {
+ "i": [
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [0, 0]
+ ],
+ "o": [
+ [0, 0],
+ [0, 0],
+ [44.422, -6.307],
+ [0, 0]
+ ],
+ "v": [
+ [-47.223, -218.706],
+ [-102.043, -218.706],
+ [41.501, 198.117],
+ [102.46, 192.802]
+ ],
+ "c": true
+ }
+ ]
+ }
+ ],
+ "ix": 2
+ },
+ "nm": "Path 1",
+ "mn": "ADBE Vector Shape - Group",
+ "hd": false
+ },
+ {
+ "ty": "fl",
+ "c": {
+ "a": 0,
+ "k": [0.898039215686, 0.035294117647, 0.078431372549, 1],
+ "ix": 4
+ },
+ "o": { "a": 0, "k": 100, "ix": 5 },
+ "r": 1,
+ "bm": 0,
+ "nm": "Fill 1",
+ "mn": "ADBE Vector Graphic - Fill",
+ "hd": false
+ },
+ {
+ "ty": "tr",
+ "p": { "a": 0, "k": [0, 0], "ix": 2 },
+ "a": { "a": 0, "k": [0, 0], "ix": 1 },
+ "s": { "a": 0, "k": [100, 100], "ix": 3 },
+ "r": { "a": 0, "k": 0, "ix": 6 },
+ "o": { "a": 0, "k": 100, "ix": 7 },
+ "sk": { "a": 0, "k": 0, "ix": 4 },
+ "sa": { "a": 0, "k": 0, "ix": 5 },
+ "nm": "Transform"
+ }
+ ],
+ "nm": "Big N 1",
+ "np": 2,
+ "cix": 2,
+ "bm": 0,
+ "ix": 1,
+ "mn": "ADBE Vector Group",
+ "hd": false
+ },
+ {
+ "ty": "gr",
+ "it": [
+ {
+ "ty": "tr",
+ "p": { "a": 0, "k": [0, 0], "ix": 2 },
+ "a": { "a": 0, "k": [0, 0], "ix": 1 },
+ "s": { "a": 0, "k": [100, 100], "ix": 3 },
+ "r": { "a": 0, "k": 0, "ix": 6 },
+ "o": { "a": 0, "k": 100, "ix": 7 },
+ "sk": { "a": 0, "k": 0, "ix": 4 },
+ "sa": { "a": 0, "k": 0, "ix": 5 },
+ "nm": "Transform"
+ }
+ ],
+ "nm": "Group 1",
+ "np": 0,
+ "cix": 2,
+ "bm": 0,
+ "ix": 2,
+ "mn": "ADBE Vector Group",
+ "hd": false
+ }
+ ],
+ "ip": 0,
+ "op": 1948,
+ "st": 0,
+ "bm": 0
+ },
+ {
+ "ddd": 0,
+ "ind": 4,
+ "ty": 4,
+ "nm": "Big N 2",
+ "parent": 1,
+ "sr": 1,
+ "ks": {
+ "o": {
+ "a": 1,
+ "k": [
+ {
+ "i": { "x": [0.667], "y": [1] },
+ "o": { "x": [0.333], "y": [0] },
+ "t": 0,
+ "s": [0]
+ },
+ {
+ "i": { "x": [0.833], "y": [1] },
+ "o": { "x": [0.333], "y": [0] },
+ "t": 5.333,
+ "s": [100]
+ },
+ {
+ "i": { "x": [1], "y": [1] },
+ "o": { "x": [0.612], "y": [0] },
+ "t": 57,
+ "s": [100]
+ },
+ { "t": 83, "s": [0] }
+ ],
+ "ix": 11
+ },
+ "r": { "a": 0, "k": 0, "ix": 10 },
+ "p": { "a": 0, "k": [77.223, 0, 0], "ix": 2 },
+ "a": { "a": 0, "k": [77.223, 0, 0], "ix": 1 },
+ "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
+ },
+ "ao": 0,
+ "shapes": [
+ {
+ "ty": "gr",
+ "it": [
+ {
+ "ind": 0,
+ "ty": "sh",
+ "ix": 1,
+ "ks": {
+ "a": 1,
+ "k": [
+ {
+ "i": { "x": 0.252, "y": 1 },
+ "o": { "x": 0.434, "y": 0 },
+ "t": 0,
+ "s": [
+ {
+ "i": [
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [1.198, 0]
+ ],
+ "o": [
+ [0, 0],
+ [0, 0],
+ [-0.901, 0],
+ [0, 0]
+ ],
+ "v": [
+ [34.099, -359.119],
+ [120.288, -359.43],
+ [120.49, -359.888],
+ [33.164, -359.117]
+ ],
+ "c": true
+ }
+ ]
+ },
+ {
+ "i": { "x": 0.833, "y": 1 },
+ "o": { "x": 0.167, "y": 0 },
+ "t": 12,
+ "s": [
+ {
+ "i": [
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [28.673, 0.875]
+ ],
+ "o": [
+ [0, 0],
+ [0, 0],
+ [-28.673, -3.601],
+ [0, 0]
+ ],
+ "v": [
+ [34.128, -218.21],
+ [120.318, -218.521],
+ [120.318, 218.521],
+ [34.128, 211.337]
+ ],
+ "c": true
+ }
+ ]
+ },
+ {
+ "i": { "x": 0.833, "y": 1 },
+ "o": { "x": 0.167, "y": 0 },
+ "t": 62,
+ "s": [
+ {
+ "i": [
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [28.673, 0.875]
+ ],
+ "o": [
+ [0, 0],
+ [0, 0],
+ [-28.673, -3.601],
+ [0, 0]
+ ],
+ "v": [
+ [34.128, -218.21],
+ [120.318, -218.521],
+ [120.318, 218.521],
+ [34.128, 211.337]
+ ],
+ "c": true
+ }
+ ]
+ },
+ {
+ "t": 78,
+ "s": [
+ {
+ "i": [
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [28.249, -4.53]
+ ],
+ "o": [
+ [0, 0],
+ [0, 0],
+ [-27.545, 1.34],
+ [0, 0]
+ ],
+ "v": [
+ [48.414, -218.706],
+ [114.365, -217.965],
+ [116.869, 194.041],
+ [44.408, 201.102]
+ ],
+ "c": true
+ }
+ ]
+ }
+ ],
+ "ix": 2
+ },
+ "nm": "Path 1",
+ "mn": "ADBE Vector Shape - Group",
+ "hd": false
+ },
+ {
+ "ty": "fl",
+ "c": {
+ "a": 0,
+ "k": [0.694117647059, 0.023529411765, 0.058823529412, 1],
+ "ix": 4
+ },
+ "o": { "a": 0, "k": 100, "ix": 5 },
+ "r": 1,
+ "bm": 0,
+ "nm": "Fill 1",
+ "mn": "ADBE Vector Graphic - Fill",
+ "hd": false
+ },
+ {
+ "ty": "tr",
+ "p": { "a": 0, "k": [0, 0], "ix": 2 },
+ "a": { "a": 0, "k": [0, 0], "ix": 1 },
+ "s": { "a": 0, "k": [100, 100], "ix": 3 },
+ "r": { "a": 0, "k": 0, "ix": 6 },
+ "o": { "a": 0, "k": 100, "ix": 7 },
+ "sk": { "a": 0, "k": 0, "ix": 4 },
+ "sa": { "a": 0, "k": 0, "ix": 5 },
+ "nm": "Transform"
+ }
+ ],
+ "nm": "Big N 2",
+ "np": 2,
+ "cix": 2,
+ "bm": 0,
+ "ix": 1,
+ "mn": "ADBE Vector Group",
+ "hd": false
+ }
+ ],
+ "ip": 0,
+ "op": 1948,
+ "st": 0,
+ "bm": 0
+ },
+ {
+ "ddd": 0,
+ "ind": 5,
+ "ty": 4,
+ "nm": "Big N 3 matte",
+ "parent": 1,
+ "td": 1,
+ "sr": 1,
+ "ks": {
+ "o": {
+ "a": 1,
+ "k": [
+ {
+ "i": { "x": [0.667], "y": [1] },
+ "o": { "x": [0.333], "y": [0] },
+ "t": 19,
+ "s": [0]
+ },
+ {
+ "i": { "x": [0.833], "y": [1] },
+ "o": { "x": [0.167], "y": [0] },
+ "t": 24.333,
+ "s": [100]
+ },
+ {
+ "i": { "x": [1], "y": [1] },
+ "o": { "x": [0.612], "y": [0] },
+ "t": 57,
+ "s": [100]
+ },
+ { "t": 83, "s": [0] }
+ ],
+ "ix": 11
+ },
+ "r": { "a": 0, "k": 0, "ix": 10 },
+ "p": { "a": 0, "k": [-77.223, 0, 0], "ix": 2 },
+ "a": { "a": 0, "k": [-77.223, 0, 0], "ix": 1 },
+ "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
+ },
+ "ao": 0,
+ "shapes": [
+ {
+ "ty": "gr",
+ "it": [
+ {
+ "ind": 0,
+ "ty": "sh",
+ "ix": 1,
+ "ks": {
+ "a": 1,
+ "k": [
+ {
+ "i": { "x": 0.252, "y": 1 },
+ "o": { "x": 0.434, "y": 0 },
+ "t": 19,
+ "s": [
+ {
+ "i": [
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [0, 1.089]
+ ],
+ "o": [
+ [0, 0],
+ [0, 0],
+ [26.294, 0.724],
+ [0, 0]
+ ],
+ "v": [
+ [-34.128, -218.21],
+ [-120.318, -218.521],
+ [-120.72, -218.979],
+ [-34.705, -218.587]
+ ],
+ "c": true
+ }
+ ]
+ },
+ {
+ "i": { "x": 0.833, "y": 1 },
+ "o": { "x": 0.167, "y": 0 },
+ "t": 30,
+ "s": [
+ {
+ "i": [
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [-28.673, 0.875]
+ ],
+ "o": [
+ [0, 0],
+ [0, 0],
+ [28.673, -3.601],
+ [0, 0]
+ ],
+ "v": [
+ [-34.128, -218.21],
+ [-120.318, -218.521],
+ [-120.318, 218.521],
+ [-34.128, 211.337]
+ ],
+ "c": true
+ }
+ ]
+ },
+ {
+ "i": { "x": 0.833, "y": 1 },
+ "o": { "x": 0.167, "y": 0 },
+ "t": 62,
+ "s": [
+ {
+ "i": [
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [-28.673, 0.875]
+ ],
+ "o": [
+ [0, 0],
+ [0, 0],
+ [28.673, -3.601],
+ [0, 0]
+ ],
+ "v": [
+ [-34.128, -218.21],
+ [-120.318, -218.521],
+ [-120.318, 218.521],
+ [-34.128, 211.337]
+ ],
+ "c": true
+ }
+ ]
+ },
+ {
+ "t": 78,
+ "s": [
+ {
+ "i": [
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [-28.758, -0.959]
+ ],
+ "o": [
+ [0, 0],
+ [0, 0],
+ [28.673, -3.601],
+ [0, 0]
+ ],
+ "v": [
+ [-43.652, -218.74],
+ [-106.032, -218.137],
+ [-106.032, 217.33],
+ [-37.7, 211.816]
+ ],
+ "c": true
+ }
+ ]
+ }
+ ],
+ "ix": 2
+ },
+ "nm": "Path 1",
+ "mn": "ADBE Vector Shape - Group",
+ "hd": false
+ },
+ {
+ "ty": "fl",
+ "c": {
+ "a": 0,
+ "k": [0.694117647059, 0.023529411765, 0.058823529412, 1],
+ "ix": 4
+ },
+ "o": { "a": 0, "k": 100, "ix": 5 },
+ "r": 1,
+ "bm": 0,
+ "nm": "Fill 1",
+ "mn": "ADBE Vector Graphic - Fill",
+ "hd": false
+ },
+ {
+ "ty": "tr",
+ "p": { "a": 0, "k": [0, 0], "ix": 2 },
+ "a": { "a": 0, "k": [0, 0], "ix": 1 },
+ "s": { "a": 0, "k": [100, 100], "ix": 3 },
+ "r": { "a": 0, "k": 0, "ix": 6 },
+ "o": { "a": 0, "k": 100, "ix": 7 },
+ "sk": { "a": 0, "k": 0, "ix": 4 },
+ "sa": { "a": 0, "k": 0, "ix": 5 },
+ "nm": "Transform"
+ }
+ ],
+ "nm": "Big N 3",
+ "np": 2,
+ "cix": 2,
+ "bm": 0,
+ "ix": 1,
+ "mn": "ADBE Vector Group",
+ "hd": false
+ }
+ ],
+ "ip": 0,
+ "op": 1948,
+ "st": 0,
+ "bm": 0
+ },
+ {
+ "ddd": 0,
+ "ind": 6,
+ "ty": 4,
+ "nm": "Big N 1 shadow",
+ "tt": 1,
+ "sr": 1,
+ "ks": {
+ "o": {
+ "a": 1,
+ "k": [
+ {
+ "i": { "x": [0.667], "y": [1] },
+ "o": { "x": [0.333], "y": [0] },
+ "t": 9,
+ "s": [0]
+ },
+ {
+ "i": { "x": [0.833], "y": [1] },
+ "o": { "x": [0.167], "y": [0] },
+ "t": 14.333,
+ "s": [100]
+ },
+ {
+ "i": { "x": [1], "y": [1] },
+ "o": { "x": [0.612], "y": [0] },
+ "t": 57,
+ "s": [100]
+ },
+ { "t": 83, "s": [0] }
+ ],
+ "ix": 11
+ },
+ "r": { "a": 0, "k": 0, "ix": 10 },
+ "p": {
+ "a": 1,
+ "k": [
+ {
+ "i": { "x": 0.455, "y": 1 },
+ "o": { "x": 0.684, "y": 0 },
+ "t": 52,
+ "s": [256, 256, 0],
+ "to": [-24.667, 0, 0],
+ "ti": [24.667, 0, 0]
+ },
+ { "t": 77.373046875, "s": [108, 256, 0] }
+ ],
+ "ix": 2
+ },
+ "a": { "a": 0, "k": [0.209, 0.143, 0], "ix": 1 },
+ "s": {
+ "a": 1,
+ "k": [
+ {
+ "i": { "x": [0.461, 0.461, 0.667], "y": [1, 1, 1] },
+ "o": { "x": [0.655, 0.655, 0.333], "y": [0, 0, 0] },
+ "t": 23,
+ "s": [66, 66, 100]
+ },
+ { "t": 52, "s": [21, 21, 100] }
+ ],
+ "ix": 6
+ }
+ },
+ "ao": 0,
+ "ef": [
+ {
+ "ty": 25,
+ "nm": "Drop Shadow",
+ "np": 8,
+ "mn": "ADBE Drop Shadow",
+ "ix": 1,
+ "en": 1,
+ "ef": [
+ {
+ "ty": 2,
+ "nm": "Shadow Color",
+ "mn": "ADBE Drop Shadow-0001",
+ "ix": 1,
+ "v": {
+ "a": 0,
+ "k": [0.086274512112, 0, 0.0074725952, 1],
+ "ix": 1
+ }
+ },
+ {
+ "ty": 0,
+ "nm": "Opacity",
+ "mn": "ADBE Drop Shadow-0002",
+ "ix": 2,
+ "v": { "a": 0, "k": 178.5, "ix": 2 }
+ },
+ {
+ "ty": 0,
+ "nm": "Direction",
+ "mn": "ADBE Drop Shadow-0003",
+ "ix": 3,
+ "v": { "a": 0, "k": 0, "ix": 3 }
+ },
+ {
+ "ty": 0,
+ "nm": "Distance",
+ "mn": "ADBE Drop Shadow-0004",
+ "ix": 4,
+ "v": { "a": 0, "k": 0, "ix": 4 }
+ },
+ {
+ "ty": 0,
+ "nm": "Softness",
+ "mn": "ADBE Drop Shadow-0005",
+ "ix": 5,
+ "v": { "a": 0, "k": 100, "ix": 5 }
+ },
+ {
+ "ty": 7,
+ "nm": "Shadow Only",
+ "mn": "ADBE Drop Shadow-0006",
+ "ix": 6,
+ "v": { "a": 0, "k": 0, "ix": 6 }
+ }
+ ]
+ }
+ ],
+ "shapes": [
+ {
+ "ty": "gr",
+ "it": [
+ {
+ "ind": 0,
+ "ty": "sh",
+ "ix": 1,
+ "ks": {
+ "a": 1,
+ "k": [
+ {
+ "i": { "x": 0.252, "y": 1 },
+ "o": { "x": 0.434, "y": 0 },
+ "t": 9,
+ "s": [
+ {
+ "i": [
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [0, 0]
+ ],
+ "o": [
+ [0, 0],
+ [0, 0],
+ [42.684, 1.078],
+ [0, 0]
+ ],
+ "v": [
+ [120.607, 218.722],
+ [31.805, 211.525],
+ [31.977, 211.212],
+ [120.318, 218.496]
+ ],
+ "c": true
+ }
+ ]
+ },
+ {
+ "i": { "x": 0.833, "y": 1 },
+ "o": { "x": 0.167, "y": 0 },
+ "t": 23,
+ "s": [
+ {
+ "i": [
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [0, 0]
+ ],
+ "o": [
+ [0, 0],
+ [0, 0],
+ [42.684, 1.078],
+ [0, 0]
+ ],
+ "v": [
+ [-34.128, -218.21],
+ [-119.9, -218.21],
+ [31.977, 211.212],
+ [120.318, 218.496]
+ ],
+ "c": true
+ }
+ ]
+ },
+ {
+ "i": { "x": 0.833, "y": 1 },
+ "o": { "x": 0.167, "y": 0 },
+ "t": 62,
+ "s": [
+ {
+ "i": [
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [0, 0]
+ ],
+ "o": [
+ [0, 0],
+ [0, 0],
+ [42.684, 1.078],
+ [0, 0]
+ ],
+ "v": [
+ [-34.128, -218.21],
+ [-119.9, -218.21],
+ [31.977, 211.212],
+ [120.318, 218.496]
+ ],
+ "c": true
+ }
+ ]
+ },
+ {
+ "t": 78,
+ "s": [
+ {
+ "i": [
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [0, 0]
+ ],
+ "o": [
+ [0, 0],
+ [0, 0],
+ [44.422, -6.307],
+ [0, 0]
+ ],
+ "v": [
+ [-47.223, -218.706],
+ [-102.043, -218.706],
+ [41.501, 198.117],
+ [102.46, 192.802]
+ ],
+ "c": true
+ }
+ ]
+ }
+ ],
+ "ix": 2
+ },
+ "nm": "Path 1",
+ "mn": "ADBE Vector Shape - Group",
+ "hd": false
+ },
+ {
+ "ty": "fl",
+ "c": {
+ "a": 0,
+ "k": [0.898039215686, 0.035294117647, 0.078431372549, 1],
+ "ix": 4
+ },
+ "o": { "a": 0, "k": 100, "ix": 5 },
+ "r": 1,
+ "bm": 0,
+ "nm": "Fill 1",
+ "mn": "ADBE Vector Graphic - Fill",
+ "hd": false
+ },
+ {
+ "ty": "tr",
+ "p": { "a": 0, "k": [0, 0], "ix": 2 },
+ "a": { "a": 0, "k": [0, 0], "ix": 1 },
+ "s": { "a": 0, "k": [100, 100], "ix": 3 },
+ "r": { "a": 0, "k": 0, "ix": 6 },
+ "o": { "a": 0, "k": 100, "ix": 7 },
+ "sk": { "a": 0, "k": 0, "ix": 4 },
+ "sa": { "a": 0, "k": 0, "ix": 5 },
+ "nm": "Transform"
+ }
+ ],
+ "nm": "Big N 1",
+ "np": 2,
+ "cix": 2,
+ "bm": 0,
+ "ix": 1,
+ "mn": "ADBE Vector Group",
+ "hd": false
+ }
+ ],
+ "ip": 0,
+ "op": 1948,
+ "st": 0,
+ "bm": 0
+ },
+ {
+ "ddd": 0,
+ "ind": 7,
+ "ty": 4,
+ "nm": "Big N 3",
+ "parent": 1,
+ "sr": 1,
+ "ks": {
+ "o": {
+ "a": 1,
+ "k": [
+ {
+ "i": { "x": [0.667], "y": [1] },
+ "o": { "x": [0.333], "y": [0] },
+ "t": 19,
+ "s": [0]
+ },
+ {
+ "i": { "x": [0.833], "y": [1] },
+ "o": { "x": [0.167], "y": [0] },
+ "t": 24.333,
+ "s": [100]
+ },
+ {
+ "i": { "x": [1], "y": [1] },
+ "o": { "x": [0.612], "y": [0] },
+ "t": 57,
+ "s": [100]
+ },
+ { "t": 83, "s": [0] }
+ ],
+ "ix": 11
+ },
+ "r": { "a": 0, "k": 0, "ix": 10 },
+ "p": { "a": 0, "k": [-77.223, 0, 0], "ix": 2 },
+ "a": { "a": 0, "k": [-77.223, 0, 0], "ix": 1 },
+ "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
+ },
+ "ao": 0,
+ "shapes": [
+ {
+ "ty": "gr",
+ "it": [
+ {
+ "ind": 0,
+ "ty": "sh",
+ "ix": 1,
+ "ks": {
+ "a": 1,
+ "k": [
+ {
+ "i": { "x": 0.252, "y": 1 },
+ "o": { "x": 0.434, "y": 0 },
+ "t": 19,
+ "s": [
+ {
+ "i": [
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [0, 1.089]
+ ],
+ "o": [
+ [0, 0],
+ [0, 0],
+ [26.294, 0.724],
+ [0, 0]
+ ],
+ "v": [
+ [-34.128, -218.21],
+ [-120.318, -218.521],
+ [-120.72, -218.979],
+ [-34.705, -218.587]
+ ],
+ "c": true
+ }
+ ]
+ },
+ {
+ "i": { "x": 0.833, "y": 1 },
+ "o": { "x": 0.167, "y": 0 },
+ "t": 30,
+ "s": [
+ {
+ "i": [
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [-28.673, 0.875]
+ ],
+ "o": [
+ [0, 0],
+ [0, 0],
+ [28.673, -3.601],
+ [0, 0]
+ ],
+ "v": [
+ [-34.128, -218.21],
+ [-120.318, -218.521],
+ [-120.318, 218.521],
+ [-34.128, 211.337]
+ ],
+ "c": true
+ }
+ ]
+ },
+ {
+ "i": { "x": 0.833, "y": 1 },
+ "o": { "x": 0.167, "y": 0 },
+ "t": 62,
+ "s": [
+ {
+ "i": [
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [-28.673, 0.875]
+ ],
+ "o": [
+ [0, 0],
+ [0, 0],
+ [28.673, -3.601],
+ [0, 0]
+ ],
+ "v": [
+ [-34.128, -218.21],
+ [-120.318, -218.521],
+ [-120.318, 218.521],
+ [-34.128, 211.337]
+ ],
+ "c": true
+ }
+ ]
+ },
+ {
+ "t": 78,
+ "s": [
+ {
+ "i": [
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [-28.758, -0.959]
+ ],
+ "o": [
+ [0, 0],
+ [0, 0],
+ [28.673, -3.601],
+ [0, 0]
+ ],
+ "v": [
+ [-43.652, -218.74],
+ [-106.032, -218.137],
+ [-106.032, 217.33],
+ [-37.7, 211.816]
+ ],
+ "c": true
+ }
+ ]
+ }
+ ],
+ "ix": 2
+ },
+ "nm": "Path 1",
+ "mn": "ADBE Vector Shape - Group",
+ "hd": false
+ },
+ {
+ "ty": "fl",
+ "c": {
+ "a": 0,
+ "k": [0.694117647059, 0.023529411765, 0.058823529412, 1],
+ "ix": 4
+ },
+ "o": { "a": 0, "k": 100, "ix": 5 },
+ "r": 1,
+ "bm": 0,
+ "nm": "Fill 1",
+ "mn": "ADBE Vector Graphic - Fill",
+ "hd": false
+ },
+ {
+ "ty": "tr",
+ "p": { "a": 0, "k": [0, 0], "ix": 2 },
+ "a": { "a": 0, "k": [0, 0], "ix": 1 },
+ "s": { "a": 0, "k": [100, 100], "ix": 3 },
+ "r": { "a": 0, "k": 0, "ix": 6 },
+ "o": { "a": 0, "k": 100, "ix": 7 },
+ "sk": { "a": 0, "k": 0, "ix": 4 },
+ "sa": { "a": 0, "k": 0, "ix": 5 },
+ "nm": "Transform"
+ }
+ ],
+ "nm": "Big N 3",
+ "np": 2,
+ "cix": 2,
+ "bm": 0,
+ "ix": 1,
+ "mn": "ADBE Vector Group",
+ "hd": false
+ }
+ ],
+ "ip": 0,
+ "op": 1948,
+ "st": 0,
+ "bm": 0
+ },
+ {
+ "ddd": 0,
+ "ind": 8,
+ "ty": 4,
+ "nm": "Wordmark Matte",
+ "td": 1,
+ "sr": 1,
+ "ks": {
+ "o": { "a": 0, "k": 100, "ix": 11 },
+ "r": { "a": 0, "k": 0, "ix": 10 },
+ "p": { "a": 0, "k": [565.279, 256.14, 0], "ix": 2 },
+ "a": { "a": 0, "k": [232, 1, 0], "ix": 1 },
+ "s": { "a": 0, "k": [232.448, 114, 100], "ix": 6 }
+ },
+ "ao": 0,
+ "ef": [
+ {
+ "ty": 29,
+ "nm": "Gaussian Blur",
+ "np": 5,
+ "mn": "ADBE Gaussian Blur 2",
+ "ix": 1,
+ "en": 1,
+ "ef": [
+ {
+ "ty": 0,
+ "nm": "Blurriness",
+ "mn": "ADBE Gaussian Blur 2-0001",
+ "ix": 1,
+ "v": { "a": 0, "k": 70, "ix": 1 }
+ },
+ {
+ "ty": 7,
+ "nm": "Blur Dimensions",
+ "mn": "ADBE Gaussian Blur 2-0002",
+ "ix": 2,
+ "v": { "a": 0, "k": 1, "ix": 2 }
+ },
+ {
+ "ty": 7,
+ "nm": "Repeat Edge Pixels",
+ "mn": "ADBE Gaussian Blur 2-0003",
+ "ix": 3,
+ "v": { "a": 0, "k": 0, "ix": 3 }
+ }
+ ]
+ }
+ ],
+ "shapes": [
+ {
+ "ty": "gr",
+ "it": [
+ {
+ "ty": "rc",
+ "d": 1,
+ "s": { "a": 0, "k": [72, 538], "ix": 2 },
+ "p": { "a": 0, "k": [0, 0], "ix": 3 },
+ "r": { "a": 0, "k": 0, "ix": 4 },
+ "nm": "Rectangle Path 1",
+ "mn": "ADBE Vector Shape - Rect",
+ "hd": false
+ },
+ {
+ "ty": "fl",
+ "c": {
+ "a": 0,
+ "k": [0.694117647059, 0.023529411765, 0.058823529412, 1],
+ "ix": 4
+ },
+ "o": { "a": 0, "k": 100, "ix": 5 },
+ "r": 1,
+ "bm": 0,
+ "nm": "Fill 1",
+ "mn": "ADBE Vector Graphic - Fill",
+ "hd": false
+ },
+ {
+ "ty": "tr",
+ "p": { "a": 0, "k": [232, 1], "ix": 2 },
+ "a": { "a": 0, "k": [0, 0], "ix": 1 },
+ "s": { "a": 0, "k": [100, 100], "ix": 3 },
+ "r": { "a": 0, "k": 0, "ix": 6 },
+ "o": { "a": 0, "k": 100, "ix": 7 },
+ "sk": { "a": 0, "k": 0, "ix": 4 },
+ "sa": { "a": 0, "k": 0, "ix": 5 },
+ "nm": "Transform"
+ }
+ ],
+ "nm": "Rectangle 1",
+ "np": 3,
+ "cix": 2,
+ "bm": 0,
+ "ix": 1,
+ "mn": "ADBE Vector Group",
+ "hd": false
+ }
+ ],
+ "ip": 0,
+ "op": 1948,
+ "st": 0,
+ "bm": 0
+ },
+ {
+ "ddd": 0,
+ "ind": 9,
+ "ty": 4,
+ "nm": "Netflix Wordmark",
+ "tt": 2,
+ "sr": 1,
+ "ks": {
+ "o": {
+ "a": 1,
+ "k": [
+ {
+ "i": { "x": [0.87], "y": [1] },
+ "o": { "x": [0.612], "y": [0] },
+ "t": 52,
+ "s": [0]
+ },
+ {
+ "i": { "x": [0.833], "y": [1] },
+ "o": { "x": [0.167], "y": [0] },
+ "t": 75,
+ "s": [100]
+ },
+ {
+ "i": { "x": [0.833], "y": [1] },
+ "o": { "x": [0.167], "y": [0] },
+ "t": 121.776,
+ "s": [100]
+ },
+ { "t": 137, "s": [0] }
+ ],
+ "ix": 11
+ },
+ "r": { "a": 0, "k": 0, "ix": 10 },
+ "p": {
+ "s": true,
+ "x": {
+ "a": 1,
+ "k": [
+ {
+ "i": { "x": [0.455], "y": [1] },
+ "o": { "x": [0.684], "y": [0] },
+ "t": 52,
+ "s": [402.75]
+ },
+ { "t": 77.373046875, "s": [256] }
+ ],
+ "ix": 3
+ },
+ "y": { "a": 0, "k": 256, "ix": 4 }
+ },
+ "a": { "a": 0, "k": [0, 0, 0], "ix": 1 },
+ "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
+ },
+ "ao": 0,
+ "shapes": [
+ {
+ "ty": "gr",
+ "it": [
+ {
+ "ind": 0,
+ "ty": "sh",
+ "ix": 1,
+ "ks": {
+ "a": 0,
+ "k": {
+ "i": [
+ [0, 0],
+ [5.401, -0.719],
+ [0, 0],
+ [0, 0],
+ [4.861, -0.72],
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [0, 0]
+ ],
+ "o": [
+ [-5.131, 0.901],
+ [0, 0],
+ [0, 0],
+ [-5.131, 0.54],
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [0, 0]
+ ],
+ "v": [
+ [-123.641, 40.148],
+ [-139.394, 42.039],
+ [-155.868, -6.211],
+ [-155.868, 44.11],
+ [-170.541, 46.09],
+ [-170.541, -46.09],
+ [-156.858, -46.09],
+ [-138.134, 6.212],
+ [-138.134, -46.09],
+ [-123.641, -46.09]
+ ],
+ "c": true
+ },
+ "ix": 2
+ },
+ "nm": "Path 1",
+ "mn": "ADBE Vector Shape - Group",
+ "hd": false
+ },
+ {
+ "ind": 1,
+ "ty": "sh",
+ "ix": 2,
+ "ks": {
+ "a": 0,
+ "k": {
+ "i": [
+ [0, 0],
+ [-5.131, 0],
+ [0, 0],
+ [5.401, -0.27],
+ [0, 0],
+ [-8.551, 0.27],
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [0, 0]
+ ],
+ "o": [
+ [5.582, 0],
+ [0, 0],
+ [-6.392, 0],
+ [0, 0],
+ [8.462, -0.54],
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [0, 0]
+ ],
+ "v": [
+ [-95.285, -12.333],
+ [-76.021, -12.603],
+ [-76.021, 1.8],
+ [-95.285, 2.07],
+ [-95.285, 23.495],
+ [-69.81, 21.964],
+ [-69.81, 35.826],
+ [-109.689, 38.978],
+ [-109.689, -46.09],
+ [-69.81, -46.09],
+ [-69.81, -31.687],
+ [-95.285, -31.687]
+ ],
+ "c": true
+ },
+ "ix": 2
+ },
+ "nm": "Path 2",
+ "mn": "ADBE Vector Shape - Group",
+ "hd": false
+ },
+ {
+ "ind": 2,
+ "ty": "sh",
+ "ix": 3,
+ "ks": {
+ "a": 0,
+ "k": {
+ "i": [
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [4.68, -0.18],
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [0, 0]
+ ],
+ "o": [
+ [0, 0],
+ [0, 0],
+ [-4.861, 0],
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [0, 0]
+ ],
+ "v": [
+ [-16.249, -31.686],
+ [-31.192, -31.686],
+ [-31.192, 34.568],
+ [-45.594, 34.747],
+ [-45.594, -31.686],
+ [-60.537, -31.686],
+ [-60.537, -46.09],
+ [-16.248, -46.09]
+ ],
+ "c": true
+ },
+ "ix": 2
+ },
+ "nm": "Path 3",
+ "mn": "ADBE Vector Shape - Group",
+ "hd": false
+ },
+ {
+ "ind": 3,
+ "ty": "sh",
+ "ix": 4,
+ "ks": {
+ "a": 0,
+ "k": {
+ "i": [
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [0, 0]
+ ],
+ "o": [
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [0, 0]
+ ],
+ "v": [
+ [7.156, -13.323],
+ [26.871, -13.323],
+ [26.871, 1.08],
+ [7.156, 1.08],
+ [7.156, 33.757],
+ [-6.978, 33.757],
+ [-6.978, -46.09],
+ [33.262, -46.09],
+ [33.262, -31.687],
+ [7.156, -31.687]
+ ],
+ "c": true
+ },
+ "ix": 2
+ },
+ "nm": "Path 4",
+ "mn": "ADBE Vector Shape - Group",
+ "hd": false
+ },
+ {
+ "ind": 4,
+ "ty": "sh",
+ "ix": 5,
+ "ks": {
+ "a": 0,
+ "k": {
+ "i": [
+ [0, 0],
+ [-8.012, -0.449],
+ [0, 0],
+ [13.143, 0.271],
+ [0, 0],
+ [0, 0]
+ ],
+ "o": [
+ [8.192, 0.18],
+ [0, 0],
+ [-12.873, -0.811],
+ [0, 0],
+ [0, 0],
+ [0, 0]
+ ],
+ "v": [
+ [56.667, 21.154],
+ [81.152, 22.415],
+ [81.152, 36.638],
+ [42.264, 34.747],
+ [42.264, -46.09],
+ [56.667, -46.09]
+ ],
+ "c": true
+ },
+ "ix": 2
+ },
+ "nm": "Path 5",
+ "mn": "ADBE Vector Shape - Group",
+ "hd": false
+ },
+ {
+ "ind": 5,
+ "ty": "sh",
+ "ix": 6,
+ "ks": {
+ "a": 0,
+ "k": {
+ "i": [
+ [0, 0],
+ [-4.681, -0.539],
+ [0, 0],
+ [0, 0]
+ ],
+ "o": [
+ [4.591, 0.27],
+ [0, 0],
+ [0, 0],
+ [0, 0]
+ ],
+ "v": [
+ [93.304, 37.628],
+ [107.437, 38.708],
+ [107.437, -46.09],
+ [93.304, -46.09]
+ ],
+ "c": true
+ },
+ "ix": 2
+ },
+ "nm": "Path 6",
+ "mn": "ADBE Vector Shape - Group",
+ "hd": false
+ },
+ {
+ "ind": 6,
+ "ty": "sh",
+ "ix": 7,
+ "ks": {
+ "a": 0,
+ "k": {
+ "i": [
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [5.401, 0.9],
+ [0, 0],
+ [0, 0],
+ [5.22, 0.72],
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [0, 0]
+ ],
+ "o": [
+ [0, 0],
+ [0, 0],
+ [-5.403, -0.72],
+ [0, 0],
+ [0, 0],
+ [-5.222, -0.901],
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [0, 0]
+ ],
+ "v": [
+ [170.541, -46.09],
+ [152.267, -2.25],
+ [170.541, 46.09],
+ [154.337, 43.479],
+ [143.985, 16.834],
+ [133.454, 41.319],
+ [117.971, 39.428],
+ [136.515, -2.791],
+ [119.771, -46.09],
+ [135.253, -46.09],
+ [144.705, -21.875],
+ [154.788, -46.09]
+ ],
+ "c": true
+ },
+ "ix": 2
+ },
+ "nm": "Path 7",
+ "mn": "ADBE Vector Shape - Group",
+ "hd": false
+ },
+ {
+ "ty": "fl",
+ "c": {
+ "a": 0,
+ "k": [0.898039215686, 0.035294117647, 0.078431372549, 1],
+ "ix": 4
+ },
+ "o": { "a": 0, "k": 100, "ix": 5 },
+ "r": 1,
+ "bm": 0,
+ "nm": "Fill 1",
+ "mn": "ADBE Vector Graphic - Fill",
+ "hd": false
+ },
+ {
+ "ty": "tr",
+ "p": { "a": 0, "k": [0, 0], "ix": 2 },
+ "a": { "a": 0, "k": [0, 0], "ix": 1 },
+ "s": { "a": 0, "k": [100, 100], "ix": 3 },
+ "r": { "a": 0, "k": 0, "ix": 6 },
+ "o": { "a": 0, "k": 100, "ix": 7 },
+ "sk": { "a": 0, "k": 0, "ix": 4 },
+ "sa": { "a": 0, "k": 0, "ix": 5 },
+ "nm": "Transform"
+ }
+ ],
+ "nm": "Netflix Wordmark",
+ "np": 8,
+ "cix": 2,
+ "bm": 0,
+ "ix": 1,
+ "mn": "ADBE Vector Group",
+ "hd": false
+ }
+ ],
+ "ip": 51,
+ "op": 1948,
+ "st": 0,
+ "bm": 0
+ }
+ ],
+ "markers": []
+}
diff --git a/netflix/src/components/search/Content.tsx b/netflix/src/components/search/Content.tsx
new file mode 100644
index 0000000..a67d03b
--- /dev/null
+++ b/netflix/src/components/search/Content.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import Image from "next/image";
+import * as styles from "@/styles/search/Content.css";
+import playIcon from "/public/svgs/search/play_content.svg";
+
+const IMAGE_BASE_URL = "https://image.tmdb.org/t/p/w500/"; // 기
+
+interface ContentPropsTypes {
+ title: string;
+ poster: string;
+}
+
+export const Content = ({ title, poster }: ContentPropsTypes) => {
+ const imageUrl = `${IMAGE_BASE_URL}${poster}`;
+
+ return (
+
+
+ );
+};
diff --git a/netflix/src/components/search/ContentList.tsx b/netflix/src/components/search/ContentList.tsx
new file mode 100644
index 0000000..9daa039
--- /dev/null
+++ b/netflix/src/components/search/ContentList.tsx
@@ -0,0 +1,51 @@
+"use client";
+import * as styles from "@/styles/search/contentList.css";
+import React, { useCallback, useEffect, useState } from "react";
+import { Content } from "./Content";
+import Link from "next/link";
+import { Movie } from "@/types/movieInterface";
+import { useSearchStore } from "@/utils/search/useStore";
+import { fetchSearch } from "@/api/searchApi";
+
+export const ContentList: React.FC = () => {
+ const { searchText } = useSearchStore();
+ const [movies, setMovies] = useStateTop Searches
+
+ {movies.map((movie) => (
+
+
+
+ );
+};
diff --git a/netflix/src/components/search/SearchBar.tsx b/netflix/src/components/search/SearchBar.tsx
new file mode 100644
index 0000000..51ed1e7
--- /dev/null
+++ b/netflix/src/components/search/SearchBar.tsx
@@ -0,0 +1,42 @@
+"use client";
+import React, { useCallback } from "react";
+import Image from "next/image";
+import * as style from "@/styles/search/searchBar.css";
+import searchIcon from "/public/svgs/search/searchbar.svg";
+import cancelIcon from "/public/svgs/search/cancel_search.svg";
+import { useSearchStore } from "@/utils/search/useStore";
+
+export const SearchBar = () => {
+ const { searchText, setSearch } = useSearchStore();
+
+ const handleSearch = useCallback(
+ (e: React.ChangeEvent
+
+ );
+};
diff --git a/netflix/src/constants/.keep b/netflix/src/constants/.keep
new file mode 100644
index 0000000..bd6c9e9
--- /dev/null
+++ b/netflix/src/constants/.keep
@@ -0,0 +1 @@
+//상수값이 여기 들어가야해!
diff --git a/netflix/src/hooks/.keep b/netflix/src/hooks/.keep
new file mode 100644
index 0000000..fc0e43e
--- /dev/null
+++ b/netflix/src/hooks/.keep
@@ -0,0 +1 @@
+//custom hook!
diff --git a/netflix/src/store/.keep b/netflix/src/store/.keep
new file mode 100644
index 0000000..d48e244
--- /dev/null
+++ b/netflix/src/store/.keep
@@ -0,0 +1 @@
+//전역상태관리!
\ No newline at end of file
diff --git a/netflix/src/styles/Header.css.ts b/netflix/src/styles/Header.css.ts
new file mode 100644
index 0000000..0075005
--- /dev/null
+++ b/netflix/src/styles/Header.css.ts
@@ -0,0 +1,17 @@
+import { style } from '@vanilla-extract/css';
+
+export const header = style({
+ display: 'flex',
+ justifyContent: 'space-around',
+ alignItems: 'center',
+ width: '338px',
+ height: '57px',
+ position: 'fixed',
+ top: '24px',
+ zIndex: 10,
+});
+
+export const headerItem = style({
+ fontSize: '17.2px',
+ color: '#FFFFFF',
+});
diff --git a/netflix/src/styles/MovieList.css.ts b/netflix/src/styles/MovieList.css.ts
new file mode 100644
index 0000000..e5d6b1a
--- /dev/null
+++ b/netflix/src/styles/MovieList.css.ts
@@ -0,0 +1,52 @@
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'center',
+ alignContent: 'flex-start',
+ overflow: "hidden",
+});
+
+export const title = style({
+ display: 'flex',
+ alignItems: 'center',
+ fontSize: '20.92px',
+ fontWeight: '700',
+ color: '#FFFFFF',
+ marginLeft: '16px',
+});
+
+export const contents = style({
+ display: 'flex',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ width: '375px',
+ overflowX: 'scroll',
+ overflowY: 'hidden',
+ whiteSpace: 'nowrap',
+ scrollbarWidth: 'none', // Firefox
+ msOverflowStyle: 'none', // IE 10+
+ '::-webkit-scrollbar': {
+ display: 'none', // Chrome, Safari
+ },
+ marginLeft: '11px',
+});
+
+export const element = style({
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'center',
+ alignItems: 'center',
+ paddingTop: '7px',
+});
+
+export const movieItem = style({
+ marginLeft: '7px',
+});
+
+export const squarePoster = style({
+ width: '103px',
+ height: '161px',
+ borderRadius: '2px',
+});
diff --git a/netflix/src/styles/Navbar.css.ts b/netflix/src/styles/Navbar.css.ts
new file mode 100644
index 0000000..efbf72e
--- /dev/null
+++ b/netflix/src/styles/Navbar.css.ts
@@ -0,0 +1,35 @@
+import { style } from '@vanilla-extract/css';
+
+export const navBar = style({
+ display: 'flex',
+ justifyContent: 'space-around',
+ alignItems: 'center',
+ backgroundColor: '#121212',
+ width: '375px',
+ height: '53px',
+ position: 'fixed',
+ bottom: 0,
+ zIndex: 10,
+});
+
+export const navItem = style({
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ fontSize: '8.2px',
+ color: '#8C8787',
+ textDecoration: 'none',
+});
+
+export const activeNavItem = style({
+ color: '#FFFFFF',
+});
+
+export const icon = style({
+ width: 24,
+ height: 24,
+});
+
+export const activeIcon = style({
+ filter: 'brightness(0) invert(1)',
+});
diff --git a/netflix/src/styles/PlayBar.css.ts b/netflix/src/styles/PlayBar.css.ts
new file mode 100644
index 0000000..c924311
--- /dev/null
+++ b/netflix/src/styles/PlayBar.css.ts
@@ -0,0 +1,46 @@
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+ display: 'flex',
+ justifyContent: 'center',
+ alignContent: 'center',
+});
+
+export const contents = style({
+ display: 'flex',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ width: '259px',
+});
+
+export const element = style({
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'center',
+ alignItems: 'center',
+ paddingTop: '7px',
+});
+
+export const button = style({
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ borderRadius: '5.63px',
+ border: 'none',
+ width: '110.62px',
+ height: '45px',
+ fontSize: '20.46px',
+ fontWeight: '600',
+ backgroundColor: '#C4C4C4',
+ gap: '10px',
+});
+
+export const text = style({
+ display: 'flex',
+ alignItems: 'center',
+ fontSize: '13.64px',
+ fontWeight: '400',
+ height: '14px',
+ color: '#FFFFFF',
+ marginTop: '5px',
+});
diff --git a/netflix/src/styles/Preview.css.ts b/netflix/src/styles/Preview.css.ts
new file mode 100644
index 0000000..f2ff425
--- /dev/null
+++ b/netflix/src/styles/Preview.css.ts
@@ -0,0 +1,51 @@
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'center',
+ alignContent: 'flex-start',
+});
+
+export const title = style({
+ display: 'flex',
+ alignItems: 'center',
+ fontSize: '26.75px',
+ fontWeight: '700',
+ color: '#FFFFFF',
+ marginLeft: '16px',
+});
+
+export const contents = style({
+ display: 'flex',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ width: '375px',
+ overflowX: 'scroll',
+ overflowY: 'hidden',
+ whiteSpace: 'nowrap',
+ scrollbarWidth: 'none', // Firefox
+ msOverflowStyle: 'none', // IE 10+
+ '::-webkit-scrollbar': {
+ display: 'none', // Chrome, Safari
+ },
+ marginLeft: '11px',
+});
+
+export const element = style({
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'center',
+ alignItems: 'center',
+ paddingTop: '7px',
+});
+
+export const tvItem = style({
+ marginLeft: '7px',
+});
+
+export const roundPoster = style({
+ width: '102px',
+ height: '102px',
+ borderRadius: '50%',
+});
\ No newline at end of file
diff --git a/netflix/src/styles/TopTen.css.ts b/netflix/src/styles/TopTen.css.ts
new file mode 100644
index 0000000..1126f71
--- /dev/null
+++ b/netflix/src/styles/TopTen.css.ts
@@ -0,0 +1,27 @@
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+ display: 'flex',
+ flexDirection: 'column',
+ height: '435px',
+});
+
+export const poster = style({
+ height: '415px',
+});
+
+export const topTenContainer = style({
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ height: '20px',
+});
+
+export const text = style({
+ display: 'flex',
+ alignItems: 'center',
+ fontSize: '13.72px',
+ fontWeight: '700',
+ color: '#FFFFFF',
+ marginLeft: '5px',
+});
diff --git a/netflix/src/styles/detail/playButton.css.ts b/netflix/src/styles/detail/playButton.css.ts
new file mode 100644
index 0000000..b791602
--- /dev/null
+++ b/netflix/src/styles/detail/playButton.css.ts
@@ -0,0 +1,15 @@
+import { style } from "@vanilla-extract/css";
+
+export const container = style({
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+
+ width: "303px",
+ height: " 45px",
+ borderRadius: "6px",
+
+ backgroundColor: "#C4C4C4",
+
+ marginTop: "13px",
+});
diff --git a/netflix/src/styles/detail/text.css.ts b/netflix/src/styles/detail/text.css.ts
new file mode 100644
index 0000000..4414282
--- /dev/null
+++ b/netflix/src/styles/detail/text.css.ts
@@ -0,0 +1,16 @@
+import { style } from "@vanilla-extract/css";
+
+export const title = style({
+ color: "#FFFFFF",
+ fontWeight: 700,
+ fontSize: "26.75px",
+});
+
+export const summary = style({
+ color: "#FFFFFF",
+ fontWeight: 400,
+ fontSize: "11.14px",
+
+ width: "311px",
+ height: "43px",
+});
diff --git a/netflix/src/styles/globalTheme.css.ts b/netflix/src/styles/globalTheme.css.ts
new file mode 100644
index 0000000..d8c9c0d
--- /dev/null
+++ b/netflix/src/styles/globalTheme.css.ts
@@ -0,0 +1,55 @@
+import { createGlobalTheme, globalFontFace, style } from "@vanilla-extract/css";
+
+const sfDisplay = "sfDisplay";
+
+globalFontFace(sfDisplay, [
+ {
+ src: "url(/fonts/SF_Display_Medium.OTF)",
+ fontWeight: "500",
+ },
+ {
+ src: "url(/fonts/SF_Display_Bold.OTF)",
+ fontWeight: "700",
+ },
+ {
+ src: "url(/fonts/SF_Display_Regular.OTF)",
+ fontWeight: "400",
+ },
+]);
+
+export const global = createGlobalTheme(":root", {
+ font: {
+ body: "SF_Display",
+ menu: "sfDisplay",
+ },
+});
+
+export const root = style({
+ display: "flex",
+ justifyContent: "center",
+ alignItems: "center",
+ width: "100%",
+});
+
+export const page = style({
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'flex-start',
+ alignItems: 'center',
+ minHeight: '100vh',
+ width: '375px',
+ backgroundColor: '#000000',
+ overflowY: 'scroll',
+ scrollbarWidth: 'none', // Firefox
+ msOverflowStyle: 'none', // IE 10+
+ '::-webkit-scrollbar': {
+ display: 'none', // Chrome, Safari
+ },
+});
+
+export const wrapper = style({
+ display: 'flex',
+ flexDirection: 'column',
+ width: '100%',
+});
+
diff --git a/netflix/src/styles/reset.css b/netflix/src/styles/reset.css
new file mode 100644
index 0000000..e5f3d59
--- /dev/null
+++ b/netflix/src/styles/reset.css
@@ -0,0 +1,133 @@
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+ display: block;
+}
+body {
+ line-height: 1;
+}
+ol,
+ul {
+ list-style: none;
+}
+blockquote,
+q {
+ quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+ content: "";
+ content: none;
+}
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+body,
+html {
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ flex-direction: column;
+}
diff --git a/netflix/src/styles/search/Content.css.ts b/netflix/src/styles/search/Content.css.ts
new file mode 100644
index 0000000..b9903d9
--- /dev/null
+++ b/netflix/src/styles/search/Content.css.ts
@@ -0,0 +1,25 @@
+import { style } from "@vanilla-extract/css";
+
+export const container = style({
+ display: "flex",
+ alignItems: "center",
+ width: "400px",
+ gap: "7px",
+ backgroundColor: "#424242",
+
+ color: "white",
+ fontWeight: "400",
+ fontSize: "14,72px",
+ lineHeight: "30px",
+});
+
+export const textplaycontainer = style({
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "space-between",
+
+ width: "210px",
+ height: "30px",
+
+ fontWeight: 400,
+});
diff --git a/netflix/src/styles/search/contentList.css.ts b/netflix/src/styles/search/contentList.css.ts
new file mode 100644
index 0000000..f53f34b
--- /dev/null
+++ b/netflix/src/styles/search/contentList.css.ts
@@ -0,0 +1,18 @@
+import { style } from "@vanilla-extract/css";
+
+export const topSearches = style({
+ color: "white",
+
+ fontWeight: 700,
+ fontSize: "26.75px",
+
+ width: "100%",
+
+ margin: "21px 0 21px 10px",
+});
+
+export const container = style({
+ display: "flex",
+ flexDirection: "column",
+ gap: "3px",
+});
diff --git a/netflix/src/styles/search/searchBar.css.ts b/netflix/src/styles/search/searchBar.css.ts
new file mode 100644
index 0000000..a39b1b5
--- /dev/null
+++ b/netflix/src/styles/search/searchBar.css.ts
@@ -0,0 +1,28 @@
+import { style } from "@vanilla-extract/css";
+
+export const container = style({
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ backgroundColor: "#424242",
+
+ marginTop: "44px",
+ gap: "6px",
+ width: "100%",
+ height: "52px",
+});
+
+export const icon = style({
+ display: "flex",
+ width: "20px",
+ height: "20px",
+});
+
+export const searchInput = style({
+ display: "flex",
+ width: "270px",
+ height: "31px",
+ border: "none",
+ backgroundColor: "transparent",
+ color: "#C4C4C4",
+});
diff --git a/netflix/src/types/movieInterface.ts b/netflix/src/types/movieInterface.ts
new file mode 100644
index 0000000..c3fe8dd
--- /dev/null
+++ b/netflix/src/types/movieInterface.ts
@@ -0,0 +1,6 @@
+export interface Movie {
+ id?: number;
+ title: string;
+ poster_path: string;
+ overview?: string;
+}
diff --git a/netflix/src/utils/search/useStore.ts b/netflix/src/utils/search/useStore.ts
new file mode 100644
index 0000000..5a15035
--- /dev/null
+++ b/netflix/src/utils/search/useStore.ts
@@ -0,0 +1,11 @@
+import { create } from "zustand";
+
+interface SearchStoreState {
+ searchText: string;
+ setSearch: (text: string) => void;
+}
+
+export const useSearchStore = create