Skip to content

Commit

Permalink
Fix UI with 3D images (#21)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jeong-ah-choi
jeong-ah-choi authored Dec 29, 2022
1 parent a951a95 commit 1c8d9bf
Show file tree
Hide file tree
Showing 15 changed files with 394 additions and 118 deletions.
8 changes: 4 additions & 4 deletions components/Navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,17 +50,17 @@ const NavBar: React.FC = () => {
</li>
</ul>
<button
className="px-4 lg:w-[180px] h-[50px] bg-orange rounded flex-center"
className="px-4 lg:w-[180px] h-[50px] bg-white rounded-xl flex-center border border-orange"
onClick={() =>
openModal({
title: 'Sign In',
component: <LoginForm />,
})
}
>
<span className="text-white text-base font-bold leading-none">
wallet <br className="lg:hidden" />
connect
<span className="text-orange text-base font-bold leading-none">
Connect <br className="lg:hidden" />
Wallet
</span>
</button>
</div>
Expand Down
6 changes: 3 additions & 3 deletions features/Landing/components/Architecture.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,9 +51,9 @@ const Architecture: React.FC<ComponentProps<'div'>> = () => {
<img
src="/landing/logo-cup-arch.svg"
alt="cup"
width={205}
height={160}
className="mt-4 lg:mt-[74px] w-[102px] lg:w-[205px] lg:h-[160px]"
width={340}
height={300}
className="mt-4 lg:mt-[74px] w-[150px] lg:w-[340px] lg:h-[300px]"
/>
</div>
</article>
Expand Down
27 changes: 25 additions & 2 deletions features/Landing/components/Hero.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/* eslint-disable @next/next/no-img-element */
import clsx from 'clsx'
import Image from 'next/image'
import React, { ComponentProps } from 'react'

const Hero: React.FC<ComponentProps<'header'>> = () => {
Expand All @@ -26,8 +27,30 @@ const Hero: React.FC<ComponentProps<'header'>> = () => {
/>
</h1>
</div>
<div className="animate-buoyancy-1 w-40 lg:w-auto">
<img src="/landing/logo-cup.svg" alt="cup" className="rotate-[15deg]" />
<div className="animate-buoyancy-1 w-40 h-[200px] lg:h-[440px] pt-10 lg:w-auto">
<Image
src="/landing/hero-cup.png"
alt="cup"
width={490}
height={440}
className="rotate-[15deg]"
/>

<img
src="/landing/hero-bubble.png"
alt="cup"
width={80}
height={80}
className="rotate-[15deg] block mix-blend-multiply absolute top-0 right-0 lg:right-[90px] w-10 lg:w-[80px]"
/>

<img
src="/landing/hero-bubble.png"
alt="cup"
width={40}
height={40}
className="rotate-[15deg] block mix-blend-multiply absolute top-10 right-10 lg:top-[80px] lg:right-[180px] w-4 lg:w-[40px]"
/>
</div>
</header>
)
Expand Down
8 changes: 4 additions & 4 deletions features/Landing/components/PlayGame.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const PlayGame = () => {
'lg:flex-row lg:pt-nav-h lg:gap-[225px]',
])}
>
<div className="flex flex-col gap-10 rounded-lg bg-[rgba(255,255,255,0.7)] p-6 min-w-[360px]">
<div className="flex flex-col gap-10 rounded-lg bg-[rgba(255,255,255,0.6)] px-6 py-12 min-w-[360px]">
<div className="text-center w-full text-main-default font-bold">
<p className="text-base mb-4">Download KUP Example Game</p>
<h2 className="text-3xl">Chop Chop</h2>
Expand All @@ -38,7 +38,7 @@ const PlayGame = () => {
<>
<a
rel="noopener noreferrer"
className="flex gap-2 rounded p-2 bg-main-default"
className="flex gap-2 rounded py-2 px-4 bg-main-default"
href="https://kup.fra1.digitaloceanspaces.com/win/unity-39-develop-chop-chop-kup-main-win-7.zip"
>
<img
Expand All @@ -58,7 +58,7 @@ const PlayGame = () => {
</a>
<a
rel="noopener noreferrer"
className="flex gap-2 rounded p-2 bg-main-default"
className="flex gap-2 rounded py-2 px-4 bg-main-default"
href="https://kup.fra1.digitaloceanspaces.com/mac/unity-39-develop-chop-chop-kup-main-mac-7.zip"
>
<img
Expand All @@ -84,4 +84,4 @@ const PlayGame = () => {
)
}

export default PlayGame
export default PlayGame
109 changes: 52 additions & 57 deletions features/Landing/components/WhatIsKup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,87 +2,82 @@
import clsx from 'clsx'
import React, { ComponentProps } from 'react'

const VerticalLine: React.FC = React.memo(
const HorizontalLine: React.FC = React.memo(
() => {
return (
<div className="w-0.5 h-6 rotate-90 lg:rotate-0 lg:h-12 relative overflow-hidden">
<div className="w-3 h-5 -rotate-90 relative overflow-hidden">
<hr
className="w-0.5 bg-orange absolute top-0 left-0"
className="w-3 h-5 bg-orange absolute top-0 left-0"
style={{ animation: 'dropLine 1.4s ease-in-out infinite' }}
/>
</div>
)
},
() => true,
)
VerticalLine.displayName = 'VerticalLine'
HorizontalLine.displayName = 'HorizontalLine'

const WhatIsKup: React.FC<ComponentProps<'div'>> = () => {
return (
<article
id="whatiskup"
className={clsx([
'full-screen flex-center bg-main-lightest',
'flex-col pt-nav-mobile gap-16 px-4',
'lg:flex-row lg:pt-nav-h lg:gap-[225px]',
'flex-col pt-nav-mobile px-4',
'lg:flex-row lg:pt-nav-h',
])}
>
<div
className={clsx([
`flex gap-8 lg:gap-2.5 items-center flex-row-reverse lg:flex-col`,
])}
>
<figure className="w-full">
<img
src="/landing/logo-klaytn.png"
alt="Klaytn"
width={186}
height={56}
className="h-6 w-auto lg:h-[56px]"
/>
</figure>

<VerticalLine />

<figure className="w-full">
<img
src="/landing/logo-unity.png"
alt="Unity"
width={164}
height={60}
className="h-6 w-auto lg:h-[60px]"
/>
</figure>

<VerticalLine />

<figure className="w-full">
<img
src="/landing/logo-playfab.png"
alt="Unity"
width={206}
height={60}
className="h-6 w-auto lg:h-[60px]"
/>
</figure>
<div className="lg:-mr-[70px]">
<img
src="/landing/chain-balls.png"
className="mix-blend-darken"
/>
</div>
<div className="w-full lg:max-w-[470px]">
<div className="w-full lg:max-w-[470px] lg:mt-20">
<h2 className="text-3xl lg:text-5xl font-bold text-main-default mb-4 lg:mb-7 tracking-tighter">
What is KUP?
</h2>
<p className="text-sm lg:text-base font-normal leading-5">
KUP stands for Klaytn, Unity, and Playfab.
<br />
Klaytn is a metaverse platform solution. Unity is a 3D/2D game engine. And Playfab is a backend platform for live games, also a part of Microsoft.
<br />
it is a connection between Unity, Playfab and Klaytn to manage data
while interacting within the metaverse. The partnership secures the
users data ownership and preservation by processing important data
with Klaytn blockchain.
<br />
KUP helps Unity developers focus on the domain they are confident in.
By utilizing KUP, they help build an easily accessible metaverse.
<p className="text-sm lg:text-base font-normal leading-5 text-main-default">
KUP stands for Klaytn, Unity, and Playfab. <br/>
It is a connection between Unity, Playfab and Klaytn to manage data while interacting within the metaverse.<br/>
The partnership secures the users data ownership and preservation by processing important data with Klaytn blockchain. <br/>
KUP helps Unity developers focus on the domain they are confident in. By utilizing KUP, they help build an easily accessible metaverse.
</p>
<div className="flex max-w-[300px] mx-4 gap-4 mt-5 lg:max-w-[470px] lg:gap-4 lg:mx-0 items-center lg:mt-[51px] lg:-mr-4">
<figure className="w-full">
<img
src="/landing/logo-klaytn.png"
alt="Klaytn"
width={130}
height={40}
className="h-6 w-auto lg:h-[40px]"
/>
</figure>

<HorizontalLine />

<figure className="w-full">
<img
src="/landing/logo-unity.png"
alt="Unity"
width={110}
height={40}
className="h-6 w-auto lg:h-[40px] m-auto"
/>
</figure>

<HorizontalLine />

<figure className="w-full">
<img
src="/landing/logo-playfab.png"
alt="Unity"
width={135}
height={40}
className="h-6 w-auto lg:h-[40px]"
/>
</figure>
</div>
</div>
</article>
)
Expand Down
2 changes: 1 addition & 1 deletion features/Landing/components/WhatWeHave.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ const WhatWeHave: React.FC<ComponentProps<'div'>> = () => {
<img
src="/landing/troublepunk.png"
alt="troublepunk"
width={266}
width={265}
height={400}
className="rotate-12"
/>
Expand Down
102 changes: 63 additions & 39 deletions features/Landing/components/WhyKup.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,15 @@
/* eslint-disable @next/next/no-img-element */
import Spline from '@splinetool/react-spline'
import clsx from 'clsx'
import { ComponentProps } from 'react'
import { ComponentProps, useState } from 'react'
import { useWindowSize } from 'react-use'

const BREAK_POINT = 800

const WhyKup: React.FC<ComponentProps<'article'>> = () => {
const { width } = useWindowSize()
const [loaded, setLoaded] = useState<boolean>(false)

return (
<article
id="whykup"
Expand All @@ -15,55 +22,72 @@ const WhyKup: React.FC<ComponentProps<'article'>> = () => {
<h2 className="text-white tracking-tighter text-3xl lg:text-5xl font-bold mb-4 lg:mb-7 lg:text-right">
Why KUP?
</h2>
<p className="text-white text-sm lg:text-base leading-5 lg:text-right">
<p className="text-white text-sm lg:text-base leading-5 lg:text-right tracking-tight">
For a metaverse to succeed, it must provide as much content as
possible so that users can enjoy content seamlessly and without much
repetition.
<br />
It is cumbersome for content providers (Unity developers) to work in a
domain that they have little to no practice in. In short, KUP helps
content providers build a metaverse with ease, even if they are not as
skilled in other areas. By doing so, they have more time to work on
the quality of the content itself.
repetition. It is cumbersome for content providers (Unity developers)
to work in a domain that they have little to no practice in. In short,
KUP helps content providers build a metaverse with ease, even if they
are not as skilled in other areas. By doing so, they have more time to
work on the quality of the content itself.
</p>
</div>
<div
role="image"
className="relative order-1 flex-0 w-[232px] h-[232px] lg:w-[434px] lg:h-[464px]"
className="order-1 lg:order-2 relative"
style={{
width: width > BREAK_POINT ? 530 : 371,
height: width > BREAK_POINT ? 600 : 420,
}}
>
<Spline
scene="https://prod.spline.design/GDvfs1L9lPNpgxgy/scene.splinecode"
style={{
position: 'absolute',
display: 'block',
top: 0,
left: 0,
zoom: width > BREAK_POINT ? 1 : 1 / 1.45,
pointerEvents: 'none',
}}
onLoad={(app) => {
setLoaded(true)
}}
/>
<span
className="text-sm text-yellow block font-bold text-center w-[80px] h-[34px] tracking-tight"
style={{
display: 'block',
position: 'absolute',
textShadow: '2px 2px 8px rgba(0, 0, 0, 0.8)',
transform: 'rotate(-7deg)',
top: width > 800 ? 250 : 170,
left: width > 800 ? 260 : 170,
}}
>
Metaverse <br />
Hitch hikers
</span>
<span
className="text-xl text-yellow block font-bold text-center tracking-tight"
style={{
display: 'block',
position: 'absolute',
textShadow: '2px 2px 8px rgba(0, 0, 0, 0.8)',
bottom: width > BREAK_POINT ? 80 : 50,
left: width > BREAK_POINT ? 170 : 90,
}}
>
Metaverse Hitch hikers
</span>
<img
src="/landing/pulley.png"
alt="pulley"
width={321}
height={127}
className="absolute z-20 top-0 left-0 w-[160px] lg:w-[321px] lg:h-[127px]"
/>

<img
src="/landing/logo-klaytn-light.svg"
alt="Klaytn"
width={140}
height={42}
className="absolute top-20 left-16 lg:top-40 lg:left-32 w-[70px] lg:w-[140px] lg:h-[42px]"
/>

<img
src="/landing/swing.svg"
alt="Klaytn"
className="absolute top-12 left-28 lg:top-24 lg:left-56 z-10 w-[82px] lg:w-[163px] lg:h-[235px]"
width={163}
height={235}
className="absolute top-0 left-0 w-full h-full"
style={{
animation: 'pulleyUp 6s ease-in-out infinite',
opacity: loaded ? 0 : 1,
}}
/>

<img
src="/landing/cloud.svg"
alt="cloud"
width={380}
height={148}
className="absolute bottom-0 right-0 z-0 animate-buoyancy-1 w-[190px] lg:w-[380px] lg:h-[148px]"
width={530}
height={600}
/>
</div>
</article>
Expand Down
Loading

1 comment on commit 1c8d9bf

@vercel
Copy link

@vercel vercel bot commented on 1c8d9bf Dec 29, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

coinbase-kup-web – ./

coinbase-kup-web-catze.vercel.app
coinbase-kup-web.vercel.app
coinbase-kup-web-git-main-catze.vercel.app

Please sign in to comment.