diff --git a/package.json b/package.json index 0c79e6e..80377aa 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "scripts": { "prepare": "npm run gen:esa-type", "test": "tsc && prettier --check ./src/ --check && eslint --ext .ts,.tsx ./src ", - "dev": "vite", + "dev": "vite "dev:workers": "wrangler pages dev -- bun run dev", "build": "yarn test && vite build && cpx wrangler.toml dist/ && cpx \"functions/**\" dist/functions", "preview": "vite preview", diff --git a/src/assets/Check.svg b/src/assets/Check.svg new file mode 100644 index 0000000..dbc873a --- /dev/null +++ b/src/assets/Check.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/Circle.svg b/src/assets/Circle.svg new file mode 100644 index 0000000..b8e8615 --- /dev/null +++ b/src/assets/Circle.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/Crooked.svg b/src/assets/Crooked.svg new file mode 100644 index 0000000..4a9d6bf --- /dev/null +++ b/src/assets/Crooked.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/Cross.svg b/src/assets/Cross.svg new file mode 100644 index 0000000..91bd7d8 --- /dev/null +++ b/src/assets/Cross.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/EsaChibuIcon.svg b/src/assets/EsaChibuIcon.svg new file mode 100644 index 0000000..08bf478 --- /dev/null +++ b/src/assets/EsaChibuIcon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/Rock.png b/src/assets/Rock.png new file mode 100644 index 0000000..b36bd5c Binary files /dev/null and b/src/assets/Rock.png differ diff --git a/src/assets/Rock.svg b/src/assets/Rock.svg new file mode 100644 index 0000000..eb98f1c --- /dev/null +++ b/src/assets/Rock.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/Union.png b/src/assets/Union.png new file mode 100644 index 0000000..feb35b9 Binary files /dev/null and b/src/assets/Union.png differ diff --git a/src/assets/esachievementLogo.svg b/src/assets/esachievementLogo.svg index dd6ffa0..1ea0a86 100644 --- a/src/assets/esachievementLogo.svg +++ b/src/assets/esachievementLogo.svg @@ -1,186 +1,75 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + - - - - - - - - - - - + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + - - - - - - - - + + + + + + + + - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 6e4faa8..acc396e 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,21 +1,28 @@ import { useStore } from "@nanostores/react"; -import { Avatar, Flex, Text, Link as LinkComponent } from "@radix-ui/themes"; +import { + Avatar, + Flex, + Text, + Link as LinkComponent, + Box, +} from "@radix-ui/themes"; import { type ReactElement } from "react"; import styled from "styled-components"; +import Icon from "@/assets/EsaChibuIcon.svg"; import { getAuthorizePageUrl } from "@/lib/services/esa"; import { $hasAuthenticated } from "@/lib/stores/auth"; import { Link } from "@/router.ts"; const HeaderStyle = styled(Flex)` position: fixed; - color: #374151; - top: 2%; + color: #242d3c; + top: 3%; right: 0; left: 0; margin: 0 auto; - height: 9%; - width: 96%; - z-index: 1; + height: 6.2%; + width: 95%; + z-index: 10; `; const RightContents = styled(Flex)` @@ -24,13 +31,13 @@ const RightContents = styled(Flex)` `; const CreateStyle = styled(Link)` - color: #e7e7e7; - background-color: #0f172a; + color: #f7f7f7; + background-color: #00cdc2; box-shadow: - 12px 12px 32px #b5bec9, - -12px -12px 32px #ffffff; + 12px 12px 16px #b5bec9, + -12px -12px 16px #ffffff; - width: 13rem; + width: 10rem; border-radius: 80px; align-items: center; @@ -38,7 +45,7 @@ const CreateStyle = styled(Link)` display: flex; &:hover { box-shadow: none; - transition: 100ms; + transition: 160ms; } `; @@ -49,15 +56,18 @@ const LinkContents = styled(Link)` -12px -12px 32px #ffffff; height: 100%; - padding: 0 5rem 0 2rem; - margin-right: -4rem; + padding: 0 5rem 0 1.6rem; + margin-right: -3.4rem; border-radius: 80px; + color: #242d3c; align-items: center; display: flex; &:hover { + color: #6d737d; box-shadow: none; + transition: 160ms; } `; @@ -66,36 +76,49 @@ const EsaAchievementsStyle = styled(Link)` bottom: 0; margin: auto 0; font-weight: 900; - margin-left: 3vw; + letter-spacing: -0.1rem; + font-size: 1.8rem; + display: flex; + align-content: center; + align-items: center; `; const Esa = styled(Text)` - color: #1dd4cb; + color: #00cdc2; + font-size: 2rem; +`; + +const IconStyle = styled.img` + width: 2.3rem; + margin-right: 0.5vw; `; export function Header(): ReactElement { return ( - esa - chievement + + + Esa + chievement + - + ranking - + members - + achievements @@ -106,13 +129,13 @@ export function Header(): ReactElement { to="/unlocked" > - + 実績管理 @@ -123,13 +146,13 @@ export function Header(): ReactElement { href={getAuthorizePageUrl()} > - + ログイン diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 9182c73..881ab29 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -20,7 +20,6 @@ export function Catch(): ReactElement { gap: 10px; color: #ff3e3e; background-color: #ffedee; - > p { font-size: 1.2rem; font-weight: bold; @@ -49,11 +48,10 @@ export default function Layout(): ReactElement { const Main = styled.main` font-family: "Noto Sans JP Variable"; word-break: keep-all; - background-color: #e7e7e7; - overflow: hidden; `; - const BodyStyle = styled.div` - height: 100vw; + const BodyStyle = styled.div``; + const ThemeStyle = styled(Theme)` + background-color: #e7e7e7; overflow: hidden; ::-webkit-scrollbar { /* Edge Chorome Safari Operaなど */ @@ -61,7 +59,7 @@ export default function Layout(): ReactElement { } `; return ( - +
@@ -70,6 +68,6 @@ export default function Layout(): ReactElement {
- + ); } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 217abfe..b5cec14 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,11 +1,151 @@ -import { Flex } from "@radix-ui/themes"; +import { Flex, Text } from "@radix-ui/themes"; import { type ReactElement } from "react"; -import Logo from "@/assets/esachievementLogo.svg"; +import styled from "styled-components"; +import Circle from "@/assets/Circle.svg"; +import Cross from "@/assets/Cross.svg"; +import Rock from "@/assets/Rock.svg"; +import { Link } from "@/router.ts"; export default function App(): ReactElement { + const Catchcopy = styled(Text)` + color: #242d3c; + letter-spacing: -0.1rem; + font-weight: 700; + font-size: 4.8rem; + line-height: 4.6rem; + font-family: sans-serif; + position: relative; + z-index: 3; + span { + color: #00cdc2; + margin-left: 0.1rem; + text-shadow: + 6px 6px 16px #b5bec9, + -6px -6px 16px #ffffff; + } + `; + + const SubCatchcopy = styled(Text)` + color: #6c7482; + /* letter-spacing: -0.1rem; */ + font-weight: 500; + font-size: 0.8rem; + font-family: sans-serif; + `; + + const Detail = styled(Text)` + width: 28vw; + color: #737a89; + + line-height: 1.4rem; + font-weight: 500; + font-size: 0.8rem; + font-family: sans-serif; + `; + + const Button1 = styled(Link)` + font-weight: 600; + font-family: sans-serif; + font-size: 1rem; + + background-color: #e7e7e7; + color: #00cdc2; + border: 1px solid #00cdc2; + + width: fit-content; + height: fit-content; + + padding: 1.2vh 1.3vw 1.2vh 1.8vw; + margin-top: 4vh; + margin-left: 0.3vw; + + border-radius: 50px; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + z-index: 1; + + box-shadow: + 6px 6px 16px #b5bec9, + -6px -6px 16px #ffffff; + + transform-origin: 50% 50%; + transition: 300ms; + + ::after { + content: ""; + position: absolute; + width: 100%; + height: 120%; + background-color: #00cdc2; + + top: 0; + left: 0; + z-index: -1; + transform-origin: 100% 50%; + transform: scaleX(0%); + transition: transform 300ms; + } + + &:hover { + box-shadow: none; + transform: scale(1.06); + color: #ffffff; + } + + &:hover ::after { + transform-origin: 0% 50%; + transform: scaleX(100%); + transform: none; + } + `; + + const RockStyle = styled.img` + position: absolute; + width: 48rem; + left: 46vw; + top: 2vh; + `; + + const CrossStyle = styled.img` + width: 28vw; + top: 68vh; + left: 24vw; + position: absolute; + z-index: -1; + `; + + const CircleStyle = styled.img` + width: 30vw; + top: -26vh; + left: 34vw; + position: absolute; + z-index: -1; + `; + return ( - - logo + + + + Make Your +
+ Life a Game!! + + + EsaChievement + + + 実績解除と情報共有サービスesaを組み合わせたWebアプリです。このアプリはチーム活動をより楽しく効率的にすることを目的として開発されサークルや研究室での情報共有を促進しながら達成感を得ることができる仕組みになっています。 + + + 使ってみる + + + + + ); }