root/proximity-demo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

complete part one + improve cookie-bar

Browse Source
This commit is contained in:
Kishan Takoordyal 2021-03-04 18:24:31 +04:00
parent 8913110750
commit dc2fa17992
No known key found for this signature in database
GPG Key ID: 304DF64F0804D6A1
6 changed files with 46 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -36,7 +36,7 @@
--> -->
<title>Proximity Demo</title> <title>Proximity Demo</title>
</head> </head>
<body class="w-screen" style="overflow-x: hidden"> <body class="w-screen bg-white" style="overflow-x: hidden">
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>
<!-- <!--

3
src/App.js
View File

@ -4,6 +4,7 @@ import useWindowSize from './useWindowSize';
import HeaderD from './components/HeaderD'; import HeaderD from './components/HeaderD';
import HeaderM from './components/HeaderM'; import HeaderM from './components/HeaderM';
import PartOne from './components/PartOne';
export default function App() { export default function App() {
const [currentLanguage, setCurrentLanguage] = useState('en'); const [currentLanguage, setCurrentLanguage] = useState('en');
@ -28,6 +29,8 @@ export default function App() {
setShowCookies={setShowCookies} setShowCookies={setShowCookies}
/> />
)} )}
<PartOne />
</div> </div>
); );
} }

BIN
src/assets/images/part-1-banner.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 728 KiB

5
src/components/HeaderD.js
View File

@ -13,7 +13,7 @@ export default function HeaderD({
'text-gray-100 font-avenirbook font-normal hover:underline focus:underline text-lg'; 'text-gray-100 font-avenirbook font-normal hover:underline focus:underline text-lg';
const cookies = ( const cookies = (
<div className="w-full h-20 bg-indigo-1000 flex items-center justify-center"> <div className="w-full h-20 bg-indigo-1000 flex items-center justify-center z-10 fixed bottom-0">
<div className="text-gray-100 font-avenirbook font-normal"> <div className="text-gray-100 font-avenirbook font-normal">
This website uses cookies to improve your experience. We'll assume This website uses cookies to improve your experience. We'll assume
you're ok with this, but you can opt out if you wish. you're ok with this, but you can opt out if you wish.
@ -96,9 +96,10 @@ export default function HeaderD({
showCookies ? 'mb-2' : 'mb-22' showCookies ? 'mb-2' : 'mb-22'
}`} }`}
/> />
{showCookies && cookies}
</div> </div>
{showCookies && cookies}
<video <video
className="h-full w-full bg-gray-900 z-0 object-cover absolute" className="h-full w-full bg-gray-900 z-0 object-cover absolute"
autoPlay autoPlay

8
src/components/HeaderM.js
View File

@ -15,7 +15,7 @@ export default function HeaderD({
'text-gray-100 font-avenirbook font-normal hover:underline focus:underline text-lg w-full bg-gray-900 my-1 py-2 text-center opacity-75 rounded'; 'text-gray-100 font-avenirbook font-normal hover:underline focus:underline text-lg w-full bg-gray-900 my-1 py-2 text-center opacity-75 rounded';
const sidebar = ( const sidebar = (
<div className="absolute z-30 w-5/6 h-full flex flex-col justify-start bg-gray-700 bg-opacity-75 pt-20 px-2"> <div className="z-30 w-5/6 h-full flex flex-col justify-start bg-gray-700 bg-opacity-75 pt-20 px-2 fixed">
<a className={headerLinkClasses} href="/"> <a className={headerLinkClasses} href="/">
About About
</a> </a>
@ -35,13 +35,13 @@ export default function HeaderD({
); );
const cookies = ( const cookies = (
<div className="w-full bg-indigo-1000 flex flex-col items-center justify-center py-4 px-2"> <div className="w-full bg-indigo-1000 flex flex-col items-center justify-center py-4 px-2 z-10 fixed bottom-0">
<div className="text-gray-100 font-avenirbook text-xs font-normal text-center"> <div className="text-gray-100 font-avenirbook text-xs font-normal text-center">
This website uses cookies to improve your experience. We'll assume This website uses cookies to improve your experience. We'll assume
you're ok with this, but you can opt out if you wish. you're ok with this, but you can opt out if you wish.
</div> </div>
<div className="w-full px-2 flex justify-around items-center mt-4"> <div className="w-4/5 px-2 flex justify-around items-center mt-4">
<button <button
className="flex items-center justify-center rounded px-6 py-1 text-sm font-bold bg-gray-100 text-indigo-1000 mx-4 hover:opacity-75 focus:opacity-75" className="flex items-center justify-center rounded px-6 py-1 text-sm font-bold bg-gray-100 text-indigo-1000 mx-4 hover:opacity-75 focus:opacity-75"
onClick={() => setShowCookies(false)} onClick={() => setShowCookies(false)}
@ -129,9 +129,9 @@ export default function HeaderD({
showCookies ? 'mb-2' : 'mb-22' showCookies ? 'mb-2' : 'mb-22'
}`} }`}
/> />
{showCookies && cookies}
</div> </div>
{showCookies && cookies}
{showSidebar && sidebar} {showSidebar && sidebar}
<video <video

35
src/components/PartOne.js Normal file
View File

@ -0,0 +1,35 @@
import React from 'react';
import part1banner from '../assets/images/part-1-banner.png';
export default function PartOne() {
return (
<div className="w-full h-screen flex flex-col items-center sm:justify-start justify-center sm:py-12 sm:px-20 p-4">
<div className="text-red-600 uppercase text-sm font-bold font-avenirblack">
How we do it
</div>
<div className="text-gray-900 sm:text-2xl text-lg font-avenirbook text-center mb-4">
We use data-driven creativity
<br />
to solve business problems
</div>
<img
src={part1banner}
alt="part-1-banner"
className="w-full object-cover sm:h-5/6"
/>
<div className="bg-white sm:-my-48 sm:w-4/5 w-full sm:pt-12 sm:px-36 sm:text-2xl text-base font-avenirbook text-center mt-4">
By harnessing powerful insights and smart targeting, we’re able to
create behavior-changing ideas and experiences that deliver value to
brands. Supported by our proprietary{' '}
<u>Creative Intelligence process</u>, <u>unique tools</u> and{' '}
<u>global partners</u>, we are able to put data at the heart of
everything we do to orchestrate experiences that deliver creativity with
precision and purpose.
</div>
</div>
);
}