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

Merge branch 'master' of repo.kinesis.games:root/proximity-demo

Browse Source
This commit is contained in:
Kishan Takoordyal 2021-04-04 01:57:19 +04:00
commit 2673b2f5d6
12 changed files with 72 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -23,3 +23,4 @@ yarn-debug.log*
yarn-error.log*
public/styles.css
package-lock.json

2
package-lock.json generated
View File

@ -1,5 +1,5 @@
{
"name": "@edgeking810/create-react-app",
"name": "proximitydemo",
"version": "1.0.0",
"lockfileVersion": 1,
"requires": true,

12
src/App.js
View File

@ -15,6 +15,16 @@ export default function App() {
const { width } = useWindowSize();
// console.log(width);
const scrollToElement = (e, id) => {
e.preventDefault();
window.scroll({
top: document.getElementById(id).getBoundingClientRect().top,
left: 0,
behavior: 'smooth',
});
};
return (
<div className="w-full overflow-x-hidden">
{width > 1000 ? (
@ -23,6 +33,7 @@ export default function App() {
setCurrentLanguage={setCurrentLanguage}
showCookies={showCookies}
setShowCookies={setShowCookies}
scrollToElement={scrollToElement}
/>
) : (
<HeaderM
@ -30,6 +41,7 @@ export default function App() {
setCurrentLanguage={setCurrentLanguage}
showCookies={showCookies}
setShowCookies={setShowCookies}
scrollToElement={scrollToElement}
/>
)}

BIN
src/assets/images/pencil.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
src/assets/images/pencil.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.8 KiB

6
src/components/Footer.js
View File

@ -17,13 +17,13 @@ export default function Footer() {
<div className="w-full sm:px-20 px-4 flex sm:justify-end justify-center">
<button
onClick={() => handleScroll()}
className="font-avenirbook text-sm underline mb-4 text-gray-900 hover:no-underline focus:no-underline"
className="font-avenirbook text-sm mb-4 text-gray-900 hover:text-red-400 focus:text-red-400"
>
Return to top
&#x2191; Return to top
</button>
</div>
<div className="w-full sm:px-20 px-4 flex sm:flex-row flex-col sm:justify-between justify-center sm:items-center bg-gradient-to-r from-pink-500 via-red-500 to-orange-500 sm:h-24">
<div className="w-full sm:px-20 px-4 flex sm:flex-row-reverse flex-col sm:justify-between justify-center sm:items-center bg-gradient-to-r from-pink-500 via-red-500 to-orange-500 sm:h-24">
<div className="flex items-center h-full sm:w-auto w-full sm:justify-end justify-center sm:my-0 my-4">
<a
href="/"

4
src/components/HeaderD.js
View File

@ -8,6 +8,7 @@ export default function HeaderD({
setCurrentLanguage,
showCookies,
setShowCookies,
scrollToElement,
}) {
const headerLinkClasses =
'text-gray-100 font-avenirbook font-normal hover:underline focus:underline text-lg mx-4';
@ -93,7 +94,8 @@ export default function HeaderD({
<div className="absolute z-10 w-full h-full flex flex-col items-center justify-end">
<a
href="#part-one"
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 mb-22"
onClick={(e) => scrollToElement(e, 'part-one')}
className="animate-bounce 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 mb-22"
>
{' '}
</a>

52
src/components/HeaderM.js
View File

@ -3,32 +3,39 @@ import React, { useState } from 'react';
import proximity_logo from '../assets/images/proximity_logo.svg';
import backgroundVideo from '../assets/videos/video.mp4';
import '../styles/sidebar.css';
export default function HeaderD({
currentLanguage,
setCurrentLanguage,
showCookies,
setShowCookies,
scrollToElement,
}) {
const [showSidebar, setShowSidebar] = useState(false);
const headerLinkClasses =
'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-900 font-avenirbook font-normal hover:underline focus:underline text-xl w-full my-1 py-2 text-center';
const sidebar = (
<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="/">
<div
className={`z-20 w-full h-full flex flex-col justify-center bg-gray-100 bg-opacity-95 fixed ${
showSidebar ? 'sidebar-left-nav closed' : 'sidebar-left-nav'
}`}
>
<a className={headerLinkClasses} href="/about">
About
</a>
<a className={headerLinkClasses} href="/">
<a className={headerLinkClasses} href="/work">
Work
</a>
<a className={headerLinkClasses} href="/">
<a className={headerLinkClasses} href="/latest">
Latest
</a>
<a className={headerLinkClasses} href="/">
<a className={headerLinkClasses} href="/people-and-careers">
People & Careers
</a>
<a className={headerLinkClasses} href="/">
<a className={headerLinkClasses} href="/contact">
Contact
</a>
</div>
@ -60,12 +67,12 @@ export default function HeaderD({
);
return (
<div className="h-screen w-full">
<div className="absolute z-20 h-12 w-full flex items-center justify-between mt-4 px-4">
<div className="h-80 w-full">
<div className="absolute h-12 w-full flex items-center justify-between mt-4 px-4">
<img
src={proximity_logo}
alt="Proximity Logo"
className="h-full object-scale-down"
className="h-full object-scale-down z-20"
/>
<div className="w-2/5 h-full flex items-center justify-end">
@ -85,7 +92,7 @@ export default function HeaderD({
Contact
</a> */}
<div className="border h-10 px-2 flex justify-between items-center">
<div className="border h-10 px-2 flex justify-between items-center z-20">
<button
className={`uppercase font-avenirbook text-lg text-gray-200 mr-1 ${
currentLanguage === 'en' ? 'font-bold' : ''
@ -107,34 +114,37 @@ export default function HeaderD({
<button
className={`ml-4 w-10 h-10 flex justify-center items-center ri-${
showSidebar ? 'close' : 'menu'
}-fill bg-${
showSidebar ? 'red' : 'blue'
}-500 opacity-75 text-lg font-bold text-gray-100 rounded-sm`}
}-fill text-gray-${
showSidebar ? '900' : '100'
} opacity-75 text-3xl font-bold rounded-sm z-40`}
onClick={() => setShowSidebar((current) => !current)}
/>
</div>
</div>
<div className="absolute z-10 w-full h-full flex items-center justify-center">
<p className="w-5/6 font-avenirblack text-center text-4xl font-bold text-gray-200">
<div className="absolute z-10 w-full h-80 flex items-center justify-center">
<p className="w-5/6 font-avenirblack text-center text-3xl 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="absolute z-10 w-full h-108 flex flex-col items-center justify-end">
<a
href="#part-one"
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 mb-32"
/>
onClick={(e) => scrollToElement(e, 'part-one')}
className="animate-bounce 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 mb-32"
>
{' '}
</a>
</div>
{showCookies && cookies}
{showSidebar && sidebar}
{sidebar}
<video
className="h-full w-full bg-gray-900 z-0 object-cover absolute"
className="h-80 w-full bg-gray-900 z-0 object-cover absolute"
autoPlay
loop
muted

2
src/components/PartOne.js
View File

@ -5,7 +5,7 @@ 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"
className="w-full sm:h-screen flex flex-col items-center sm:justify-start justify-center sm:py-12 sm:px-20 p-4 sm:my-0 my-8"
id="part-one"
>
<div className="text-red-600 uppercase text-sm font-bold font-avenirblack tracking-wide">

10
src/components/PartTwo.js
View File

@ -1,18 +1,14 @@
import React from 'react';
import pencil from '../assets/images/pencil.png';
import pencil from '../assets/images/pencil.gif';
export default function PartTwo() {
return (
<div
className="w-full h-screen flex flex-col items-center justify-center sm:py-16 sm:px-20 p-4"
className="w-full sm:h-screen flex flex-col items-center justify-center sm:py-16 sm:px-20 p-4 my-8"
id="part-two"
>
<img
src={pencil}
alt="pencil"
className="object-cover sm:h-6 h-4 sm:mb-8 mb-4"
/>
<img src={pencil} alt="pencil" className="object-cover sm:h-32 h-20" />
<div className="text-red-600 uppercase text-sm font-bold font-avenirblack sm:mb-8 mb-4 tracking-wide sm:w-auto w-1/2 sm:text-left text-center">
Business Problems we've solved

13
src/styles/sidebar.css Normal file
View File

@ -0,0 +1,13 @@
.sidebar-left-nav {
-webkit-transform: translate3d(-100%, 0px, 0px);
transform: translate3d(-100%, 0px, 0px);
visibility: visible;
transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
}
.closed {
-webkit-transform: translate3d(0px, 0px, 0px);
transform: translate3d(0px, 0px, 0px);
visibility: visible;
}

4
tailwind.config.js
View File

@ -439,6 +439,10 @@ module.exports = {
25: '0.25',
50: '0.5',
75: '0.75',
80: '0.80',
85: '0.85',
90: '0.90',
95: '0.95',
100: '1',
},
order: {