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",
|
||||
"description": "Demo Proximity site for my test",
|
||||
"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 down_arrow from './assets/images/down_arrow.svg';
|
||||
|
||||
// import backgroundHeader from './assets/videos/video-poster.jpg';
|
||||
import backgroundVideo from './assets/videos/video.mp4';
|
||||
import Header from './components/Header';
|
||||
|
||||
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 (
|
||||
<div className="w-full overflow-x-hidden">
|
||||
<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>
|
||||
<Header />
|
||||
</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