#1 setup next 13

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+    "typescript.tsdk": "node_modules/typescript/lib",
+    "typescript.enablePromptUseWorkspaceTsdk": true,
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }

README.md

@@ -1,34 +1,28 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+<p align="center"><a href="https://profile-forme.cf/" target="_blank"><img src="https://res.cloudinary.com/ecommerce2021/image/upload/v1659065987/avatar/logo_begsn1.png" width="300"></a></p>
 
-## Getting Started
+<p align="center">
+<a href="https://www.linkedin.com/in/tai-nguyen-tien-787545213/"><img src="https://img.icons8.com/color/48/000000/linkedin-circled--v1.png" alt="Linkedin"></a>
+<a href="https://profile-forme.surge.sh"><img src="https://img.icons8.com/color/48/000000/internet--v1.png" alt="Profile"></a>
+<a href="tel:0798805741"><img src="https://img.icons8.com/color/48/000000/apple-phone.png" alt="Phone"></a>
+<a href = "mailto:[email protected]"><img src="https://img.icons8.com/fluency/48/000000/send-mass-email.png" alt="License"></a>
+</p>
 
-First, run the development server:
+## Project: E-Commerce-Next-13
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-```
+## Team Word: Liên hệ công việc https://profile-forme.cf
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+## 1. Nguyen Tien Tai( MainTain 🚩).
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+## Tài Khoản Donate li Cf để có động lực code cho anh em tham khảo 😄.
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+![giphy](https://3.bp.blogspot.com/-SzGvXn2sTmw/V6k-90GH3ZI/AAAAAAAAIsk/Q678Pil-0kITLPa3fD--JkNdnJVKi_BygCLcB/s1600/cf10-fbc08%2B%25281%2529.gif)
 
-## Learn More
+## Mk: NGUYEN TIEN TAI
 
-To learn more about Next.js, take a look at the following resources:
+## STK: 1651002972052
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+## Chi Nhánh: NGAN HANG TMCP AN BINH (ABBANK).
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+## SUPORT CONTACT: [https://profile-forme.cf](https://profile-forme.cf)
 
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+## Thank You <3.

app/(home)/page.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import Hero from '../components/heros/Hero'
+
+const HomePage = () => {
+  return (
+    <div>
+      <Hero />
+    </div>
+  )
+}
+
+export default HomePage

app/Header.tsx

@@ -0,0 +1,11 @@
+export default function Head() {
+    return (
+      <>
+        <title>Checks!</title>
+        <meta content="width=device-width, initial-scale=1" name="viewport" />
+        <meta name="description" content="Generated by create next app" />
+        <link rel="icon" href="/favicon.png" />
+      </>
+    )
+  }
+

app/components/Border.tsx

@@ -0,0 +1,5 @@
+const Border = () => (
+  <div className="sm:mx-3 mx-1 px-2 border-b border-zinc-300" />
+);
+
+export default Border;

app/components/heros/Hero.tsx

@@ -0,0 +1,19 @@
+const Hero = () => {
+    return (
+      <div className="md:px-18 md:py-28 py-14 px-2 text-center">
+        <h2 className="md:text-7xl text-5xl font-black mb-5 text-red-800">
+          Checks over stripes.
+        </h2>
+        <p className="font-medium mb-2">
+          Resell site for copping heat Nike sneakers 👟
+        </p>
+        <p className="text-zinc-500 text-[16px]">
+          (This is built with Next.js 13 Beta for experimenting and
+          learning purposes only)
+        </p>
+      </div>
+    );
+  };
+
+  export default Hero;
+

app/globals.css

@@ -2,26 +2,12 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
+body {
+  color: #27272a;
 }
 
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+p {
+  font-size: 1.125rem; /* 18px */
+  line-height: 1.75rem;
+  color: #52525b;
 }

app/layout.tsx

@@ -16,6 +16,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
+      <head />
       <body className={inter.className}>{children}</body>
     </html>
   )

next.config.js

@@ -1,4 +1,6 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+    appDir:true
+}
 
 module.exports = nextConfig

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "PORT=3001 next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"

tailwind.config.ts

@@ -7,13 +7,7 @@ const config: Config = {
     './app/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
-    extend: {
-      backgroundImage: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic':
-          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
-      },
-    },
+    extend: {},
   },
   plugins: [],
 }