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>
</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>
<div id="root"></div>
<!--

3
src/App.js
View File

@ -4,6 +4,7 @@ import useWindowSize from './useWindowSize';
import HeaderD from './components/HeaderD';
import HeaderM from './components/HeaderM';
import PartOne from './components/PartOne';
export default function App() {
const [currentLanguage, setCurrentLanguage] = useState('en');
@ -28,6 +29,8 @@ export default function App() {
setShowCookies={setShowCookies}
/>
)}
<PartOne />
</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';
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">
This website uses cookies to improve your experience. We'll assume
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 && cookies}
</div>
{showCookies && cookies}
<video
className="h-full w-full bg-gray-900 z-0 object-cover absolute"
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';
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="/">
About
</a>
@ -35,13 +35,13 @@ export default function HeaderD({
);
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">
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>
<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
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)}
@ -129,9 +129,9 @@ export default function HeaderD({
showCookies ? 'mb-2' : 'mb-22'
}`}
/>
{showCookies && cookies}
</div>
{showCookies && cookies}
{showSidebar && sidebar}
<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>
);
}