Merge pull request #23 from cthonney/homepage-V0-cby

Homepage v0 cby

Gemfile.lock

@@ -173,6 +173,8 @@ GEM
     net-smtp (0.4.0)
       net-protocol
     nio4r (2.5.9)
+    nokogiri (1.15.4-x86_64-darwin)
+      racc (~> 1.4)
     nokogiri (1.15.4-x86_64-linux)
       racc (~> 1.4)
     orm_adapter (0.5.0)
@@ -251,6 +253,7 @@ GEM
       actionpack (>= 5.2)
       activesupport (>= 5.2)
       sprockets (>= 3.0.0)
+    sqlite3 (1.6.7-x86_64-darwin)
     sqlite3 (1.6.7-x86_64-linux)
     stimulus-rails (1.3.0)
       railties (>= 6.0.0)
@@ -284,6 +287,7 @@ GEM
     zeitwerk (2.6.12)
 
 PLATFORMS
+  x86_64-darwin-21
   x86_64-linux
 
 DEPENDENCIES

app/assets/stylesheets/application.scss

@@ -10,3 +10,5 @@
 // Your CSS partials
 @import "components/index";
 @import "pages/index";
+
+@import "config/mixins";

app/assets/stylesheets/components/_footer.scss

@@ -0,0 +1,23 @@
+footer {
+    position: static;
+    height: 50px;
+    color: $black;
+
+    a, i {
+        text-decoration: none;
+        color: $black;
+    }
+  }
+
+.foot-bot {
+@media only screen and (max-width: 990px) {
+    flex-direction: column;
+
+}
+}
+
+.foot-link-item {
+@media only screen and (max-width: 990px) {
+    margin-bottom: 1rem;
+}
+}

app/assets/stylesheets/components/_index.scss

@@ -5,3 +5,5 @@
 @import "map";
 @import "navbar";
 @import "particles";
+@import "footer";
+@import "reviews";

app/assets/stylesheets/components/_reviews.scss

@@ -0,0 +1,11 @@
+.carousel-indicators {
+    border-radius: 80%;
+    width: 10px;
+    height: 10px;
+}
+
+.gradient-custom {
+    .card {
+        border-radius: 10px !important;
+    }
+}

app/assets/stylesheets/config/_colors.scss

@@ -8,3 +8,11 @@ $orange: #E67E22;
 $green: #1EDD88;
 $gray: #0E0000;
 $light-gray: #F4F4F4;
+
+$primaryColor: #2467ff;
+$secondaryColor: #709bff;
+$sh-green: #5BC236;
+$sh-white: #FFFFFC;
+$black: #0C0F0A;
+$lightblue: #D6E2FF;
+

app/assets/stylesheets/config/_fonts.scss

@@ -1,9 +1,31 @@
 // Import Google fonts
-@import url('https://fonts.googleapis.com/css?family=Nunito:400,700|Work+Sans:400,700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+.montserrat {
+  font-family: 'Montserrat', sans-serif;
+}
+
+@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap');
+.oswald { font-family: 'Oswald',sans-serif;
+}
+
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,700;1,800&display=swap');
+.open {
+  font-family: 'Open Sans', sans-serif;
+}
+
+@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+.nunito {
+  font-family: 'Nunito', sans-serif;
+}
+
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+.roboto {
+  font-family: 'Roboto', sans-serif;
+}
 
 // Define fonts for body and headers
-$body-font: "Work Sans", "Helvetica", "sans-serif";
-$headers-font: "Nunito", "Helvetica", "sans-serif";
+$body-font: "Montserrat", "Helvetica", "sans-serif";
+$headers-font: "Open Sans", "Helvetica", "sans-serif";
 
 // To use a font file (.woff) uncomment following lines
 // @font-face {

app/assets/stylesheets/config/_mixins.scss

@@ -0,0 +1,186 @@
+.main-header-style {
+    color: $primaryColor;
+    font-family: 'Open Sans', sans-serif;
+    font-size: 7rem;
+    font-weight: 700;
+    line-height: 1;
+}
+
+.main-header-style-w {
+    color: $white;
+    font-family: 'Open Sans', sans-serif;
+    font-size: 7rem;
+    font-weight: 700;
+    line-height: 1;
+}
+
+.secondary-header-style {
+    color: $primaryColor;
+    font-family: 'Open Sans', sans-serif;
+    font-size: 3rem;
+    font-weight: 700;
+}
+
+.secondary-header-style-w {
+    color: $white;
+    font-family: 'Open Sans', sans-serif;
+    font-size: 3rem;
+    font-weight: 700;
+}
+
+.secondary-header-style-wh3 {
+    color: $white;
+    font-family: 'Open Sans', sans-serif;
+    font-weight: 700;
+}
+
+.subtitle-style {
+    color: $primaryColor;
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 400;
+    font-size: 1.5rem;
+}
+
+.subtitle-style-w {
+    color: $white;
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 400;
+    font-size: 1.5rem;
+}
+
+.main-cta-color {
+    color: $white;
+    background-color: $primaryColor;
+    font-size: 1.25rem;
+    border-radius: 30px;
+    padding: 10px 25px;
+    transition: all 0.3s ease;
+
+    &:hover {
+        color: $primaryColor;
+        transform: scale(1.1);
+        border: 2px solid $primaryColor;
+    }
+}
+
+.main-cta-color-onW {
+    color: $white;
+    background-color: $primaryColor;
+    font-size: 1.25rem;
+    border-radius: 30px;
+    padding: 10px 25px;
+    transition: all 0.3s ease;
+
+    &:hover {
+        color: $primaryColor;
+        transform: scale(1.1);
+        border: 2px solid $primaryColor;
+    }
+}
+
+.main-cta-color-onW-log {
+    color: $white;
+    background-color: $primaryColor;
+    font-size: 1rem;
+    border-radius: 30px;
+    padding: 10px 25px;
+    transition: all 0.3s ease;
+
+    &:hover {
+        color: $primaryColor;
+        transform: scale(1.1);
+        border: 2px solid $primaryColor;
+    }
+}
+
+.main-cta-color-BonW {
+    color: $white;
+    background-color: $primaryColor;
+    font-size: 1.25rem;
+    border-radius: 30px;
+    padding: 10px 25px;
+    transition: all 0.3s ease;
+
+    &:hover {
+        color: $primaryColor;
+        transform: scale(1.1);
+        border: 2px solid $primaryColor;
+    }
+}
+
+.main-cta-color-BonWup {
+    color: $white;
+    background-color: $primaryColor;
+    border: 1px solid $primaryColor;
+    font-size: 1rem;
+    border-radius: 30px;
+    padding: 10px 25px;
+    transition: all 0.3s ease;
+
+    &:hover {
+        color: $primaryColor;
+        transform: scale(1.1);
+        border: 1px solid $primaryColor;
+    }
+}
+
+.main-cta-w {
+    color: $primaryColor;
+    background-color: $white;
+    font-size: 1.25rem;
+    border-radius: 30px;
+    padding: 10px 25px;
+    transition: all 0.3s ease;
+
+    &:hover {
+        color: $white;
+        transform: scale(1.1);
+    }
+}
+
+
+.secondary-cta {
+    color: $white;
+    border: 2px solid $white;
+    font-size: 1.25rem;
+    border-radius: 30px;
+    padding: 10px 25px;
+    transition: all 0.3s ease;
+
+    @media only screen and (max-width: 540px) {
+        margin-left: 0 !important;
+    }
+
+    &:hover {
+        color: $primaryColor;
+        background-color: $white;
+    }
+}
+
+.secondary-cta-sign {
+    color: $white;
+    border: 1px solid $white;
+    font-size: 1rem;
+    border-radius: 30px;
+    padding: 10px 25px;
+    transition: all 0.3s ease;
+
+    &:hover {
+        transform: scale(1.1);
+    }
+}
+
+.secondary-cta-w {
+    color: $primaryColor;
+    background-color: $white;
+    border: 2px solid $primaryColor;
+    font-size: 1.25rem;
+    border-radius: 30px;
+    padding: 10px 25px;
+    transition: all 0.3s ease;
+
+    &:hover {
+        color: $white;
+        background-color: $primaryColor;
+    }
+}