commit
4987bc6275
@ -0,0 +1,24 @@ |
|||||||
|
# Logs |
||||||
|
logs |
||||||
|
*.log |
||||||
|
npm-debug.log* |
||||||
|
yarn-debug.log* |
||||||
|
yarn-error.log* |
||||||
|
pnpm-debug.log* |
||||||
|
lerna-debug.log* |
||||||
|
|
||||||
|
node_modules |
||||||
|
dist |
||||||
|
dist-ssr |
||||||
|
*.local |
||||||
|
|
||||||
|
# Editor directories and files |
||||||
|
.vscode/* |
||||||
|
!.vscode/extensions.json |
||||||
|
.idea |
||||||
|
.DS_Store |
||||||
|
*.suo |
||||||
|
*.ntvs* |
||||||
|
*.njsproj |
||||||
|
*.sln |
||||||
|
*.sw? |
||||||
@ -0,0 +1,13 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<meta charset="UTF-8" /> |
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
||||||
|
<title>SGPT</title> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div id="root"></div> |
||||||
|
<script type="module" src="/src/main.tsx"></script> |
||||||
|
</body> |
||||||
|
</html> |
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,31 @@ |
|||||||
|
{ |
||||||
|
"name": "spgt-landing-page", |
||||||
|
"private": true, |
||||||
|
"version": "0.0.0", |
||||||
|
"type": "module", |
||||||
|
"scripts": { |
||||||
|
"dev": "vite", |
||||||
|
"build": "tsc && vite build", |
||||||
|
"preview": "vite preview" |
||||||
|
}, |
||||||
|
"dependencies": { |
||||||
|
"localforage": "^1.10.0", |
||||||
|
"match-sorter": "^6.3.1", |
||||||
|
"react": "^18.2.0", |
||||||
|
"react-dom": "^18.2.0", |
||||||
|
"react-router-dom": "^6.8.2", |
||||||
|
"sort-by": "^1.2.0" |
||||||
|
}, |
||||||
|
"devDependencies": { |
||||||
|
"@types/react": "^18.0.27", |
||||||
|
"@types/react-dom": "^18.0.10", |
||||||
|
"@types/react-router-dom": "^5.3.3", |
||||||
|
"@vitejs/plugin-react-swc": "^3.0.0", |
||||||
|
"autoprefixer": "^10.4.13", |
||||||
|
"postcss": "^8.4.21", |
||||||
|
"postcss-import": "^15.1.0", |
||||||
|
"tailwindcss": "^3.2.7", |
||||||
|
"typescript": "^4.9.3", |
||||||
|
"vite": "^4.1.0" |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,6 @@ |
|||||||
|
module.exports = { |
||||||
|
plugins: { |
||||||
|
tailwindcss: {}, |
||||||
|
autoprefixer: {}, |
||||||
|
}, |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 1.5 KiB |
@ -0,0 +1,8 @@ |
|||||||
|
import "./App.css"; |
||||||
|
import RouterProviderComponent from "./shared/providers/RouterProviderComponent"; |
||||||
|
|
||||||
|
function App() { |
||||||
|
return <RouterProviderComponent />; |
||||||
|
} |
||||||
|
|
||||||
|
export default App; |
||||||
|
After Width: | Height: | Size: 445 KiB |
|
After Width: | Height: | Size: 605 KiB |
|
After Width: | Height: | Size: 618 KiB |
|
After Width: | Height: | Size: 220 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
@ -0,0 +1,5 @@ |
|||||||
|
@import "tailwindcss/base"; |
||||||
|
|
||||||
|
@import "tailwindcss/components"; |
||||||
|
|
||||||
|
@import "tailwindcss/utilities"; |
||||||
@ -0,0 +1,10 @@ |
|||||||
|
import React from "react"; |
||||||
|
import ReactDOM from "react-dom/client"; |
||||||
|
import App from "./App"; |
||||||
|
import "./index.css"; |
||||||
|
|
||||||
|
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( |
||||||
|
<React.StrictMode> |
||||||
|
<App /> |
||||||
|
</React.StrictMode> |
||||||
|
); |
||||||
@ -0,0 +1,17 @@ |
|||||||
|
import AboutSection from "../shared/components/home/AboutSection"; |
||||||
|
import FirstSection from "../shared/components/home/FirstSection"; |
||||||
|
import RoadMap from "../shared/components/home/RoadMap"; |
||||||
|
|
||||||
|
type Props = {}; |
||||||
|
|
||||||
|
const Home = (props: Props) => { |
||||||
|
return ( |
||||||
|
<div className="flex flex-col gap-20"> |
||||||
|
<FirstSection /> |
||||||
|
<AboutSection /> |
||||||
|
<RoadMap /> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Home; |
||||||
@ -0,0 +1,36 @@ |
|||||||
|
type Props = { |
||||||
|
children: React.ReactNode; |
||||||
|
bgColor?: string; |
||||||
|
textColor?: string; |
||||||
|
borderColor?: string; |
||||||
|
onClick?: () => void; |
||||||
|
size?: "sm" | "md" | "lg"; |
||||||
|
}; |
||||||
|
|
||||||
|
const Button = ({ |
||||||
|
children, |
||||||
|
bgColor = "bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-orange-400 to-rose-400", |
||||||
|
textColor = "text-white", |
||||||
|
borderColor = "border-blue-500", |
||||||
|
onClick, |
||||||
|
size = "md", |
||||||
|
}: Props) => { |
||||||
|
const sizes = { |
||||||
|
sm: "py-1 px-3 text-sm", |
||||||
|
md: "py-2 px-4 text-md", |
||||||
|
lg: "py-3 px-5 text-lg", |
||||||
|
}; |
||||||
|
|
||||||
|
const sizeClass = sizes[size] || sizes.md; |
||||||
|
|
||||||
|
return ( |
||||||
|
<button |
||||||
|
className={`rounded-full transition-all duration-150 font-semibold ${bgColor} ${textColor} ${borderColor} ${sizeClass}`} |
||||||
|
onClick={onClick} |
||||||
|
> |
||||||
|
{children} |
||||||
|
</button> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Button; |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
type Props = {}; |
||||||
|
|
||||||
|
const Footer = (props: Props) => { |
||||||
|
return <div className="container mx-auto bg-white">Footer</div>; |
||||||
|
}; |
||||||
|
|
||||||
|
export default Footer; |
||||||
@ -0,0 +1,105 @@ |
|||||||
|
import React from "react"; |
||||||
|
import Button from "./Button"; |
||||||
|
|
||||||
|
type Props = {}; |
||||||
|
|
||||||
|
const menuItems = [ |
||||||
|
{ |
||||||
|
name: "Home", |
||||||
|
path: "/", |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "About", |
||||||
|
path: "", |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "Tokenomics", |
||||||
|
path: "", |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "Roadmap", |
||||||
|
path: "", |
||||||
|
}, |
||||||
|
]; |
||||||
|
|
||||||
|
const Header = (props: Props) => { |
||||||
|
const [isScrolled, setIsScrolled] = React.useState(false); |
||||||
|
|
||||||
|
React.useEffect(() => { |
||||||
|
window.addEventListener("scroll", () => { |
||||||
|
if (window.scrollY > 0) { |
||||||
|
setIsScrolled(true); |
||||||
|
} else { |
||||||
|
setIsScrolled(false); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, []); |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
{isScrolled ? ( |
||||||
|
<div className="fixed w-full z-30 p-1 transition-all duration-150 bg-gray-800"> |
||||||
|
<div className="container mx-auto flex justify-between items-center"> |
||||||
|
<div> |
||||||
|
<h4 className="text-2xl transition-all duration-150 text-white uppercase font-bold"> |
||||||
|
Logo |
||||||
|
</h4> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="flex gap-10 items-center"> |
||||||
|
<ul className="flex gap-10"> |
||||||
|
{menuItems.map((item) => ( |
||||||
|
<li className="inline-block" key={item.path}> |
||||||
|
<a |
||||||
|
href="#" |
||||||
|
className="text-white text-md transition-all duration-150" |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</li> |
||||||
|
))} |
||||||
|
</ul> |
||||||
|
|
||||||
|
<div className="flex gap-4"> |
||||||
|
<Button size="sm">Whitepaper</Button> |
||||||
|
<Button size="sm">Audit</Button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) : ( |
||||||
|
<div className="fixed z-30 w-full p-5 transition-all duration-150"> |
||||||
|
<div className="container mx-auto flex justify-between items-center"> |
||||||
|
<div> |
||||||
|
<h4 className="text-4xl transition-all duration-150 text-white uppercase font-bold"> |
||||||
|
Logo |
||||||
|
</h4> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="flex gap-10 items-center"> |
||||||
|
<ul className="flex gap-10"> |
||||||
|
{menuItems.map((item) => ( |
||||||
|
<li className="inline-block" key={item.path}> |
||||||
|
<a |
||||||
|
href="#" |
||||||
|
className="text-white text-lg transition-all duration-150" |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</li> |
||||||
|
))} |
||||||
|
</ul> |
||||||
|
|
||||||
|
<div className="flex gap-4"> |
||||||
|
<Button size="md">Whitepaper</Button> |
||||||
|
<Button size="md">Audit</Button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Header; |
||||||
@ -0,0 +1,51 @@ |
|||||||
|
import React from "react"; |
||||||
|
import pokerChips from "../../../assets/images/poker-chips.webp"; |
||||||
|
|
||||||
|
type Props = {}; |
||||||
|
|
||||||
|
const AboutSection = (props: Props) => { |
||||||
|
return ( |
||||||
|
<div className="container mx-auto text-white py-20 flex"> |
||||||
|
<div className="flex flex-col gap-10 w-1/2"> |
||||||
|
<div className="flex flex-col gap-4"> |
||||||
|
<h4 className="text-5xl uppercase font-bold">What is SGPT?</h4> |
||||||
|
<p className="text-gray-300 md:w-4/5 text-lg"> |
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto |
||||||
|
dignissimos necessitatibus nam vero in quis! Voluptatum doloremque |
||||||
|
voluptatibus corporis animi ab. Quisquam alias error labore iste |
||||||
|
dolores necessitatibus mollitia officia! |
||||||
|
</p> |
||||||
|
|
||||||
|
<p className="text-gray-300 md:w-4/5 text-lg"> |
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto |
||||||
|
dignissimos necessitatibus nam vero in quis! Voluptatum doloremque |
||||||
|
voluptatibus corporis animi ab. Quisquam alias error labore iste |
||||||
|
dolores necessitatibus mollitia officia! |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="flex flex-col gap-4"> |
||||||
|
<h4 className="text-5xl uppercase font-bold">What is SGPT?</h4> |
||||||
|
<p className="text-gray-300 md:w-4/5 text-lg"> |
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto |
||||||
|
dignissimos necessitatibus nam vero in quis! Voluptatum doloremque |
||||||
|
voluptatibus corporis animi ab. Quisquam alias error labore iste |
||||||
|
dolores necessitatibus mollitia officia! |
||||||
|
</p> |
||||||
|
|
||||||
|
<p className="text-gray-300 md:w-4/5 text-lg"> |
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto |
||||||
|
dignissimos necessitatibus nam vero in quis! Voluptatum doloremque |
||||||
|
voluptatibus corporis animi ab. Quisquam alias error labore iste |
||||||
|
dolores necessitatibus mollitia officia! |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="w-1/2 flex justify-center items-center"> |
||||||
|
<img className="w-2/3" src={pokerChips} /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default AboutSection; |
||||||
@ -0,0 +1,41 @@ |
|||||||
|
import robotImage from "../../../assets/images/robot.png"; |
||||||
|
import Button from "../Button"; |
||||||
|
|
||||||
|
type Props = {}; |
||||||
|
|
||||||
|
const FirstSection = (props: Props) => { |
||||||
|
return ( |
||||||
|
<div |
||||||
|
// style={{ backgroundImage: `url(${background})` }}
|
||||||
|
className="min-h-screen flex bg-cover bg-center bg-no-repeat relative" |
||||||
|
> |
||||||
|
<div className="container flex mx-auto text-white z-20 mt-20"> |
||||||
|
<div className="md:w-1/2 flex flex-col justify-center gap-10 pb-20"> |
||||||
|
<h4 className="text-6xl font-bold"> |
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. |
||||||
|
</h4> |
||||||
|
<p className="w-3/4 font-body"> |
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique |
||||||
|
amet eveniet fugiat pariatur, illo in est officiis labore ad |
||||||
|
corrupti obcaecati asperiores! Quos ratione tempore dolorum |
||||||
|
temporibus tenetur quaerat. |
||||||
|
</p> |
||||||
|
|
||||||
|
<div className="flex w-2/3 flex-wrap gap-4"> |
||||||
|
<Button>Telegram</Button> |
||||||
|
<Button>Telegram</Button> |
||||||
|
<Button>Telegram</Button> |
||||||
|
<Button>Telegram</Button> |
||||||
|
<Button>Telegram</Button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="md:w-1/2 flex justify-center items-center"> |
||||||
|
<img src={robotImage} className="w-4/5" /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="w-full h-full bg-black absolute opacity-75 z-10"></div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default FirstSection; |
||||||
@ -0,0 +1,33 @@ |
|||||||
|
import React from "react"; |
||||||
|
|
||||||
|
type Props = {}; |
||||||
|
|
||||||
|
const RoadMap = (props: Props) => { |
||||||
|
return ( |
||||||
|
<div className="container mx-auto text-white md:min-h-[40vh]"> |
||||||
|
<h1 className="text-5xl font-bold text-center">RoadMap</h1> |
||||||
|
|
||||||
|
<div className="flex gap-10 mt-20"> |
||||||
|
<div className="w-1/4 bg-[conic-gradient(at_left,_var(--tw-gradient-stops))] from-orange-400 to-rose-400 rounded-lg min-h-[200px] p-5"> |
||||||
|
<h4 className="text-center text-2xl text-gray-100 font-semibold mb-3"> |
||||||
|
Phase 1 |
||||||
|
</h4> |
||||||
|
<ol> |
||||||
|
<li> |
||||||
|
<p> |
||||||
|
Lorem ipsum, dolor sit amet consectetur adipisicing elit. vitae. |
||||||
|
</p> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<p> |
||||||
|
Lorem ipsum, dolor sit amet consectetur adipisicing elit. vitae. |
||||||
|
</p> |
||||||
|
</li> |
||||||
|
</ol> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default RoadMap; |
||||||
@ -0,0 +1,19 @@ |
|||||||
|
import { Outlet } from "react-router-dom"; |
||||||
|
import Footer from "../Footer"; |
||||||
|
import Header from "../Header"; |
||||||
|
|
||||||
|
type Props = {}; |
||||||
|
|
||||||
|
const HomeLayout = (props: Props) => { |
||||||
|
return ( |
||||||
|
<div className="w-full relative bg-black"> |
||||||
|
<Header /> |
||||||
|
<div className="w-full"> |
||||||
|
<Outlet /> |
||||||
|
</div> |
||||||
|
<Footer /> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default HomeLayout; |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
import { createBrowserRouter, RouterProvider } from "react-router-dom"; |
||||||
|
import Home from "../../pages/Home"; |
||||||
|
import HomeLayout from "../components/layouts/HomeLayout"; |
||||||
|
|
||||||
|
const router = createBrowserRouter([ |
||||||
|
{ |
||||||
|
path: "/", |
||||||
|
element: <HomeLayout />, |
||||||
|
children: [{ path: "", element: <Home /> }], |
||||||
|
}, |
||||||
|
]); |
||||||
|
const RouterProviderComponent = () => { |
||||||
|
return <RouterProvider router={router} />; |
||||||
|
}; |
||||||
|
|
||||||
|
export default RouterProviderComponent; |
||||||
@ -0,0 +1 @@ |
|||||||
|
/// <reference types="vite/client" />
|
||||||
@ -0,0 +1,18 @@ |
|||||||
|
/** @type {import('tailwindcss').Config} */ |
||||||
|
module.exports = { |
||||||
|
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], |
||||||
|
theme: { |
||||||
|
extend: {}, |
||||||
|
fontFamily: { |
||||||
|
sans: ["Sen", "sans-serif"], |
||||||
|
body: ["Comfortaa", "sans-serif"], |
||||||
|
}, |
||||||
|
}, |
||||||
|
plugins: [ |
||||||
|
{ |
||||||
|
"postcss-import": {}, |
||||||
|
tailwindcss: {}, |
||||||
|
autoprefixer: {}, |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
@ -0,0 +1,21 @@ |
|||||||
|
{ |
||||||
|
"compilerOptions": { |
||||||
|
"target": "ESNext", |
||||||
|
"useDefineForClassFields": true, |
||||||
|
"lib": ["DOM", "DOM.Iterable", "ESNext"], |
||||||
|
"allowJs": false, |
||||||
|
"skipLibCheck": true, |
||||||
|
"esModuleInterop": false, |
||||||
|
"allowSyntheticDefaultImports": true, |
||||||
|
"strict": true, |
||||||
|
"forceConsistentCasingInFileNames": true, |
||||||
|
"module": "ESNext", |
||||||
|
"moduleResolution": "Node", |
||||||
|
"resolveJsonModule": true, |
||||||
|
"isolatedModules": true, |
||||||
|
"noEmit": true, |
||||||
|
"jsx": "react-jsx" |
||||||
|
}, |
||||||
|
"include": ["src"], |
||||||
|
"references": [{ "path": "./tsconfig.node.json" }] |
||||||
|
} |
||||||
@ -0,0 +1,9 @@ |
|||||||
|
{ |
||||||
|
"compilerOptions": { |
||||||
|
"composite": true, |
||||||
|
"module": "ESNext", |
||||||
|
"moduleResolution": "Node", |
||||||
|
"allowSyntheticDefaultImports": true |
||||||
|
}, |
||||||
|
"include": ["vite.config.ts"] |
||||||
|
} |
||||||
@ -0,0 +1,11 @@ |
|||||||
|
import react from "@vitejs/plugin-react-swc"; |
||||||
|
import { defineConfig } from "vite"; |
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({ |
||||||
|
plugins: [react()], |
||||||
|
server: { |
||||||
|
port: 5000, |
||||||
|
host: "0.0.0.0", |
||||||
|
}, |
||||||
|
}); |
||||||
Loading…
Reference in new issue