├── next-shit
├── src
│ ├── app
│ │ ├── page.module.css
│ │ ├── favicon.ico
│ │ ├── movie
│ │ │ ├── [id]
│ │ │ │ └── page.js
│ │ │ └── page.jsx
│ │ ├── page.js
│ │ ├── about
│ │ │ └── page.js
│ │ ├── loading.js
│ │ ├── components
│ │ │ ├── Header.js
│ │ │ ├── Img.js
│ │ │ ├── MovieCard.js
│ │ │ ├── GojoData.jsx
│ │ │ ├── ContactCard.js
│ │ │ ├── Herosection.js
│ │ │ ├── Nav.js
│ │ │ ├── GojoForm.js
│ │ │ ├── ContactForm.js
│ │ │ └── Footer.js
│ │ ├── layout.js
│ │ ├── api
│ │ │ ├── upload
│ │ │ │ └── route.js
│ │ │ └── gojo
│ │ │ │ └── route.js
│ │ ├── gojo
│ │ │ └── page.js
│ │ ├── contact
│ │ │ ├── page.js
│ │ │ └── contact.module.css
│ │ ├── globals.css
│ │ └── styles
│ │ │ ├── common.module.css
│ │ │ ├── herosection.module.css
│ │ │ ├── navbar.module.css
│ │ │ └── footer.module.css
│ ├── models
│ │ └── Gojo.js
│ └── lib
│ │ └── dbCON.js
├── public
│ ├── logo.png
│ ├── vercel.svg
│ ├── next.svg
│ ├── about1.svg
│ ├── home.svg
│ └── about.svg
├── jsconfig.json
├── next.config.mjs
├── .eslintrc.json
├── .gitignore
├── package.json
└── README.md
├── README.md
└── .gitattributes
/next-shit/src/app/page.module.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # next-web
2 | my shit
3 |
--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 |
--------------------------------------------------------------------------------
/next-shit/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Nitish-kumar14/next-web/HEAD/next-shit/public/logo.png
--------------------------------------------------------------------------------
/next-shit/src/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Nitish-kumar14/next-web/HEAD/next-shit/src/app/favicon.ico
--------------------------------------------------------------------------------
/next-shit/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "paths": {
4 | "@/*": ["./src/*"]
5 | }
6 | }
7 | }
--------------------------------------------------------------------------------
/next-shit/next.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {};
3 |
4 | export default nextConfig;
5 |
--------------------------------------------------------------------------------
/next-shit/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "next/core-web-vitals",
3 | "rules": {
4 | "react/no-unescaped-entities": 1
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/next-shit/src/app/movie/[id]/page.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const page = () => {
4 | return (
5 |
6 | hii
7 |
8 | )
9 | }
10 |
11 | export default page
12 |
--------------------------------------------------------------------------------
/next-shit/src/app/page.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Herosection from './components/Herosection'
3 |
4 | const page = () => {
5 | return (
6 |
7 |
9 | )
10 | }
11 |
12 | export default page
13 |
--------------------------------------------------------------------------------
/next-shit/src/app/about/page.js:
--------------------------------------------------------------------------------
1 |
2 | import Herosection from "@/app/components/Herosection";
3 |
4 | const About = async () => {
5 | await new Promise((resolve) => setTimeout(resolve, 3000));
6 | return (
7 |
9 |
10 |
12 |
13 |
14 |
15 |
17 | );
18 | };
19 |
20 | export default Header;
--------------------------------------------------------------------------------
/next-shit/src/app/layout.js:
--------------------------------------------------------------------------------
1 | import { Inter } from "next/font/google";
2 | import "./globals.css";
3 | import Header from "./components/Header";
4 | import Footer from "./components/Footer";
5 |
6 | const inter = Inter({ subsets: ["latin"] });
7 |
8 | export const metadata = {
9 | title: "Create Next App",
10 | description: "Generated by create next app",
11 | };
12 |
13 | export default function RootLayout({ children }) {
14 | return (
15 |
16 |
17 |
18 | {children}
19 |
20 |
21 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/next-shit/src/app/api/upload/route.js:
--------------------------------------------------------------------------------
1 | import {writeFile} from "fs/promises"
2 | import { NextResponse } from "next/server";
3 |
4 |
5 | export async function POST(req) {
6 | const data = await req.formData();
7 | const file = data.get("file");
8 | if (!file) {
9 | return NextResponse.json({"message": "Invalid file" , success: false})
10 | }
11 | const byteData = await file.arrayBuffer();
12 | const buffer = Buffer.from(byteData);
13 | const path = `./public/uploads/${file.name}`
14 | await writeFile(path, buffer);
15 | return NextResponse.json({"message": "File uploaded successfully", success: true})
16 | }
--------------------------------------------------------------------------------
/next-shit/src/app/components/Img.js:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import { useState } from "react"
4 |
5 | import React from 'react'
6 |
7 | const Img = () => {
8 | const [file,setFile] = useState()
9 | const onSubmit = async (e) => {
10 | e.preventDefault()
11 | console.log(file)
12 | const data = new FormData();
13 | data.set('file', file)
14 | const result = await fetch("api/upload", {
15 | method:"POST",
16 | body:data
17 | })
18 | console.log(result)
19 | }
20 | return (
21 | <>
22 |
26 |
27 | )
28 | }
29 |
30 | export default Img
31 |
--------------------------------------------------------------------------------
/next-shit/src/app/gojo/page.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import GojoForm from '../components/GojoForm'
3 | import GojoList from '../components/GojoData'
4 | import Img from '../components/Img'
5 |
6 | const page = () => {
7 | return (
8 | <>
9 |
10 |
11 |
Add to data on databas
12 | Data show
14 |
17 |
19 |
this is the img upload without external package
20 |
21 |
14 | {backgroundImage && (
15 |
16 |
23 | )}
24 |
25 |
{title || 'No Title'}
26 |
{synopsis || 'No Synopsis'}
27 |
28 | {id && (
29 |
30 | Read More
31 |
32 | )}
33 |
34 |
Loading...
;
32 | if (error) return Error: {error}
;
33 |
34 | return (
35 |
36 |
Gojo Data
37 |
38 | {data.map((item, index) => (
39 | {JSON.stringify(item)}
40 | ))}
41 |
42 |
10 |
Contact Us
11 |
14 | We'd love to hear from you
15 |
16 |
18 |
19 |
20 |
24 |
25 |
26 | );
27 | };
28 |
29 | export default Contact;
--------------------------------------------------------------------------------
/next-shit/public/next.svg:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 |
Email
11 |
Monday to Friday Expected
12 |
response time: 72 hours
13 |
Send Email
->
14 |
15 |
16 |
17 |
18 |
Live Chat
19 |
Weekdays: 9 AM — 6 PM ET
20 |
Weekends: 9 AM — 5 PM ET
21 |
Chat Now
->
22 |
23 |
24 |
25 |
Community Forum
26 |
Monday to Friday Expected
27 |
response time: 72 hours
28 |
Ask The Community
->
29 |
30 |
31 |
32 |
33 |
11 |
12 |
13 |
14 |
{title}
15 |
From award-winning dramas to blockbuster action movies, we've got you covered. Browse
16 | our
17 | selection of the latest and greatest movies, and find your new favorite today.
18 |
19 |
20 |
21 | Explore Movies
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
40 | );
41 | };
42 |
43 | export default Herosection;
--------------------------------------------------------------------------------
/next-shit/src/app/globals.css:
--------------------------------------------------------------------------------
1 | /* Box sizing rules */
2 | *,
3 | *::before,
4 | *::after {
5 | box-sizing: border-box;
6 | }
7 |
8 | html {
9 | font-size: 62.5%;
10 | overflow-x: hidden;
11 | }
12 |
13 | /* Remove default margin and padding */
14 | html,
15 | body,
16 | h1,
17 | h2,
18 | h3,
19 | h4,
20 | h5,
21 | h6,
22 | p,
23 | ul,
24 | ol,
25 | li,
26 | blockquote {
27 | margin: 0;
28 | padding: 0;
29 | }
30 |
31 |
32 | /* Add border box to images */
33 | img {
34 | border: 0;
35 | }
36 |
37 | /*styling the text */
38 |
39 | h1 {
40 | font-size: 5.8rem;
41 | color: #161617;
42 | font-weight: 900;
43 | }
44 |
45 | h2{
46 | font-size: 3.2rem;
47 | margin-bottom: 2rem;
48 | }
49 |
50 | p, a, li {
51 | font-size: 1.6rem;
52 | /*line-height: 1.5;*/
53 | margin: 2rem 0 4rem 0;
54 | font-weight: 300;
55 | letter-spacing: .05rem;
56 | line-height: 1.65;
57 | }
58 |
59 | /* Remove anchor text decoration */
60 | a {
61 | text-decoration: none;
62 | line-height: 0;
63 | }
64 |
65 |
66 | /* Remove list styles */
67 | ul,
68 | ol, li {
69 | list-style: none;
70 | margin: 0;
71 | }
72 |
73 |
74 | /*common styling across all the pages*/
75 |
76 |
77 | /* CSS */
78 | button {
79 | background-color: #161617;
80 | border-radius: 2.4rem;
81 | border-style: none;
82 | box-sizing: border-box;
83 | color: #FFFFFF;
84 | cursor: pointer;
85 | flex-shrink: 0;
86 | font-size: 1.6rem;
87 | font-weight: 400;
88 | height: 4rem;
89 | padding: .3rem 1.2rem;
90 | text-align: center;
91 | text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
92 | transition: all .5s;
93 | user-select: none;
94 | -webkit-user-select: none;
95 | touch-action: manipulation;
96 | /*letter-spacing: -0.1rem;*/
97 | }
98 |
99 | button:hover {
100 | background-color: #fff;
101 | border: .1rem solid #161617;
102 | color: #161617;
103 | transition-duration: .1s;
104 | }
105 |
106 | @media (min-width: 768px) {
107 | button {
108 | padding: 0 2.6rem;
109 | }
110 | }
111 |
112 |
--------------------------------------------------------------------------------
/next-shit/src/app/movie/page.jsx:
--------------------------------------------------------------------------------
1 | // import Link from 'next/link';
2 | // import React from 'react'
3 | // import MovieCard from '../components/MovieCard';
4 | // import styels from "@/app/styles/common.module.css"
5 |
6 | // const page = async () => {
7 |
8 | // const url = process.env.RAPID_KEY;
9 |
10 | // const options = {
11 | // method: 'GET',
12 | // headers: {
13 | // 'x-rapidapi-key': '97547bdfdcmshdf8da4caf6b8cc8p18bcb4jsn68ec3ad30cb6',
14 | // 'x-rapidapi-host': 'netflix54.p.rapidapi.com'
15 | // }
16 | // };
17 |
18 | // const res = await fetch(url, options);
19 | // const data = await res.json();
20 | // const main_data = data.titles;
21 | // console.log(data);
22 | // return (
23 | // <>
24 | //
25 | //
26 | //
Series & Movie
27 | // {
28 | // main_data.map((curElem) => {
29 | // return
34 | //
35 | // )
36 | // }
37 |
38 | // export default page
39 |
40 | import Link from 'next/link';
41 | import React from 'react';
42 | import MovieCard from '../components/MovieCard';
43 | import styles from "@/app/styles/common.module.css";
44 |
45 | const MoviePage = async () => {
46 | const url = process.env.RAPID_KEY;
47 |
48 | const options = {
49 | method: 'GET',
50 | headers: {
51 | 'x-rapidapi-key': '97547bdfdcmshdf8da4caf6b8cc8p18bcb4jsn68ec3ad30cb6',
52 | 'x-rapidapi-host': 'netflix54.p.rapidapi.com'
53 | }
54 | };
55 |
56 | let main_data = [];
57 |
58 | try {
59 | const res = await fetch(url, options);
60 | const data = await res.json();
61 | main_data = data.titles || [2];
62 | } catch (error) {
63 | console.error('Error fetching data:', error);
64 | }
65 | console.log(main_data);
66 | return (
67 | <>
68 |
69 |
70 |
Series & Movie
71 | {
72 | main_data.length > 0 ? (
73 | main_data.map((curElem) => {
74 | return
75 | })
76 | )
77 | : (
78 |
No data available
79 | )
80 | }
81 |
83 |
84 | );
85 | };
86 |
87 | export default MoviePage;
88 |
--------------------------------------------------------------------------------
/next-shit/src/app/contact/contact.module.css:
--------------------------------------------------------------------------------
1 | .section{
2 | /*background-color: red;*/
3 | }
4 |
5 | .container{
6 | padding: 0 6rem;
7 | margin: 0 auto;
8 | text-align: center;
9 | }
10 |
11 | .container h1{
12 | margin-top: 3.2rem;
13 | font-size: 4.2rem;
14 | }
15 |
16 | .grid{
17 | display: grid;
18 | grid-template-columns: repeat(3, 1fr);
19 | gap: 5rem;
20 | margin: 6rem auto;
21 | }
22 |
23 | .grid_card{
24 | padding: 2rem 4rem;
25 | text-align: center;
26 | box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
27 | background-color: #fff;
28 | }
29 |
30 | .grid_card span {
31 | display: inline-block;
32 | transition: transform 200ms;
33 | }
34 |
35 | .grid_card h2{
36 | font-size: 1.8rem;
37 | margin-bottom: 1rem;
38 | }
39 |
40 | .grid_card p{
41 | margin: 0;
42 | }
43 |
44 | .grid_card p:last-child{
45 | margin-bottom: 3.2rem;
46 | }
47 |
48 | .grid_card .last_para{
49 | margin-bottom: 3.2rem;
50 | }
51 |
52 | .grid_card i{
53 | font-size: 4.2rem;
54 | color: #e50914;
55 | }
56 |
57 |
58 | /*for the main contact two section*/
59 |
60 | .contact_section{
61 | margin: 6rem auto;
62 | display: flex;
63 | flex-direction: column;
64 | justify-content: center;
65 | align-items: center;
66 |
67 | }
68 |
69 |
70 | .contact_section span{
71 | color: #e50914;
72 | }
73 |
74 | .contact_form{
75 | max-width: 48rem;
76 | min-width: 32rem;
77 | padding: 3.2rem;
78 | box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
79 | text-align: left;
80 | }
81 |
82 | .input_field{
83 | margin-bottom: 2rem;
84 | }
85 |
86 | .label{
87 | font-size: 1.5rem;
88 | display: block;
89 | text-transform: capitalize;
90 | }
91 |
92 | .contact_form input, .contact_form textarea{
93 | display: block;
94 | border: none;
95 | width: 100%;
96 | margin-top: .5rem;
97 | padding: .8rem 1rem;
98 | border-radius: .3rem;
99 | box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
100 | }
101 |
102 |
103 | .success_msg{
104 | color: #a8e48a;
105 | }
106 |
107 | .error_msg{
108 | color: red;
109 | }
110 |
111 |
112 | .mapping{
113 | width: 100%;
114 | }
115 |
116 | @media screen and (max-width: 999px) {
117 | .grid{
118 | display: grid;
119 | grid-template-columns: 1fr 1fr;
120 | gap: 5rem;
121 | margin: 6rem auto;
122 | }
123 |
124 | }
125 |
126 |
127 |
128 | @media screen and (max-width: 780px) {
129 | .grid{
130 | display: grid;
131 | grid-template-columns: 1fr;
132 | gap: 5rem;
133 | margin: 6rem auto;
134 | }
135 |
136 | }
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
--------------------------------------------------------------------------------
/next-shit/src/app/components/Nav.js:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import styles from "@/app/styles/navbar.module.css"
4 | import {CgCloseR, CgMenu} from "react-icons/cg";
5 | import Link from "next/link";
6 | import {useState} from "react";
7 |
8 | const Nav = () => {
9 | const [openMenu, setOpenMenu] = useState(false);
10 | console.log("value " + openMenu)
11 | return (
12 | <>
13 |
14 |
15 |
16 |
17 |
21 |
22 |
26 |
27 |
31 |
32 |
36 |
37 |
41 |
42 |
43 | {/* //nav icon */}
44 |
45 | setOpenMenu(true)}
49 | />
50 | setOpenMenu(false)}
54 | />
55 |
56 |
58 |
59 |
60 |
61 | );
62 | };
63 |
64 | export default Nav;
--------------------------------------------------------------------------------
/next-shit/src/app/components/GojoForm.js:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useState } from "react";
4 | import styles from "@/app/contact/contact.module.css"
5 |
6 | const GojoForm = () => {
7 | const [formData, setFormData] = useState({
8 | username: "",
9 | rank: "",
10 | id: "",
11 | father: "",
12 | post: "",
13 | });
14 |
15 | const handleChange = (e) => {
16 | setFormData({
17 | ...formData,
18 | [e.target.name]: e.target.value
19 | });
20 | };
21 |
22 | const handleSubmit = async (e) => {
23 | e.preventDefault();
24 | try {
25 | const response = await fetch("/api/gojo", {
26 | method: "POST",
27 | headers: {
28 | "Content-Type": "application/json"
29 | },
30 | body: JSON.stringify(formData)
31 | });
32 |
33 | if (response.ok) {
34 | alert("Data added successfully!");
35 | setFormData({ username: "", rank: "", id: "", father: "", post: "" });
36 | } else {
37 | const errorData = await response.json();
38 | alert(`Error: ${errorData.error}`);
39 | }
40 | } catch (error) {
41 | console.error("Error submitting form:", error);
42 | alert("Error submitting form");
43 | }
44 | };
45 |
46 | return (
47 |
101 | );
102 | };
103 |
104 | export default GojoForm;
105 |
106 |
--------------------------------------------------------------------------------
/next-shit/src/app/styles/common.module.css:
--------------------------------------------------------------------------------
1 |
2 | .section{
3 | width: 100%;
4 | background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
5 | }
6 |
7 | .movieSection{
8 | background-color: #fff!important;
9 | }
10 |
11 | .container{
12 | max-width: 140rem;
13 | margin:0 auto;
14 | padding: 6rem 3rem;
15 | }
16 |
17 | .grid_two_section{
18 | width: 100%;
19 | display: grid;
20 | grid-template-columns: repeat(2, 1fr);
21 | height: 60rem;
22 | }
23 |
24 | .movieSection h1{
25 | text-align: center;
26 | margin-bottom: 3.2rem;
27 | }
28 |
29 | .movie_title {
30 | margin: 3.2rem 0 3.2rem 0;
31 | }
32 |
33 | .movie_title span{
34 | color: #e50914;
35 | text-transform: capitalize;
36 | }
37 |
38 | .card_section{
39 | width: 100%;
40 | display: flex;
41 | gap: 4.8rem;
42 | justify-content: space-between;
43 | align-items: center;
44 | /*background-color: #90caf9;*/
45 | flex-wrap: wrap;
46 | }
47 |
48 | .card{
49 | max-width: 26rem;
50 | box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
51 | border-radius: .8rem;
52 | background-color: #fff;
53 | }
54 |
55 | .card_image img{
56 | max-width: 100%;
57 | height: auto;
58 | border-top-right-radius: .8rem;
59 | border-top-left-radius: .8rem;
60 | }
61 |
62 | .card_data{
63 | padding: 1.2rem;
64 | }
65 |
66 | .card_data h2{
67 | font-size: 2rem;
68 | }
69 |
70 | .card_data p{
71 | margin: 1rem 0 2.4rem 0;
72 | line-height: 1.6;
73 | }
74 |
75 |
76 | /*not found page styling */
77 | .error_page{
78 | width: 100%;
79 | height: 60vh;
80 | display: flex;
81 | justify-content: center;
82 | align-items: center;
83 | }
84 |
85 | .error_page h2{
86 | font-size: 4.8rem;
87 | }
88 |
89 |
90 | /*loading page style */
91 |
92 | .loading_section{
93 | width: 100%;
94 | height: 80vh;
95 | display: grid;
96 | place-items: center;
97 | }
98 |
99 | .loading {
100 | display: inline-block;
101 | position: relative;
102 | width: 80px;
103 | height: 80px;
104 | }
105 |
106 | .loading:after {
107 | content: " ";
108 | display: block;
109 | border-radius: 50%;
110 | width: 0;
111 | height: 0;
112 | margin: 8px;
113 | box-sizing: border-box;
114 | border: 32px solid #e50914;
115 | border-color: #e50914 transparent #e50914 transparent;
116 | animation: loading 1.2s infinite;
117 | }
118 | @keyframes loading {
119 | 0% {
120 | transform: rotate(0);
121 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
122 | }
123 | 50% {
124 | transform: rotate(900deg);
125 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
126 | }
127 | 100% {
128 | transform: rotate(1800deg);
129 | }
130 | }
131 |
132 |
133 |
134 | @media screen and (max-width:768px) {
135 | .grid_two_section{
136 | grid-template-columns: 1fr;
137 | }
138 |
139 | .card_section{
140 | justify-content: center;
141 | }
142 |
143 | }
--------------------------------------------------------------------------------
/next-shit/src/app/styles/herosection.module.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;600;700&family=Lexend+Deca:wght@100;200;300;400;500;600;700&family=Montserrat:wght@400;700&family=Poppins:wght@300;400;600&display=swap');
2 |
3 | .main_section{
4 | position: relative;
5 | background: linear-gradient(-45deg, #a8e48a, #1eb6d9, #f2d3f7);
6 | background-size: 400% 400%;
7 | /*animation: gradient-bg 20s ease infinite;*/
8 | }
9 |
10 | /*@keyframes gradient-bg {*/
11 | /* 0% {*/
12 | /* background-position: 0% 50%;*/
13 | /* }*/
14 | /* 50% {*/
15 | /* background-position: 100% 50%;*/
16 | /* }*/
17 | /* 100% {*/
18 | /* background-position: 0% 50%;*/
19 | /* }*/
20 | /*}*/
21 |
22 | .hero_content{
23 | display: flex;
24 | flex-direction: column;
25 | justify-content: center;
26 | align-items: flex-start;
27 | }
28 |
29 | .hero_content h1{
30 | text-transform:uppercase;
31 | font-size: 4.8rem;
32 | color: #000;
33 | }
34 |
35 | .hero_content p{
36 | margin: 2rem 0 4rem 0;
37 | font-weight: 300;
38 | letter-spacing: .05rem;
39 | line-height: 1.65;
40 | /*font-family: 'Mulish', sans-serif;*/
41 | }
42 |
43 | .hero_image{
44 | display: flex;
45 | justify-content: flex-end;
46 | align-items: center;
47 | }
48 |
49 | .hero_image img{
50 | max-width: 100%;
51 | height: auto;
52 | }
53 |
54 | /*waves effect */
55 | .custom-shape-divider-bottom-1681647578 {
56 | position: absolute;
57 | bottom: 0;
58 | left: 0;
59 | width: 100%;
60 | overflow: hidden;
61 | line-height: 0;
62 | }
63 |
64 | .custom-shape-divider-bottom-1681647578 svg {
65 | position: relative;
66 | display: block;
67 | width: calc(100% + 1.3px);
68 | height: 150px;
69 | }
70 |
71 | .custom-shape-divider-bottom-1681647578 .shape-fill {
72 | fill: #FFFFFF;
73 | }
74 |
75 |
76 | @media screen and (max-width:768px) {
77 |
78 | .hero_content{
79 | order: 1;
80 | }
81 |
82 |
83 | .hero_image{
84 | justify-content: center;
85 | order: 0;
86 | }
87 |
88 | .hero_image img{
89 | width: 40%;
90 | }
91 |
92 |
93 | /*!*waves effect *!*/
94 | /*.custom-shape-divider-bottom-1681647578 {*/
95 | /* display: none;*/
96 | /*}*/
97 |
98 |
99 | }
100 |
101 |
102 |
103 | .lds_hourglass,
104 | .lds_hourglass:after {
105 | box-sizing: border-box;
106 | }
107 | .lds_hourglass {
108 | display: inline-block;
109 | position: relative;
110 | width: 80px;
111 | height: 80px;
112 | }
113 | .lds_hourglass:after {
114 | content: " ";
115 | display: block;
116 | border-radius: 50%;
117 | width: 0;
118 | height: 0;
119 | margin: 8px;
120 | box-sizing: border-box;
121 | border: 32px solid currentColor;
122 | border-color: currentColor transparent currentColor transparent;
123 | animation: lds-hourglass 1.2s infinite;
124 | }
125 | @keyframes lds-hourglass {
126 | 0% {
127 | transform: rotate(0);
128 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
129 | }
130 | 50% {
131 | transform: rotate(900deg);
132 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
133 | }
134 | 100% {
135 | transform: rotate(1800deg);
136 | }
137 | }
138 |
139 |
--------------------------------------------------------------------------------
/next-shit/src/app/components/ContactForm.js:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import styles from "@/app/contact/contact.module.css"
4 | import emailjs from '@emailjs/browser';
5 | import React, { useRef } from 'react';
6 |
7 |
8 | const ContactForm = () => {
9 |
10 | const form = useRef();
11 |
12 | const sendEmail = (e) => {
13 | e.preventDefault();
14 |
15 | emailjs
16 | .sendForm('service_r3zl2rw', 'template_m6b1idh', form.current, {
17 | publicKey: '5neJEJiCAY_jzJjLM',
18 | })
19 | .then(
20 | () => {
21 | console.log('SUCCESS!');
22 | },
23 | (error) => {
24 | console.log('FAILED...', error.text);
25 | },
26 | );
27 | };
28 |
29 |
30 |
31 |
32 | return (
33 |
95 | );
96 | };
97 |
98 | export default ContactForm;
--------------------------------------------------------------------------------
/next-shit/src/app/styles/navbar.module.css:
--------------------------------------------------------------------------------
1 | .main_header{
2 | padding: 0 9rem;
3 | height: 10rem;
4 | display: flex;
5 | justify-content: space-between;
6 | align-items: center;
7 | border: none;
8 | outline: none;
9 | /*background-color: yellow;*/
10 | /*background: linear-gradient(-45deg, #a8e48a, #1eb6d9, #f2d3f7);*/
11 | background-size: 400% 400%;
12 | box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
13 | }
14 |
15 |
16 | .navbar_brand {
17 | text-align: left;
18 | }
19 |
20 | .navbarList {
21 | display: flex;
22 | justify-content: space-around;
23 | align-items: center;
24 | gap: 3.2rem;
25 | }
26 |
27 | .navbarItem {
28 | height: 100%;
29 | display: grid;
30 | place-items: center;
31 | }
32 |
33 | .navbarList a {
34 | font-weight: bold;
35 | font-size: 1.8rem;
36 | color: #161617;
37 | padding: 1.3rem 1rem;
38 | margin: 0;
39 | position: relative;
40 | overflow: hidden;
41 | }
42 |
43 | /*.navbarList .navbarItem a:hover {*/
44 | /* color: #e50914;*/
45 | /*}*/
46 |
47 | .navbarItem a:before {
48 | content: "";
49 | position: absolute;
50 | top: 50%;
51 | transform: translateY(-50%);
52 | width: 100%;
53 | height: .5rem;
54 | background-color: #e50914;
55 | left: -100%;
56 | }
57 |
58 | .navbarItem a:hover:before {
59 | animation: coolNavLine .4s linear forwards;
60 | }
61 |
62 | @keyframes coolNavLine {
63 | 0% {
64 | left: -100%;
65 | height: .5rem;
66 | }
67 | 50% {
68 | left: 0;
69 | height: .5rem;
70 | }
71 | 100% {
72 | left: 0;
73 | height: 100%;
74 | z-index: -1;
75 | }
76 | }
77 |
78 | .navbarList .navbarItem a:hover{
79 | color: #fff;
80 | }
81 |
82 |
83 | .mobile-navbar-btn {
84 | display: none;
85 | }
86 |
87 | .mobile-nav-icon {
88 | cursor: pointer;
89 | }
90 |
91 | .mobile-navbar-btn .close-outline {
92 | display: none;
93 | }
94 |
95 | .mobile-navbar-btn[name="close-outline"] {
96 | display: none;
97 | }
98 |
99 |
100 | @media screen and (max-width: 999px) {
101 |
102 | .main_header {
103 | padding: 0 5rem;
104 | }
105 |
106 | .mobile-navbar-btn {
107 | display: inline-block;
108 | z-index: 999;
109 | /*border: .1rem solid #161617;*/
110 | }
111 |
112 | .mobile-nav-icon {
113 | font-size: 4.2rem;
114 | color: #161617;
115 | }
116 |
117 | .mobile-nav-icon:hover, .close-outline:hover{
118 | color: #e50914;
119 | }
120 |
121 | /* hide the original nav menu */
122 | .navbarList {
123 | width: 100vw;
124 | height: 100vh;
125 | position: absolute;
126 | top: 0;
127 | left: 0;
128 | background-color: #fff;
129 | display: flex;
130 | justify-content: center;
131 | align-content: center;
132 | flex-direction: column;
133 | text-align: center;
134 | transform: translateX(100%);
135 | visibility: hidden;
136 | opacity: 0;
137 | }
138 |
139 | .navbarList .navbarItem {
140 | font-size: 4.2rem;
141 | }
142 |
143 | .navbarList .navbarItem a{
144 | font-size: 3.2rem;
145 | }
146 |
147 | .navbarList .navbarItem a:hover {
148 | color: #e50914;
149 | }
150 |
151 | /*when user click on the open menu icon*/
152 | .active .mobile-nav-icon {
153 | display: none;
154 | font-size: 4.2rem;
155 | position: absolute;
156 | top: 3%;
157 | right: 10%;
158 | color: #161617;
159 | z-index: 9999;
160 | }
161 |
162 | .active .close-outline {
163 | display: inline-block;
164 | }
165 |
166 | .active .navbarList {
167 | visibility: visible;
168 | opacity: 1;
169 | transform: translateX(0);
170 | z-index: 999;
171 | }
172 | }
--------------------------------------------------------------------------------
/next-shit/src/app/components/Footer.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import footerStyles from '@/app/styles/footer.module.css'
3 | import { FaFacebookF, FaTwitter,FaInstagram,FaLinkedinIn,FaYoutube } from "react-icons/fa";
4 | import Link from "next/link";
5 |
6 |
7 | export const metadata = {
8 | url: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css',
9 | }
10 |
11 | const Footer = () => {
12 | return (
13 | <>
14 |
15 |
77 |
78 |
79 | );
80 | }
81 |
82 | export default Footer;
--------------------------------------------------------------------------------
/next-shit/src/app/styles/footer.module.css:
--------------------------------------------------------------------------------
1 | .footer {
2 | background: #161617;
3 | width: 100%;
4 | margin: 6rem auto 0 auto;
5 | }
6 |
7 | .footer::before {
8 | content: '';
9 | position: absolute;
10 | left: 0;
11 | top: 100px;
12 | height: 1px;
13 | width: 100%;
14 | background: #AFAFB6;
15 | }
16 |
17 | .footer .content {
18 | max-width: 140rem;
19 | margin: auto;
20 | padding: 30px 40px 40px 40px;
21 | }
22 |
23 | .footer .content .top {
24 | display: flex;
25 | align-items: center;
26 | justify-content: space-between;
27 | margin-bottom: 50px;
28 | }
29 |
30 | .content .top .logo-details {
31 | color: #fff;
32 | font-size: 30px;
33 | }
34 |
35 | .content .top .media-icons {
36 | display: flex;
37 | }
38 |
39 | .content .top .media-icons a {
40 | height: 40px;
41 | width: 40px;
42 | margin: 0 8px;
43 | border-radius: 50%;
44 | text-align: center;
45 | line-height: 40px;
46 | color: #fff;
47 | font-size: 17px;
48 | text-decoration: none;
49 | transition: all 0.4s ease;
50 | }
51 |
52 | .top .media-icons a:nth-child(1) {
53 | background: #4267B2;
54 | }
55 |
56 | .top .media-icons a:nth-child(1):hover {
57 | color: #4267B2;
58 | background: #fff;
59 | }
60 |
61 | .top .media-icons a:nth-child(2) {
62 | background: #1DA1F2;
63 | }
64 |
65 | .top .media-icons a:nth-child(2):hover {
66 | color: #1DA1F2;
67 | background: #fff;
68 | }
69 |
70 | .top .media-icons a:nth-child(3) {
71 | background: #E1306C;
72 | }
73 |
74 | .top .media-icons a:nth-child(3):hover {
75 | color: #E1306C;
76 | background: #fff;
77 | }
78 |
79 | .top .media-icons a:nth-child(4) {
80 | background: #0077B5;
81 | }
82 |
83 | .top .media-icons a:nth-child(4):hover {
84 | color: #0077B5;
85 | background: #fff;
86 | }
87 |
88 | .top .media-icons a:nth-child(5) {
89 | background: #FF0000;
90 | }
91 |
92 | .top .media-icons a:nth-child(5):hover {
93 | color: #FF0000;
94 | background: #fff;
95 | }
96 |
97 | .footer .content .link-boxes {
98 | width: 100%;
99 | display: flex;
100 | justify-content: space-between;
101 | }
102 |
103 | .footer .content .link-boxes .box {
104 | width: calc(100% / 5 - 10px);
105 | }
106 |
107 | .content .link-boxes .box .link_name {
108 | color: #fff;
109 | font-size: 18px;
110 | font-weight: 400;
111 | margin-bottom: 10px;
112 | position: relative;
113 | }
114 |
115 | .link-boxes .box .link_name::before {
116 | content: '';
117 | position: absolute;
118 | left: 0;
119 | bottom: -2px;
120 | height: 2px;
121 | width: 35px;
122 | background: #fff;
123 | }
124 |
125 | .content .link-boxes .box li {
126 | margin: 6px 0;
127 | list-style: none;
128 | }
129 |
130 | .content .link-boxes .box li a {
131 | color: #fff;
132 | opacity: 0.8;
133 | transition: all 0.4s ease
134 | }
135 |
136 | .content .link-boxes .box li a:hover {
137 | opacity: 1;
138 | text-decoration: underline;
139 | }
140 |
141 | .content .link-boxes .input-box {
142 | margin-right: 55px;
143 | }
144 |
145 | .link-boxes .input-box input {
146 | height: 40px;
147 | width: calc(100% + 55px);
148 | outline: none;
149 | border: 2px solid #AFAFB6;
150 | background: #161617;
151 | border-radius: 4px;
152 | padding: 0 15px;
153 | font-size: 15px;
154 | color: #fff;
155 | margin-top: 5px;
156 | }
157 |
158 | .link-boxes .input-box input::placeholder {
159 | color: #AFAFB6;
160 | font-size: 16px;
161 | }
162 |
163 | .link-boxes .input-box input[type="button"] {
164 | background: #fff;
165 | color: #161617;
166 | border: none;
167 | font-size: 18px;
168 | font-weight: 500;
169 | margin: 4px 0;
170 | opacity: 0.8;
171 | cursor: pointer;
172 | transition: all 0.4s ease;
173 | }
174 |
175 | .input-box input[type="button"]:hover {
176 | opacity: 1;
177 | }
178 |
179 | .footer .bottom-details {
180 | width: 100%;
181 | background: #161617;
182 | }
183 |
184 | .footer .bottom-details .bottom_text {
185 | max-width: 1250px;
186 | margin: auto;
187 | padding: 20px 40px;
188 | display: flex;
189 | justify-content: space-between;
190 | }
191 |
192 | .bottom-details .bottom_text span,
193 | .bottom-details .bottom_text a {
194 | font-size: 14px;
195 | font-weight: 300;
196 | color: #fff;
197 | opacity: 0.8;
198 | text-decoration: none;
199 | }
200 |
201 | .bottom-details .bottom_text a:hover {
202 | opacity: 1;
203 | text-decoration: underline;
204 | }
205 |
206 | .bottom-details .bottom_text a {
207 | margin-right: 10px;
208 | }
209 |
210 | @media (max-width: 900px) {
211 | .footer .content .link-boxes {
212 | flex-wrap: wrap;
213 | }
214 |
215 | .footer .content .link-boxes .input-box {
216 | width: 40%;
217 | margin-top: 10px;
218 | }
219 | }
220 |
221 | @media (max-width: 700px) {
222 | .footer {
223 | position: relative;
224 | }
225 |
226 | .content .top .logo-details {
227 | font-size: 26px;
228 | }
229 |
230 | .content .top .media-icons a {
231 | height: 35px;
232 | width: 35px;
233 | font-size: 14px;
234 | line-height: 35px;
235 | }
236 |
237 | .footer .content .link-boxes .box {
238 | width: calc(100% / 3 - 10px);
239 | }
240 |
241 | .footer .content .link-boxes .input-box {
242 | width: 60%;
243 | }
244 |
245 | .bottom-details .bottom_text span,
246 | .bottom-details .bottom_text a {
247 | font-size: 12px;
248 | }
249 | }
250 |
251 | @media (max-width: 520px) {
252 | .footer::before {
253 | top: 145px;
254 | }
255 |
256 | .footer .content .top {
257 | flex-direction: column;
258 | }
259 |
260 | .content .top .media-icons {
261 | margin-top: 16px;
262 | }
263 |
264 | .footer .content .link-boxes .box {
265 | width: calc(100% / 2 - 10px);
266 | }
267 |
268 | .footer .content .link-boxes .input-box {
269 | width: 100%;
270 | }
271 | }
272 |
273 |
--------------------------------------------------------------------------------
/next-shit/public/about1.svg:
--------------------------------------------------------------------------------
1 | netflix