Browse Source

site: Amends brand naming and adds various other features

master
creton32 2 months ago
parent
commit
8344026a70
  1. 17
      client/assets/icons/loading-spinner.svg
  2. 62
      client/assets/styles/components/_button.scss
  3. 22
      client/components/layout/button/Button.js
  4. 5
      client/components/layout/form/Form.js
  5. 2
      client/components/layout/navbar/MobileNavbar.js
  6. 2
      client/components/layout/navbar/Navbar.js
  7. 5
      client/components/layout/showcase/Showcase.js
  8. 5
      client/components/layout/video/Video.js
  9. 6
      client/components/pages/About.js
  10. 44
      client/components/pages/Doulton.js
  11. 24
      client/hooks/useFetch.js

17
client/assets/icons/loading-spinner.svg

@ -0,0 +1,17 @@
<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#fff">
<g fill="none" fill-rule="evenodd">
<g transform="translate(1 1)" stroke-width="2">
<circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
<path d="M36 18c0-9.94-8.06-18-18-18">
<animateTransform
attributeName="transform"
type="rotate"
from="0 18 18"
to="360 18 18"
dur="1s"
repeatCount="indefinite"/>
</path>
</g>
</g>
</svg>

62
client/assets/styles/components/_button.scss

@ -10,39 +10,39 @@ a {
@include respond($tablet) {
width: 100%;
}
.btn {
@include user-select-none;
text-transform: uppercase;
font-family: $nunito-semibold;
border: none;
cursor: pointer;
margin: 2rem 1rem;
@include respond($tablet) {
width: 100%;
margin: 1rem 0;
}
}
.fullBtn {
background: $navy_blue;
color: $gray;
border-radius: 100px;
padding: 1rem 2rem;
}
.altFullBtn {
border-radius: 100px;
color: $navy_blue;
background: white;
padding: 1rem 2rem;
}
.bareBtn {
@include flexbox-center;
color: $gold;
background: none;
text-decoration: underline;
font-size: 0.8rem;
letter-spacing: 3px;
}
.btn {
@include user-select-none;
text-transform: uppercase;
font-family: $nunito-semibold;
border: none;
cursor: pointer;
margin: 2rem 1rem;
@include respond($tablet) {
width: 100%;
margin: 1rem 0;
}
}
.fullBtn {
background: $navy_blue;
color: $gray;
border-radius: 100px;
padding: 1rem 2rem;
}
.altFullBtn {
border-radius: 100px;
color: $navy_blue;
background: white;
padding: 1rem 2rem;
}
.bareBtn {
@include flexbox-center;
color: $gold;
background: none;
text-decoration: underline;
font-size: 0.8rem;
letter-spacing: 3px;
}
.btn {
@include user-select-none;
text-transform: uppercase;

22
client/components/layout/button/Button.js

@ -5,7 +5,7 @@ import CaretLeft from '../../../assets/icons/caret-left.svg'
import PropTypes from 'prop-types'
import { Context } from '../../../stores/Store'
const Button = ({ type, content, path, bgColor, isExternal, id, direction }) => {
const Button = ({ type, content, path, bgColor, isExternal, id, direction, submit }) => {
const [state, dispatch] = useContext(Context)
const handleClick = () => {
switch (type) {
@ -34,6 +34,22 @@ const Button = ({ type, content, path, bgColor, isExternal, id, direction }) =>
</button>
</a>
)
: submit
? (
<button
className={`btn ${
type === 'full' && bgColor !== '#1c3e94'
? 'fullBtn'
: type === 'bare' && bgColor !== '#1c3e94'
? 'bareBtn'
: 'altFullBtn'
}`}
type="submit"
>
{content}
{type === 'bare' ? <CaretRight /> : null}
</button>
)
: type !== 'modal' && type !== 'animation'
? (
<Link to={path}>
@ -74,7 +90,9 @@ Button.propTypes = {
bgColor: PropTypes.string,
path: PropTypes.string,
isExternal: PropTypes.bool,
id: PropTypes.number
id: PropTypes.number,
direction: PropTypes.string,
submit: PropTypes.bool
}
export default Button

5
client/components/layout/form/Form.js

@ -10,10 +10,11 @@ const Form = () => {
const email = useFormInput()
const phone = useFormInput()
const message = useFormInput()
const { errors, isLoading, setOptions, data } = useFetch('/api/email')
const handleSubmit = (e) => {
e.preventDefault()
useFetch('/api/email', {
setOptions({
name: name,
email: email,
phone: phone,
@ -32,7 +33,7 @@ const Form = () => {
<FormInput label="Email" id="email" {...email} />
<FormInput label="Celular" id="phone" {...phone} />
<FormInput label="Mensaje" type="textarea" id="message" {...message} />
<Button type="full" content="Enviar consulta" path="/api/sendemail" />
<Button type="full" content="Enviar consulta" submit />
</form>
</div>
)

2
client/components/layout/navbar/MobileNavbar.js

@ -15,7 +15,7 @@ const MobileNavbar = () => {
<ul className="mobile-navbar" onClick={() => dispatch({ type: 'TOGGLE_MOBILE_NAV' })}>
<NavbarItem title="Inicio" url="/" />
<NavbarItem title="Nosotros" url="/about" />
<NavbarItem title="Doulton Filters" url="/doulton" />
<NavbarItem title="Doulton Water Filters" url="/doulton" />
<NavbarItem title="Contacto" url="/contact" />
</ul>
<div className="social-links">

2
client/components/layout/navbar/Navbar.js

@ -27,7 +27,7 @@ export const Navbar = () => {
<ul className="navbar">
<NavbarItem title="Inicio" url="/" />
<NavbarItem title="Nosotros" url="/about" />
<NavbarItem title="Doulton Filters" url="/doulton" />
<NavbarItem title="Doulton Water Filters" url="/doulton" />
<NavbarItem title="Contacto" url="/contact" />
<div className="social-links">
<a target="_blank" rel="noreferrer" href="https://linkedin.com/company/siameses/"><LiLogo /></a>

5
client/components/layout/showcase/Showcase.js

@ -33,8 +33,8 @@ const Showcase = ({
<div className="title">
{label
? <div className="label" style={textStyle}>
{label}
</div>
{label}
</div>
: null
}
<h1
@ -74,6 +74,7 @@ const Showcase = ({
<img
src={image.path}
alt={image.description}
loading="lazy"
style={
image.size === 'auto'
? { minWidth: '310px', height: 'auto', width: '310px' }

5
client/components/layout/video/Video.js

@ -2,6 +2,7 @@ import React, { useRef, useState, useEffect } from 'react'
import PlayIcon from '../../../assets/icons/play.svg'
import PauseIcon from '../../../assets/icons/pause.svg'
import LoopIcon from '../../../assets/icons/loop.svg'
import LoadingIcon from '../../../assets/icons/loading-spinner.svg'
import { bool, string } from 'prop-types'
const Video = ({ src, isModalVisible, isModal }) => {
@ -39,6 +40,8 @@ const Video = ({ src, isModalVisible, isModal }) => {
<div className={`video-overlay${videoState === 'playing' ? ' hidden' : ''}`} onClick={handleToggleVideo}>
{videoState === 'paused' && (isModalVisible || !isModal)
? <PlayIcon />
: videoState === 'loading' && (isModalVisible || !isModal)
? <LoadingIcon />
: videoState === 'ended' && (isModalVisible || !isModal)
? <LoopIcon />
: isModalVisible || !isModal
@ -49,6 +52,8 @@ const Video = ({ src, isModalVisible, isModal }) => {
<video
ref={videoRef}
onClick={handleToggleVideo}
onLoadStart={() => setVideoState('loading')}
onLoadedData={() => setVideoState('paused')}
onEnded={handleVideoEnded}
>
<source src={src} type="video/mp4"/>

6
client/components/pages/About.js

@ -12,7 +12,7 @@ const About = () => (
<>
<Modal
title={<>Conoce <b>nuestra historia</b></>}
content={<><p>Siameses se origina en la búsqueda de uno de sus fundadores (Miguel) de una fuente de agua pura en la naturaleza. Un manantial de agua mineral que pudiera mejorar la salud de sus consumidores. Para ello, recorrió durante meses la vertiente del río Cañete, desde la costa hasta Huancaya. Durante su búsqueda conoció diferentes comunidades y muchos parajes de belleza natural.</p><p>Miguel evaluó diferentes alternativas y encontró lo que buscaba: Ser representante en el Perú de la marca líder a nivel mundial de purificadores de agua, Doulton Filters (Reino Unido). Logrando así su objetivo de brindar agua de calidad a las personas siendo responsable con el medio ambiente.</p><p>En este camino, le presenta a Carlos esta oportunidad. Ellos se conocen desde la infancia, tienen valores similares y comparten el entusiasmo por el agua como elemento fundamental para lograr una adecuada salud, el respeto por el medio ambiente y la importancia de la tecnología para lograr altos estándares de calidad.</p><p>Finalmente, acuerdan complementar sus capacidades profesionales y personales para emprender juntos el desarrollo de Siameses, teniendo como principios: salud, calidad y tecnología.</p><p>Siameses representa la simbiosis entre el agua purificada de alta calidad en armonia con el bienestar de las personas.</p></>}
content={<><p>Siameses se origina en la búsqueda de uno de sus fundadores (Miguel) de una fuente de agua pura en la naturaleza. Un manantial de agua mineral que pudiera mejorar la salud de sus consumidores. Para ello, recorrió durante meses la vertiente del río Cañete, desde la costa hasta Huancaya. Durante su búsqueda conoció diferentes comunidades y muchos parajes de belleza natural.</p><p>Miguel evaluó diferentes alternativas y encontró lo que buscaba: ser representante en el Perú de la marca líder a nivel mundial de purificadores de agua, Doulton ® Water Filters (Reino Unido). Logrando así su objetivo de brindar agua de calidad a las personas siendo responsable con el medio ambiente.</p><p>En este camino, le presenta a Carlos esta oportunidad. Ellos se conocen desde la infancia, tienen valores similares y comparten el entusiasmo por el agua como elemento fundamental para lograr una adecuada salud, el respeto por el medio ambiente y la importancia de la tecnología para lograr altos estándares de calidad.</p><p>Finalmente, acuerdan complementar sus capacidades profesionales y personales para emprender juntos el desarrollo de Siameses, teniendo como principios: salud, calidad y tecnología.</p><p>Siameses representa la simbiosis entre el agua purificada de alta calidad en armonia con el bienestar de las personas.</p></>}
/>
<div className="about-wrapper">
<Showcase
@ -45,7 +45,7 @@ const About = () => (
/>
<Showcase
label="Nuestro compromiso"
title={<><b>Agua purificada para cuidar tu salud</b></>}
title={<b>Agua purificada para cuidar tu salud</b>}
type="list"
bgColor="#E2F5F9"
items={[
@ -60,7 +60,7 @@ const About = () => (
icon: <HealthIcon />
},
{
title: 'Tecnologia',
title: 'Tecnología',
description: 'Nuestras soluciones incorporan los avances tecnológicos',
icon: <TechnologyIcon />
}

44
client/components/pages/Doulton.js

@ -7,9 +7,9 @@ import DoultonVideo from '../../assets/videos/doulton_peru.mp4'
const Doulton = () => (
<div className="doulton-wrapper">
<Showcase
type='bare'
type="bare"
title={<>¡La marca Nº1 en <b>purificadores de agua</b> ya está aquí!</>}
description='Somos representantes de Doulton Filters ® del Reino Unido, para ofrecer la mejor calidad de agua purificada a las familias y comercios del Perú.'
description="Somos representantes de Doulton ® Water Filters del Reino Unido, para ofrecer la mejor calidad de agua purificada a las familias y comercios del Perú."
buttons={[
{
content: 'Ir a Doulton.com.pe',
@ -22,30 +22,30 @@ const Doulton = () => (
]}
/>
<Showcase
title="Prueba, saborea, confía y descubre la diferencia de Doulton ®."
title="Prueba, saborea, confía y descubre la diferencia de Doulton ® Water Filters"
type="list"
bgColor="#E2F5F9"
items={[
{
title: 'Pioneros en acceso al agua purificada desde 1826',
description: 'Doulton ® llega hoy con sus soluciones a millones de hogares y comercios en 140 países.'
},
{
title: 'Altos estándares de calidad',
description: 'Doulton ® cuenta con premios y certificaciones internacionales de calidad.',
},
{
title: 'Materiales 100% naturales',
description: 'Los filtros Doulton ® son biodegradables. Además, fomentan el cuidado del medio ambiente.'
}
]}
bgColor="#E2F5F9"
items={[
{
title: 'Pioneros en acceso al agua purificada desde 1826',
description: 'Doulton ® Water Filters llega hoy con sus soluciones a millones de hogares y comercios en 140 países.'
},
{
title: 'Altos estándares de calidad',
description: 'Doulton ® Water Filters cuenta con premios y certificaciones internacionales de calidad.'
},
{
title: 'Materiales 100% naturales',
description: 'Los filtros Doulton ® Water Filters son biodegradables. Además, fomentan el cuidado del medio ambiente.'
}
]}
/>
<Video src={DoultonVideo} />
<Showcase
label='Doulton Filters'
type='center'
title='Conoce el catálogo de Doulton en Perú'
orientation='center'
label="Doulton ® Water Filters"
type="center"
title="Conoce el catálogo de Doulton ® Water Filters en Perú"
orientation="center"
bgImage={DoultonBanner}
buttons={[
{

24
client/hooks/useFetch.js

@ -1,9 +1,10 @@
import { useState, useEffect } from 'react'
export const useFetch = (url, options) => {
const [ response, setResponse ] = useState(null)
const [ error, setError ] = useState(null)
const [ isLoading, setIsLoading ] = useState(false)
export const useFetch = (url, initialOptions = {}) => {
const [data, setData] = useState(null)
const [options, setOptions] = useState(initialOptions)
const [error, setError] = useState(null)
const [isLoading, setIsLoading] = useState(false)
useEffect(() => {
const fetchData = async () => {
@ -11,14 +12,19 @@ export const useFetch = (url, options) => {
try {
const res = await fetch(url, options)
const json = await res.json()
setResponse(json)
setData(json)
setIsLoading(false)
} catch (error) {
setError(error)
} catch (err) {
setError(err)
}
}
fetchData()
}, [])
}, [url, options])
return { response, error, isLoading }
return {
data,
error,
isLoading,
setOptions
}
}
Loading…
Cancel
Save