feat: new index (t3-oss#711)

* new index * fix missing closing tag * no margin on headings * feat: add changeset * bigger text and wider button (css module) * bigger text and wider button (tailwind) * shorter secret message Co-authored-by: Julius Marminge <[email protected]>
devvianto605 · Nov 16, 2022 · f641d70 · f641d70
1 parent 3713585
commit f641d70
Show file tree

Hide file tree

Showing 9 changed files with 237 additions and 526 deletions.
diff --git a/.changeset/honest-hornets-march.md b/.changeset/honest-hornets-march.md
@@ -0,0 +1,5 @@
+---
+"create-t3-app": minor
+---
+
+create new index pages
diff --git a/cli/template/addons/trpc/auth-router.ts b/cli/template/addons/trpc/auth-router.ts
@@ -5,6 +5,6 @@ export const authRouter = router({
     return ctx.session;
   }),
   getSecretMessage: protectedProcedure.query(() => {
-    return "You are logged in and can see this secret message!";
+    return "you can see this secret message!";
   }),
 });
diff --git a/cli/template/base/src/pages/index.module.css b/cli/template/base/src/pages/index.module.css
@@ -1,196 +1,149 @@
-.containerOuter {
-  --color-gray-500: rgba(107, 114, 128, 100%);
-  --color-gray-600: rgba(75, 85, 99, 100%);
-  --color-gray-700: rgba(55, 65, 81, 100%);
-  --color-purple-300: rgba(216, 180, 254, 100%);
-  --color-blue-500: rgba(59, 130, 246, 100%);
-  --color-violet-500: rgba(139, 92, 246, 100%);
-  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
-    0 8px 10px -6px rgb(0 0 0 / 0.1);
-
+.main {
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  width: 100vw;
   min-height: 100vh;
+  background-image: linear-gradient(to bottom, #2e026d, #15162c);
 }
 
-.containerInner {
+.container {
   width: 100%;
-  min-height: 100vh;
-  padding: 16px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
-    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  gap: 3rem;
+  padding: 4rem 1rem;
 }
 
 @media (min-width: 640px) {
-  .containerInner {
+  .container {
     max-width: 640px;
   }
 }
 
 @media (min-width: 768px) {
-  .containerInner {
+  .container {
     max-width: 768px;
   }
 }
 
 @media (min-width: 1024px) {
-  .containerInner {
+  .container {
     max-width: 1024px;
   }
 }
 
 @media (min-width: 1280px) {
-  .containerInner {
+  .container {
     max-width: 1280px;
   }
 }
 
 @media (min-width: 1536px) {
-  .containerInner {
+  .container {
     max-width: 1536px;
   }
 }
 
 .title {
-  margin: 0;
   font-size: 3rem;
+  line-height: 1;
   font-weight: 800;
-  line-height: 1.5;
-  color: var(--color-gray-700);
+  letter-spacing: -0.025em;
+  margin: 0;
+  color: white;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 640px) {
   .title {
     font-size: 5rem;
   }
 }
 
-.titlePink {
-  color: var(--color-purple-300);
-}
-
-.subtitle {
-  margin: 0;
-  color: var(--color-gray-700);
-  font-weight: 400;
-  font-size: 1.5rem;
-  line-height: 2rem;
+.pinkSpan {
+  color: hsl(280 100% 70%);
 }
 
-.cardGrid {
+.cardRow {
   display: grid;
-  gap: 0.75rem;
-  padding-top: 0.75rem;
-  margin-top: 0.75rem;
-  text-align: center;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: 1rem;
 }
 
-@media (min-width: 768px) {
-  .cardGrid {
+@media (min-width: 640px) {
+  .cardRow {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 
-@media (min-width: 1024px) {
-  .cardGrid {
-    width: calc(200% / 3);
+@media (min-width: 768px) {
+  .cardRow {
+    gap: 2rem;
   }
 }
 
 .card {
+  max-width: 20rem;
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  padding: 1.5rem;
-  transition-duration: 500ms;
-  border: 2px solid var(--color-gray-500);
-  border-radius: 0.25rem;
-  box-shadow: var(--tw-shadow);
+  gap: 1rem;
+  padding: 1rem;
+  border-radius: 0.75rem;
+  color: white;
+  background-color: rgb(255 255 255 / 0.1);
 }
 
 .card:hover {
-  transform: scale(1.05);
-}
-
-@media (prefers-reduced-motion) {
-  .card:hover {
-    transform: none;
-  }
+  background-color: rgb(255 255 255 / 0.2);
+  transition: background-color 150ms cubic-bezier(0.5, 0, 0.2, 1);
 }
 
 .cardTitle {
+  font-size: 1.5rem;
+  line-height: 2rem;
+  font-weight: 700;
   margin: 0;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  font-weight: 400;
-  color: var(--color-gray-500);
-}
-
-.cardDescription {
-  margin: 0;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  color: var(--color-gray-600);
 }
 
-.cardDocumentation {
-  margin-top: 0.75rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  text-decoration-line: underline;
-  -webkit-text-decoration-line: underline;
-  text-decoration-style: dotted;
-  -webkit-text-decoration-style: dotted;
-  text-underline-offset: 2px;
-  color: var(--color-violet-500);
+.cardText {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
 }
 
-.helloFrom {
-  padding-top: 1.5rem;
-  font-size: 1.5rem;
-  line-height: 2rem;
-  color: var(--color-blue-500);
+.showcaseContainer {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  justify-content: center;
-  width: 100%;
+  gap: 0.5rem;
 }
 
-.helloFrom p {
-  margin: 0;
+.showcaseText {
+  color: white;
+  text-align: center;
+  font-size: 1.5rem;
+  line-height: 2rem;
 }
 
-.authShowcase {
-  margin: 2rem;
+.authContainer {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 16px;
-}
-
-.loginInfo {
-  color: var(--color-blue-500);
-  font-size: 1.5rem;
-  line-height: 2rem;
+  justify-content: center;
+  gap: 1rem;
 }
 
-.signInButton {
-  padding: 0.5rem 1rem;
-  border: 1px solid black;
-  background-color: rgba(245, 243, 255, 100%);
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-  border-radius: 0.375rem;
-  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+.loginButton {
+  border-radius: 9999px;
+  background-color: rgb(255 255 255 / 0.1);
+  padding: 0.75rem 2.5rem;
+  font-weight: 600;
+  color: white;
+  text-decoration-line: none;
+  transition: background-color 150ms cubic-bezier(0.5, 0, 0.2, 1);
 }
 
-.signInButton:hover {
-  background-color: rgba(237, 233, 254, 100%);
+.loginButton:hover {
+  background-color: rgb(255 255 255 / 0.2);
 }
diff --git a/cli/template/base/src/pages/index.tsx b/cli/template/base/src/pages/index.tsx
@@ -1,9 +1,8 @@
+import styles from "./index.module.css";
 import { type NextPage } from "next";
 import Head from "next/head";
 import Link from "next/link";
 
-import styles from "./index.module.css";
-
 const Home: NextPage = () => {
   return (
     <>
@@ -12,76 +11,31 @@ const Home: NextPage = () => {
         <meta name="description" content="Generated by create-t3-app" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <div className={styles.containerOuter}>
-        <div className={styles.containerInner}>
+      <main className={styles.main}>
+        <div className={styles.container}>
           <h1 className={styles.title}>
-            Create <span className={styles.titlePink}>T3</span> App
+            Create <span className={styles.pinkSpan}>T3</span> App
           </h1>
-
-          <h3 className={styles.subtitle}>This stack uses:</h3>
-          <div className={styles.cardGrid}>
-            <TechnologyCard
-              name="NextJS"
-              description="The React framework for production"
-              documentation="https://nextjs.org/"
-            />
-            <TechnologyCard
-              name="TypeScript"
-              description="Strongly typed programming language that builds on JavaScript, giving you better tooling at any scale"
-              documentation="https://www.typescriptlang.org/"
-            />
-            <TechnologyCard
-              name="TailwindCSS"
-              description="Rapidly build modern websites without ever leaving your HTML"
-              documentation="https://tailwindcss.com/"
-            />
-            <TechnologyCard
-              name="tRPC"
-              description="End-to-end typesafe APIs made easy"
-              documentation="https://trpc.io/"
-            />
-            <TechnologyCard
-              name="Next-Auth"
-              description="Authentication for Next.js"
-              documentation="https://next-auth.js.org/"
-            />
-            <TechnologyCard
-              name="Prisma"
-              description="Build data-driven JavaScript & TypeScript apps in less time"
-              documentation="https://www.prisma.io/docs/"
-            />
+          <div className={styles.cardRow}>
+            <Link className={styles.card} href="https://beta.nextjs.com">
+              <h3 className={styles.cardTitle}>First Steps →</h3>
+              <div className={styles.cardText}>
+                Just the basics - Everything you need to know to set up your
+                database and authentication.
+              </div>
+            </Link>
+            <Link className={styles.card} href="https://beta.nextjs.com">
+              <h3 className={styles.cardTitle}>Documentation →</h3>
+              <div className={styles.cardText}>
+                Learn more about Create T3 App, the libraries it uses, and how
+                to deploy it.
+              </div>
+            </Link>
           </div>
         </div>
-      </div>
+      </main>
     </>
   );
 };
 
 export default Home;
-
-type TechnologyCardProps = {
-  name: string;
-  description: string;
-  documentation: string;
-};
-
-const TechnologyCard: React.FC<TechnologyCardProps> = ({
-  name,
-  description,
-  documentation,
-}) => {
-  return (
-    <section className={styles.card}>
-      <h2 className={styles.cardTitle}>{name}</h2>
-      <p className={styles.cardDescription}>{description}</p>
-      <Link
-        className={styles.cardDocumentation}
-        href={documentation}
-        target="_blank"
-        rel="noreferrer"
-      >
-        Documentation
-      </Link>
-    </section>
-  );
-};