Estado inicial: frontend React + backend Laravel

frontend-plataforma-tutoriais/src/index.css

@@ -0,0 +1,178 @@
+:root {
+  --primary-color: #B20112;
+  --secondary-color: #C4534A;
+  --tertiary-color: #0054B0;
+  --success-color: #08a35d;
+  --neutral-color: #8A716E;
+  --primary-contrast-color: #410002;
+
+  --text-primary-color: var(--primary-color);
+  --text-secondary-color: var(--secondary-color);
+  --text-tertiary-color: var(--tertiary-color);
+  --text-neutral-color: var(--neutral-color);
+  --text-primary-contrast-color: var(--primary-contrast-color);
+  --text-white: #ffffff;
+  --text-black: #000000;
+
+  --size-font-title: 2.2rem;
+  --size-font-subtitle: 1.7rem;
+  --size-font-text: 1.2rem;
+  --size-font-small: 1rem;
+
+  
+  --border-radius: 15px;
+  --border-radius-input: 5px;
+  --border-radius-button: 10px;
+  --border-primary-color: var(--primary-color);
+  --border-secondary-color: var(--secondary-color);
+  --border-tertiary-color: var(--tertiary-color);
+  --border-neutral-color: var(--neutral-color);
+
+  --bg-white: #ffffff;
+  --bg-grey: #F3F3F3;
+  --bg-primary-color: var(--primary-color);
+  --bg-primary-color-opacity: #FFEDEA;
+  --bg-secondary-color: var(--secondary-color);
+  --bg-tertiary-color: var(--tertiary-color);
+  --bg-tertiary-color-opacity: #CFE2FF;
+  --bg-success-color-opacity: #D1E7DD;
+  --bg-neutral-color: var(--neutral-color);
+  --bg-gradient: linear-gradient(135deg, #b20112 0%, #8e010e 100%);
+
+  --text-h: #08060d;
+  --bg: #fff;
+  --border: #e5e4e7;
+  --code-bg: #f4f3ec;
+  --accent: #aa3bff;
+  --accent-bg: rgba(170, 59, 255, 0.1);
+  --accent-border: rgba(170, 59, 255, 0.5);
+  --social-bg: rgba(244, 243, 236, 0.5);
+  --shadow:rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
+  --shadow-primary:0 4px 10px rgba(178, 1, 18, 0.4), 0 2px 6px rgba(142, 1, 14, 0.3);;
+
+  --font-family: 'Manrope', sans-serif;
+
+  font: 18px/145% var(--sans);
+  letter-spacing: 0.18px;
+  color-scheme: light dark;
+  color: var(--text);
+  background: var(--bg);
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  @media (max-width: 1024px) {
+    font-size: 16px;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --text: #9ca3af;
+    --text-h: #f3f4f6;
+    --bg: #16171d;
+    --border: #2e303a;
+    --code-bg: #1f2028;
+    --accent: #c084fc;
+    --accent-bg: rgba(192, 132, 252, 0.15);
+    --accent-border: rgba(192, 132, 252, 0.5);
+    --social-bg: rgba(47, 48, 58, 0.5);
+    --shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+  }
+
+  #social .button-icon {
+    filter: invert(1) brightness(2);
+  }
+}
+
+#root {
+  max-width: 100%;
+  margin: 0 auto;
+  text-align: center;
+  border-inline: 1px solid var(--border);
+  min-height: 100svh;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  background: var(--bg-white);
+}
+
+*{
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+  margin: 0;
+  font-family: var(--font-family);
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+h1,
+h2 {
+  font-weight: 500;
+  color: var(--text-h);
+}
+
+h1 {
+  font-size: 56px;
+  letter-spacing: -1.68px;
+  margin: 32px 0;
+  @media (max-width: 1024px) {
+    font-size: 36px;
+    margin: 20px 0;
+  }
+}
+h2 {
+  font-size: 24px;
+  line-height: 118%;
+  letter-spacing: -0.24px;
+  margin: 0 0 8px;
+  @media (max-width: 1024px) {
+    font-size: 20px;
+  }
+}
+p {
+  margin: 0;
+}
+
+code,
+.counter {
+  display: inline-flex;
+  border-radius: 4px;
+  color: var(--text-h);
+}
+
+code {
+  font-size: 15px;
+  line-height: 135%;
+  padding: 4px 8px;
+  background: var(--code-bg);
+}
+
+/* Pagination */
+html body .pagination .page-item.active .page-link {
+    background-color: var(--bg-primary-color-opacity) !important;
+    border-color: var(--border-primary-color) !important;
+    color: var(--text-primary-color) !important;
+}
+
+.page-link{
+    color: var(--text-neutral-color) !important;
+}
+
+input:focus,
+textarea:focus,
+select:focus,
+button:focus {
+  outline: none !important;
+  box-shadow: none !important;
+  border: none;
+}
+  
+
+