init + complete desktop version of header
This commit is contained in:
Kishan Takoordyal
112
src/App.js
112
src/App.js
@@ -1,9 +1,115 @@
|
||||
import React from 'react';
|
||||
import React, { useState } 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';
|
||||
|
||||
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 h-screen overflow-hidden flex justify-center items-center tracking-widest font-mono text-bold sm:text-6xl text-4xl bg-gray-300 text-blue-800">
|
||||
Hello World
|
||||
<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>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
11
src/assets/images/down_arrow.svg
Normal file
11
src/assets/images/down_arrow.svg
Normal file
@@ -0,0 +1,11 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 76 76" width="76" height="76">
|
||||
<style>
|
||||
tspan { white-space:pre }
|
||||
.shp0 { fill: #a9a9aa }
|
||||
.shp1 { fill: none;stroke: #a9a9aa;stroke-width: 4 }
|
||||
</style>
|
||||
<g id="Layer 1">
|
||||
<path id="<Path>" class="shp0" d="M53.96 109.01L37.83 87.22L21.71 109.01" />
|
||||
<path id="<Path>" class="shp1" d="M37.83 93.33L37.83 155" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 398 B |
27
src/assets/images/proximity_logo.svg
Normal file
27
src/assets/images/proximity_logo.svg
Normal file
@@ -0,0 +1,27 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1684 522" width="1684" height="522">
|
||||
<style>
|
||||
tspan { white-space:pre }
|
||||
.shp0 { fill: #e30614 }
|
||||
.shp1 { fill: #ffffff }
|
||||
</style>
|
||||
<g id="Layer 1">
|
||||
<g id="<Group>">
|
||||
<g id="<Group>">
|
||||
<path id="<Compound Path>" fill-rule="evenodd" class="shp0" d="M366.75 88.23C386.18 88.23 402 104.03 402 123.44C402 142.87 386.18 158.66 366.75 158.66C347.29 158.66 331.49 142.87 331.49 123.44C331.49 104.02 347.29 88.23 366.75 88.23ZM366.75 145.86C379.12 145.86 389.19 135.81 389.19 123.44C389.19 111.09 379.12 101.02 366.75 101.02C354.38 101.02 344.29 111.09 344.29 123.44C344.29 135.81 354.38 145.86 366.75 145.86ZM229.14 131.59C308.71 131.59 373.45 196.26 373.45 275.76C373.45 355.27 308.71 419.93 229.14 419.93C149.53 419.93 84.81 355.27 84.81 275.76C84.81 196.26 149.53 131.59 229.14 131.59ZM229.14 368.7C280.43 368.7 322.15 327.01 322.15 275.76C322.15 224.53 280.43 182.82 229.14 182.82C177.85 182.82 136.1 224.53 136.1 275.76C136.1 327.01 177.85 368.7 229.14 368.7Z" />
|
||||
</g>
|
||||
<g id="<Group>">
|
||||
<path id="<Path>" class="shp1" d="M617.27 213.67L655.73 213.67L655.73 233.66L656.24 233.66C660.34 225.97 665.2 220.2 670.85 216.35C676.49 212.51 683.58 210.59 692.12 210.59C694.35 210.59 696.57 210.68 698.79 210.85C701 211.01 703.05 211.36 704.94 211.87L704.94 246.99C702.21 246.14 699.51 245.49 696.86 245.07C694.21 244.64 691.44 244.43 688.53 244.43C681.18 244.43 675.37 245.45 671.1 247.51C666.83 249.55 663.54 252.42 661.23 256.09C658.92 259.77 657.43 264.17 656.74 269.29C656.06 274.42 655.72 280.06 655.72 286.22L655.72 338.26L617.26 338.26L617.27 213.67Z" />
|
||||
<path id="<Path>" class="shp1" d="M892.59 271.61L851.07 213.67L896.45 213.67L918.49 247.51L939.77 213.67L982.57 213.67L942.07 271.61L990.01 338.26L944.63 338.26L917.46 296.73L888.23 338.26L843.38 338.26L892.59 271.61Z" />
|
||||
<path id="<Path>" class="shp1" d="M1007.25 213.67L1045.71 213.67L1045.7 338.26L1007.25 338.26L1007.25 213.67Z" />
|
||||
<path id="<Path>" class="shp1" d="M1076.05 213.67L1112.97 213.67L1112.97 230.59L1113.48 230.59C1114.67 228.2 1116.39 225.81 1118.61 223.41C1120.83 221.02 1123.47 218.88 1126.56 217C1129.63 215.12 1133.12 213.58 1137.06 212.38C1141 211.19 1145.27 210.59 1149.88 210.59C1158.59 210.59 1166.32 212.38 1173.08 215.97C1179.83 219.56 1184.91 225.21 1188.33 232.89C1192.78 224.86 1198.16 219.14 1204.48 215.72C1210.8 212.3 1218.58 210.59 1227.81 210.59C1236.18 210.59 1243.23 212 1248.95 214.82C1254.68 217.64 1259.21 221.49 1262.55 226.36C1265.88 231.23 1268.26 236.95 1269.72 243.54C1271.17 250.12 1271.9 257.17 1271.9 264.69L1271.9 338.26L1233.44 338.26L1233.44 265.71C1233.45 259.9 1232.21 254.91 1229.73 250.71C1227.25 246.53 1222.85 244.43 1216.53 244.43C1212.09 244.43 1208.37 245.16 1205.38 246.61C1202.38 248.06 1200 250.07 1198.2 252.63C1196.41 255.2 1195.12 258.19 1194.35 261.6C1193.59 265.03 1193.2 268.62 1193.2 272.37L1193.2 338.26L1154.75 338.26L1154.75 272.37C1154.75 270.15 1154.66 267.42 1154.49 264.17C1154.32 260.93 1153.72 257.85 1152.69 254.94C1151.67 252.04 1150 249.56 1147.7 247.51C1145.4 245.45 1142.02 244.43 1137.57 244.43C1132.62 244.43 1128.6 245.33 1125.52 247.12C1122.45 248.92 1120.1 251.31 1118.47 254.3C1116.85 257.3 1115.79 260.67 1115.28 264.43C1114.76 268.19 1114.51 272.12 1114.51 276.22L1114.5 338.26L1076.05 338.26L1076.05 213.67Z" />
|
||||
<path id="<Path>" class="shp1" d="M1299.58 213.67L1338.04 213.67L1338.04 338.26L1299.58 338.26L1299.58 213.67Z" />
|
||||
<path id="<Path>" class="shp1" d="M1458.44 244.43L1424.6 244.43L1424.6 285.96C1424.6 289.38 1424.77 292.5 1425.11 295.32C1425.45 298.14 1426.22 300.58 1427.42 302.62C1428.61 304.67 1430.45 306.26 1432.93 307.37C1435.41 308.48 1438.69 309.03 1442.8 309.03C1444.85 309.03 1447.54 308.82 1450.88 308.39C1454.21 307.97 1456.72 306.98 1458.44 305.44L1458.44 337.49C1454.16 339.03 1449.72 340.05 1445.11 340.57C1440.49 341.08 1435.96 341.33 1431.51 341.33C1425.02 341.33 1419.04 340.64 1413.57 339.28C1408.11 337.91 1403.32 335.73 1399.22 332.75C1395.12 329.76 1391.92 325.87 1389.61 321.08C1387.3 316.3 1386.15 310.49 1386.15 303.65L1386.15 244.43L1361.54 244.43L1361.54 213.67L1386.15 213.67L1386.16 176.76L1424.61 176.76L1424.6 213.67L1458.44 213.67L1458.44 244.43Z" />
|
||||
<path id="<Path>" class="shp1" d="M1557.56 358.51C1555 365.17 1552.52 371.07 1550.13 376.2C1547.74 381.33 1544.7 385.64 1541.03 389.15C1537.35 392.65 1532.7 395.29 1527.06 397.09C1521.41 398.88 1513.98 399.78 1504.76 399.78C1494.84 399.78 1485.27 398.24 1476.05 395.17L1481.18 363.63C1486.98 366.2 1492.96 367.48 1499.12 367.48C1503.38 367.48 1506.9 367 1509.63 366.07C1512.36 365.13 1514.62 363.76 1516.41 361.97C1518.21 360.17 1519.71 357.99 1520.9 355.43C1522.1 352.87 1523.39 349.87 1524.75 346.46L1527.57 339.28L1472.98 213.67L1514.5 213.67L1546.55 295.96L1547.06 295.96L1574.49 213.67L1613.97 213.67L1557.56 358.51Z" />
|
||||
<path id="<Compound Path>" fill-rule="evenodd" class="shp1" d="M842.38 276.91C842.38 312.84 813.25 341.97 777.33 341.97C741.4 341.97 712.27 312.84 712.28 276.91C712.28 240.98 741.4 211.85 777.33 211.85C813.26 211.85 842.38 240.98 842.38 276.91ZM745.58 276.91C745.58 294.42 759.82 308.66 777.33 308.66C794.83 308.66 809.07 294.42 809.07 276.91C809.07 259.4 794.83 245.16 777.33 245.16C759.82 245.16 745.58 259.4 745.58 276.91Z" />
|
||||
<path id="<Path>" class="shp1" d="M1048.79 174.44C1048.79 186.76 1038.81 196.75 1026.49 196.75C1014.17 196.75 1004.18 186.76 1004.18 174.44C1004.18 162.13 1014.17 152.14 1026.49 152.14C1038.81 152.14 1048.79 162.13 1048.79 174.44Z" />
|
||||
<path id="<Path>" class="shp1" d="M1341.12 174.44C1341.12 186.76 1331.14 196.75 1318.82 196.75C1306.5 196.75 1296.52 186.76 1296.52 174.44C1296.52 162.13 1306.5 152.14 1318.82 152.14C1331.14 152.14 1341.12 162.13 1341.12 174.44Z" />
|
||||
<path id="<Compound Path>" fill-rule="evenodd" class="shp1" d="M596.93 275.91C596.93 309.59 571.34 337.29 538.55 340.63C537.61 340.65 536.72 340.74 535.75 340.74C531.93 340.74 528.34 340.41 524.96 339.72C521.58 339.04 518.46 338.15 515.59 337.08C512.73 336.01 510.23 334.82 508.1 333.49C505.97 332.18 504.25 330.88 502.92 329.61L502.48 329.61L502.48 396.7L464.03 396.7L464.04 213.66L499.31 213.66L499.31 229.5L499.79 229.5C501.27 227.55 503.19 225.54 505.57 223.52C507.94 221.48 510.72 219.64 513.91 217.98C517.11 216.32 520.58 214.96 524.35 213.91C528.12 212.85 532.12 212.33 536.38 212.33C541.9 212.33 547.06 212.94 551.93 214.03C578.04 222.49 596.94 246.98 596.93 275.91ZM563.62 275.91C563.63 258.4 549.38 244.16 531.88 244.16C514.38 244.16 500.13 258.4 500.13 275.91C500.13 293.41 514.37 307.65 531.88 307.66C549.38 307.66 563.62 293.41 563.62 275.91Z" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.6 KiB |
BIN
src/assets/videos/video-poster.jpg
Normal file
BIN
src/assets/videos/video-poster.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
src/assets/videos/video.mp4
Normal file
BIN
src/assets/videos/video.mp4
Normal file
Binary file not shown.
Reference in New Issue
Block a user