diff --git a/angular.json b/angular.json
index 0233a2d..f59baee 100644
--- a/angular.json
+++ b/angular.json
@@ -24,7 +24,7 @@
"zone.js"
],
"tsConfig": "tsconfig.app.json",
- "inlineStyleLanguage": "scss",
+ "inlineStyleLanguage": "css",
"assets": [
{
"glob": "**/*",
@@ -32,9 +32,12 @@
}
],
"styles": [
+ "node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
- "scripts": [],
+ "scripts": [
+ "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
+ ],
"server": "src/main.server.ts",
"outputMode": "server",
"ssr": {
@@ -88,7 +91,7 @@
"zone.js/testing"
],
"tsConfig": "tsconfig.spec.json",
- "inlineStyleLanguage": "scss",
+ "inlineStyleLanguage": "css",
"assets": [
{
"glob": "**/*",
diff --git a/package.json b/package.json
index 79299a3..7e57f5d 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,8 @@
"@angular/platform-server": "^19.2.0",
"@angular/router": "^19.2.0",
"@angular/ssr": "^19.2.6",
+ "@ng-bootstrap/ng-bootstrap": "^18.0.0",
+ "bootstrap": "^5.3.6",
"express": "^4.18.2",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
@@ -41,4 +43,4 @@
"karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~5.7.2"
}
-}
\ No newline at end of file
+}
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 55bf23e..67e7bd4 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,3 +1 @@
-Welcome
-
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 904ee61..706c1ad 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -1,21 +1,57 @@
import { Routes } from '@angular/router';
-import { MasterpageComponent } from './layout/masterpage/masterpage.component';
-import { HomeComponent } from './features/home/pages/home/home.component';
-import { AboutUsComponent } from './features/about-us/pages/about-us/about-us.component';
-import { OurServicesComponent } from './features/our-services/pages/our-services/our-services.component';
-import { ContactUsComponent } from './features/contact-us/pages/contact-us/contact-us.component';
+import { GridComponent } from './layout/grid/grid.component';
export const routes: Routes = [
- {
+ // { path: '', redirectTo: 'home', pathMatch: 'full' },
+ {
path: '',
- component: MasterpageComponent, // Master page
+ component: GridComponent,
children: [
- { path: '', component: HomeComponent, title: 'Home' },
- { path: 'about', component: AboutUsComponent, title: 'About Us' },
- { path: 'services', component: OurServicesComponent, title: 'Our Services' },
- { path: 'contactus', component: ContactUsComponent, title: 'Contact Us' },
- // Add other routes here
- ]
+ {
+ path: '',
+ loadComponent: () =>
+ import('./features/home/pages/home/home.component').then(
+ (m) => m.HomeComponent
+ ), // Lazy load Home
+ title: 'Home',
+ },
+
+ {
+ path: 'about-us',
+ loadComponent: () =>
+ import('./features/about-us/pages/about-us/about-us.component').then(
+ (m) => m.AboutUsComponent
+ ), // Lazy load about-us
+ title: 'About Us',
+ },
+
+ {
+ path: 'our-services',
+ loadComponent: () =>
+ import(
+ './features/our-services/pages/our-services/our-services.component'
+ ).then((m) => m.OurServicesComponent), // Lazy load our-services
+ title: 'Our Services',
+ },
+
+ {
+ path: 'contact-us',
+ loadComponent: () =>
+ import(
+ './features/contact-us/pages/contact-us/contact-us.component'
+ ).then((m) => m.ContactUsComponent), // Lazy load contact-us
+ title: 'Contact Us',
+ },
+
+ {
+ path: 'page-not-found',
+ loadComponent: () =>
+ import(
+ './features/page-not-found/pages/page-not-found/page-not-found.component'
+ ).then((m) => m.PageNotFoundComponent), // Lazy load page-not-found
+ title: 'Contact Us',
+ },
+ ],
},
- { path: '**', redirectTo: '' } // Catch-all route
-];
\ No newline at end of file
+ { path: '**', redirectTo: '/page-not-found' }, // Catch-all route
+];
diff --git a/src/app/features/page-not-found/pages/page-not-found/page-not-found.component.html b/src/app/features/page-not-found/pages/page-not-found/page-not-found.component.html
new file mode 100644
index 0000000..cc75e49
--- /dev/null
+++ b/src/app/features/page-not-found/pages/page-not-found/page-not-found.component.html
@@ -0,0 +1 @@
+page-not-found works!
diff --git a/src/scss/abstracts/_media-query.scss b/src/app/features/page-not-found/pages/page-not-found/page-not-found.component.scss
similarity index 100%
rename from src/scss/abstracts/_media-query.scss
rename to src/app/features/page-not-found/pages/page-not-found/page-not-found.component.scss
diff --git a/src/app/features/page-not-found/pages/page-not-found/page-not-found.component.spec.ts b/src/app/features/page-not-found/pages/page-not-found/page-not-found.component.spec.ts
new file mode 100644
index 0000000..878de5b
--- /dev/null
+++ b/src/app/features/page-not-found/pages/page-not-found/page-not-found.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PageNotFoundComponent } from './page-not-found.component';
+
+describe('PageNotFoundComponent', () => {
+ let component: PageNotFoundComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [PageNotFoundComponent]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(PageNotFoundComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/features/page-not-found/pages/page-not-found/page-not-found.component.ts b/src/app/features/page-not-found/pages/page-not-found/page-not-found.component.ts
new file mode 100644
index 0000000..0651958
--- /dev/null
+++ b/src/app/features/page-not-found/pages/page-not-found/page-not-found.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-page-not-found',
+ imports: [],
+ templateUrl: './page-not-found.component.html',
+ styleUrl: './page-not-found.component.scss'
+})
+export class PageNotFoundComponent {
+
+}
diff --git a/src/app/layout/grid/grid.component.html b/src/app/layout/grid/grid.component.html
new file mode 100644
index 0000000..9de5f03
--- /dev/null
+++ b/src/app/layout/grid/grid.component.html
@@ -0,0 +1,32 @@
+
+
diff --git a/src/app/layout/grid/grid.component.scss b/src/app/layout/grid/grid.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/layout/grid/grid.component.spec.ts b/src/app/layout/grid/grid.component.spec.ts
new file mode 100644
index 0000000..364235a
--- /dev/null
+++ b/src/app/layout/grid/grid.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GridComponent } from './grid.component';
+
+describe('GridComponent', () => {
+ let component: GridComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [GridComponent]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(GridComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/layout/grid/grid.component.ts b/src/app/layout/grid/grid.component.ts
new file mode 100644
index 0000000..20bc3c7
--- /dev/null
+++ b/src/app/layout/grid/grid.component.ts
@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { NavbarComponent } from '../navbar/navbar.component';
+
+@Component({
+ selector: 'app-grid',
+ imports: [RouterOutlet, NavbarComponent],
+ templateUrl: './grid.component.html',
+ styleUrl: './grid.component.scss'
+})
+export class GridComponent {
+
+}
diff --git a/src/app/layout/masterpage/masterpage.component.html b/src/app/layout/masterpage/masterpage.component.html
index efe5132..e69de29 100644
--- a/src/app/layout/masterpage/masterpage.component.html
+++ b/src/app/layout/masterpage/masterpage.component.html
@@ -1,15 +0,0 @@
-
-
-
- carousel goes here...
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/src/app/layout/navbar/navbar.component.html b/src/app/layout/navbar/navbar.component.html
index 5a99f8c..48568ba 100644
--- a/src/app/layout/navbar/navbar.component.html
+++ b/src/app/layout/navbar/navbar.component.html
@@ -1,3 +1,33 @@
-Home |
-About Us
-
+
diff --git a/src/app/layout/navbar/navbar.component.ts b/src/app/layout/navbar/navbar.component.ts
index f2b6ab0..fdcaa7b 100644
--- a/src/app/layout/navbar/navbar.component.ts
+++ b/src/app/layout/navbar/navbar.component.ts
@@ -1,9 +1,9 @@
import { Component } from '@angular/core';
-import { RouterLink, RouterOutlet } from '@angular/router';
+import { RouterLink } from '@angular/router';
@Component({
selector: 'app-navbar',
- imports: [RouterLink, RouterOutlet ],
+ imports: [RouterLink ],
templateUrl: './navbar.component.html',
styleUrl: './navbar.component.scss'
})
diff --git a/src/scss/abstracts/_functions.scss b/src/scss/abstracts/_functions.scss
index e69de29..9a4012d 100644
--- a/src/scss/abstracts/_functions.scss
+++ b/src/scss/abstracts/_functions.scss
@@ -0,0 +1,2 @@
+
+@use "./variables" as *;
diff --git a/src/scss/abstracts/_index.scss b/src/scss/abstracts/_index.scss
index de809c9..246f100 100644
--- a/src/scss/abstracts/_index.scss
+++ b/src/scss/abstracts/_index.scss
@@ -1,4 +1,3 @@
@forward 'variables';
@forward 'mixins';
-@forward 'functions';
-@forward 'media-query';
\ No newline at end of file
+@forward 'functions';
\ No newline at end of file
diff --git a/src/scss/abstracts/_mixins.scss b/src/scss/abstracts/_mixins.scss
index e69de29..98b5da6 100644
--- a/src/scss/abstracts/_mixins.scss
+++ b/src/scss/abstracts/_mixins.scss
@@ -0,0 +1,51 @@
+@use "./variables" as *;
+
+// Responsive breakpoints mixin
+@mixin respond-to($breakpoint) {
+ @if $breakpoint == sm {
+ @media (min-width: #{$breakpoint-sm}) { @content; }
+ }
+ @if $breakpoint == md {
+ @media (min-width: #{$breakpoint-md}) { @content; }
+ }
+ @if $breakpoint == lg {
+ @media (min-width: #{$breakpoint-lg}) { @content; }
+ }
+ @if $breakpoint == xl {
+ @media (min-width: #{$breakpoint-xl}) { @content; }
+ }
+}
+
+// Button mixin with variants
+@mixin button-variant($bg-color, $text-color: white) {
+ background-color: $bg-color;
+ color: $text-color;
+ border: 2px solid $bg-color;
+
+ &:hover {
+ background-color: darken($bg-color, 10%);
+ border-color: darken($bg-color, 10%);
+ }
+
+ &:focus {
+ box-shadow: 0 0 0 3px rgba($bg-color, 0.25);
+ }
+}
+
+// Flex center mixin
+@mixin flex-center {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+// Card shadow mixin
+@mixin card-shadow($level: 1) {
+ @if $level == 1 {
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+ } @else if $level == 2 {
+ box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+ } @else if $level == 3 {
+ box-shadow: 0 8px 16px rgba(0,0,0,0.2);
+ }
+}
\ No newline at end of file
diff --git a/src/scss/abstracts/_variables.scss b/src/scss/abstracts/_variables.scss
index 1e03c1b..7a24526 100644
--- a/src/scss/abstracts/_variables.scss
+++ b/src/scss/abstracts/_variables.scss
@@ -1,26 +1,26 @@
-/* global font size */
-$global-font-size: 14px;
+// Color palette
+$primary-color: #3498db;
+$secondary-color: #2ecc71;
+$danger-color: #e74c3c;
+$warning-color: #f39c12;
+$dark-color: #2c3e50;
+$light-color: #ecf0f1;
-/* global font color */
-$global-font-color: rgba(0,0,0, 1);
+// Typography
+$font-primary: 'Helvetica Neue', Arial, sans-serif;
+$font-secondary: Georgia, serif;
+$font-size-base: 14px;
+$line-height-base: 1.6;
-/* global border radius */
-$global-border-radius: 6px;
+// Spacing
+$spacing-xs: 0.25rem;
+$spacing-sm: 0.5rem;
+$spacing-md: 1rem;
+$spacing-lg: 2rem;
+$spacing-xl: 4rem;
-/* global Layouts gaps */
-$global-gap: 10px;
-
-/* global background color variables */
-$global-bg-color: rgba(245,245,245, 0.5);
-
-/* global form controls - textbox */
-$input-text-border: 1px solid rgba(245,245,245, 0.5);
-$input-text-font-size: 10px;
-$input-text-font-color: rgba(245,245,245, 0.5);
-
-/* global form controls - placeholder */
-$form-placeholder-size: 13px;
-$form-placeholder-color: lightgrey;
-
-/* global form controls - error messages */
-$error-message-color: red;
\ No newline at end of file
+// Breakpoints
+$breakpoint-sm: 576px;
+$breakpoint-md: 768px;
+$breakpoint-lg: 992px;
+$breakpoint-xl: 1200px;
diff --git a/src/scss/base/_reset.scss b/src/scss/base/_reset.scss
index 352a7de..52ed2ea 100644
--- a/src/scss/base/_reset.scss
+++ b/src/scss/base/_reset.scss
@@ -1,7 +1,21 @@
-/* Rest to default setting */
-* {
- //page align
- margin: 0;
- padding: 0;
+
+@use '../abstracts' as *;
+
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
}
-
\ No newline at end of file
+
+html {
+ font-size: $font-size-base;
+ line-height: $line-height-base;
+}
+
+body {
+ font-family: $font-primary;
+ color: $dark-color;
+ background-color: white;
+}
\ No newline at end of file
diff --git a/src/scss/base/_typography.scss b/src/scss/base/_typography.scss
index cebcd1d..c0967e8 100644
--- a/src/scss/base/_typography.scss
+++ b/src/scss/base/_typography.scss
@@ -1,8 +1,20 @@
@use '../abstracts' as *;
-body {
- font-family:Arial, Helvetica, sans-serif;
- font-weight: 100;
- font-size: 14px;
- font-style: normal;
+h1, h2, h3, h4, h5, h6 {
+ font-family: $font-secondary;
+ margin-bottom: $spacing-md;
+ line-height: 1.2;
+}
+
+p {
+ margin-bottom: $spacing-md;
+}
+
+a {
+ color: $primary-color;
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: underline;
+ }
}
\ No newline at end of file
diff --git a/src/scss/components/_buttons.scss b/src/scss/components/_buttons.scss
index e69de29..35a1857 100644
--- a/src/scss/components/_buttons.scss
+++ b/src/scss/components/_buttons.scss
@@ -0,0 +1,56 @@
+.btn {
+ display: inline-block;
+ padding: $spacing-sm $spacing-md;
+ font-size: rem(14px);
+ font-weight: 500;
+ text-align: center;
+ text-decoration: none;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: all 0.3s ease;
+
+ // Button variants using isolated mixins
+ &--primary {
+ @include button-variant($primary-color);
+ }
+
+ &--secondary {
+ @include button-variant($secondary-color);
+ }
+
+ &--danger {
+ @include button-variant($danger-color);
+ }
+
+ &--outline {
+ background-color: transparent;
+ color: $primary-color;
+ border: 2px solid $primary-color;
+
+ &:hover {
+ background-color: $primary-color;
+ color: white;
+ }
+ }
+
+ // Button sizes
+ &--small {
+ padding: $spacing-xs $spacing-sm;
+ font-size: rem(12px);
+ }
+
+ &--large {
+ padding: $spacing-md $spacing-lg;
+ font-size: rem(18px);
+ }
+
+ &:disabled {
+ opacity: 0.6;
+ cursor: not-allowed;
+
+ &:hover {
+ transform: none;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/scss/components/_cards.scss b/src/scss/components/_cards.scss
index e69de29..4bd919d 100644
--- a/src/scss/components/_cards.scss
+++ b/src/scss/components/_cards.scss
@@ -0,0 +1,41 @@
+@use '../abstracts' as *;
+
+.card {
+ background-color: white;
+ border-radius: 8px;
+ overflow: hidden;
+ @include card-shadow(1);
+ transition: box-shadow 0.3s ease;
+
+ &:hover {
+ @include card-shadow(2);
+ }
+
+ &__header {
+ padding: $spacing-md;
+ border-bottom: 1px solid $light-color;
+
+ h3 {
+ margin-bottom: 0;
+ }
+ }
+
+ &__body {
+ padding: $spacing-md;
+ }
+
+ &__footer {
+ padding: $spacing-md;
+ // background-color: lighten($light-color, 3%);
+ border-top: 1px solid $light-color;
+ }
+
+ // Card variants
+ &--highlighted {
+ border-left: 4px solid $primary-color;
+ }
+
+ &--danger {
+ border-left: 4px solid $danger-color;
+ }
+}
\ No newline at end of file
diff --git a/src/scss/components/_index.scss b/src/scss/components/_index.scss
index e69de29..902c6d3 100644
--- a/src/scss/components/_index.scss
+++ b/src/scss/components/_index.scss
@@ -0,0 +1,2 @@
+/* bind the following _partials to scss/styles.scss */
+@forward 'cards';
\ No newline at end of file
diff --git a/src/scss/layout/_masterpage.scss b/src/scss/layout/_grid.scss
similarity index 81%
rename from src/scss/layout/_masterpage.scss
rename to src/scss/layout/_grid.scss
index 437d307..1465f01 100644
--- a/src/scss/layout/_masterpage.scss
+++ b/src/scss/layout/_grid.scss
@@ -1,19 +1,20 @@
+@use '../abstracts' as *;
/*
Grid layout structure
Mobile-first approach
*/
-.master-page-grid {
+.site-grid {
+ background-color: red;
+ margin: auto;
+ max-width: 1200px;
- margin: auto;
- max-width: 900px;
-
display: grid;
gap: 2px;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr auto 1fr ;
grid-template-areas:"navbar"
"header"
- "carousel"
+ "call-to-action"
"main"
"footer";
@@ -32,14 +33,14 @@
}
/* Header Grid Area */
-.header-container {
+.idetity-container {
grid-area: header;
display: grid;
}
/* Carousel Grid Area */
-.carousel-container {
- grid-area: carousel;
+.call-to-action-container {
+ grid-area: call-to-action;
}
/* Page Main Area */
@@ -75,9 +76,9 @@
/* Large screens - Grid Layout areas */
.master-page-grid {
- grid-template-areas:"navbar "
- "header "
- "carousel "
+ grid-template-areas:"navbar"
+ "header"
+ "call-to-action"
"main"
"footer";
}
diff --git a/src/scss/layout/_header.scss b/src/scss/layout/_header.scss
index 03dc577..caf263e 100644
--- a/src/scss/layout/_header.scss
+++ b/src/scss/layout/_header.scss
@@ -1,2 +1,26 @@
/* Site header */
@use '../abstracts' as *;
+
+
+.header {
+ background: linear-gradient(135deg, $primary-color, $secondary-color);
+ color: white;
+ padding: $spacing-xl 0;
+ text-align: center;
+
+ &__title {
+ font-size: $font-size-base;
+ margin-bottom: $spacing-md;
+
+ @include respond-to(md) {
+ font-size: $font-size-base;
+ }
+ }
+
+ &__subtitle {
+ font-size: $font-size-base;
+ opacity: 0.9;
+ max-width: 600px;
+ margin: 0 auto;
+ }
+}
\ No newline at end of file
diff --git a/src/scss/layout/_index.scss b/src/scss/layout/_index.scss
index 02b9177..37446e8 100644
--- a/src/scss/layout/_index.scss
+++ b/src/scss/layout/_index.scss
@@ -1,6 +1,6 @@
+@forward 'grid';
@forward 'header';
@forward 'navbar';
-@forward 'masterpage';
@forward 'sidebar';
@forward 'footer';
diff --git a/src/scss/layout/_navbar.scss b/src/scss/layout/_navbar.scss
index 9640426..b542972 100644
--- a/src/scss/layout/_navbar.scss
+++ b/src/scss/layout/_navbar.scss
@@ -1,44 +1,54 @@
@use '../abstracts' as *;
-//Navbar css
.navbar {
- padding: 0px;
-
- .nav-item {
- margin-right: 10px;
- padding-right: 0px;
- }
-
- .nav-link {
- color: lightgray;
- }
+ background-color: white;
+ @include card-shadow(1);
+ position: sticky;
+ top: 0;
+ z-index: 1000;
+
+ &__container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 $spacing-md;
+ @include flex-center;
+ justify-content: space-between;
+ height: 60px;
+ }
+
+ &__brand {
+ // font-size: rem(24px);
+ font-weight: bold;
+ color: $primary-color;
+ }
+
+ &__menu {
+ display: flex;
+ list-style: none;
+ gap: $spacing-lg;
- .nav-link:hover {
- color: #fff;
- }
- .nav-link:focus {
- color: white;
- font-weight: bold;
- }
-}
-
-// ---- Navigation-bar break-point
-@media screen and (max-width: 575px) {
+ @include respond-to(sm) {
+ gap: $spacing-xl;
+ }
+ }
+
+ &__link {
+ color: $dark-color;
+ font-weight: 500;
+ transition: color 0.3s ease;
- .navbar-toggler {
- border: none;
- padding-left: 0;
- }
- .navbar-toggler:focus {
- box-shadow: none;
- }
- .navbar-toggler-icon {
- background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='4' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
- }
- .nav-link {
- border-top: 1px solid rgba(128,128,128, 0.3);
- padding: 4px 0 2px 0;
+ &:hover,
+ &--active {
+ color: $primary-color;
+ }
+ }
+
+ // Mobile menu (hidden by default)
+ &__toggle {
+ display: none;
+
+ @media (max-width: #{$breakpoint-md - 1px}) {
+ display: block;
}
-}
-
-
+ }
+}
\ No newline at end of file
diff --git a/src/scss/pages/_home.scss b/src/scss/pages/_home.scss
index d7f0b30..4076d83 100644
--- a/src/scss/pages/_home.scss
+++ b/src/scss/pages/_home.scss
@@ -1 +1,22 @@
@use '../abstracts' as *;
+
+.home {
+ &__hero {
+ background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
+ height: 60vh;
+ @include flex-center;
+ color: white;
+ text-align: center;
+ }
+
+ &__features {
+ padding: $spacing-xl 0;
+
+ .feature-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: $spacing-lg;
+ margin-top: $spacing-lg;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/scss/styles.scss b/src/scss/styles.scss
index 860b10e..91b7084 100644
--- a/src/scss/styles.scss
+++ b/src/scss/styles.scss
@@ -1,5 +1,6 @@
/* include all _partials from the following directories: */
/* You can add global styles to this file, and also import other style files */
+
@use 'abstracts';
@use 'base';
@use 'layout';
diff --git a/src/styles.css.map b/src/styles.css.map
index 6420698..f5f409f 100644
--- a/src/styles.css.map
+++ b/src/styles.css.map
@@ -1,17 +1 @@
-{
- "version": 3,
- "sourceRoot": "",
- "sources": [
- "scss/styles.scss",
- "scss/abstracts/_variables.scss",
- "scss/base/_index.scss",
- "scss/base/_reset.scss",
- "scss/base/_typography.scss",
- "scss/layout/_header.scss",
- "scss/layout/_navbar.scss",
- "scss/layout/_masterpage.scss"
- ],
- "names": [],
- "mappings": "AAAA;AACA;ACDA;AAGA;AAGA;AAGA;AAGA;AAGA;AAKA;AAIA;ACxBA;ACAA;AACA;EAEQ;EACA;;;AHJR;AACA;AICA;EACI;EACA;EACA;EACA;;;AJNJ;AACA;AKDA;ALAA;AACA;AMEA;EACI;;AAEA;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAEJ;EACI;EACA;;;AAKR;EAEI;IACI;IACA;;EAEJ;IACI;;EAEJ;IACI;;EAEJ;IACI;IACA;;;ACvCR;AAAA;AAAA;AAAA;AAIA;EAEI;EACA;EAEA;EACA;EACA;EACA;EACA;EAMA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;AACA;EACI;;;AAGJ;AACA;EACI;EACA;;;AAGJ;AACA;EACI;;;AAGJ;AACA;EACI;EACA;EACA;EACA;EACA,qBACoB;AAGhB;AAKA;;AAJA;EACI;;AAIJ;EACI;;;AAMZ;AACA;EACI;;;AAGJ;AACA;AAEI;EACC;IACI;;EAOJ;IACG;IACA;;;APtFR;AACA;AADA;AACA;AADA;AACA;AADA;AACA;AADA;AACA;AADA;AACA;AADA;AACA;AADA;AACA",
- "file": "styles.css"
-}
+{"version":3,"sourceRoot":"","sources":["scss/styles.scss","scss/base/_index.scss","scss/base/_reset.scss","scss/abstracts/_variables.scss","scss/base/_typography.scss","scss/layout/_grid.scss","scss/layout/_header.scss","scss/abstracts/_mixins.scss","scss/layout/_navbar.scss","scss/components/_index.scss","scss/components/_cards.scss","scss/pages/_home.scss"],"names":[],"mappings":"AAAA;AACA;ACDA;ACGA;AAAA;AAAA;EAGE;EACA;EACA;;;AAGF;EACE,WCDe;EDEf,aCDiB;;;ADInB;EACE,aCRa;EDSb,OCbW;EDcX;;;AEjBF;EACE,aDOe;ECNf,eDaW;ECZX;;;AAGF;EACE,eDQW;;;ACLb;EACE,ODZc;ECad;;AAEA;EACE;;;AChBJ;AAAA;AAAA;AAAA;AAIA;EACM;EACE;EACA;EAEJ;EACA;EACA;EACA;EACA;EAMA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;AACA;EACI;;;AAGJ;AACA;EACI;EACA;;;AAGJ;AACA;EACI;;;AAGJ;AACA;EACI;EACA;EACA;EACA;EACA,qBACoB;AAGhB;AAKA;;AAJA;EACI;;AAIJ;EACI;;;AAMZ;AACA;EACI;;;AAGJ;AACA;AAEI;EACC;IACI;;EAOJ;IACG;IACA;;;ACvFR;AAIA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA,eHKS;;AITT;EDEF;IAKI,WHJW;;;AGQf;EACE,WHTa;EGUb;EACA;EACA;;;AErBJ;EACE;EDyCE;ECvCF;EACA;EACA;;AAEA;EACE;EACA;EACA;EDwBF;EACA;EACA;ECxBE;EACA;;AAGF;EAEE;EACA,OLpBY;;AKuBd;EACE;EACA;EACA,KLTS;;AIbT;ECmBF;IAMI,KLXO;;;AKeX;EACE,OL9BS;EK+BT;EACA;;AAEA;EAEE,OLxCU;;AK6Cd;EACE;;AAEA;EAHF;IAII;;;;AClDN;ACEA;EACE;EACA;EACA;EHuCE;EGrCF;;AAEA;EHqCE;;AGjCF;EACE,SPGS;EOFT;;AAEA;EACE;;AAIJ;EACE,SPNS;;AOSX;EACE,SPVS;EOYT;;AAIF;EACE;;AAGF;EACE;;;ACnCA;EACI;EACA;EJ+BN;EACA;EACA;EI/BM;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;EACA,KRCC;EQAD","file":"styles.css"}
\ No newline at end of file