Add files via upload

gravity-group-website/README.md

@@ -0,0 +1,56 @@
+# gravity-group-website
+
+This README outlines the details of collaborating on this Ember application.
+A short introduction of this app could easily go here.
+
+## Prerequisites
+
+You will need the following things properly installed on your computer.
+
+* [Git](https://git-scm.com/)
+* [Node.js](https://nodejs.org/) (with npm)
+* [Ember CLI](https://cli.emberjs.com/release/)
+* [Google Chrome](https://google.com/chrome/)
+
+## Installation
+
+* `git clone <repository-url>` this repository
+* `cd gravity-group-website`
+* `npm install`
+
+## Running / Development
+
+* `ember serve`
+* Visit your app at [http://localhost:4200](http://localhost:4200).
+* Visit your tests at [http://localhost:4200/tests](http://localhost:4200/tests).
+
+### Code Generators
+
+Make use of the many generators for code, try `ember help generate` for more details
+
+### Running Tests
+
+* `ember test`
+* `ember test --server`
+
+### Linting
+
+* `npm run lint`
+* `npm run lint:fix`
+
+### Building
+
+* `ember build` (development)
+* `ember build --environment production` (production)
+
+### Deploying
+
+Specify what it takes to deploy your app.
+
+## Further Reading / Useful Links
+
+* [ember.js](https://emberjs.com/)
+* [ember-cli](https://cli.emberjs.com/release/)
+* Development Browser Extensions
+  * [ember inspector for chrome](https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi)
+  * [ember inspector for firefox](https://addons.mozilla.org/en-US/firefox/addon/ember-inspector/)

gravity-group-website/app/app.js

@@ -0,0 +1,12 @@
+import Application from '@ember/application';
+import Resolver from 'ember-resolver';
+import loadInitializers from 'ember-load-initializers';
+import config from 'gravity-group-website/config/environment';
+
+export default class App extends Application {
+  modulePrefix = config.modulePrefix;
+  podModulePrefix = config.podModulePrefix;
+  Resolver = Resolver;
+}
+
+loadInitializers(App, config.modulePrefix);

gravity-group-website/app/components/about-us.hbs

@@ -0,0 +1,141 @@
+<div class="row mb-4 mt-4">
+  <div class="col-xs-12 col-md-5 image-about-us">
+  </div>
+  <div class="col-xs-12 col-md-5">
+    {{#if (eq this.selectedOption "courier")}}
+      <h1 class="text-white">
+        <span class="font-40">Courier Services <strong>WE OFFER</strong></span> <br>
+        <button class="btn btn-gr mt-4" type="button" {{on "click" (fn this.toggleList "roadside")}}>
+          Roadside Assist
+        </button>
+        <button class="btn btn-gr mx-1 mt-4" type="button" {{on "click" (fn this.toggleList "courier")}}>
+          Courier Services
+        </button>
+      </h1>
+      <p class="p-2 text-white">
+        We provide general transport services for various kinds of goods and we're able to pick you up quickly in Gauteng, Limpopo, Mpumalanga and North West.
+
+        <ul class="list-group list-group-flush mt-2">
+          <li class="list-group-item text-white">
+            <i class="float-start bi bi-check-circle text-gravity-green"></i>
+            <span class="mx-2">Logistics</span>
+          </li>
+          <li class="list-group-item text-white">
+            <i class="float-start bi bi-check-circle text-gravity-green"></i>
+            <span class="mx-2">Overnight courier</span>
+          </li>
+          <li class="list-group-item text-white">
+            <i class="float-start bi bi-check-circle text-gravity-green"></i>
+            <span class="mx-2">Distribution</span><br>
+            <ul class="no-style">
+              <li>*Storage &amp; Packaging</li>
+            </ul>
+          </li>
+          <li class="list-group-item text-white">
+            <i class="float-start bi bi-check-circle text-gravity-green"></i>
+            <span class="mx-2">24hrs emergency transport</span>
+          </li>
+          <li class="list-group-item text-white">
+            <i class="float-start bi bi-check-circle text-gravity-green"></i>
+            <span class="mx-2">Load transfer</span>
+          </li>
+          <li class="list-group-item text-white">
+            <i class="float-start bi bi-check-circle text-gravity-green"></i>
+            <span class="mx-2">Container transport</span>
+            <ul class="no-style">
+              <li>*Forklift</li>
+              <li>*Bobcat</li>
+            </ul>
+          </li>
+          <li class="list-group-item text-white">
+            <i class="float-start bi bi-check-circle text-gravity-green"></i>
+            <span class="mx-2">Stuff transport and shuttle services</span>
+          </li>
+        </ul>
+      </p>
+    {{else if (eq this.selectedOption "roadside")}}
+      <h1 class="text-white">
+        <span class="font-40">Roadside <strong>Assist</strong></span> <br>
+        <button class="btn btn-gr mt-4" type="button" {{on "click" (fn this.toggleList "roadside")}}>
+          Roadside Assist
+        </button>
+        <button class="btn btn-gr mx-1 mt-4" type="button" {{on "click" (fn this.toggleList "courier")}}>
+          Courier Services
+        </button>
+      </h1>
+      <p class="p-2 text-white">
+        We provide general roadside assistance in the event of an unexpected emergency and we're able to get to you quickly in Gauteng, Limpopo, Mpumalanga and North West.
+
+        <ul class="list-group list-group-flush mt-2">
+          <li class="list-group-item text-white">
+            <i class="float-start bi bi-check-circle text-gravity-green"></i>
+            <span class="mx-2">Flat tyre assist and spare wheel supply for various vehicles</span>
+          </li>
+          <li class="list-group-item text-white">
+            <i class="float-start bi bi-check-circle text-gravity-green"></i>
+            <span class="mx-2">Fuel supply for light and heavy vehicles</span>
+          </li>
+          <li class="list-group-item text-white">
+            <i class="float-start bi bi-check-circle text-gravity-green"></i>
+            <span class="mx-2">Vehicles, home and office locksmith</span>
+          </li>
+          <li class="list-group-item text-white">
+            <i class="float-start bi bi-check-circle text-gravity-green"></i>
+            <span class="mx-2">Battery services and supply</span>
+          </li>
+          <li class="list-group-item text-white">
+            <i class="float-start bi bi-check-circle text-gravity-green"></i>
+            <span class="mx-2">Towing services for long-short distances</span><br>
+            <ul class="no-style">
+              <li>*Guardian angel/Roadside security</li>
+              <li>*Recovery</li>
+              <li>*Sling tow</li>
+              <li>*Flatbed towing</li>
+              <li>*Heavy duty towing</li>
+              <li>*Cross border</li>
+              <li>*Storage facilities</li>
+            </ul>
+          </li>
+        </ul>
+      </p>
+    {{else}}
+      <h1 class="text-white">
+        <span class="font-40">WHAT <strong>WE OFFER</strong></span> <br>
+        <button class="btn btn-gr mt-4" type="button" {{on "click" (fn this.toggleList "roadside")}}>
+          Roadside Assist
+        </button>
+        <button class="btn btn-gr mx-1 mt-4" type="button" {{on "click" (fn this.toggleList "courier")}}>
+          Courier Services
+        </button>
+      </h1>
+      <span class="font-14 p-2 text-white">EFFECTIVE TRANSPORTATION</span>
+      <p class="p-2 text-white">
+        We provide fast, courteous and inexpensive towing services in SA. We are fully insured and been in business since 2014. We are ready to respond to all your 
+        vehicle emergency needs 24 hours a day, seven days a week.
+
+        <ul class="list-group list-group-flush mt-2">
+          <li class="list-group-item text-white">
+            <i class="float-start bi bi-check-circle text-gravity-green"></i>
+            <span class="mx-2">More than <span class="bold">10 years of experience</span></span>
+          </li>
+          <li class="list-group-item text-white">
+            <i class="float-start bi bi-check-circle text-gravity-green"></i>
+            <span class="mx-2">Short arrival time of <span class="bold">30 minutes or less*</span></span>
+          </li>
+          <li class="list-group-item text-white">
+            <i class="float-start bi bi-check-circle text-gravity-green"></i>
+            <span class="mx-2">Honest competitive prices - <span class="bold">zero hidden fees</span></span>
+          </li>
+          <li class="list-group-item text-white">
+            <i class="float-start bi bi-check-circle text-gravity-green"></i>
+            <span class="mx-2">Friendly and <span class="bold">professional service</span></span>
+          </li>
+          <li class="list-group-item text-white">
+            <i class="float-start bi bi-check-circle text-gravity-green"></i>
+            <span class="mx-2">Available <span class="bold">24 hours</span> a day, <span class="bold">7 days</span> a week</span>
+          </li>
+        </ul>
+      </p>
+    {{/if}}
+  </div>
+</div>

gravity-group-website/app/components/about-us.ts

@@ -0,0 +1,16 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class AboutUsComponent extends Component {
+  @tracked selectedOption: any;
+
+  @action
+  toggleList(selected: string) {
+    var selectedOption = this.selectedOption;
+    if (selectedOption === selected)
+      this.selectedOption = undefined;
+    else
+      this.selectedOption = selected;
+  }
+}

gravity-group-website/app/components/gallery.hbs

@@ -0,0 +1,61 @@
+<PhotoSwipe @items={{this.items}} as |photoSwipe|>
+  <div class="row">
+    <div class="col-12 col-md-6 mb-4">
+      <img src="images/banner1.jpg" class="img-fluid">
+    </div>
+    <div class="col-12 col-md-6">
+      <div class="row">
+        <div class="col-12 col-md-6 mb-4">
+          <img src="images/1.jpg" class="img-fluid">
+        </div>
+        <div class="col-12 col-md-6 mb-4">
+          <img src="images/2.jpg" class="img-fluid">
+        </div>
+        <div class="col-12 col-md-6 mb-4">
+          <img src="images/3.jpg" class="img-fluid">
+        </div>
+        <div class="col-12 col-md-6 mb-4">
+          <img src="images/13.jpg" class="img-fluid">
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-12 col-md-6">
+      <div class="row">
+        <div class="col-12 col-md-6 mb-4">
+          <img src="images/5.jpg" class="img-fluid">
+        </div>
+        <div class="col-12 col-md-6 mb-4">
+          <img src="images/6.jpg" class="img-fluid">
+        </div>
+      </div>
+    </div>
+    <div class="col-12 col-md-6 mb-4">
+      <img src="images/My project-1 (1).png" class="img-fluid">
+      {{!-- <img src="images/9.jpg" class="img-fluid"> --}}
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col-12 col-md-6 mb-4">
+      <img src="images/14.jpg" class="img-fluid">
+    </div>
+    <div class="col-12 col-md-6">
+      <div class="row">
+        <div class="col-12 col-md-6 mb-4">
+          <img src="images/10.jpg" class="img-fluid">
+        </div>
+        <div class="col-12 col-md-6 mb-4">
+          <img src="images/11.jpg" class="img-fluid">
+        </div>
+        <div class="col-12 col-md-6 mb-4">
+          <img src="images/16.jpg" class="img-fluid">
+        </div>
+        <div class="col-12 col-md-6 mb-4">
+          <img src="images/4.jpg" class="img-fluid">
+        </div>
+      </div>
+    </div>
+  </div>
+</PhotoSwipe>

gravity-group-website/app/components/navbar.hbs

@@ -0,0 +1,82 @@
+<nav class="navbar bg-body-tertiary fixed-top">
+  <div class="container-fluid">
+    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
+      <div class="offcanvas-header">
+        <h5 class="offcanvas-title text-white" id="offcanvasNavbarLabel">Gravity Group RSA</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+      </div>
+      <div class="offcanvas-body">
+        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
+          <li class="nav-item">
+            <a class="nav-link" href="#" {{on "click" (fn this.transitionTo "index")}}>Home</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#" {{on "click" (fn this.transitionTo "courier-services")}}>Courier Services</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#" {{on "click" (fn this.transitionTo "roadside-assist")}}>Roadside Assist</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</nav>
+<section id="nav-cover">
+  <div class="row main-section">
+    <div class="col-xs-12 col-md-9 left-side-banner">
+      <div>
+        <h4>24/7 Roadside &amp; Courier Services. Call us <a class="text-white no-underline" href="tel:082 630 0543">082 630 0543</a> | 
+        <a class="text-white no-underline" href="https://wa.me/+27790963817">079 096 3817</a></h4>
+      </div>
+      <div class="main-heading-2">
+        <h1 class="text-gravityred">Gravity Group RSA</h1>
+        <br>
+        <h4 class="text-gravityblue offset">Courier Services</h4>
+        <h4 class="text-gravityblue offset">Roadside Assist</h4>
+
+      </div>
+    </div>
+    <div class="col-xs-12 col-md-3 right-side-banner">
+      <div class="main-heading row">
+        <h4>
+          <i class="bi bi-envelope-at"></i>
+          [email protected] | [email protected]
+        </h4>
+      </div>
+    </div>
+    <hr>
+
+    <div class="row main-section-footer">
+      <div class="col-xs-12 col-md-3 border-light">
+        <i class="bi bi-truck-flatbed float-end font-40"></i>
+        Towing <br>
+        24/7
+      </div>
+      <div class="col-xs-12 col-md-3 border-light">
+        <i class="bi bi-shield-lock float-end font-40"></i>
+        Locksmith <br>
+        24/7
+      </div>
+      <div class="col-xs-12 col-md-3 border-light">
+        <i class="bi bi-lightning-charge float-end font-40"></i>
+        Jumpstart/Battery Sales &amp; Delivery <br>
+        24/7
+      </div>
+      <div class="col-xs-12 col-md-3">
+        <i class="bi bi-truck float-end font-40"></i>
+        Courier Services <br>
+        24/7
+      </div>
+    </div>
+  </div>
+</section>
+{{outlet}}
+
+<footer class="text-center">
+  <p>
+    Gravity 24/7 | All Rights Reserved &copy; {{this.currentYear}}
+  </p>
+</footer>

gravity-group-website/app/components/navbar.js

@@ -0,0 +1,18 @@
+import { action } from '@ember/object';
+import { inject } from '@ember/service';
+import Component from '@glimmer/component';
+
+export default class NavbarComponent extends Component {
+  @inject router;
+
+  get currentYear() {
+    return new Date().getFullYear();
+  }
+
+  @action
+  transitionTo(route, event) {
+    event && event.preventDefault();
+    document.querySelector('.navbar-toggler').click();
+    this.router.transitionTo(route);
+  }
+}