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

init + complete desktop version of header

Browse Source
This commit is contained in:
Kishan Takoordyal 2021-03-04 17:02:07 +04:00
parent dad566cc3b
commit 2c5cb418ef
No known key found for this signature in database
GPG Key ID: 304DF64F0804D6A1
14 changed files with 175 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
install.js
View File

@ -1,14 +0,0 @@
#! /usr/bin/env node
'use strict';
const appName = process.argv[2];
const { spawnSync } = require('child_process');
const url = 'https://github.com/EdgeKing810/react-template';
spawnSync('git', ['clone', url, `${process.cwd()}/${appName}`]);
spawnSync('npm', ['install', '--prefix', `${process.cwd()}/${appName}`]);
console.log('Your app has been successfully installed');
console.log(`$ cd ${appName}`);
console.log('$ npm start');

11
package.json
View File

@ -1,7 +1,7 @@
{
"name": "@edgeking810/create-react-app",
"name": "proximity-demo",
"version": "1.0.0",
"description": "Simple starter code for a React + Tailwind project.",
"description": "Demo Proximity site for my test",
"homepage": "/",
"dependencies": {
"@testing-library/jest-dom": "^5.11.6",
@ -15,14 +15,7 @@
"tailwindcss": "^1.9.6",
"web-vitals": "^0.2.4"
},
"repository": {
"type": "git",
"url": "https://github.com/EdgeKing810/react-template"
},
"main": "index.js",
"bin": {
"create-react-app": "./install.js"
},
"author": "Kishan Takoordyal <kihan@kinesis.games> (https://hub.kinesis.games)",
"license": "MIT",
"scripts": {

BIN
public/fonts/Avenir-Black.ttf Normal file
View File

Binary file not shown.

BIN
public/fonts/Avenir-Book.ttf Normal file
View File

Binary file not shown.

BIN
public/fonts/Avenir-Medium.ttf Normal file
View File

Binary file not shown.

6
public/index.html
View File

@ -18,7 +18,7 @@
/>
<meta name="theme-color" content="#000000" />
<meta name="description" content="My Portfolio" />
<meta name="description" content="Demo Proximity site for my test" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
@ -34,9 +34,9 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>Proximity Demo</title>
</head>
<body class="bg-custom-400 w-screen" style="overflow-x: hidden">
<body class="w-screen" style="overflow-x: hidden">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--

4
public/manifest.json
View File

@ -1,6 +1,6 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"short_name": "Proximity Demo",
"name": "Demo Proximity site for my test",
"icons": [
{
"src": "favicon.ico",

16
public/tailwind.css
View File

@ -1,3 +1,19 @@
@tailwind base;
@tailwind components;
@font-face {
font-family: 'Avenir-Black';
src: local('Avenir-Black'), url(./fonts/Avenir-Black.ttf) format('ttf');
}
@font-face {
font-family: 'Avenir-Book';
src: local('Avenir-Book'), url(./fonts/Avenir-Book.ttf) format('ttf');
}
@font-face {
font-family: 'Avenir-Medium';
src: local('Avenir-Medium'), url(./fonts/Avenir-Medium.ttf) format('ttf');
}
@tailwind utilities;

112
src/App.js
View File

@ -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
View 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="&lt;Path&gt;" class="shp0" d="M53.96 109.01L37.83 87.22L21.71 109.01" />
<path id="&lt;Path&gt;" class="shp1" d="M37.83 93.33L37.83 155" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 398 B

27
src/assets/images/proximity_logo.svg Normal file
View 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="&lt;Group&gt;">
<g id="&lt;Group&gt;">
<path id="&lt;Compound Path&gt;" 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="&lt;Group&gt;">
<path id="&lt;Path&gt;" 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="&lt;Path&gt;" 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="&lt;Path&gt;" class="shp1" d="M1007.25 213.67L1045.71 213.67L1045.7 338.26L1007.25 338.26L1007.25 213.67Z" />
<path id="&lt;Path&gt;" 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="&lt;Path&gt;" class="shp1" d="M1299.58 213.67L1338.04 213.67L1338.04 338.26L1299.58 338.26L1299.58 213.67Z" />
<path id="&lt;Path&gt;" 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="&lt;Path&gt;" 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="&lt;Compound Path&gt;" 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="&lt;Path&gt;" 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="&lt;Path&gt;" 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="&lt;Compound Path&gt;" 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>
Side by Side

After

Width:  |  Height:  |  Size: 6.6 KiB

BIN
src/assets/videos/video-poster.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
src/assets/videos/video.mp4 Normal file
View File

Binary file not shown.

5
tailwind.config.js
View File

@ -39,6 +39,7 @@ module.exports = {
700: '#c53030',
800: '#9b2c2c',
900: '#742a2a',
1000: '#e30514',
},
orange: {
100: '#fffaf0',
@ -105,6 +106,7 @@ module.exports = {
700: '#4c51bf',
800: '#434190',
900: '#3c366b',
1000: '#3b2143',
},
purple: {
100: '#faf5ff',
@ -291,6 +293,9 @@ module.exports = {
],
karla: ['Karla', 'sans-serif'],
montserrat: ['Montserrat', 'sans-serif'],
avenirblack: ['Avenir-Black', 'sans'],
avenirbook: ['Avenir-Book', 'sans'],
avenirmedium: ['Avenir-Medium', 'sans'],
},
fontSize: {
xxs: '0.5rem',