-
-
-
- Get started by editing{' '}
- app/page.tsx
+
+
+
+ Get started by editing
+ app/page.jsx
-
-
+
+
+
+
+
+
)
}
diff --git a/packages/create-next-app/templates/app/js/app/page.module.css b/packages/create-next-app/templates/app/js/app/page.module.css
index a978c99de57b3a0..4732b55fdc23708 100644
--- a/packages/create-next-app/templates/app/js/app/page.module.css
+++ b/packages/create-next-app/templates/app/js/app/page.module.css
@@ -1,146 +1,271 @@
-.container {
- padding: 0 2rem;
-}
-
.main {
- min-height: 100vh;
- padding: 4rem 0;
- flex: 1;
display: flex;
flex-direction: column;
- justify-content: center;
+ justify-content: space-between;
align-items: center;
+ padding: 6rem;
+ min-height: 100vh;
}
-.footer {
- display: flex;
- flex: 1;
- padding: 2rem 0;
- border-top: 1px solid #eaeaea;
- justify-content: center;
- align-items: center;
+.description {
+ display: inherit;
+ justify-content: inherit;
+ align-items: inherit;
+ font-size: 0.85rem;
+ max-width: var(--max-width);
+ width: 100%;
+ z-index: 2;
+ font-family: var(--font-mono);
}
-.footer a {
+.description a {
display: flex;
- justify-content: center;
align-items: center;
- flex-grow: 1;
+ justify-content: center;
+ gap: 0.5rem;
}
-.title {
+.description p {
+ position: relative;
margin: 0;
- line-height: 1.15;
- font-size: 4rem;
- font-style: normal;
- font-weight: 800;
- letter-spacing: -0.025em;
+ padding: 1rem;
+ background-color: rgba(var(--callout-rgb), 0.5);
+ border: 1px solid rgba(var(--callout-border-rgb), 0.3);
+ border-radius: var(--border-radius);
}
-.title a {
- text-decoration: none;
- color: #0070f3;
+.code {
+ font-weight: 700;
+ font-family: var(--font-mono);
}
-.title a:hover,
-.title a:focus,
-.title a:active {
- text-decoration: underline;
+.grid {
+ display: grid;
+ grid-template-columns: repeat(3, minmax(33%, auto));
+ width: var(--max-width);
+ max-width: 100%;
}
-.title,
-.description {
- text-align: center;
+.card {
+ padding: 1rem 1.2rem;
+ border-radius: var(--border-radius);
+ background: rgba(var(--card-rgb), 0);
+ border: 1px solid rgba(var(--card-border-rgb), 0);
+ transition: background 200ms, border 200ms;
}
-.description {
- margin: 4rem 0;
- line-height: 1.5;
- font-size: 1.5rem;
+.card span {
+ display: inline-block;
+ transition: transform 200ms;
}
-.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;
+.card h2 {
+ font-weight: 600;
+ margin-bottom: 0.7rem;
}
-.grid {
+.card p {
+ margin: 0;
+ opacity: 0.6;
+ font-size: 0.9rem;
+ line-height: 1.5;
+ max-width: 34ch;
+}
+
+.center {
display: flex;
+ justify-content: center;
align-items: center;
+ position: relative;
+ padding: 4rem 0;
+}
+
+.center::before {
+ background: var(--secondary-glow);
+ border-radius: 50%;
+ width: 480px;
+ height: 360px;
+ margin-left: -400px;
+}
+
+.center::after {
+ background: var(--primary-glow);
+ width: 240px;
+ height: 180px;
+ z-index: -1;
+}
+
+.center::before,
+.center::after {
+ content: '';
+ left: 50%;
+ position: absolute;
+ filter: blur(45px);
+ transform: translateZ(0);
+}
+
+.logo,
+.thirteen {
+ position: relative;
+}
+
+.thirteen {
+ display: flex;
justify-content: center;
- flex-wrap: wrap;
- max-width: 1200px;
+ align-items: center;
+ width: 75px;
+ height: 75px;
+ padding: 25px 10px;
+ margin-left: 16px;
+ transform: translateZ(0);
+ border-radius: var(--border-radius);
+ overflow: hidden;
+ box-shadow: 0px 2px 8px -1px #0000001a;
}
-.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;
+.thirteen::before,
+.thirteen::after {
+ content: '';
+ position: absolute;
+ z-index: -1;
}
-.card:hover,
-.card:focus,
-.card:active {
- color: #0070f3;
- border-color: #0070f3;
+/* Conic Gradient Animation */
+.thirteen::before {
+ animation: 6s rotate linear infinite;
+ width: 200%;
+ height: 200%;
+ background: var(--tile-border);
}
-.card h2 {
- margin: 0 0 1rem 0;
- font-size: 1.5rem;
+/* Inner Square */
+.thirteen::after {
+ inset: 0;
+ padding: 1px;
+ border-radius: var(--border-radius);
+ background: linear-gradient(
+ to bottom right,
+ rgba(var(--tile-start-rgb), 1),
+ rgba(var(--tile-end-rgb), 1)
+ );
+ background-clip: content-box;
}
-.card p {
- margin: 0;
- font-size: 1.25rem;
- line-height: 1.5;
+/* Enable hover only on non-touch devices */
+@media (hover: hover) and (pointer: fine) {
+ .card:hover {
+ background: rgba(var(--card-rgb), 0.1);
+ border: 1px solid rgba(var(--card-border-rgb), 0.15);
+ }
+
+ .card:hover span {
+ transform: translateX(4px);
+ }
}
-.logo {
- height: 1em;
- margin-left: 0.5rem;
+@media (prefers-reduced-motion) {
+ .thirteen::before {
+ animation: none;
+ }
+
+ .card:hover span {
+ transform: none;
+ }
}
-@media (max-width: 600px) {
+/* Mobile and Tablet */
+@media (max-width: 1023px) {
+ .content {
+ padding: 4rem;
+ }
+
.grid {
+ grid-template-columns: 1fr;
+ margin-bottom: 120px;
+ max-width: 320px;
+ text-align: center;
+ }
+
+ .card {
+ padding: 1rem 2.5rem;
+ }
+
+ .card h2 {
+ margin-bottom: 0.5rem;
+ }
+
+ .center {
+ padding: 8rem 0 6rem;
+ }
+
+ .center::before {
+ transform: none;
+ height: 300px;
+ }
+
+ .description {
+ font-size: 0.8rem;
+ }
+
+ .description a {
+ padding: 1rem;
+ }
+
+ .description p,
+ .description div {
+ display: flex;
+ justify-content: center;
+ position: fixed;
width: 100%;
- flex-direction: column;
+ }
+
+ .description p {
+ align-items: center;
+ inset: 0 0 auto;
+ padding: 2rem 1rem 1.4rem;
+ border-radius: 0;
+ border: none;
+ border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
+ background: linear-gradient(
+ to bottom,
+ rgba(var(--background-start-rgb), 1),
+ rgba(var(--callout-rgb), 0.5)
+ );
+ background-clip: padding-box;
+ backdrop-filter: blur(24px);
+ }
+
+ .description div {
+ align-items: flex-end;
+ pointer-events: none;
+ inset: auto 0 0;
+ padding: 2rem;
+ height: 200px;
+ background: linear-gradient(
+ to bottom,
+ transparent 0%,
+ rgb(var(--background-end-rgb)) 40%
+ );
+ z-index: 1;
}
}
@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 {
+ .vercelLogo {
filter: invert(1);
}
+
+ .logo,
+ .thirteen img {
+ filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
+ }
+}
+
+@keyframes rotate {
+ from {
+ transform: rotate(360deg);
+ }
+ to {
+ transform: rotate(0deg);
+ }
}
diff --git a/packages/create-next-app/templates/app/js/gitignore b/packages/create-next-app/templates/app/js/gitignore
index c87c9b392c0200d..55175ef867e0b00 100644
--- a/packages/create-next-app/templates/app/js/gitignore
+++ b/packages/create-next-app/templates/app/js/gitignore
@@ -30,7 +30,3 @@ yarn-error.log*
# vercel
.vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts
diff --git a/packages/create-next-app/templates/app/js/public/next.svg b/packages/create-next-app/templates/app/js/public/next.svg
new file mode 100644
index 000000000000000..5174b28c565c285
--- /dev/null
+++ b/packages/create-next-app/templates/app/js/public/next.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/create-next-app/templates/app/js/public/thirteen.svg b/packages/create-next-app/templates/app/js/public/thirteen.svg
new file mode 100644
index 000000000000000..8977c1bd123cbe4
--- /dev/null
+++ b/packages/create-next-app/templates/app/js/public/thirteen.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/create-next-app/templates/app/js/public/vercel.svg b/packages/create-next-app/templates/app/js/public/vercel.svg
index fbf0e25a651c289..d2f84222734f27b 100644
--- a/packages/create-next-app/templates/app/js/public/vercel.svg
+++ b/packages/create-next-app/templates/app/js/public/vercel.svg
@@ -1,4 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/packages/create-next-app/templates/app/ts/app/globals.css b/packages/create-next-app/templates/app/ts/app/globals.css
index 4f1842163d2220c..3a54ccd80be4277 100644
--- a/packages/create-next-app/templates/app/ts/app/globals.css
+++ b/packages/create-next-app/templates/app/ts/app/globals.css
@@ -1,9 +1,98 @@
-html,
-body {
+:root {
+ --max-width: 1100px;
+ --border-radius: 12px;
+ --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
+ 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
+ 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
+
+ --foreground-rgb: 0, 0, 0;
+ --background-start-rgb: 214, 219, 220;
+ --background-end-rgb: 255, 255, 255;
+
+ --primary-glow: conic-gradient(
+ from 180deg at 50% 50%,
+ #16abff33 0deg,
+ #0885ff33 55deg,
+ #54d6ff33 120deg,
+ #0071ff33 160deg,
+ transparent 360deg
+ );
+ --secondary-glow: radial-gradient(
+ rgba(255, 255, 255, 1),
+ rgba(255, 255, 255, 0)
+ );
+
+ --tile-start-rgb: 239, 245, 249;
+ --tile-end-rgb: 228, 232, 233;
+ --tile-border: conic-gradient(
+ #00000080,
+ #00000040,
+ #00000030,
+ #00000020,
+ #00000010,
+ #00000010,
+ #00000080
+ );
+
+ --callout-rgb: 238, 240, 241;
+ --callout-border-rgb: 172, 175, 176;
+ --card-rgb: 180, 185, 188;
+ --card-border-rgb: 131, 134, 135;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --foreground-rgb: 255, 255, 255;
+ --background-start-rgb: 0, 0, 0;
+ --background-end-rgb: 0, 0, 0;
+
+ --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
+ --secondary-glow: linear-gradient(
+ to bottom right,
+ rgba(1, 65, 255, 0),
+ rgba(1, 65, 255, 0),
+ rgba(1, 65, 255, 0.3)
+ );
+
+ --tile-start-rgb: 2, 13, 46;
+ --tile-end-rgb: 2, 5, 19;
+ --tile-border: conic-gradient(
+ #ffffff80,
+ #ffffff40,
+ #ffffff30,
+ #ffffff20,
+ #ffffff10,
+ #ffffff10,
+ #ffffff80
+ );
+
+ --callout-rgb: 20, 20, 20;
+ --callout-border-rgb: 108, 108, 108;
+ --card-rgb: 100, 100, 100;
+ --card-border-rgb: 200, 200, 200;
+ }
+}
+
+* {
+ box-sizing: border-box;
padding: 0;
margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
- Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+}
+
+html,
+body {
+ max-width: 100vw;
+ overflow-x: hidden;
+}
+
+body {
+ color: rbg(--foreground-rgb);
+ background: linear-gradient(
+ to bottom,
+ transparent,
+ rgb(var(--background-end-rgb))
+ )
+ rgb(var(--background-start-rgb));
}
a {
@@ -11,16 +100,8 @@ a {
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/app/ts/app/page.module.css b/packages/create-next-app/templates/app/ts/app/page.module.css
index a978c99de57b3a0..4732b55fdc23708 100644
--- a/packages/create-next-app/templates/app/ts/app/page.module.css
+++ b/packages/create-next-app/templates/app/ts/app/page.module.css
@@ -1,146 +1,271 @@
-.container {
- padding: 0 2rem;
-}
-
.main {
- min-height: 100vh;
- padding: 4rem 0;
- flex: 1;
display: flex;
flex-direction: column;
- justify-content: center;
+ justify-content: space-between;
align-items: center;
+ padding: 6rem;
+ min-height: 100vh;
}
-.footer {
- display: flex;
- flex: 1;
- padding: 2rem 0;
- border-top: 1px solid #eaeaea;
- justify-content: center;
- align-items: center;
+.description {
+ display: inherit;
+ justify-content: inherit;
+ align-items: inherit;
+ font-size: 0.85rem;
+ max-width: var(--max-width);
+ width: 100%;
+ z-index: 2;
+ font-family: var(--font-mono);
}
-.footer a {
+.description a {
display: flex;
- justify-content: center;
align-items: center;
- flex-grow: 1;
+ justify-content: center;
+ gap: 0.5rem;
}
-.title {
+.description p {
+ position: relative;
margin: 0;
- line-height: 1.15;
- font-size: 4rem;
- font-style: normal;
- font-weight: 800;
- letter-spacing: -0.025em;
+ padding: 1rem;
+ background-color: rgba(var(--callout-rgb), 0.5);
+ border: 1px solid rgba(var(--callout-border-rgb), 0.3);
+ border-radius: var(--border-radius);
}
-.title a {
- text-decoration: none;
- color: #0070f3;
+.code {
+ font-weight: 700;
+ font-family: var(--font-mono);
}
-.title a:hover,
-.title a:focus,
-.title a:active {
- text-decoration: underline;
+.grid {
+ display: grid;
+ grid-template-columns: repeat(3, minmax(33%, auto));
+ width: var(--max-width);
+ max-width: 100%;
}
-.title,
-.description {
- text-align: center;
+.card {
+ padding: 1rem 1.2rem;
+ border-radius: var(--border-radius);
+ background: rgba(var(--card-rgb), 0);
+ border: 1px solid rgba(var(--card-border-rgb), 0);
+ transition: background 200ms, border 200ms;
}
-.description {
- margin: 4rem 0;
- line-height: 1.5;
- font-size: 1.5rem;
+.card span {
+ display: inline-block;
+ transition: transform 200ms;
}
-.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;
+.card h2 {
+ font-weight: 600;
+ margin-bottom: 0.7rem;
}
-.grid {
+.card p {
+ margin: 0;
+ opacity: 0.6;
+ font-size: 0.9rem;
+ line-height: 1.5;
+ max-width: 34ch;
+}
+
+.center {
display: flex;
+ justify-content: center;
align-items: center;
+ position: relative;
+ padding: 4rem 0;
+}
+
+.center::before {
+ background: var(--secondary-glow);
+ border-radius: 50%;
+ width: 480px;
+ height: 360px;
+ margin-left: -400px;
+}
+
+.center::after {
+ background: var(--primary-glow);
+ width: 240px;
+ height: 180px;
+ z-index: -1;
+}
+
+.center::before,
+.center::after {
+ content: '';
+ left: 50%;
+ position: absolute;
+ filter: blur(45px);
+ transform: translateZ(0);
+}
+
+.logo,
+.thirteen {
+ position: relative;
+}
+
+.thirteen {
+ display: flex;
justify-content: center;
- flex-wrap: wrap;
- max-width: 1200px;
+ align-items: center;
+ width: 75px;
+ height: 75px;
+ padding: 25px 10px;
+ margin-left: 16px;
+ transform: translateZ(0);
+ border-radius: var(--border-radius);
+ overflow: hidden;
+ box-shadow: 0px 2px 8px -1px #0000001a;
}
-.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;
+.thirteen::before,
+.thirteen::after {
+ content: '';
+ position: absolute;
+ z-index: -1;
}
-.card:hover,
-.card:focus,
-.card:active {
- color: #0070f3;
- border-color: #0070f3;
+/* Conic Gradient Animation */
+.thirteen::before {
+ animation: 6s rotate linear infinite;
+ width: 200%;
+ height: 200%;
+ background: var(--tile-border);
}
-.card h2 {
- margin: 0 0 1rem 0;
- font-size: 1.5rem;
+/* Inner Square */
+.thirteen::after {
+ inset: 0;
+ padding: 1px;
+ border-radius: var(--border-radius);
+ background: linear-gradient(
+ to bottom right,
+ rgba(var(--tile-start-rgb), 1),
+ rgba(var(--tile-end-rgb), 1)
+ );
+ background-clip: content-box;
}
-.card p {
- margin: 0;
- font-size: 1.25rem;
- line-height: 1.5;
+/* Enable hover only on non-touch devices */
+@media (hover: hover) and (pointer: fine) {
+ .card:hover {
+ background: rgba(var(--card-rgb), 0.1);
+ border: 1px solid rgba(var(--card-border-rgb), 0.15);
+ }
+
+ .card:hover span {
+ transform: translateX(4px);
+ }
}
-.logo {
- height: 1em;
- margin-left: 0.5rem;
+@media (prefers-reduced-motion) {
+ .thirteen::before {
+ animation: none;
+ }
+
+ .card:hover span {
+ transform: none;
+ }
}
-@media (max-width: 600px) {
+/* Mobile and Tablet */
+@media (max-width: 1023px) {
+ .content {
+ padding: 4rem;
+ }
+
.grid {
+ grid-template-columns: 1fr;
+ margin-bottom: 120px;
+ max-width: 320px;
+ text-align: center;
+ }
+
+ .card {
+ padding: 1rem 2.5rem;
+ }
+
+ .card h2 {
+ margin-bottom: 0.5rem;
+ }
+
+ .center {
+ padding: 8rem 0 6rem;
+ }
+
+ .center::before {
+ transform: none;
+ height: 300px;
+ }
+
+ .description {
+ font-size: 0.8rem;
+ }
+
+ .description a {
+ padding: 1rem;
+ }
+
+ .description p,
+ .description div {
+ display: flex;
+ justify-content: center;
+ position: fixed;
width: 100%;
- flex-direction: column;
+ }
+
+ .description p {
+ align-items: center;
+ inset: 0 0 auto;
+ padding: 2rem 1rem 1.4rem;
+ border-radius: 0;
+ border: none;
+ border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
+ background: linear-gradient(
+ to bottom,
+ rgba(var(--background-start-rgb), 1),
+ rgba(var(--callout-rgb), 0.5)
+ );
+ background-clip: padding-box;
+ backdrop-filter: blur(24px);
+ }
+
+ .description div {
+ align-items: flex-end;
+ pointer-events: none;
+ inset: auto 0 0;
+ padding: 2rem;
+ height: 200px;
+ background: linear-gradient(
+ to bottom,
+ transparent 0%,
+ rgb(var(--background-end-rgb)) 40%
+ );
+ z-index: 1;
}
}
@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 {
+ .vercelLogo {
filter: invert(1);
}
+
+ .logo,
+ .thirteen img {
+ filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
+ }
+}
+
+@keyframes rotate {
+ from {
+ transform: rotate(360deg);
+ }
+ to {
+ transform: rotate(0deg);
+ }
}
diff --git a/packages/create-next-app/templates/app/ts/app/page.tsx b/packages/create-next-app/templates/app/ts/app/page.tsx
index 35bd2649d4ccabd..47fcc959cf52b13 100644
--- a/packages/create-next-app/templates/app/ts/app/page.tsx
+++ b/packages/create-next-app/templates/app/ts/app/page.tsx
@@ -1,57 +1,91 @@
import Image from 'next/image'
+import { Inter } from '@next/font/google'
import styles from './page.module.css'
+const inter = Inter({ subsets: ['latin'] })
+
export default function Home() {
return (
-
-
-
-
-
- Get started by editing{' '}
+
+
+
+ Get started by editing
app/page.tsx
-
-
+
+
+
+
+
+
)
}
diff --git a/packages/create-next-app/templates/app/ts/public/next.svg b/packages/create-next-app/templates/app/ts/public/next.svg
new file mode 100644
index 000000000000000..5174b28c565c285
--- /dev/null
+++ b/packages/create-next-app/templates/app/ts/public/next.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/create-next-app/templates/app/ts/public/thirteen.svg b/packages/create-next-app/templates/app/ts/public/thirteen.svg
new file mode 100644
index 000000000000000..8977c1bd123cbe4
--- /dev/null
+++ b/packages/create-next-app/templates/app/ts/public/thirteen.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/create-next-app/templates/app/ts/public/vercel.svg b/packages/create-next-app/templates/app/ts/public/vercel.svg
index fbf0e25a651c289..d2f84222734f27b 100644
--- a/packages/create-next-app/templates/app/ts/public/vercel.svg
+++ b/packages/create-next-app/templates/app/ts/public/vercel.svg
@@ -1,4 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/packages/create-next-app/templates/default/js/gitignore b/packages/create-next-app/templates/default/js/gitignore
index c87c9b392c0200d..55175ef867e0b00 100644
--- a/packages/create-next-app/templates/default/js/gitignore
+++ b/packages/create-next-app/templates/default/js/gitignore
@@ -30,7 +30,3 @@ yarn-error.log*
# vercel
.vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts
diff --git a/packages/create-next-app/templates/default/js/next.config.js b/packages/create-next-app/templates/default/js/next.config.js
index a843cbee09afaad..ae887958d3c9c94 100644
--- a/packages/create-next-app/templates/default/js/next.config.js
+++ b/packages/create-next-app/templates/default/js/next.config.js
@@ -1,6 +1,7 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
+ swcMinify: true,
}
module.exports = nextConfig
diff --git a/packages/create-next-app/templates/default/js/pages/_app.js b/packages/create-next-app/templates/default/js/pages/_app.js
index 1e1cec92425c8b3..048541e25b1dd21 100644
--- a/packages/create-next-app/templates/default/js/pages/_app.js
+++ b/packages/create-next-app/templates/default/js/pages/_app.js
@@ -1,7 +1,5 @@
import '../styles/globals.css'
-function MyApp({ Component, pageProps }) {
+export default function App({ Component, pageProps }) {
return
}
-
-export default MyApp
diff --git a/packages/create-next-app/templates/default/js/pages/_document.js b/packages/create-next-app/templates/default/js/pages/_document.js
new file mode 100644
index 000000000000000..54e8bf3e2a29015
--- /dev/null
+++ b/packages/create-next-app/templates/default/js/pages/_document.js
@@ -0,0 +1,13 @@
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+ return (
+
+
+
+
+
+
+
+ )
+}
diff --git a/packages/create-next-app/templates/default/js/pages/index.js b/packages/create-next-app/templates/default/js/pages/index.js
index 5bf5574341670a5..dc5a1cce79a7da7 100644
--- a/packages/create-next-app/templates/default/js/pages/index.js
+++ b/packages/create-next-app/templates/default/js/pages/index.js
@@ -1,71 +1,123 @@
import Head from 'next/head'
import Image from 'next/image'
+import { Inter } from '@next/font/google'
import styles from '../styles/Home.module.css'
+const inter = Inter({ subsets: ['latin'] })
+
export default function Home() {
return (
-
+ <>
Create Next App
+
-
-
+
+
+ Get started by editing
+ pages/index.js
+
+
+
-
- Get started by editing{' '}
- pages/index.js
-
+
-
-
-
+ >
)
}
diff --git a/packages/create-next-app/templates/default/js/public/next.svg b/packages/create-next-app/templates/default/js/public/next.svg
new file mode 100644
index 000000000000000..5174b28c565c285
--- /dev/null
+++ b/packages/create-next-app/templates/default/js/public/next.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/create-next-app/templates/default/js/public/thirteen.svg b/packages/create-next-app/templates/default/js/public/thirteen.svg
new file mode 100644
index 000000000000000..8977c1bd123cbe4
--- /dev/null
+++ b/packages/create-next-app/templates/default/js/public/thirteen.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/create-next-app/templates/default/js/public/vercel.svg b/packages/create-next-app/templates/default/js/public/vercel.svg
index fbf0e25a651c289..d2f84222734f27b 100644
--- a/packages/create-next-app/templates/default/js/public/vercel.svg
+++ b/packages/create-next-app/templates/default/js/public/vercel.svg
@@ -1,4 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/packages/create-next-app/templates/default/js/styles/Home.module.css b/packages/create-next-app/templates/default/js/styles/Home.module.css
index bd50f42ffe6a26e..27dfff5ec4cf882 100644
--- a/packages/create-next-app/templates/default/js/styles/Home.module.css
+++ b/packages/create-next-app/templates/default/js/styles/Home.module.css
@@ -1,129 +1,278 @@
-.container {
- padding: 0 2rem;
-}
-
.main {
- min-height: 100vh;
- padding: 4rem 0;
- flex: 1;
display: flex;
flex-direction: column;
- justify-content: center;
+ justify-content: space-between;
align-items: center;
+ padding: 6rem;
+ min-height: 100vh;
}
-.footer {
- display: flex;
- flex: 1;
- padding: 2rem 0;
- border-top: 1px solid #eaeaea;
- justify-content: center;
- align-items: center;
+.description {
+ display: inherit;
+ justify-content: inherit;
+ align-items: inherit;
+ font-size: 0.85rem;
+ max-width: var(--max-width);
+ width: 100%;
+ z-index: 2;
+ font-family: var(--font-mono);
}
-.footer a {
+.description a {
display: flex;
justify-content: center;
align-items: center;
- flex-grow: 1;
+ gap: 0.5rem;
}
-.title a {
- color: #0070f3;
- text-decoration: none;
+.description p {
+ position: relative;
+ margin: 0;
+ padding: 1rem;
+ background-color: rgba(var(--callout-rgb), 0.5);
+ border: 1px solid rgba(var(--callout-border-rgb), 0.3);
+ border-radius: var(--border-radius);
}
-.title a:hover,
-.title a:focus,
-.title a:active {
- text-decoration: underline;
+.code {
+ font-weight: 700;
+ font-family: var(--font-mono);
}
-.title {
- margin: 0;
- line-height: 1.15;
- font-size: 4rem;
+.grid {
+ display: grid;
+ grid-template-columns: repeat(4, minmax(25%, auto));
+ width: var(--max-width);
+ max-width: 100%;
}
-.title,
-.description {
- text-align: center;
+.card {
+ padding: 1rem 1.2rem;
+ border-radius: var(--border-radius);
+ background: rgba(var(--card-rgb), 0);
+ border: 1px solid rgba(var(--card-border-rgb), 0);
+ transition: background 200ms, border 200ms;
}
-.description {
- margin: 4rem 0;
- line-height: 1.5;
- font-size: 1.5rem;
+.card span {
+ display: inline-block;
+ transition: transform 200ms;
}
-.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;
+.card h2 {
+ font-weight: 600;
+ margin-bottom: 0.7rem;
}
-.grid {
+.card p {
+ margin: 0;
+ opacity: 0.6;
+ font-size: 0.9rem;
+ line-height: 1.5;
+ max-width: 30ch;
+}
+
+.center {
display: flex;
+ justify-content: center;
align-items: center;
+ position: relative;
+ padding: 4rem 0;
+}
+
+.center::before {
+ background: var(--secondary-glow);
+ border-radius: 50%;
+ width: 480px;
+ height: 360px;
+ margin-left: -400px;
+}
+
+.center::after {
+ background: var(--primary-glow);
+ width: 240px;
+ height: 180px;
+ z-index: -1;
+}
+
+.center::before,
+.center::after {
+ content: '';
+ left: 50%;
+ position: absolute;
+ filter: blur(45px);
+ transform: translateZ(0);
+}
+
+.logo,
+.thirteen {
+ position: relative;
+}
+
+.thirteen {
+ display: flex;
justify-content: center;
- flex-wrap: wrap;
- max-width: 800px;
+ align-items: center;
+ width: 75px;
+ height: 75px;
+ padding: 25px 10px;
+ margin-left: 16px;
+ transform: translateZ(0);
+ border-radius: var(--border-radius);
+ overflow: hidden;
+ box-shadow: 0px 2px 8px -1px #0000001a;
}
-.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;
+.thirteen::before,
+.thirteen::after {
+ content: '';
+ position: absolute;
+ z-index: -1;
}
-.card:hover,
-.card:focus,
-.card:active {
- color: #0070f3;
- border-color: #0070f3;
+/* Conic Gradient Animation */
+.thirteen::before {
+ animation: 6s rotate linear infinite;
+ width: 200%;
+ height: 200%;
+ background: var(--tile-border);
}
-.card h2 {
- margin: 0 0 1rem 0;
- font-size: 1.5rem;
+/* Inner Square */
+.thirteen::after {
+ inset: 0;
+ padding: 1px;
+ border-radius: var(--border-radius);
+ background: linear-gradient(
+ to bottom right,
+ rgba(var(--tile-start-rgb), 1),
+ rgba(var(--tile-end-rgb), 1)
+ );
+ background-clip: content-box;
}
-.card p {
- margin: 0;
- font-size: 1.25rem;
- line-height: 1.5;
+/* Enable hover only on non-touch devices */
+@media (hover: hover) and (pointer: fine) {
+ .card:hover {
+ background: rgba(var(--card-rgb), 0.1);
+ border: 1px solid rgba(var(--card-border-rgb), 0.15);
+ }
+
+ .card:hover span {
+ transform: translateX(4px);
+ }
}
-.logo {
- height: 1em;
- margin-left: 0.5rem;
+@media (prefers-reduced-motion) {
+ .thirteen::before {
+ animation: none;
+ }
+
+ .card:hover span {
+ transform: none;
+ }
}
-@media (max-width: 600px) {
+/* Mobile */
+@media (max-width: 700px) {
+ .content {
+ padding: 4rem;
+ }
+
.grid {
+ grid-template-columns: 1fr;
+ margin-bottom: 120px;
+ max-width: 320px;
+ text-align: center;
+ }
+
+ .card {
+ padding: 1rem 2.5rem;
+ }
+
+ .card h2 {
+ margin-bottom: 0.5rem;
+ }
+
+ .center {
+ padding: 8rem 0 6rem;
+ }
+
+ .center::before {
+ transform: none;
+ height: 300px;
+ }
+
+ .description {
+ font-size: 0.8rem;
+ }
+
+ .description a {
+ padding: 1rem;
+ }
+
+ .description p,
+ .description div {
+ display: flex;
+ justify-content: center;
+ position: fixed;
width: 100%;
- flex-direction: column;
+ }
+
+ .description p {
+ align-items: center;
+ inset: 0 0 auto;
+ padding: 2rem 1rem 1.4rem;
+ border-radius: 0;
+ border: none;
+ border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
+ background: linear-gradient(
+ to bottom,
+ rgba(var(--background-start-rgb), 1),
+ rgba(var(--callout-rgb), 0.5)
+ );
+ background-clip: padding-box;
+ backdrop-filter: blur(24px);
+ }
+
+ .description div {
+ align-items: flex-end;
+ pointer-events: none;
+ inset: auto 0 0;
+ padding: 2rem;
+ height: 200px;
+ background: linear-gradient(
+ to bottom,
+ transparent 0%,
+ rgb(var(--background-end-rgb)) 40%
+ );
+ z-index: 1;
+ }
+}
+
+/* Tablet and Smaller Desktop */
+@media (min-width: 701px) and (max-width: 1120px) {
+ .grid {
+ grid-template-columns: repeat(2, 50%);
}
}
@media (prefers-color-scheme: dark) {
- .card,
- .footer {
- border-color: #222;
+ .vercelLogo {
+ filter: invert(1);
}
- .code {
- background: #111;
+
+ .logo,
+ .thirteen img {
+ filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
}
- .logo img {
- filter: invert(1);
+}
+
+@keyframes rotate {
+ from {
+ transform: rotate(360deg);
+ }
+ to {
+ transform: rotate(0deg);
}
}
diff --git a/packages/create-next-app/templates/default/js/styles/globals.css b/packages/create-next-app/templates/default/js/styles/globals.css
index 4f1842163d2220c..3a54ccd80be4277 100644
--- a/packages/create-next-app/templates/default/js/styles/globals.css
+++ b/packages/create-next-app/templates/default/js/styles/globals.css
@@ -1,9 +1,98 @@
-html,
-body {
+:root {
+ --max-width: 1100px;
+ --border-radius: 12px;
+ --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
+ 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
+ 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
+
+ --foreground-rgb: 0, 0, 0;
+ --background-start-rgb: 214, 219, 220;
+ --background-end-rgb: 255, 255, 255;
+
+ --primary-glow: conic-gradient(
+ from 180deg at 50% 50%,
+ #16abff33 0deg,
+ #0885ff33 55deg,
+ #54d6ff33 120deg,
+ #0071ff33 160deg,
+ transparent 360deg
+ );
+ --secondary-glow: radial-gradient(
+ rgba(255, 255, 255, 1),
+ rgba(255, 255, 255, 0)
+ );
+
+ --tile-start-rgb: 239, 245, 249;
+ --tile-end-rgb: 228, 232, 233;
+ --tile-border: conic-gradient(
+ #00000080,
+ #00000040,
+ #00000030,
+ #00000020,
+ #00000010,
+ #00000010,
+ #00000080
+ );
+
+ --callout-rgb: 238, 240, 241;
+ --callout-border-rgb: 172, 175, 176;
+ --card-rgb: 180, 185, 188;
+ --card-border-rgb: 131, 134, 135;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --foreground-rgb: 255, 255, 255;
+ --background-start-rgb: 0, 0, 0;
+ --background-end-rgb: 0, 0, 0;
+
+ --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
+ --secondary-glow: linear-gradient(
+ to bottom right,
+ rgba(1, 65, 255, 0),
+ rgba(1, 65, 255, 0),
+ rgba(1, 65, 255, 0.3)
+ );
+
+ --tile-start-rgb: 2, 13, 46;
+ --tile-end-rgb: 2, 5, 19;
+ --tile-border: conic-gradient(
+ #ffffff80,
+ #ffffff40,
+ #ffffff30,
+ #ffffff20,
+ #ffffff10,
+ #ffffff10,
+ #ffffff80
+ );
+
+ --callout-rgb: 20, 20, 20;
+ --callout-border-rgb: 108, 108, 108;
+ --card-rgb: 100, 100, 100;
+ --card-border-rgb: 200, 200, 200;
+ }
+}
+
+* {
+ box-sizing: border-box;
padding: 0;
margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
- Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+}
+
+html,
+body {
+ max-width: 100vw;
+ overflow-x: hidden;
+}
+
+body {
+ color: rbg(--foreground-rgb);
+ background: linear-gradient(
+ to bottom,
+ transparent,
+ rgb(var(--background-end-rgb))
+ )
+ rgb(var(--background-start-rgb));
}
a {
@@ -11,16 +100,8 @@ a {
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/default/ts/pages/_document.tsx b/packages/create-next-app/templates/default/ts/pages/_document.tsx
new file mode 100644
index 000000000000000..54e8bf3e2a29015
--- /dev/null
+++ b/packages/create-next-app/templates/default/ts/pages/_document.tsx
@@ -0,0 +1,13 @@
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+ return (
+
+
+
+
+
+
+
+ )
+}
diff --git a/packages/create-next-app/templates/default/ts/pages/index.tsx b/packages/create-next-app/templates/default/ts/pages/index.tsx
index cdffa57ca82541a..c08b1b34a0f94ac 100644
--- a/packages/create-next-app/templates/default/ts/pages/index.tsx
+++ b/packages/create-next-app/templates/default/ts/pages/index.tsx
@@ -1,71 +1,123 @@
import Head from 'next/head'
import Image from 'next/image'
+import { Inter } from '@next/font/google'
import styles from '../styles/Home.module.css'
+const inter = Inter({ subsets: ['latin'] })
+
export default function Home() {
return (
-
+ <>
Create Next App
+
-
-
+
+
+ Get started by editing
+ pages/index.tsx
+
+
+
-
- Get started by editing{' '}
- pages/index.tsx
-
+
-
-
-
+ >
)
}
diff --git a/packages/create-next-app/templates/default/ts/public/next.svg b/packages/create-next-app/templates/default/ts/public/next.svg
new file mode 100644
index 000000000000000..5174b28c565c285
--- /dev/null
+++ b/packages/create-next-app/templates/default/ts/public/next.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/create-next-app/templates/default/ts/public/thirteen.svg b/packages/create-next-app/templates/default/ts/public/thirteen.svg
new file mode 100644
index 000000000000000..8977c1bd123cbe4
--- /dev/null
+++ b/packages/create-next-app/templates/default/ts/public/thirteen.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/create-next-app/templates/default/ts/public/vercel.svg b/packages/create-next-app/templates/default/ts/public/vercel.svg
index fbf0e25a651c289..d2f84222734f27b 100644
--- a/packages/create-next-app/templates/default/ts/public/vercel.svg
+++ b/packages/create-next-app/templates/default/ts/public/vercel.svg
@@ -1,4 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/packages/create-next-app/templates/default/ts/styles/Home.module.css b/packages/create-next-app/templates/default/ts/styles/Home.module.css
index bd50f42ffe6a26e..27dfff5ec4cf882 100644
--- a/packages/create-next-app/templates/default/ts/styles/Home.module.css
+++ b/packages/create-next-app/templates/default/ts/styles/Home.module.css
@@ -1,129 +1,278 @@
-.container {
- padding: 0 2rem;
-}
-
.main {
- min-height: 100vh;
- padding: 4rem 0;
- flex: 1;
display: flex;
flex-direction: column;
- justify-content: center;
+ justify-content: space-between;
align-items: center;
+ padding: 6rem;
+ min-height: 100vh;
}
-.footer {
- display: flex;
- flex: 1;
- padding: 2rem 0;
- border-top: 1px solid #eaeaea;
- justify-content: center;
- align-items: center;
+.description {
+ display: inherit;
+ justify-content: inherit;
+ align-items: inherit;
+ font-size: 0.85rem;
+ max-width: var(--max-width);
+ width: 100%;
+ z-index: 2;
+ font-family: var(--font-mono);
}
-.footer a {
+.description a {
display: flex;
justify-content: center;
align-items: center;
- flex-grow: 1;
+ gap: 0.5rem;
}
-.title a {
- color: #0070f3;
- text-decoration: none;
+.description p {
+ position: relative;
+ margin: 0;
+ padding: 1rem;
+ background-color: rgba(var(--callout-rgb), 0.5);
+ border: 1px solid rgba(var(--callout-border-rgb), 0.3);
+ border-radius: var(--border-radius);
}
-.title a:hover,
-.title a:focus,
-.title a:active {
- text-decoration: underline;
+.code {
+ font-weight: 700;
+ font-family: var(--font-mono);
}
-.title {
- margin: 0;
- line-height: 1.15;
- font-size: 4rem;
+.grid {
+ display: grid;
+ grid-template-columns: repeat(4, minmax(25%, auto));
+ width: var(--max-width);
+ max-width: 100%;
}
-.title,
-.description {
- text-align: center;
+.card {
+ padding: 1rem 1.2rem;
+ border-radius: var(--border-radius);
+ background: rgba(var(--card-rgb), 0);
+ border: 1px solid rgba(var(--card-border-rgb), 0);
+ transition: background 200ms, border 200ms;
}
-.description {
- margin: 4rem 0;
- line-height: 1.5;
- font-size: 1.5rem;
+.card span {
+ display: inline-block;
+ transition: transform 200ms;
}
-.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;
+.card h2 {
+ font-weight: 600;
+ margin-bottom: 0.7rem;
}
-.grid {
+.card p {
+ margin: 0;
+ opacity: 0.6;
+ font-size: 0.9rem;
+ line-height: 1.5;
+ max-width: 30ch;
+}
+
+.center {
display: flex;
+ justify-content: center;
align-items: center;
+ position: relative;
+ padding: 4rem 0;
+}
+
+.center::before {
+ background: var(--secondary-glow);
+ border-radius: 50%;
+ width: 480px;
+ height: 360px;
+ margin-left: -400px;
+}
+
+.center::after {
+ background: var(--primary-glow);
+ width: 240px;
+ height: 180px;
+ z-index: -1;
+}
+
+.center::before,
+.center::after {
+ content: '';
+ left: 50%;
+ position: absolute;
+ filter: blur(45px);
+ transform: translateZ(0);
+}
+
+.logo,
+.thirteen {
+ position: relative;
+}
+
+.thirteen {
+ display: flex;
justify-content: center;
- flex-wrap: wrap;
- max-width: 800px;
+ align-items: center;
+ width: 75px;
+ height: 75px;
+ padding: 25px 10px;
+ margin-left: 16px;
+ transform: translateZ(0);
+ border-radius: var(--border-radius);
+ overflow: hidden;
+ box-shadow: 0px 2px 8px -1px #0000001a;
}
-.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;
+.thirteen::before,
+.thirteen::after {
+ content: '';
+ position: absolute;
+ z-index: -1;
}
-.card:hover,
-.card:focus,
-.card:active {
- color: #0070f3;
- border-color: #0070f3;
+/* Conic Gradient Animation */
+.thirteen::before {
+ animation: 6s rotate linear infinite;
+ width: 200%;
+ height: 200%;
+ background: var(--tile-border);
}
-.card h2 {
- margin: 0 0 1rem 0;
- font-size: 1.5rem;
+/* Inner Square */
+.thirteen::after {
+ inset: 0;
+ padding: 1px;
+ border-radius: var(--border-radius);
+ background: linear-gradient(
+ to bottom right,
+ rgba(var(--tile-start-rgb), 1),
+ rgba(var(--tile-end-rgb), 1)
+ );
+ background-clip: content-box;
}
-.card p {
- margin: 0;
- font-size: 1.25rem;
- line-height: 1.5;
+/* Enable hover only on non-touch devices */
+@media (hover: hover) and (pointer: fine) {
+ .card:hover {
+ background: rgba(var(--card-rgb), 0.1);
+ border: 1px solid rgba(var(--card-border-rgb), 0.15);
+ }
+
+ .card:hover span {
+ transform: translateX(4px);
+ }
}
-.logo {
- height: 1em;
- margin-left: 0.5rem;
+@media (prefers-reduced-motion) {
+ .thirteen::before {
+ animation: none;
+ }
+
+ .card:hover span {
+ transform: none;
+ }
}
-@media (max-width: 600px) {
+/* Mobile */
+@media (max-width: 700px) {
+ .content {
+ padding: 4rem;
+ }
+
.grid {
+ grid-template-columns: 1fr;
+ margin-bottom: 120px;
+ max-width: 320px;
+ text-align: center;
+ }
+
+ .card {
+ padding: 1rem 2.5rem;
+ }
+
+ .card h2 {
+ margin-bottom: 0.5rem;
+ }
+
+ .center {
+ padding: 8rem 0 6rem;
+ }
+
+ .center::before {
+ transform: none;
+ height: 300px;
+ }
+
+ .description {
+ font-size: 0.8rem;
+ }
+
+ .description a {
+ padding: 1rem;
+ }
+
+ .description p,
+ .description div {
+ display: flex;
+ justify-content: center;
+ position: fixed;
width: 100%;
- flex-direction: column;
+ }
+
+ .description p {
+ align-items: center;
+ inset: 0 0 auto;
+ padding: 2rem 1rem 1.4rem;
+ border-radius: 0;
+ border: none;
+ border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
+ background: linear-gradient(
+ to bottom,
+ rgba(var(--background-start-rgb), 1),
+ rgba(var(--callout-rgb), 0.5)
+ );
+ background-clip: padding-box;
+ backdrop-filter: blur(24px);
+ }
+
+ .description div {
+ align-items: flex-end;
+ pointer-events: none;
+ inset: auto 0 0;
+ padding: 2rem;
+ height: 200px;
+ background: linear-gradient(
+ to bottom,
+ transparent 0%,
+ rgb(var(--background-end-rgb)) 40%
+ );
+ z-index: 1;
+ }
+}
+
+/* Tablet and Smaller Desktop */
+@media (min-width: 701px) and (max-width: 1120px) {
+ .grid {
+ grid-template-columns: repeat(2, 50%);
}
}
@media (prefers-color-scheme: dark) {
- .card,
- .footer {
- border-color: #222;
+ .vercelLogo {
+ filter: invert(1);
}
- .code {
- background: #111;
+
+ .logo,
+ .thirteen img {
+ filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
}
- .logo img {
- filter: invert(1);
+}
+
+@keyframes rotate {
+ from {
+ transform: rotate(360deg);
+ }
+ to {
+ transform: rotate(0deg);
}
}
diff --git a/packages/create-next-app/templates/default/ts/styles/globals.css b/packages/create-next-app/templates/default/ts/styles/globals.css
index 4f1842163d2220c..3a54ccd80be4277 100644
--- a/packages/create-next-app/templates/default/ts/styles/globals.css
+++ b/packages/create-next-app/templates/default/ts/styles/globals.css
@@ -1,9 +1,98 @@
-html,
-body {
+:root {
+ --max-width: 1100px;
+ --border-radius: 12px;
+ --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
+ 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
+ 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
+
+ --foreground-rgb: 0, 0, 0;
+ --background-start-rgb: 214, 219, 220;
+ --background-end-rgb: 255, 255, 255;
+
+ --primary-glow: conic-gradient(
+ from 180deg at 50% 50%,
+ #16abff33 0deg,
+ #0885ff33 55deg,
+ #54d6ff33 120deg,
+ #0071ff33 160deg,
+ transparent 360deg
+ );
+ --secondary-glow: radial-gradient(
+ rgba(255, 255, 255, 1),
+ rgba(255, 255, 255, 0)
+ );
+
+ --tile-start-rgb: 239, 245, 249;
+ --tile-end-rgb: 228, 232, 233;
+ --tile-border: conic-gradient(
+ #00000080,
+ #00000040,
+ #00000030,
+ #00000020,
+ #00000010,
+ #00000010,
+ #00000080
+ );
+
+ --callout-rgb: 238, 240, 241;
+ --callout-border-rgb: 172, 175, 176;
+ --card-rgb: 180, 185, 188;
+ --card-border-rgb: 131, 134, 135;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --foreground-rgb: 255, 255, 255;
+ --background-start-rgb: 0, 0, 0;
+ --background-end-rgb: 0, 0, 0;
+
+ --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
+ --secondary-glow: linear-gradient(
+ to bottom right,
+ rgba(1, 65, 255, 0),
+ rgba(1, 65, 255, 0),
+ rgba(1, 65, 255, 0.3)
+ );
+
+ --tile-start-rgb: 2, 13, 46;
+ --tile-end-rgb: 2, 5, 19;
+ --tile-border: conic-gradient(
+ #ffffff80,
+ #ffffff40,
+ #ffffff30,
+ #ffffff20,
+ #ffffff10,
+ #ffffff10,
+ #ffffff80
+ );
+
+ --callout-rgb: 20, 20, 20;
+ --callout-border-rgb: 108, 108, 108;
+ --card-rgb: 100, 100, 100;
+ --card-border-rgb: 200, 200, 200;
+ }
+}
+
+* {
+ box-sizing: border-box;
padding: 0;
margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
- Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+}
+
+html,
+body {
+ max-width: 100vw;
+ overflow-x: hidden;
+}
+
+body {
+ color: rbg(--foreground-rgb);
+ background: linear-gradient(
+ to bottom,
+ transparent,
+ rgb(var(--background-end-rgb))
+ )
+ rgb(var(--background-start-rgb));
}
a {
@@ -11,16 +100,8 @@ a {
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/index.ts b/packages/create-next-app/templates/index.ts
index 0863fc87f46cb73..77cb9bd06664247 100644
--- a/packages/create-next-app/templates/index.ts
+++ b/packages/create-next-app/templates/index.ts
@@ -62,7 +62,7 @@ export const installTemplate = async ({
/**
* Default dependencies.
*/
- const dependencies = ['react', 'react-dom', 'next']
+ const dependencies = ['react', 'react-dom', 'next', '@next/font']
/**
* TypeScript projects will have type definitions and other devDependencies.
*/
diff --git a/test/integration/create-next-app/lib/specification.ts b/test/integration/create-next-app/lib/specification.ts
index dbdfd610aab0922..ea529cabe9aec18 100644
--- a/test/integration/create-next-app/lib/specification.ts
+++ b/test/integration/create-next-app/lib/specification.ts
@@ -28,7 +28,14 @@ export const projectSpecification: ProjectSpecification = {
'node_modules/next',
'.gitignore',
],
- deps: ['next', 'react', 'react-dom', 'eslint', 'eslint-config-next'],
+ deps: [
+ 'next',
+ '@next/font',
+ 'react',
+ 'react-dom',
+ 'eslint',
+ 'eslint-config-next',
+ ],
devDeps: [],
},
default: {