diff --git a/packages/create-next-app/templates/experimental-app/app/globals.css b/packages/create-next-app/templates/experimental-app/app/globals.css new file mode 100644 index 000000000000..4f1842163d22 --- /dev/null +++ b/packages/create-next-app/templates/experimental-app/app/globals.css @@ -0,0 +1,26 @@ +html, +body { + padding: 0; + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, + Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; +} + +a { + color: inherit; + text-decoration: none; +} + +* { + box-sizing: border-box; +} + +@media (prefers-color-scheme: dark) { + html { + color-scheme: dark; + } + body { + color: white; + background: black; + } +} diff --git a/packages/create-next-app/templates/experimental-app/app/layout.tsx b/packages/create-next-app/templates/experimental-app/app/layout.tsx index 858c345c7795..44facc948f4c 100644 --- a/packages/create-next-app/templates/experimental-app/app/layout.tsx +++ b/packages/create-next-app/templates/experimental-app/app/layout.tsx @@ -1,8 +1,16 @@ -export default function RootLayout({ children }) { +import './globals.css' + +export default function RootLayout({ + children, +}: { + children: React.ReactNode +}) { return ( Create Next App + + {children} diff --git a/packages/create-next-app/templates/experimental-app/app/page.module.css b/packages/create-next-app/templates/experimental-app/app/page.module.css new file mode 100644 index 000000000000..a978c99de57b --- /dev/null +++ b/packages/create-next-app/templates/experimental-app/app/page.module.css @@ -0,0 +1,146 @@ +.container { + padding: 0 2rem; +} + +.main { + min-height: 100vh; + padding: 4rem 0; + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.footer { + display: flex; + flex: 1; + padding: 2rem 0; + border-top: 1px solid #eaeaea; + justify-content: center; + align-items: center; +} + +.footer a { + display: flex; + justify-content: center; + align-items: center; + flex-grow: 1; +} + +.title { + margin: 0; + line-height: 1.15; + font-size: 4rem; + font-style: normal; + font-weight: 800; + letter-spacing: -0.025em; +} + +.title a { + text-decoration: none; + color: #0070f3; +} + +.title a:hover, +.title a:focus, +.title a:active { + text-decoration: underline; +} + +.title, +.description { + text-align: center; +} + +.description { + margin: 4rem 0; + line-height: 1.5; + font-size: 1.5rem; +} + +.code { + background: #fafafa; + border-radius: 5px; + padding: 0.75rem; + font-size: 1.1rem; + font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, + Bitstream Vera Sans Mono, Courier New, monospace; +} + +.grid { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + max-width: 1200px; +} + +.card { + margin: 1rem; + padding: 1.5rem; + text-align: left; + color: inherit; + text-decoration: none; + border: 1px solid #eaeaea; + border-radius: 10px; + transition: color 0.15s ease, border-color 0.15s ease; + max-width: 300px; +} + +.card:hover, +.card:focus, +.card:active { + color: #0070f3; + border-color: #0070f3; +} + +.card h2 { + margin: 0 0 1rem 0; + font-size: 1.5rem; +} + +.card p { + margin: 0; + font-size: 1.25rem; + line-height: 1.5; +} + +.logo { + height: 1em; + margin-left: 0.5rem; +} + +@media (max-width: 600px) { + .grid { + width: 100%; + flex-direction: column; + } +} + +@media (prefers-color-scheme: dark) { + .title { + background: linear-gradient(180deg, #ffffff 0%, #aaaaaa 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + text-fill-color: transparent; + } + .title a { + background: linear-gradient(180deg, #0070f3 0%, #0153af 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + text-fill-color: transparent; + } + .card, + .footer { + border-color: #222; + } + .code { + background: #111; + } + .logo img { + filter: invert(1); + } +} diff --git a/packages/create-next-app/templates/experimental-app/app/page.tsx b/packages/create-next-app/templates/experimental-app/app/page.tsx index b9e0c47294cc..35bd2649d4cc 100644 --- a/packages/create-next-app/templates/experimental-app/app/page.tsx +++ b/packages/create-next-app/templates/experimental-app/app/page.tsx @@ -1,7 +1,57 @@ -export default function Page() { +import Image from 'next/image' +import styles from './page.module.css' + +export default function Home() { return ( -

- Welcome to Next.js! -

+
+
+

+ Welcome to Next.js 13! +

+ +

+ Get started by editing{' '} + app/page.tsx +

+ +
+ +

Documentation →

+

Find in-depth information about Next.js 13

+ + + +

Examples →

+

Explore the Next.js 13 playground.

+ + + +

Deploy →

+

Deploy your Next.js site to a public URL with Vercel.

+ +
+
+ + +
) } diff --git a/packages/create-next-app/templates/experimental-app/public/favicon.ico b/packages/create-next-app/templates/experimental-app/public/favicon.ico new file mode 100644 index 000000000000..718d6fea4835 Binary files /dev/null and b/packages/create-next-app/templates/experimental-app/public/favicon.ico differ diff --git a/packages/create-next-app/templates/experimental-app/public/vercel.svg b/packages/create-next-app/templates/experimental-app/public/vercel.svg new file mode 100644 index 000000000000..fbf0e25a651c --- /dev/null +++ b/packages/create-next-app/templates/experimental-app/public/vercel.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file