feat: complete all basic structure of the website

This completes the basic structure of the website.

Related to #9, #6, #5, #4

src/main/webapp/app/app.scss

@@ -6,6 +6,10 @@ body {
   margin: 0;
 }
 
+.header-padding {
+  padding-top: 60px;
+}
+
 a {
   color: #533f03;
   font-weight: bold;

src/main/webapp/app/app.tsx

@@ -27,10 +27,9 @@ export const App = (props: IAppProps) => {
     props.getProfile();
   }, []);
 
-  const paddingTop = '60px';
   return (
     <Router basename={baseHref}>
-      <div className="app-container" style={{ paddingTop }}>
+      <div className="app-container">
         <ToastContainer position={toast.POSITION.TOP_LEFT} className="toastify-container" toastClassName="toastify-toast" />
         <ErrorBoundary>
           <Header

src/main/webapp/app/modules/account/activate/activate.tsx

@@ -35,7 +35,7 @@ export const ActivatePage = (props: IActivateProps) => {
   }, []);
 
   return (
-    <div>
+    <div className="header-padding">
       <Row className="justify-content-center">
         <Col md="8">
           <h1>Activation</h1>

src/main/webapp/app/modules/account/password-reset/finish/password-reset-finish.tsx

@@ -61,7 +61,7 @@ export const PasswordResetFinishPage = (props: IPasswordResetFinishProps) => {
   };
 
   return (
-    <div>
+    <div className="header-padding">
       <Row className="justify-content-center">
         <Col md="4">
           <h1>Reset password</h1>

src/main/webapp/app/modules/account/password/password.tsx

@@ -29,7 +29,7 @@ export const PasswordPage = (props: IUserPasswordProps) => {
   const updatePassword = event => setPassword(event.target.value);
 
   return (
-    <div>
+    <div className="header-padding">
       <Row className="justify-content-center">
         <Col md="8">
           <h2 id="password-title">Password for {props.account.login}</h2>

src/main/webapp/app/modules/account/register/register.tsx

@@ -28,7 +28,7 @@ export const RegisterPage = (props: IRegisterProps) => {
   const updatePassword = event => setPassword(event.target.value);
 
   return (
-    <div>
+    <div className="header-padding">
       <Row className="justify-content-center">
         <Col md="8">
           <h1 id="register-title">Registration</h1>

src/main/webapp/app/modules/account/settings/settings.tsx

@@ -29,7 +29,7 @@ export const SettingsPage = (props: IUserSettingsProps) => {
   };
 
   return (
-    <div>
+    <div className="header-padding">
       <Row className="justify-content-center">
         <Col md="8">
           <h2 id="settings-title">User settings for {props.account.login}</h2>

src/main/webapp/app/modules/administration/audits/audits.tsx

@@ -94,7 +94,7 @@ export const AuditsPage = (props: IAuditsPageProps) => {
   const { audits, totalItems } = props;
 
   return (
-    <div>
+    <div className="header-padding">
       <h2 id="audits-page-heading">Audits</h2>
       <span>from</span>
       <Input type="date" value={fromDate} onChange={onChangeFromDate} name="fromDate" id="fromDate" />

src/main/webapp/app/modules/administration/configuration/configuration.tsx

@@ -39,7 +39,7 @@ export const ConfigurationPage = (props: IConfigurationPageProps) => {
   const env = configuration && configuration.env ? configuration.env : {};
 
   return (
-    <div>
+    <div className="header-padding">
       <h2 id="configuration-page-heading">Configuration</h2>
       <span>Filter</span> <Input type="search" value={filter} onChange={changeFilter} name="search" id="search" />
       <label>Spring configuration</label>

src/main/webapp/app/modules/administration/docs/docs.tsx

@@ -3,7 +3,7 @@ import './docs.scss';
 import React from 'react';
 
 const DocsPage = () => (
-  <div>
+  <div className="header-padding">
     <iframe src="../swagger-ui/index.html" width="100%" height="800" title="Swagger UI" seamless style={{ border: 'none' }} />
   </div>
 );

src/main/webapp/app/modules/administration/health/health.tsx

@@ -37,7 +37,7 @@ export const HealthPage = (props: IHealthPageProps) => {
   const data = (health || {}).components || {};
 
   return (
-    <div>
+    <div className="header-padding">
       <h2 id="health-page-heading">Health Checks</h2>
       <p>
         <Button onClick={getSystemHealth} color={isFetching ? 'btn btn-danger' : 'btn btn-primary'} disabled={isFetching}>

src/main/webapp/app/modules/administration/logs/logs.tsx

@@ -31,7 +31,7 @@ export const LogsPage = (props: ILogsPageProps) => {
   const loggers = logs ? Object.entries(logs.loggers).map(e => ({ name: e[0], level: e[1].effectiveLevel })) : [];
 
   return (
-    <div>
+    <div className="header-padding">
       <h2 id="logs-page-heading">Logs</h2>
       <p>There are {loggers.length.toString()} loggers.</p>
 

src/main/webapp/app/modules/administration/metrics/metrics.tsx

@@ -38,7 +38,7 @@ export const MetricsPage = (props: IMetricsPageProps) => {
   const { metrics, threadDump, isFetching } = props;
 
   return (
-    <div>
+    <div className="header-padding">
       <h2 id="metrics-page-heading">Application Metrics</h2>
       <p>
         <Button onClick={getMetrics} color={isFetching ? 'btn btn-danger' : 'btn btn-primary'} disabled={isFetching}>

src/main/webapp/app/modules/administration/user-management/user-management-detail.tsx

@@ -20,7 +20,7 @@ export const UserManagementDetail = (props: IUserManagementDetailProps) => {
   const { user } = props;
 
   return (
-    <div>
+    <div className="header-padding">
       <h2>
         User [<b>{user.login}</b>]
       </h2>

src/main/webapp/app/modules/administration/user-management/user-management-update.tsx

@@ -43,7 +43,7 @@ export const UserManagementUpdate = (props: IUserManagementUpdateProps) => {
   const { user, loading, updating, roles } = props;
 
   return (
-    <div>
+    <div className="header-padding">
       <Row className="justify-content-center">
         <Col md="8">
           <h1>Create or edit a User</h1>

src/main/webapp/app/modules/administration/user-management/user-management.tsx

@@ -62,7 +62,7 @@ export const UserManagement = (props: IUserManagementProps) => {
 
   const { users, account, match, totalItems } = props;
   return (
-    <div>
+    <div className="header-padding">
       <h2 id="user-management-page-heading">
         Users
         <Link to={`${match.url}/new`} className="btn btn-primary float-right jh-create-entity">

src/main/webapp/app/modules/components/contact-us/contact-us.tsx

@@ -15,7 +15,7 @@ const ContactUs = () => {
               <div className="mb-3 mt-3 text-center">
                 <FontAwesomeIcon icon="phone" size="2x"/>
               </div>
-              <a href="tel:+1 888 343-1234">+1 888 343-1234</a>
+              <a href="tel:+1 888 343-1234">+1 888 123-4567</a>
             </Col>
             <Col className="col-xs-12 col-sm-4 text-center">
               <div className="mb-3 mt-3 text-center">

src/main/webapp/app/modules/components/jumbotron/jumbotron.tsx

@@ -12,12 +12,12 @@ const JumbotronElement = () => {
       <div className="container h-100 text-container">
         <div className="d-flex h-100 text-center align-items-center">
           <div className="w-100 text-white">
-            <h1 className="display-3">AccoTech</h1>
+            <h1 className="display-3">AccoTech Accounting</h1>
             <p className="lead mb-0">
-              <q>This is a question too difficult for a mathematician. It should be asked of a philosopher.</q>
+              <q>Don&rsquo;t ever let your business get ahead of the financial side of your business. Accounting, accounting, accounting. Know your numbers.</q>
             </p>
             <br/>
-            <p>&#8275; Albert Einstein (when asked about completing his income tax form) &#8275;</p>
+            <p>&#8275; Tilman J. Fertitta &#8275;</p>
           </div>
         </div>
       </div>

src/main/webapp/app/modules/components/services/services.tsx

@@ -19,57 +19,69 @@ const Services = () => {
         <Col>
           <Container>
             <div className="text-center">
-              <FontAwesomeIcon icon={['fab', 'twitter']} size="2x"/>
-              <h2 className="p-2">Card title</h2>
+              <FontAwesomeIcon icon={['fas', 'file-invoice']} color="#A0D3FF" size="2x"/>
+              <h2 className="p-2">Accounting Services</h2>
             </div>
-            <p>Some quick example text to build on the card title and make up the bulk of the cards content.</p>
+            <p>Has over 50 years of experience serving middle market companies. As an independent registered public accounting firm, AccoTech
+              provides accounting services to hundreds of companies. The Firm is also one of the top 20 accounting and advisory firms in the country,
+              providing services to privately-owned national firms as well as local businesses.</p>
           </Container>
         </Col>
         <Col>
           <Container>
             <div className="text-center">
-              <FontAwesomeIcon icon={['fab', 'twitter']} size="2x"/>
-              <h2 className="p-2">Card title</h2>
+              <FontAwesomeIcon icon={['fas', 'file-invoice-dollar']} color="#A0D3FF" size="2x"/>
+              <h2 className="p-2">Tax Preparation</h2>
             </div>
-            <p>Some quick example text to build on the card title and make up the bulk of the cards content.</p>
+            <p>Has over 50 years of experience serving middle market companies. As an independent registered public accounting firm, AccoTech
+              provides accounting services to hundreds of companies. The Firm is also one of the top 20 accounting and advisory firms in the country,
+              providing services to privately-owned national firms as well as local businesses.</p>
           </Container>
         </Col>
         <Col>
           <Container>
             <div className="text-center">
-              <FontAwesomeIcon icon={['fab', 'twitter']} size="2x"/>
-              <h2 className="p-2">Card title</h2>
+              <FontAwesomeIcon icon={['fas', 'people-arrows']} color="#A0D3FF" size="2x"/>
+              <h2 className="p-2">Staffing Services</h2>
             </div>
-            <p>Some quick example text to build on the card title and make up the bulk of the cards content.</p>
+            <p>Has over 50 years of experience serving middle market companies. As an independent registered public accounting firm, AccoTech
+              provides accounting services to hundreds of companies. The Firm is also one of the top 20 accounting and advisory firms in the country,
+              providing services to privately-owned national firms as well as local businesses.</p>
           </Container>
         </Col>
       </Row>
       <Row>
         <Col>
           <Container>
             <div className="text-center">
-              <FontAwesomeIcon icon={['fab', 'twitter']} size="2x"/>
-              <h2 className="p-2">Card title</h2>
+              <FontAwesomeIcon icon={['far', 'building']} color="#A0D3FF" size="2x"/>
+              <h2 className="p-2">Business Registration</h2>
             </div>
-            <p>Some quick example text to build on the card title and make up the bulk of the cards content.</p>
+            <p>Has over 50 years of experience serving middle market companies. As an independent registered public accounting firm, AccoTech
+              provides accounting services to hundreds of companies. The Firm is also one of the top 20 accounting and advisory firms in the country,
+              providing services to privately-owned national firms as well as local businesses.</p>
           </Container>
         </Col>
         <Col>
           <Container>
             <div className="text-center">
-              <FontAwesomeIcon icon={['fab', 'twitter']} size="2x"/>
-              <h2 className="p-2">Card title</h2>
+              <FontAwesomeIcon icon={['fas', 'exclamation-circle']} color="#A0D3FF" size="2x"/>
+              <h2 className="p-2">Notice to Reader</h2>
             </div>
-            <p>Some quick example text to build on the card title and make up the bulk of the cards content.</p>
+            <p>Has over 50 years of experience serving middle market companies. As an independent registered public accounting firm, AccoTech
+              provides accounting services to hundreds of companies. The Firm is also one of the top 20 accounting and advisory firms in the country,
+              providing services to privately-owned national firms as well as local businesses.</p>
           </Container>
         </Col>
         <Col>
           <Container>
             <div className="text-center">
-              <FontAwesomeIcon icon={['fab', 'twitter']} size="2x"/>
-              <h2 className="p-2">Card title</h2>
+              <FontAwesomeIcon icon={['fas', 'user-shield']} color="#A0D3FF" size="2x"/>
+              <h2 className="p-2">CRA/IRS Representation</h2>
             </div>
-            <p>Some quick example text to build on the card title and make up the bulk of the cards content.</p>
+            <p>Has over 50 years of experience serving middle market companies. As an independent registered public accounting firm, AccoTech
+              provides accounting services to hundreds of companies. The Firm is also one of the top 20 accounting and advisory firms in the country,
+              providing services to privately-owned national firms as well as local businesses.</p>
           </Container>
         </Col>
       </Row>

src/main/webapp/app/modules/home/home.scss

@@ -1,10 +1,11 @@
 /* ==========================================================================
 Main page styles
 ========================================================================== */
-.hipster {
-  display: inline-block;
-  width: 100%;
-  height: 497px;
-  background: url('../../../content/images/jhipster_family_member_0.svg') no-repeat center top;
-  background-size: contain;
+
+hr {
+  clear: both;
+  display: block;
+  width: 96%;
+  background-color: #d4d4d4;
+  height: 1px;
 }

src/main/webapp/app/modules/home/home.tsx

@@ -20,8 +20,11 @@ export const Home = (props: IHomeProp) => {
     <Row>
       <JumbotronElement/>
       <Services/>
+      <hr/>
       <Team/>
+      <hr/>
       <ContactUs/>
+      <hr/>
     </Row>
   );
 };

src/main/webapp/app/shared/layout/header/header-components.tsx

@@ -8,14 +8,13 @@ import appConfig from 'app/config/constants';
 
 export const BrandIcon = props => (
   <div {...props} className="brand-icon">
-    <img src="content/images/logo-jhipster.png" alt="Logo" />
+    <img src="content/images/logo-accotech.svg" alt="Logo" />
   </div>
 );
 
 export const Brand = props => (
   <NavbarBrand tag={Link} to="/" className="brand-logo">
     <BrandIcon />
-    <span className="brand-title">AccoTech</span>
     <span className="navbar-version">{appConfig.VERSION}</span>
   </NavbarBrand>
 );

src/main/webapp/app/shared/layout/header/header.scss

@@ -38,7 +38,7 @@ Developement Ribbon
 Navbar styles
 ========================================================================== */
 .jh-navbar {
-  background-color: #353d47;
+  background-color: transparentize(#353d47, 0.5);
   padding: 0.2em 1em;
   .profile-image {
     margin: -10px 0px;
@@ -90,7 +90,7 @@ Navbar styles
     width: auto;
     display: inline-block;
     img {
-      height: 45px;
+      height: 35px;
     }
   }
 }

src/main/webapp/app/shared/util/fontawesome-icons.ts

@@ -1,11 +1,24 @@
 import { faTwitter, faFacebook, faInstagram } from '@fortawesome/free-brands-svg-icons';
-import { faPhone } from '@fortawesome/free-solid-svg-icons';
-import { faEnvelope } from '@fortawesome/free-regular-svg-icons';
+import {
+  faPhone,
+  faFileInvoice,
+  faFileInvoiceDollar,
+  faPeopleArrows,
+  faExclamationCircle,
+  faUserShield,
+} from '@fortawesome/free-solid-svg-icons';
+import { faEnvelope, faBuilding } from '@fortawesome/free-regular-svg-icons';
 
 export const fontAwesomeIcons = {
   faPhone,
   faEnvelope,
   faTwitter,
   faFacebook,
   faInstagram,
+  faFileInvoice,
+  faFileInvoiceDollar,
+  faPeopleArrows,
+  faBuilding,
+  faExclamationCircle,
+  faUserShield,
 };

src/main/webapp/content/css/loading.css

@@ -133,7 +133,7 @@
   left: -8px;
   width: 24px;
   height: 10px;
-  background-image: url('../images/logo-jhipster.png');
+  background-image: url('../images/logo-accotech.svg');
   background-size: contain;
   -webkit-animation: lds-pacman-3 1s linear infinite;
   animation: lds-pacman-3 1.5s linear infinite;