Merge pull request #1 from oussamaB14/main

creating landing page

back/frankme/requests.rest

@@ -3,6 +3,11 @@
 POST http://localhost:3000/authentication/sign-up 
 Content-Type: application/json
 
+{"email": "[email protected]",
+"password": "7894456",
+"firstName": "aaaaaaaaaaaaaaa",
+"lastName": "ooooo",
+"phone": "1234567890"}
 {"email": "[email protected]",
 "password": "123456789Aze@",
 "firstName": "aaaa",

front/angular.json

@@ -29,8 +29,11 @@
             "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
             "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/styles.css"],
-            "scripts": []
+            "styles": [
+              "src/styles.css",
+              "node_modules/bootstrap/dist/css/bootstrap.min.css"
+            ],
+            "scripts": ["node_modules/bootstrap/dist/js/bootstrap.min.js"]
           },
           "configurations": {
             "production": {

front/package.json

@@ -19,6 +19,7 @@
     "@angular/platform-browser-dynamic": "^17.2.0",
     "@angular/router": "^17.2.0",
     "@fortawesome/angular-fontawesome": "^0.14.1",
+    "bootstrap": "^5.3.3",
     "font-awesome": "^4.7.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",

front/src/app/app-routing.module.ts

@@ -44,6 +44,21 @@ const routes: Routes = [
       import('./modules/home/home.module').then((m) => m.HomeModule),
   },
   {
+    path: 'about',
+    loadChildren: () =>
+      import('./modules/about/about.module').then((m) => m.AboutModule),
+  },
+  {
+    path: 'service',
+    loadChildren: () =>
+      import('./modules/service/service.module').then((m) => m.ServiceModule),
+  },
+  {
+    path: 'contact',
+    loadChildren: () =>
+      import('./modules/contact/contact.module').then((m) => m.ContactModule),
+  },
+
     path: 'download',
     loadChildren: () =>
       import('./modules/download/download.module').then(

front/src/app/app.component.html

@@ -1 +1 @@
-<router-outlet></router-outlet>
+<div class="y-5"><router-outlet></router-outlet></div>

front/src/app/app.module.ts

@@ -7,21 +7,34 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { CoreModule } from './core/core.module';
 import { AuthModule } from './modules/auth/auth.module';
 import { AuthService } from './modules/auth/services/auth.service';
+import { HttpClientModule } from '@angular/common/http';
+import { AboutComponent } from './modules/about/about.component';
+import { ServiceComponent } from './modules/service/service.component';
+import { ContactComponent } from './modules/contact/contact.component';
+import { SharedModule } from './shared/shared.module';
 import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
 import { AuthInterceptor } from './core/interceptors/auth.interceptor';
 import { TokenStorageService } from './core/services/TokenStorage.service';
 import { UserService } from './core/services/user.service';
 import { AuthGuard } from './core/guards/auth.guard';
 
 @NgModule({
-  declarations: [AppComponent],
+  declarations: [
+    AppComponent,
+    AboutComponent,
+    ServiceComponent,
+    ContactComponent,
+  ],
+  providers: [AuthService],
+  bootstrap: [AppComponent],
   imports: [
     BrowserModule,
     AppRoutingModule,
     ReactiveFormsModule,
     CoreModule,
     AuthModule,
     HttpClientModule,
+    SharedModule,
   ],
   providers: [
     AuthService,

front/src/app/modules/about/about.component.html

@@ -0,0 +1,124 @@
+<app-navbar></app-navbar>
+<div class="conatiner">
+  <header class="py-5">
+    <div class="container px-5">
+      <div class="row justify-content-center">
+        <div class="col-lg-8 col-xxl-6">
+          <div class="text-center my-5">
+            <h1 class="fw-bolder mb-3">
+              Our mission is to provide a safe and reliable marketplace for
+              buying and selling media files online.
+            </h1>
+            <p class="lead fw-normal text-muted mb-4">
+              Founded in 2024, Frank Me has quickly become a trusted platform
+              for content creators and buyers worldwide
+            </p>
+            <a class="btn btn-primary btn-lg" href="#scroll-target"
+              >Read our story</a
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+  </header>
+  <!-- About section one-->
+  <section class="py-5 bg-light" id="scroll-target">
+    <div class="container px-5 my-5">
+      <div class="row gx-5 align-items-center">
+        <div class="col-lg-6">
+          <img
+            class="img-fluid rounded mb-5 mb-lg-0"
+            src="../../../../assets/images/files-pic.png"
+            alt="..."
+          />
+        </div>
+        <div class="col-lg-6">
+          <h2 class="fw-bolder">Our Vision</h2>
+          <p class="lead fw-normal text-muted mb-0">
+            We envision a future where digital content transactions are
+            seamless, secure, and equitable for all parties involved. By
+            fostering a community built on trust, transparency, and innovation,
+            we aim to become the go-to destination for media transactions,
+            setting the standard for excellence in the industry.
+          </p>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- About section two-->
+  <section class="py-5">
+    <div class="container px-5 my-5">
+      <div class="row gx-5 align-items-center">
+        <div class="col-lg-6 order-first order-lg-last">
+          <img
+            class="img-fluid rounded mb-5 mb-lg-0"
+            src="../../../../assets/images/files-pic-2.png"
+            alt="..."
+          />
+        </div>
+        <div class="col-lg-6">
+          <h2 class="fw-bolder">Growth &amp; beyond</h2>
+          <p class="lead fw-normal text-muted mb-0">
+            Our mission is simple: to provide a safe and reliable platform for
+            creators to monetize their content while ensuring buyers have access
+            to high-quality, secure media files. We believe that by leveraging
+            cutting-edge technology and implementing rigorous security measures,
+            we can empower creators to showcase their work and buyers to
+            discover and purchase content they love, all within a trusted
+            environment.
+          </p>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- Team members section-->
+  <section class="py-5 bg-light">
+    <div class="container px-5 my-5">
+      <div class="text-center">
+        <h2 class="fw-bolder">Our team</h2>
+        <p class="lead fw-normal text-muted mb-5">
+          Meet the passionate team behind Frank Me, dedicated to ensuring the
+          security and success of our users.
+        </p>
+      </div>
+      <div
+        class="row gx-5 row-cols-1 row-cols-sm-2 row-cols-xl-4 justify-content-center"
+      >
+        <div class="col mb-5 mb-5 mb-xl-0">
+          <div class="text-center">
+            <img
+              class="img-fluid rounded-circle mb-4 px-4"
+              src="../../../../assets/images/gay.jpg"
+              alt="..."
+            />
+            <h5 class="fw-bolder">Ghaythe</h5>
+            <div class="fst-italic text-muted">CFO</div>
+          </div>
+        </div>
+        <div class="col mb-5 mb-5 mb-sm-0">
+          <div class="text-center">
+            <img
+              class="img-fluid rounded-circle mb-4 px-4"
+              src="../../../../assets/images/manel.jpg"
+              alt="..."
+            />
+            <h5 class="fw-bolder">Manel</h5>
+            <div class="fst-italic text-muted">Operations Manager</div>
+          </div>
+        </div>
+        <div class="col mb-5">
+          <div class="text-center">
+            <img
+              class="img-fluid rounded-circle mb-4 px-4"
+              src="../../../../assets/images/me-.jpg"
+              alt="..."
+            />
+            <h5 class="fw-bolder">Oussama</h5>
+            <div class="fst-italic text-muted">CTO</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</div>
+<app-footer-main></app-footer-main>

front/src/app/modules/about/about.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-about',
+  templateUrl: './about.component.html',
+  styleUrl: './about.component.css'
+})
+export class AboutComponent {
+
+}

front/src/app/modules/about/about.module.ts

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+
+@NgModule({
+  declarations: [],
+  imports: [CommonModule],
+})
+export class AboutModule {}

front/src/app/modules/contact/contact.component.css

@@ -0,0 +1,6 @@
+.bg-image {
+ background-image: url("https://ouch-cdn2.icons8.com/4VNQW5DnIK90s6XgmtaG_0YRLNQmrllc2TrGN8mVo2s/rs:fit:368:368/czM6Ly9pY29uczgu/b3VjaC1wcm9kLmFz/c2V0cy9wbmcvNzMy/Lzc1OTY1NjI2LWVh/OTEtNDQ3NC05ZmJi/LTNlNWRlZGM1YTJj/MS5wbmc.png"); 
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}