Split App into components and separate CSS blocks

package.json

@@ -14,7 +14,7 @@
   },
   "devDependencies": {
     "@cypress/react18": "^2.0.1",
-    "@mate-academy/scripts": "^1.8.5",
+    "@mate-academy/scripts": "^2.1.3",
     "@mate-academy/stylelint-config": "*",
     "@vitejs/plugin-react": "^4.3.1",
     "cypress": "^13.13.0",

src/components/Article/Article.css

@@ -1 +1,31 @@
 /* Put article styles here */
+.article {
+  margin: 5em auto 0;
+  padding: 1em;
+  font-size: 140%;
+  max-width: 800px;
+  background: white;
+  box-shadow: rgba(0, 0, 0, 0.05) 0 3px 15px;
+}
+
+.article__paragraph {
+  margin: 0;
+  color: #333;
+}
+
+.article__paragraph:not(:first-child) {
+  margin-top: 0.7em;
+}
+
+@media (min-width: 500px) {
+  .article {
+    margin: 3.5em auto 0;
+    padding: 2em;
+  }
+}
+
+@media (min-width: 800px) {
+  .article {
+    margin: 3.5em auto;
+  }
+}

src/components/Article/Article.jsx

@@ -3,3 +3,75 @@
 // Create an Article function returning the HTML of article block
 
 // Add a default export statement for Article component to use it in the other files
+import React from 'react';
+import './Article.css';
+
+function Article() {
+  return (
+    <article className="article">
+      <h2 className="article__title">Headline</h2>
+
+      <p className="article__paragraph">
+        In elementum lorem eget est euismod ornare. Phasellus sit amet
+        pellentesque mauris. Aliquam quis malesuada ex. Nullam eu aliquam nibh.
+        Mauris molestie, urna accumsan ornare semper, augue nibh posuere lorem,
+        vitae feugiat sem magna eget massa. Vivamus quis tincidunt dolor. Fusce
+        efficitur, orci non vestibulum consequat, lectus turpis bibendum odio,
+        in efficitur leo felis sed justo. Fusce commodo iaculis orci, quis
+        imperdiet urna. Sed mollis facilisis lacus non condimentum. Nunc
+        efficitur massa non neque elementum semper. Vestibulum lorem arcu,
+        tincidunt in quam et, feugiat venenatis augue. Donec sed tincidunt
+        tellus, a facilisis magna. Proin sit amet viverra nibh, bibendum gravida
+        felis. Vivamus ut nunc id mauris posuere pellentesque. Praesent
+        tincidunt id odio id feugiat.
+      </p>
+
+      <p className="article__paragraph">
+        In ac nisi lacus. Fusce est dolor, tincidunt ut bibendum vitae,
+        fermentum ac quam. Aliquam pretium tristique nibh quis iaculis. In et
+        cursus ex, eu aliquet ex. Proin facilisis lacus sit amet sapien
+        ultrices, ut vehicula arcu lobortis. Vivamus mollis ipsum ut hendrerit
+        molestie. Morbi lacinia, sapien eu dictum dignissim, tellus tortor
+        congue magna, sit amet bibendum libero nisi id massa.
+      </p>
+
+      <p className="article__paragraph">
+        Donec arcu elit, euismod vel lobortis eu, fringilla sit amet dolor. Cras
+        congue, massa nec sagittis mollis, dui felis ultrices magna, tincidunt
+        finibus lorem quam in sem. Morbi odio turpis, pulvinar sit amet
+        vulputate quis, ultricies eu libero. Donec ac maximus neque, nec maximus
+        nibh. Morbi rhoncus convallis urna, accumsan porta lorem hendrerit in.
+        Cras eget nisl dui. Morbi faucibus nisi eget ipsum semper vulputate.
+        Mauris nec tincidunt lectus. Aenean ac mi consequat velit dignissim
+        consectetur. Fusce placerat ac ipsum ac eleifend. Aenean quis faucibus
+        ex.
+      </p>
+
+      <p className="article__paragraph">
+        Cras egestas tempor nibh, a fermentum lorem sollicitudin non. Nulla
+        facilisi. In at elit id leo tristique condimentum. Donec at est nulla.
+        Mauris egestas magna ut laoreet pretium. Sed ultrices suscipit
+        vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        Fusce id sapien eros. Vivamus viverra ultricies gravida. Nam urna nibh,
+        blandit a vulputate at, vehicula non nulla. Aenean ut nulla leo.
+        Praesent in ullamcorper est.
+      </p>
+
+      <p className="article__paragraph">
+        Pellentesque habitant morbi tristique senectus et netus et malesuada
+        fames ac turpis egestas. Phasellus bibendum nec arcu eu lobortis. Nam
+        convallis faucibus ante sed porta. Nullam ut convallis elit, quis
+        venenatis nunc. Curabitur sed sem eget velit condimentum rutrum in et
+        orci. Nunc non suscipit eros. Suspendisse porta sem vel justo commodo
+        dictum. Aliquam erat ligula, fringilla nec suscipit sed, porta vitae
+        turpis. Vestibulum rhoncus placerat nulla vitae suscipit. Curabitur
+        consectetur ex ut odio tristique vehicula. Ut ligula tortor, tincidunt
+        quis sodales vitae, ornare a turpis. Proin sit amet finibus enim. Fusce
+        tempus a neque vitae tempor. Aenean rutrum, libero iaculis interdum
+        vulputate, dui eros vehicula nisi, at interdum enim lacus eu diam.
+      </p>
+    </article>
+  );
+}
+
+export default Article;

src/components/Header/Header.css

@@ -1 +1,28 @@
 /* Put header styles here */
+.header {
+  width: 100%;
+  padding: 1em;
+  font-size: 140%;
+  position: sticky;
+  top: 0;
+  left: 0;
+  right: 0;
+  transition: opacity 0.2s ease-in-out;
+  text-align: center;
+}
+
+.header__title {
+  font-weight: 600;
+  display: inline;
+  margin: 0;
+  padding: 0;
+  font-size: inherit;
+}
+
+@media (min-width: 500px) {
+  .header {
+    text-align: left;
+    display: flex;
+    justify-content: space-between;
+  }
+}

src/components/Header/Header.jsx

@@ -3,3 +3,17 @@
 // Create a Header function returning the HTML of header block
 
 // Add a default export statement for Header component to use it in the other files
+import React from 'react';
+import './Header.css';
+import Navigation from '../Navigation/Navigation';
+
+function Header() {
+  return (
+    <header className="header">
+      <h1 className="header__title">Site Name</h1>
+      <Navigation />
+    </header>
+  );
+}
+
+export default Header;

src/components/Navigation/Navigation.css

@@ -0,0 +1,14 @@
+.navigation__link {
+  display: inline-block;
+  outline: none;
+  text-decoration: none;
+  opacity: 0.7;
+  padding: 0 0.5em;
+  color: black;
+  transition: opacity 0.2s ease-in-out;
+}
+
+.navigation__link:hover,
+.navigation__link:focus {
+  opacity: 1;
+}

src/components/Navigation/Navigation.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import './Navigation.css';
+
+function Navigation() {
+  return (
+    <nav className="navigation">
+      <a className="navigation__link" href="#about">
+        About
+      </a>
+      <a className="navigation__link" href="#services">
+        Services
+      </a>
+      <a className="navigation__link" href="#contact">
+        Contact
+      </a>
+    </nav>
+  );
+}
+
+export default Navigation;

src/components/Welcome/Welcome.css

@@ -1 +1,14 @@
-/* Put welcome styles here */
+.welcome {
+  height: 100vh;
+  background: coral;
+}
+
+.welcome__text {
+  margin: 0;
+  font-size: 400%;
+  text-align: center;
+  line-height: 1;
+  padding-top: calc(50vh - 20pt);
+  display: block;
+  font-weight: 700;
+}

src/components/Welcome/Welcome.jsx

@@ -3,3 +3,16 @@
 // Create a Welcome function returning the HTML of welcome block
 
 // Add a default export statement for Welcome component to use it in the other files
+/* Put welcome styles here */
+import React from 'react';
+import './Welcome.css';
+
+function Welcome() {
+  return (
+    <section className="welcome">
+      <span className="welcome__text">Sticky Header!</span>
+    </section>
+  );
+}
+
+export default Welcome;