Live demo: Shopping Landing Page
A landing page for a mock beauty company.
This website was made using React. The React 'router' hook was implemented to add multiple pages to the application. The login option also uses Auth0 as the main authentication service.
The router hook switches between the different page directories. The Browser history hook also keeps track of the user's page history.
//Using 'process.env.PUBLIC_URL' allows for proper redirection on Gh-pages
import {BrowserRouter, Switch, Route} from 'react-router-dom';
const Routes = () => {
return (
<BrowserRouter>
<Auth0ProviderWithHistory>
<ScrollToTop />
<Header />
<Switch>
<Route exact path={process.env.PUBLIC_URL + "/"} component={Home}/>
<Route exact path={process.env.PUBLIC_URL + "/shop"} component={Shop}/>
<Route exact path={process.env.PUBLIC_URL+"/about"} component={About}/>
</Switch>
<Bottom />
</Auth0ProviderWithHistory>
</BrowserRouter>
);
}
The application features a Auth0 login option. There is currently no private site data that would require authentication but this serves as a practice on how to use the Auth0 service.
import { useAuth0 } from "@auth0/auth0-react";
const LoginButton = () => {
const {loginWithRedirect} = useAuth0();
return (
<div
className="nav-item"
onClick={loginWithRedirect}
>
LOGIN
</div>
);
};
export default LoginButton;
import { useAuth0 } from "@auth0/auth0-react";
const AuthenticationButton = () => {
const { isAuthenticated } = useAuth0();
return isAuthenticated ? <LogoutButton /> : <LoginButton />;
};
export default AuthenticationButton;
All of the website styling was done from scratch without the use of other styling libraries such as bootstrap.
@function rem($value) {
@return ($value / 16) * 1rem;
}
/* CSS Reset */
*, *::before, *::after {
margin: 0;
padding: 0;
// box-sizing: inherit;
box-sizing: border-box;
}
.promo-container {
display: flex;
flex-direction: row;
justify-content: center;
flex: 1 0 67%;
align-items: center;
.promo-item {
display: flex;
flex-flow: column ;
align-items: center;
width: 280px;
margin-left: 20px;
margin-right: 20px;
.promo-img {
width: 100%;
height: 280px;
object-position: center;
}
.promo-text {
width: 240px;
height: 128px;
margin-top: 25px;
font-family: freight-light;
letter-spacing: 1px;
font-size: 18px;
color: rgb(65, 65, 65);
word-spacing: 1.2px;
text-align: center;
line-height: 23px;
}
}
}