footer change

This commit is contained in:
llx_changed
2023-03-27 19:45:47 +08:00
parent 5d18626b4e
commit 73b4a77a68
14 changed files with 6711 additions and 6429 deletions
+37
View File
@@ -8,6 +8,7 @@
"name": "my-app",
"version": "0.1.0",
"dependencies": {
"@headlessui/react": "^1.7.13",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
@@ -24,6 +25,9 @@
"react-scripts": "5.0.1",
"typescript": "^4.9.5",
"web-vitals": "^2.1.4"
},
"devDependencies": {
"tailwindcss": "^3.2.7"
}
},
"node_modules/@adobe/css-tools": {
@@ -2164,6 +2168,21 @@
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
}
},
"node_modules/@headlessui/react": {
"version": "1.7.13",
"resolved": "https://registry.npmmirror.com/@headlessui/react/-/react-1.7.13.tgz",
"integrity": "sha512-9n+EQKRtD9266xIHXdY5MfiXPDfYwl7zBM7KOx2Ae3Gdgxy8QML1FkCMjq6AsOf0l6N9uvI4HcFtuFlenaldKg==",
"dependencies": {
"client-only": "^0.0.1"
},
"engines": {
"node": ">=10"
},
"peerDependencies": {
"react": "^16 || ^17 || ^18",
"react-dom": "^16 || ^17 || ^18"
}
},
"node_modules/@humanwhocodes/config-array": {
"version": "0.11.8",
"resolved": "https://registry.npmmirror.com/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",
@@ -5243,6 +5262,11 @@
"node": ">=0.10.0"
}
},
"node_modules/client-only": {
"version": "0.0.1",
"resolved": "https://registry.npmmirror.com/client-only/-/client-only-0.0.1.tgz",
"integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
},
"node_modules/cliui": {
"version": "7.0.4",
"resolved": "https://registry.npmmirror.com/cliui/-/cliui-7.0.4.tgz",
@@ -17407,6 +17431,14 @@
"resolved": "https://registry.npmmirror.com/@eslint/js/-/js-8.36.0.tgz",
"integrity": "sha512-lxJ9R5ygVm8ZWgYdUweoq5ownDlJ4upvoWmO4eLxBYHdMo+vZ/Rx0EN6MbKWDJOSUGrqJy2Gt+Dyv/VKml0fjg=="
},
"@headlessui/react": {
"version": "1.7.13",
"resolved": "https://registry.npmmirror.com/@headlessui/react/-/react-1.7.13.tgz",
"integrity": "sha512-9n+EQKRtD9266xIHXdY5MfiXPDfYwl7zBM7KOx2Ae3Gdgxy8QML1FkCMjq6AsOf0l6N9uvI4HcFtuFlenaldKg==",
"requires": {
"client-only": "^0.0.1"
}
},
"@humanwhocodes/config-array": {
"version": "0.11.8",
"resolved": "https://registry.npmmirror.com/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",
@@ -19857,6 +19889,11 @@
}
}
},
"client-only": {
"version": "0.0.1",
"resolved": "https://registry.npmmirror.com/client-only/-/client-only-0.0.1.tgz",
"integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
},
"cliui": {
"version": "7.0.4",
"resolved": "https://registry.npmmirror.com/cliui/-/cliui-7.0.4.tgz",
+4
View File
@@ -3,6 +3,7 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@headlessui/react": "^1.7.13",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
@@ -43,5 +44,8 @@
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"tailwindcss": "^3.2.7"
}
}
+2 -2
View File
@@ -10,7 +10,7 @@
.default {
background-color: #1A56DB;
transition: background-color .7s;
transition: background-color .4s;
}
.default:hover {
@@ -21,7 +21,7 @@
background-color: #ffffff;
border: 1px solid #E5E7EB;
color: #1F2A37;
transition: background-color .7s;
transition: background-color .4s;
}
.white:hover {
+1 -1
View File
@@ -10,7 +10,7 @@ a {
border-radius: 8px;
cursor: pointer;
background: transparent;
transition: background .7s;
transition: background .4s;
}
a:hover {
+1 -1
View File
@@ -21,7 +21,7 @@
/* 大型设备(笔记本电脑/台式机,992 像素及以上)*/
@media only screen and (min-width: 992px) {
.box {
width: 992px;
width: 100%;
}
}
+6
View File
@@ -6,6 +6,12 @@
justify-content: center;
}
@media only screen and (max-width: 1500px) {
.box {
width: 998px;
}
}
.card {
width: 320px;
height: 366px;
+10 -15
View File
@@ -1,6 +1,14 @@
.container {
background: #ffffff;
padding: 0 320px;
background-color: #ffffff;
background-image: url(../../assets/footer-bg.svg);
background-position: bottom right;
padding: 0 120px;
}
@media only screen and (max-width: 900px) {
.container {
padding: 0 20px;
}
}
.top {
@@ -9,16 +17,6 @@
position: relative;
}
.bg {
position: absolute;
width: 897px;
height: 897px;
filter: blur(100px);
background: url(../../assets/footer-bg.svg);
bottom: 0;
z-index: 1;
}
.brand {
flex: 1;
margin-top: 64px;
@@ -43,9 +41,6 @@
display: flex;
gap: 120px;
margin-top: 80px;
position: absolute;
right: 0;
z-index: 10;
}
.list {
+45 -9
View File
@@ -1,4 +1,6 @@
import React, { Fragment } from "react";
import { Link } from "react-router-dom";
import { Menu, Transition } from "@headlessui/react";
import { useTranslation } from "react-i18next";
import i18next from "i18next";
import i18n from "../../local";
@@ -9,7 +11,9 @@ const list1 = [
{
text: "Product Roadmap",
props: {
href: `https://docs.langgenius.ai${i18next.language === 'zh' ? '/zh-hans' : ''}/community/product-roadmap`,
href: `https://docs.langgenius.ai${
i18next.language === "zh" ? "/zh-hans" : ""
}/community/product-roadmap`,
target: "_blank",
rel: "noreferrer",
},
@@ -19,7 +23,7 @@ const list1 = [
icon: "github",
text: "GitHub",
props: {
href: 'https://github.com/langgenius',
href: "https://github.com/langgenius",
target: "_blank",
rel: "noreferrer",
},
@@ -36,7 +40,7 @@ const list2 = [
// rel: "noreferrer",
// },
},
{
{
text: "Terms of Service",
props: {
to: "/terms-of-service",
@@ -66,7 +70,6 @@ const Footer = () => {
return (
<div className={s.container}>
<div className={s.top}>
<div className={s.bg} />
<div className={s.brand}>
<div className={s.logo} />
<div className={s.text}>
@@ -87,7 +90,16 @@ const Footer = () => {
</div>
<div className={s.list}>
{list2.map((l2, index) => {
return <Link className={s.item} key={index} to={l2.props?.href || ''} {...(l2.props || {})}>{l2.text}</Link>;
return (
<Link
className={s.item}
key={index}
to={l2.props?.href || ""}
{...(l2.props || {})}
>
{l2.text}
</Link>
);
})}
</div>
</div>
@@ -95,11 +107,35 @@ const Footer = () => {
<div className={s.bottom}>
<div className={s.copywrite}>© 2023 LangGenius, Inc. </div>
<div className={s.language}>
<Icon type="language" />
{t("语言")}
<Menu as="div" className="relative inline-block text-left">
<div>
<Menu.Button className="inline-flex w-full justify-center rounded-md bg-black bg-opacity-20 px-4 py-2 text-sm font-medium text-white hover:bg-opacity-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75">
{t("语言")}
<Icon type="language" />
</Menu.Button>
</div>
<Transition
as={Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items>
<Menu.Item key={"English"} as={Fragment}>
<div onClick={() => i18n.changeLanguage("en")}>English</div>
</Menu.Item>
<Menu.Item key={"简体中文"} as={Fragment}>
<div onClick={() => i18n.changeLanguage("zh")}></div>
</Menu.Item>
</Menu.Items>
</Transition>
</Menu>
</div>
<div onClick={() => i18n.changeLanguage("en")}>English</div>
<div onClick={() => i18n.changeLanguage("zh")}></div>
{/* <div onClick={() => i18n.changeLanguage("en")}>English</div>
<div onClick={() => i18n.changeLanguage("zh")}>简体中文</div> */}
</div>
</div>
);
+1 -1
View File
@@ -1,5 +1,5 @@
.box {
min-width: 720px;
min-width: 750px;
height: 100vh;
display: flex;
flex-direction: column;
+1 -1
View File
@@ -15,7 +15,7 @@ const Layout = () => {
<Outlet />
</div>
</div>
{/* <Footer /> */}
<Footer />
</div>
)
};
+4
View File
@@ -1,3 +1,7 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
margin: 0;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+1 -1
View File
@@ -12,7 +12,7 @@ const Home = () => {
<Block2 />
<Block3 />
<Block4 />
{/* <Block5 /> */}
<Block5 />
</>
)
};
+7
View File
@@ -0,0 +1,7 @@
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
};
+6591 -6398
View File
File diff suppressed because it is too large Load Diff