admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

IO-1816 Refactor main page.

Browse Source
This commit is contained in:
Patrick Fic
2022-04-18 11:37:56 -07:00
parent 920ebdde42
commit a10b5a2ee0
10 changed files with 762 additions and 517 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
client/src/assets/banner4.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 262 KiB

29
client/src/landing/Banner0.jsx
View File

@@ -1,9 +1,9 @@
import React from 'react';
import { Button } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import QueueAnim from 'rc-queue-anim';
import TweenOne from 'rc-tween-one';
import { isImg } from './utils';
import React from "react";
import { Button, Space } from "antd";
import { DownOutlined } from "@ant-design/icons";
import QueueAnim from "rc-queue-anim";
import TweenOne from "rc-tween-one";
import { isImg } from "./utils";
class Banner extends React.PureComponent {
render() {
@@ -15,12 +15,12 @@ class Banner extends React.PureComponent {
<div {...currentProps} {...dataSource.wrapper}>
<QueueAnim
key="QueueAnim"
type={['bottom', 'top']}
type={["bottom", "top"]}
delay={200}
{...dataSource.textWrapper}
>
<div key="title" {...dataSource.title}>
{typeof dataSource.title.children === 'string' &&
{typeof dataSource.title.children === "string" &&
dataSource.title.children.match(isImg) ? (
<img src={dataSource.title.children} width="100%" alt="img" />
) : (
@@ -30,13 +30,18 @@ class Banner extends React.PureComponent {
<div key="content" {...dataSource.content}>
{dataSource.content.children}
</div>
<Button ghost key="button" {...dataSource.button}>
{dataSource.button.children}
</Button>
<Space wrap>
<Button ghost key="button" {...dataSource.button}>
{dataSource.button.children}
</Button>
<Button type="primary" key="button2" {...dataSource.button2}>
{dataSource.button2.children}
</Button>
</Space>
</QueueAnim>
<TweenOne
animation={{
y: '-=20',
y: "-=20",
yoyo: true,
repeat: -1,
duration: 1000,

63
client/src/landing/data.source.js
View File

@@ -74,26 +74,26 @@ export const Nav00DataSource = {
// },
// ],
// },
{
name: "item1",
className: "header0-item",
children: {
href: "#",
children: [
{ children: i18n.t("landing.labels.features"), name: "text" },
],
},
},
{
name: "item2",
className: "header0-item",
children: {
href: "#",
children: [
{ children: i18n.t("landing.labels.pricing"), name: "text" },
],
},
},
// {
// name: "item1",
// className: "header0-item",
// children: {
// href: "#",
// children: [
// { children: i18n.t("landing.labels.features"), name: "text" },
// ],
// },
// },
// {
// name: "item2",
// className: "header0-item",
// children: {
// href: "#",
// children: [
// { children: i18n.t("landing.labels.pricing"), name: "text" },
// ],
// },
// },
{
name: "item3",
className: "header0-item",
@@ -124,7 +124,12 @@ export const Banner00DataSource = {
button: {
className: "banner0-button",
children: i18n.t("landing.hero.button"),
href: "https://imexsystems.ca",
href: "https://imexsystems.ca/products/imex-online",
},
button2: {
className: "banner0-button2",
children: i18n.t("landing.labels.managemyshop"),
href: "https://imexsystems.ca/products/imex-online",
},
};
export const Content40DataSource = {
@@ -1033,22 +1038,22 @@ export const Footer10DataSource = {
childWrapper: {
children: [
{
href: "/privacy",
href: "https://imexsystems.ca/privacy",
name: "link0",
children: i18n.t("landing.footer.company.privacypolicy"),
},
{
href: "/about",
name: "link1",
children: i18n.t("landing.footer.company.about"),
},
// {
// href: "/about",
// name: "link1",
// children: i18n.t("landing.footer.company.about"),
// },
{
href: "/disclaimer",
name: "link2",
children: i18n.t("landing.footer.company.disclaimers"),
},
{
href: "https://thinkimex.com",
href: "https://imexsystems.ca/schedule-a-demo/",
name: "link3",
children: i18n.t("landing.footer.company.contact"),
},
@@ -1063,7 +1068,7 @@ export const Footer10DataSource = {
className: "copyright",
children: (
<span>
©2021 <a href="http://imexsystems.ca">ImEX Systems</a> used under
©2022 <a href="http://imexsystems.ca">ImEX Systems</a> used under
license.
</span>
),

120
client/src/landing/index.jsx
View File

@@ -4,27 +4,27 @@ import { enquireScreen } from "enquire-js";
import React from "react";
import Banner0 from "./Banner0";
// import Content4 from "./Content4";
import Content0 from "./Content0";
import Content1 from "./Content1";
//import Content0 from "./Content0";
//import Content1 from "./Content1";
import {
Banner00DataSource,
// Content40DataSource,
Content00DataSource,
Content10DataSource,
//Content00DataSource,
//Content10DataSource,
// Pricing11DataSource,
// Content30DataSource,
// Content120DataSource,
Footer10DataSource,
Nav00DataSource,
Pricing20DataSource,
// Nav00DataSource,
//Pricing20DataSource,
} from "./data.source";
// import Pricing1 from "./Pricing1";
// import Content3 from "./Content3";
// import Content12 from "./Content12";
import Footer1 from "./Footer1";
import "./less/antMotionStyle.less";
import Nav0 from "./Nav0";
import Pricing2 from "./Pricing2";
// import Nav0 from "./Nav0";
//import Pricing2 from "./Pricing2";
let isMobile;
enquireScreen((b) => {
@@ -62,64 +62,64 @@ export default class Home extends React.Component {
render() {
const children = [
<Nav0
id="Nav0_0"
key="Nav0_0"
dataSource={Nav00DataSource}
isMobile={this.state.isMobile}
/>,
// <Nav0
// id="Nav0_0"
// key="Nav0_0"
// dataSource={Nav00DataSource}
// isMobile={this.state.isMobile}
// />,
<Banner0
id="Banner0_0"
key="Banner0_0"
dataSource={Banner00DataSource}
isMobile={this.state.isMobile}
/>,
...(process.env.NODE_ENV !== "production"
? [
// <Content4
// id="Content4_0"
// key="Content4_0"
// dataSource={Content40DataSource}
// isMobile={this.state.isMobile}
// />,
<Content1
id="Content1_0"
key="Content1_0"
dataSource={Content10DataSource}
isMobile={this.state.isMobile}
/>,
<Content0
id="Content0_0"
key="Content0_0"
dataSource={Content00DataSource}
isMobile={this.state.isMobile}
/>,
<Pricing2
id="Pricing2_0"
key="Pricing2_0"
dataSource={Pricing20DataSource}
isMobile={this.state.isMobile}
/>,
// <Pricing1
// id="Pricing1_1"
// key="Pricing1_1"
// dataSource={Pricing11DataSource}
// isMobile={this.state.isMobile}
// />,
// <Content3
// id="Content3_0"
// key="Content3_0"
// dataSource={Content30DataSource}
// isMobile={this.state.isMobile}
// />,
// <Content12
// id="Content12_0"
// key="Content12_0"
// dataSource={Content120DataSource}
// isMobile={this.state.isMobile}
// />,
]
: []),
// ...(process.env.NODE_ENV !== "production"
// ? [
// // <Content4
// // id="Content4_0"
// // key="Content4_0"
// // dataSource={Content40DataSource}
// // isMobile={this.state.isMobile}
// // />,
// <Content1
// id="Content1_0"
// key="Content1_0"
// dataSource={Content10DataSource}
// isMobile={this.state.isMobile}
// />,
// <Content0
// id="Content0_0"
// key="Content0_0"
// dataSource={Content00DataSource}
// isMobile={this.state.isMobile}
// />,
// <Pricing2
// id="Pricing2_0"
// key="Pricing2_0"
// dataSource={Pricing20DataSource}
// isMobile={this.state.isMobile}
// />,
// // <Pricing1
// // id="Pricing1_1"
// // key="Pricing1_1"
// // dataSource={Pricing11DataSource}
// // isMobile={this.state.isMobile}
// // />,
// // <Content3
// // id="Content3_0"
// // key="Content3_0"
// // dataSource={Content30DataSource}
// // isMobile={this.state.isMobile}
// // />,
// // <Content12
// // id="Content12_0"
// // key="Content12_0"
// // dataSource={Content120DataSource}
// // isMobile={this.state.isMobile}
// // />,
// ]
// : []),
<Footer1
id="Footer1_0"
key="Footer1_0"

24
client/src/landing/less/banner0.less
View File

@@ -6,7 +6,7 @@
position: relative;
text-align: center;
border-color: #666;
background-image: url("../../assets/banner1.jpeg");
background-image: url("../../assets/banner4.jpg");
background-size: cover;
background-attachment: fixed;
background-position: center;
@@ -60,6 +60,28 @@
width: auto;
}
}
& &-button2 {
border: 1px solid #fff;
color: #fff;
// background: transparent;
box-shadow: 0 0 0 transparent;
font-size: 16px;
height: 40px;
transition: background 0.45s @ease-out, box-shadow 0.45s @ease-out;
&:hover {
color: #fff;
border-color: #fff;
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 0 10px rgba(50, 250, 255, 0.75);
}
&:focus {
color: #fff;
border-color: #fff;
}
&.queue-anim-leaving {
width: auto;
}
}
& &-icon {
bottom: 20px;
font-size: 24px;

6
client/src/translations/en_us/common.json
View File

@@ -1673,15 +1673,15 @@
"name": "ImEX Online",
"status": "System Status"
},
"slogan": "A whole new kind of shop management system."
"slogan": "ImEX Systems Inc. is a technology leader in the collision repair industry. We specialize in creating collision repair management systems and bodyshop management systems that lower cycle times and promote efficiency."
},
"hero": {
"button": "Learn More",
"title": "A whole new kind of shop management system."
"title": "Shop management reimagined."
},
"labels": {
"features": "Features",
"managemyshop": "Manage my Shop",
"managemyshop": "Sign In",
"pricing": "Pricing"
},
"pricing": {