restructure...
This commit is contained in:
Kishan Takoordyal
parent
2c5cb418ef
commit
80e7226016
@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"name": "proximity-demo",
|
"name": "proximitydemo",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"description": "Demo Proximity site for my test",
|
"description": "Demo Proximity site for my test",
|
||||||
"homepage": "/",
|
"homepage": "/",
|
||||||
|
|||||||
110
src/App.js
110
src/App.js
@ -1,115 +1,11 @@
|
|||||||
import React, { useState } from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import proximity_logo from './assets/images/proximity_logo.svg';
|
import Header from './components/Header';
|
||||||
// import down_arrow from './assets/images/down_arrow.svg';
|
|
||||||
|
|
||||||
// import backgroundHeader from './assets/videos/video-poster.jpg';
|
|
||||||
import backgroundVideo from './assets/videos/video.mp4';
|
|
||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
const [currentLanguage, setCurrentLanguage] = useState('en');
|
|
||||||
const [showCookies, setShowCookies] = useState(true);
|
|
||||||
|
|
||||||
const headerLinkClasses =
|
|
||||||
'text-gray-100 font-avenirbook font-normal hover:underline focus:underline text-lg';
|
|
||||||
|
|
||||||
const cookies = (
|
|
||||||
<div className="w-full h-20 bg-indigo-1000 flex items-center justify-center">
|
|
||||||
<div className="text-gray-100 font-avenirbook font-normal">
|
|
||||||
This website uses cookies to improve your experience. We'll assume
|
|
||||||
you're ok with this, but you can opt out if you wish.
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
className="h-3/5 flex items-center justify-center rounded px-6 text-lg font-bold bg-gray-100 text-indigo-1000 mx-4 hover:opacity-75 focus:opacity-75"
|
|
||||||
onClick={() => setShowCookies(false)}
|
|
||||||
>
|
|
||||||
Accept
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<a
|
|
||||||
className="text-gray-200 border-b border-red-1000 hover:text-white focus:text-white"
|
|
||||||
href="/"
|
|
||||||
>
|
|
||||||
Read more
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-full overflow-x-hidden">
|
<div className="w-full overflow-x-hidden">
|
||||||
<div className="h-screen w-full">
|
<Header />
|
||||||
<div className="absolute z-20 h-16 w-full flex items-center justify-between mt-8 px-20">
|
|
||||||
<img
|
|
||||||
src={proximity_logo}
|
|
||||||
alt="Proximity Logo"
|
|
||||||
className="h-full object-scale-down"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="w-2/5 h-full flex items-center justify-between">
|
|
||||||
<a className={headerLinkClasses} href="/">
|
|
||||||
About
|
|
||||||
</a>
|
|
||||||
<a className={headerLinkClasses} href="/">
|
|
||||||
Work
|
|
||||||
</a>
|
|
||||||
<a className={headerLinkClasses} href="/">
|
|
||||||
Latest
|
|
||||||
</a>
|
|
||||||
<a className={headerLinkClasses} href="/">
|
|
||||||
People & Careers
|
|
||||||
</a>
|
|
||||||
<a className={headerLinkClasses} href="/">
|
|
||||||
Contact
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div className="border h-2/3 px-2 flex justify-between items-center">
|
|
||||||
<button
|
|
||||||
className={`uppercase font-avenirbook text-lg text-gray-200 mr-1 ${
|
|
||||||
currentLanguage === 'en' ? 'font-bold' : ''
|
|
||||||
}`}
|
|
||||||
onClick={() => setCurrentLanguage('en')}
|
|
||||||
>
|
|
||||||
EN
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
className={`uppercase font-avenirbook text-lg text-gray-200 ml-1 ${
|
|
||||||
currentLanguage === 'fr' ? 'font-bold' : ''
|
|
||||||
}`}
|
|
||||||
onClick={() => setCurrentLanguage('fr')}
|
|
||||||
>
|
|
||||||
FR
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="absolute z-10 w-full h-full flex items-center justify-center">
|
|
||||||
<p className="w-2/5 font-avenirblack text-center text-5xl font-bold text-gray-200">
|
|
||||||
We make people
|
|
||||||
<br />
|
|
||||||
more valuable to brands
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="absolute z-10 w-full h-full flex flex-col items-center justify-end">
|
|
||||||
<div
|
|
||||||
className={`w-12 h-12 flex justify-center items-center text-4xl text-gray-200 ri-arrow-down-fill rounded-full border hover:border-white border-transparent ${
|
|
||||||
!showCookies && 'mb-20'
|
|
||||||
}`}
|
|
||||||
/>
|
|
||||||
{showCookies && cookies}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<video
|
|
||||||
className="h-full w-full bg-gray-900 z-0 object-cover absolute"
|
|
||||||
autoPlay
|
|
||||||
loop
|
|
||||||
muted
|
|
||||||
>
|
|
||||||
<source src={backgroundVideo} type="video/mp4" />
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
110
src/components/Header.js
Normal file
110
src/components/Header.js
Normal file
@ -0,0 +1,110 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
|
||||||
|
import proximity_logo from '../assets/images/proximity_logo.svg';
|
||||||
|
import backgroundVideo from '../assets/videos/video.mp4';
|
||||||
|
|
||||||
|
export default function Header() {
|
||||||
|
const [currentLanguage, setCurrentLanguage] = useState('en');
|
||||||
|
const [showCookies, setShowCookies] = useState(true);
|
||||||
|
|
||||||
|
const headerLinkClasses =
|
||||||
|
'text-gray-100 font-avenirbook font-normal hover:underline focus:underline text-lg';
|
||||||
|
|
||||||
|
const cookies = (
|
||||||
|
<div className="w-full h-20 bg-indigo-1000 flex items-center justify-center">
|
||||||
|
<div className="text-gray-100 font-avenirbook font-normal">
|
||||||
|
This website uses cookies to improve your experience. We'll assume
|
||||||
|
you're ok with this, but you can opt out if you wish.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
className="h-3/5 flex items-center justify-center rounded px-6 text-lg font-bold bg-gray-100 text-indigo-1000 mx-4 hover:opacity-75 focus:opacity-75"
|
||||||
|
onClick={() => setShowCookies(false)}
|
||||||
|
>
|
||||||
|
Accept
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<a
|
||||||
|
className="text-gray-200 border-b border-red-1000 hover:text-white focus:text-white"
|
||||||
|
href="/"
|
||||||
|
>
|
||||||
|
Read more
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="h-screen w-full">
|
||||||
|
<div className="absolute z-20 h-16 w-full flex items-center justify-between mt-8 px-20">
|
||||||
|
<img
|
||||||
|
src={proximity_logo}
|
||||||
|
alt="Proximity Logo"
|
||||||
|
className="h-full object-scale-down"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="w-2/5 h-full flex items-center justify-between">
|
||||||
|
<a className={headerLinkClasses} href="/">
|
||||||
|
About
|
||||||
|
</a>
|
||||||
|
<a className={headerLinkClasses} href="/">
|
||||||
|
Work
|
||||||
|
</a>
|
||||||
|
<a className={headerLinkClasses} href="/">
|
||||||
|
Latest
|
||||||
|
</a>
|
||||||
|
<a className={headerLinkClasses} href="/">
|
||||||
|
People & Careers
|
||||||
|
</a>
|
||||||
|
<a className={headerLinkClasses} href="/">
|
||||||
|
Contact
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div className="border h-2/3 px-2 flex justify-between items-center">
|
||||||
|
<button
|
||||||
|
className={`uppercase font-avenirbook text-lg text-gray-200 mr-1 ${
|
||||||
|
currentLanguage === 'en' ? 'font-bold' : ''
|
||||||
|
}`}
|
||||||
|
onClick={() => setCurrentLanguage('en')}
|
||||||
|
>
|
||||||
|
EN
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className={`uppercase font-avenirbook text-lg text-gray-200 ml-1 ${
|
||||||
|
currentLanguage === 'fr' ? 'font-bold' : ''
|
||||||
|
}`}
|
||||||
|
onClick={() => setCurrentLanguage('fr')}
|
||||||
|
>
|
||||||
|
FR
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="absolute z-10 w-full h-full flex items-center justify-center">
|
||||||
|
<p className="w-2/5 font-avenirblack text-center text-5xl font-bold text-gray-200">
|
||||||
|
We make people
|
||||||
|
<br />
|
||||||
|
more valuable to brands
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="absolute z-10 w-full h-full flex flex-col items-center justify-end">
|
||||||
|
<div
|
||||||
|
className={`w-12 h-12 flex justify-center items-center text-4xl text-gray-200 ri-arrow-down-fill rounded-full border hover:border-white border-transparent ${
|
||||||
|
!showCookies && 'mb-20'
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
{showCookies && cookies}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<video
|
||||||
|
className="h-full w-full bg-gray-900 z-0 object-cover absolute"
|
||||||
|
autoPlay
|
||||||
|
loop
|
||||||
|
muted
|
||||||
|
>
|
||||||
|
<source src={backgroundVideo} type="video/mp4" />
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
32
src/useWindowSize.js
Normal file
32
src/useWindowSize.js
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
|
||||||
|
export default function useWindowSize() {
|
||||||
|
// Initialize state with undefined width/height so server and client renders match
|
||||||
|
// Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
|
||||||
|
const [windowSize, setWindowSize] = useState({
|
||||||
|
width: undefined,
|
||||||
|
height: undefined,
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Handler to call on window resize
|
||||||
|
function handleResize() {
|
||||||
|
// Set window width/height to state
|
||||||
|
setWindowSize({
|
||||||
|
width: window.innerWidth,
|
||||||
|
height: window.innerHeight,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add event listener
|
||||||
|
window.addEventListener('resize', handleResize);
|
||||||
|
|
||||||
|
// Call handler right away so state gets updated with initial window size
|
||||||
|
handleResize();
|
||||||
|
|
||||||
|
// Remove event listener on cleanup
|
||||||
|
return () => window.removeEventListener('resize', handleResize);
|
||||||
|
}, []); // Empty array ensures that effect is only run on mount
|
||||||
|
|
||||||
|
return windowSize;
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user