+
-
+ {/* */}
+ 
+ Vite + React
-
-
-
+ );
}
-export default App
+export default App;
diff --git a/src/assets/react.svg b/src/assets/react.svg
deleted file mode 100644
index 6c87de9..0000000
--- a/src/assets/react.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/components/customHeader.jsx b/src/components/customHeader.jsx
new file mode 100644
index 0000000..4502f71
--- /dev/null
+++ b/src/components/customHeader.jsx
@@ -0,0 +1,33 @@
+// eslint-disable-next-line react/prop-types
+export default function CustomHeader() {
+ return (
+
+ );
+}
diff --git a/src/components/leftPart.jsx b/src/components/leftPart.jsx
new file mode 100644
index 0000000..eb9586c
--- /dev/null
+++ b/src/components/leftPart.jsx
@@ -0,0 +1,135 @@
+// eslint-disable-next-line react/prop-types
+export default function LeftPart({ index }) {
+ // const style1 = useTrail(4, {
+ // from: { transform: "translateY(300%)", opacity: 0 },
+ // to: {
+ // transform: index === 0 ? "translateY(0%)" : "translateY(300%)",
+ // opacity: index === 0 ? 1 : 0,
+ // },
+ // delay: index === 0 ? 500 : 200,
+ // });
+ return (
+
- Edit src/App.jsx and save to test HMR
-
+
-
+
+
+
+
+
+
+
+
+
+ - Click on the Vite and React logos to learn more -
- - ) +
+
+ );
+}
diff --git a/src/components/mobileContent.jsx b/src/components/mobileContent.jsx
new file mode 100644
index 0000000..12dfb4e
--- /dev/null
+++ b/src/components/mobileContent.jsx
@@ -0,0 +1,62 @@
+export default function MobileContent() {
+ return (
+
+
+
+ DC DAO welcomes anyone striving to innovate in Web3
+
+ .
+
+
+ {/* */}
+
+ Join Us
+
+
+
+ {/* */}
+ + Darwinia Community DAO +
{" "} +
+ DC DAO welcomes anyone striving to innovate in Web3
+
+ .
+
+
+
+ {/* */}
+
+ Join Us
+
+
+
+
+
+
+
+
+ + Contact Us{" "} + + : + +
++ Be a part of our community by following us. +
+
+ 
+ 
+ + Funded by{" "} + + Darwinia.Network + +
+
+
+ );
+}
diff --git a/src/hook/useIsVisible.js b/src/hook/useIsVisible.js
new file mode 100644
index 0000000..9ba6e94
--- /dev/null
+++ b/src/hook/useIsVisible.js
@@ -0,0 +1,18 @@
+import { useEffect, useState } from "react";
+
+export function useIsVisible(ref) {
+ const [isIntersecting, setIntersecting] = useState(false);
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(([entry]) =>
+ setIntersecting(entry.isIntersecting)
+ );
+
+ observer.observe(ref.current);
+ return () => {
+ observer.disconnect();
+ };
+ }, [ref]);
+
+ return isIntersecting;
+}
diff --git a/src/hooks/useWidth.jsx b/src/hooks/useWidth.jsx
new file mode 100644
index 0000000..b6c6a5b
--- /dev/null
+++ b/src/hooks/useWidth.jsx
@@ -0,0 +1,20 @@
+import { useEffect, useState } from "react";
+
+export default function useWidth() {
+ const [width, setWidth] = useState(window.innerWidth);
+
+ const handleWidth = () => {
+ setWidth(window.innerWidth);
+ };
+ useEffect(() => {
+ window.addEventListener("resize", handleWidth);
+ window.addEventListener("orientationchange", handleWidth);
+
+ return () => {
+ window.removeEventListener("resize", handleWidth);
+ window.removeEventListener("orientationchange", handleWidth);
+ };
+ }, []);
+
+ return width;
+}
diff --git a/src/index.css b/src/index.css
index 6119ad9..f8a108e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,68 +1,59 @@
-:root {
- font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
- line-height: 1.5;
- font-weight: 400;
-
- color-scheme: light dark;
- color: rgba(255, 255, 255, 0.87);
- background-color: #242424;
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
- font-synthesis: none;
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
+/* @font-face {
+ font-family: JetBrainsMono-Thin;
+ src: url("/fonts/EuclidCircularA-Light.woff2") format("woff2");
+} */
+@font-face {
+ font-family: EuclidCircularA;
+ src: url("/fonts/EuclidCircularA-Light.woff2") format("woff2");
+ font-weight: 300;
+}
+@font-face {
+ font-family: EuclidCircularA;
+ src: url("/fonts/EuclidCircularA-Regular.woff2") format("woff2");
+ font-weight: 400;
}
-
-a {
+@font-face {
+ font-family: EuclidCircularA;
+ src: url("/fonts/EuclidCircularA-Medium.woff2") format("woff2");
font-weight: 500;
- color: #646cff;
- text-decoration: inherit;
}
-a:hover {
- color: #535bf2;
+@font-face {
+ font-family: EuclidCircularA;
+ src: url("/fonts/EuclidCircularA-Bold.woff2") format("woff2");
+ font-weight: 700;
}
+html {
+ font-family: EuclidCircularA;
+ overflow: hidden;
+ width: 100vw;
+ height: 100vh;
+}
body {
- margin: 0;
- display: flex;
- place-items: center;
- min-width: 320px;
- min-height: 100vh;
+ background: black;
}
-h1 {
- font-size: 3.2em;
- line-height: 1.1;
+.custom-scrollbar::-webkit-scrollbar {
+ height: 12px;
}
-button {
- border-radius: 8px;
- border: 1px solid transparent;
- padding: 0.6em 1.2em;
- font-size: 1em;
- font-weight: 500;
- font-family: inherit;
- background-color: #1a1a1a;
- cursor: pointer;
- transition: border-color 0.25s;
+.custom-scrollbar::-webkit-scrollbar-track {
+ background: black;
}
-button:hover {
- border-color: #646cff;
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+ background: #fb3b94;
+ border-radius: 6px;
}
-button:focus,
-button:focus-visible {
- outline: 4px auto -webkit-focus-ring-color;
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+ background: #ff66b2;
}
-@media (prefers-color-scheme: light) {
- :root {
- color: #213547;
- background-color: #ffffff;
- }
- a:hover {
- color: #747bff;
- }
- button {
- background-color: #f9f9f9;
- }
+.no-scrollBar::-webkit-scrollbar {
+ appearance: none;
}
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..cefaf63
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,28 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+ content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+ theme: {
+ extend: {},
+ animation: {
+ "loop-scroll": "loop-scroll 15s linear infinite",
+ "loop-shake": "loop-shake 1s linear infinite",
+ "loop-rotate": "loop-rotate 10s linear infinite",
+ },
+ keyframes: {
+ "loop-scroll": {
+ from: { transform: "translateX(0)" },
+ to: { transform: "translateX(-100%)" },
+ },
+ "loop-shake": {
+ "0%": { transform: "scale(1)" },
+ "50%": { transform: "scale(1.1)" },
+ "100%": { transform: "scale(1)" },
+ },
+ "loop-rotate": {
+ from: { transform: "rotate(0)" },
+ to: { transform: "rotate(-360deg)" },
+ },
+ },
+ },
+ plugins: [],
+};
+ {/* 
*/}
+ 
+
+ Join Us
+
+
+
+
+ */}
+ + Darwinia Community DAO +
{" "} ++ DC DAO welcomes anyone striving to innovate in Web3 +
+ {/* */} +
+
+ Join Us
+
+
+
+