diff --git a/package-lock.json b/package-lock.json index b6df6d9..f40d83c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3122,6 +3122,11 @@ "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=" }, + "bootstrap": { + "version": "4.5.2", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.2.tgz", + "integrity": "sha512-vlGn0bcySYl/iV+BGA544JkkZP5LB3jsmkeKLFQakCOwCM3AOk7VkldBz4jrzSe+Z0Ezn99NVXa1o45cQY4R6A==" + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", diff --git a/package.json b/package.json index 176fe6d..078949c 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^7.2.1", + "bootstrap": "^4.5.2", "node-sass": "^4.14.1", "react": "^16.13.1", "react-dom": "^16.13.1", diff --git a/public/index.html b/public/index.html index aa069f2..c3a4b28 100644 --- a/public/index.html +++ b/public/index.html @@ -24,6 +24,13 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> + + + + React App diff --git a/src/components/home/home.js b/src/components/home/home.js index f08cb8b..f49232e 100644 --- a/src/components/home/home.js +++ b/src/components/home/home.js @@ -46,9 +46,43 @@ export default function Home() { class ComponentSelection extends React.Component { render() { return ( -
-

alright we are in the component selection home page

- dashboard +
+
+
    +
  • + + Home + +
    • +
  • + + Dashboard + +
    • +
  • + + Get Started + +
    • +
  • + + Docs + +
    • +
  • + + Pricing + +
    • +
+
+ +
+
+
Rameelo
+
+
+
); } diff --git a/src/components/home/home.scss b/src/components/home/home.scss index 18497ea..5f4e4aa 100644 --- a/src/components/home/home.scss +++ b/src/components/home/home.scss @@ -1 +1,42 @@ @import '../../styles/index'; + +.nav { + @extend %flex; + flex-direction: row; + + ul { + @extend %flex; + padding-inline-start: 0 !important; + flex-direction: row; + align-items: stretch; + list-style: none; + } + + li { + margin-right: 30px; + } + + a { + text-decoration: none !important; + color: $secondary-text; + } + + .active { + padding: 7px 10px; + background-color: $primary-color; + border-radius: 100px; + color: white; + } +} + +div .pages { + @extend %flex; + + margin: 20px; + flex-direction: row; + + .card { + height: 200px; + width: 200px; + } +} diff --git a/src/styles/_colors.scss b/src/styles/_colors.scss index 5d84b9a..097e528 100644 --- a/src/styles/_colors.scss +++ b/src/styles/_colors.scss @@ -2,6 +2,9 @@ $primary-background: #fbf6f0; $primary-text: #3f4254; $secondary-text: #b5b5c3; +$primary-color: #0bb7af; +$white: white; + body { color: $primary-text; background-color: $primary-background; diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 129689f..c6d5c7a 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,5 +1,13 @@ @import url('https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap'); -html { +body { font-family: 'Fira Sans', sans-serif; } + +h1 { + color: $primary-text; +} + +h2 { + color: $white; +} diff --git a/src/styles/_index.scss b/src/styles/_index.scss index ff28d1b..d0c10d4 100644 --- a/src/styles/_index.scss +++ b/src/styles/_index.scss @@ -1,2 +1,3 @@ @import './colors'; @import './fonts'; +@import './main'; diff --git a/src/styles/_main.scss b/src/styles/_main.scss new file mode 100644 index 0000000..ae3604b --- /dev/null +++ b/src/styles/_main.scss @@ -0,0 +1,21 @@ +// Common styles for all components + +%flex { + display: flex !important; +} + +.wrapper { + max-width: 1140px; + margin: 20px auto; +} + +.card { + background-color: white; + border-radius: 25px; + margin: 10px; + + .card-header { + @extend %flex; + padding: 10px; + } +}