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