mirror of
https://github.com/trushildhokiya/allininx-2.git
synced 2025-03-15 05:28:39 +00:00
Seperate Lander
This commit is contained in:
parent
1527393b75
commit
3d5b69ec71
41
lander/.gitignore
vendored
Normal file
41
lander/.gitignore
vendored
Normal file
@ -0,0 +1,41 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.*
|
||||
.yarn/*
|
||||
!.yarn/patches
|
||||
!.yarn/plugins
|
||||
!.yarn/releases
|
||||
!.yarn/versions
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
.pnpm-debug.log*
|
||||
|
||||
# env files (can opt-in for committing if needed)
|
||||
.env*
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
next-env.d.ts
|
||||
36
lander/README.md
Normal file
36
lander/README.md
Normal file
@ -0,0 +1,36 @@
|
||||
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
|
||||
|
||||
## Getting Started
|
||||
|
||||
First, run the development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
# or
|
||||
pnpm dev
|
||||
# or
|
||||
bun dev
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
|
||||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
||||
|
||||
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
|
||||
|
||||
## Learn More
|
||||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
|
||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||
|
||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
|
||||
|
||||
## Deploy on Vercel
|
||||
|
||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||
|
||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
|
||||
16
lander/eslint.config.mjs
Normal file
16
lander/eslint.config.mjs
Normal file
@ -0,0 +1,16 @@
|
||||
import { dirname } from "path";
|
||||
import { fileURLToPath } from "url";
|
||||
import { FlatCompat } from "@eslint/eslintrc";
|
||||
|
||||
const __filename = fileURLToPath(import.meta.url);
|
||||
const __dirname = dirname(__filename);
|
||||
|
||||
const compat = new FlatCompat({
|
||||
baseDirectory: __dirname,
|
||||
});
|
||||
|
||||
const eslintConfig = [
|
||||
...compat.extends("next/core-web-vitals", "next/typescript"),
|
||||
];
|
||||
|
||||
export default eslintConfig;
|
||||
7
lander/next.config.ts
Normal file
7
lander/next.config.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import type { NextConfig } from "next";
|
||||
|
||||
const nextConfig: NextConfig = {
|
||||
/* config options here */
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
6124
lander/package-lock.json
generated
Normal file
6124
lander/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
33
lander/package.json
Normal file
33
lander/package.json
Normal file
@ -0,0 +1,33 @@
|
||||
{
|
||||
"name": "lander",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev --turbopack",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.7.9",
|
||||
"clsx": "^2.1.1",
|
||||
"framer-motion": "^12.4.3",
|
||||
"motion": "^12.4.3",
|
||||
"next": "15.1.7",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"simplex-noise": "^4.0.3",
|
||||
"tailwind-merge": "^3.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/eslintrc": "^3",
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
"eslint": "^9",
|
||||
"eslint-config-next": "15.1.7",
|
||||
"postcss": "^8",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"typescript": "^5"
|
||||
}
|
||||
}
|
||||
8
lander/postcss.config.mjs
Normal file
8
lander/postcss.config.mjs
Normal file
@ -0,0 +1,8 @@
|
||||
/** @type {import('postcss-load-config').Config} */
|
||||
const config = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
},
|
||||
};
|
||||
|
||||
export default config;
|
||||
1
lander/public/file.svg
Normal file
1
lander/public/file.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
|
||||
|
After Width: | Height: | Size: 391 B |
BIN
lander/public/gitbook.png
Normal file
BIN
lander/public/gitbook.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
1
lander/public/globe.svg
Normal file
1
lander/public/globe.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
1
lander/public/next.svg
Normal file
1
lander/public/next.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
1
lander/public/vercel.svg
Normal file
1
lander/public/vercel.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 128 B |
1
lander/public/window.svg
Normal file
1
lander/public/window.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
|
||||
|
After Width: | Height: | Size: 385 B |
BIN
lander/src/app/favicon.ico
Normal file
BIN
lander/src/app/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
249
lander/src/app/globals.css
Normal file
249
lander/src/app/globals.css
Normal file
@ -0,0 +1,249 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
body {
|
||||
background: black;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
img {
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
background: linear-gradient(180deg, #fff 0%, #525252 100%);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0.5) inset;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.btn-primary-orange {
|
||||
border: 1px solid rgba(255, 134, 53, 0.1);
|
||||
background: rgba(255, 134, 53, 0.1);
|
||||
box-shadow: 0px 0px 10px 0px rgba(255, 134, 53, 0.5) inset;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-primary-teal {
|
||||
border: 1px solid rgba(20, 184, 166, 0.1);
|
||||
background: rgba(20, 184, 166, 0.1);
|
||||
box-shadow: 0px 0px 10px 0px rgba(20, 184, 166, 0.5) inset;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-primary-purple {
|
||||
border: 1px solid rgba(168, 85, 247, 0.1);
|
||||
background: rgba(168, 85, 247, 0.1);
|
||||
box-shadow: 0px 0px 10px 0px rgba(168, 85, 247, 0.5) inset;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-primary-red {
|
||||
border: 1px solid rgba(244, 63, 94, 0.1);
|
||||
background: rgba(244, 63, 94, 0.1);
|
||||
box-shadow: 0px 0px 10px 0px rgba(244, 63, 94, 0.5) inset;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 1) inset;
|
||||
}
|
||||
|
||||
.resend-font-effect-hero {
|
||||
/* #Resend */
|
||||
-webkit-text-fill-color: transparent;
|
||||
text-shadow: -1px -1px 0 hsla(0, 0%, 100%, .15), 1px 1px 0 rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
.border-gradient {
|
||||
/* Mark as important to override react flow styling */
|
||||
background: linear-gradient(black, black) padding-box,
|
||||
linear-gradient(to bottom, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.15)) border-box !important;
|
||||
border: 1px solid transparent !important;
|
||||
}
|
||||
|
||||
.radial-background-1 {
|
||||
background-image: radial-gradient(at 170% 0%, rgb(49, 46, 129) 0, transparent 69%), radial-gradient(at 0% -30%, rgb(21, 94, 117) 0, transparent 50%);
|
||||
}
|
||||
|
||||
.after-gradient::after {
|
||||
background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .8) 47.92%, rgba(255, 255, 255, 0));
|
||||
}
|
||||
|
||||
.lower-gradient {
|
||||
background-image: linear-gradient(to top,
|
||||
rgba(255, 255, 255, 0.03),
|
||||
rgba(255, 255, 255, 0));
|
||||
height: 20vh;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.fading-hr {
|
||||
position: relative;
|
||||
height: 1px;
|
||||
background: linear-gradient(to right,
|
||||
transparent,
|
||||
hsla(0, 0%, 0%, 0.1),
|
||||
hsla(0, 0%, 0%, 0.2),
|
||||
hsla(0, 0%, 0%, 0.2),
|
||||
hsla(20, 0%, 0%, 0.1),
|
||||
transparent);
|
||||
}
|
||||
|
||||
.fading-hr-dark {
|
||||
position: relative;
|
||||
height: 1px;
|
||||
background: linear-gradient(to right,
|
||||
transparent,
|
||||
rgba(255, 255, 255, 0.1),
|
||||
rgba(255, 255, 255, 0.2),
|
||||
rgba(255, 255, 255, 0.2),
|
||||
rgba(255, 255, 255, 0.1),
|
||||
transparent);
|
||||
}
|
||||
|
||||
/* Used for code / table formatting within messages */
|
||||
/* pre {
|
||||
@apply overflow-auto rounded-lg;
|
||||
}
|
||||
|
||||
.window-heights {
|
||||
@apply h-[14em] overflow-y-auto overflow-x-hidden sm-h:h-[17em] md-h:h-[22em] lg-h:h-[30em];
|
||||
}
|
||||
|
||||
.link {
|
||||
@apply cursor-pointer text-sky-500 underline hover:text-sky-300;
|
||||
}
|
||||
|
||||
table {
|
||||
@apply w-full rounded-lg text-white;
|
||||
background-color: #0d1117;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
@apply rounded-lg border border-gray-700 px-4 py-2;
|
||||
} */
|
||||
|
||||
th {
|
||||
background-color: #161b22;
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: #1c2028;
|
||||
}
|
||||
|
||||
|
||||
/* range input track style */
|
||||
input[type=range] {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
input[type=range]:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input[type=range]::-ms-track {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
|
||||
/* Hides the slider so custom styles can be added */
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
/* input[type=range] {
|
||||
@apply bg-slate-11 rounded-md;
|
||||
height: 0.5rem;
|
||||
} */
|
||||
|
||||
/* Customize website's scrollbar like Mac OS
|
||||
Not supports in Firefox and IE */
|
||||
/* total width */
|
||||
*::-webkit-scrollbar {
|
||||
border-radius: 12px;
|
||||
background-color: #889096;
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
/* scrollbar itself */
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background-color: #D7DBDF;
|
||||
/* @apply rounded-lg; */
|
||||
border: 2px solid #889096;
|
||||
/* This creates the illusion of padding inside the track */
|
||||
}
|
||||
|
||||
/* set button(top and bottom of the scrollbar) */
|
||||
*::-webkit-scrollbar-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* disappearing animation */
|
||||
.animation-hide {
|
||||
animation: hide 1s cubic-bezier(0.4, 0, 0.2, 1) 0s 1 forwards;
|
||||
}
|
||||
|
||||
@keyframes hide {
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes border-pulse-animation {
|
||||
0% {
|
||||
border-color: rgba(216, 180, 254, 0.3);
|
||||
}
|
||||
|
||||
50% {
|
||||
border-color: rgba(216, 180, 254, 0.4);
|
||||
}
|
||||
|
||||
100% {
|
||||
border-color: rgba(216, 180, 254, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-border-pulse {
|
||||
animation: border-pulse-animation 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes moveBackground {
|
||||
from {
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
to {
|
||||
background-position: 100% 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-stars {
|
||||
animation: moveBackground 30s linear infinite;
|
||||
background: url("/stars.svg");
|
||||
background-size: cover;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
34
lander/src/app/layout.tsx
Normal file
34
lander/src/app/layout.tsx
Normal file
@ -0,0 +1,34 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import "./globals.css";
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
const geistMono = Geist_Mono({
|
||||
variable: "--font-geist-mono",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||
>
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
25
lander/src/app/page.tsx
Normal file
25
lander/src/app/page.tsx
Normal file
@ -0,0 +1,25 @@
|
||||
|
||||
import Header from "../components/index/Header";
|
||||
import Footer from "../components/index/Footer";
|
||||
import HeroSection from "../components/index/HeroSection";
|
||||
import AboutSection from "../components/index/AboutSection";
|
||||
import ToolsSection from "../components/index/ToolsSection";
|
||||
import TokenomicsSection from "../components/index/TokenomicsSection";
|
||||
import RoadmapSection from "../components/index/RoadmapSection";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<main className="text-white">
|
||||
<Header />
|
||||
|
||||
<HeroSection />
|
||||
<AboutSection />
|
||||
<ToolsSection />
|
||||
<TokenomicsSection />
|
||||
<RoadmapSection />
|
||||
{/* <CTASection /> */}
|
||||
|
||||
<Footer />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
0
lander/src/app/signin/page.tsx
Normal file
0
lander/src/app/signin/page.tsx
Normal file
89
lander/src/components/index/AboutSection.tsx
Normal file
89
lander/src/components/index/AboutSection.tsx
Normal file
@ -0,0 +1,89 @@
|
||||
"use client";
|
||||
import Image from "next/image";
|
||||
import logoImg from "./assets/images/brand/logo.png";
|
||||
import img1 from "./assets/images/about-section-1.png";
|
||||
import { motion } from "motion/react";
|
||||
import { Ripple } from "./magicui/ripple";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function AboutSection() {
|
||||
return (
|
||||
<section className="border-t border-white bg-gradient-to-b from-white/10 to-transparent pt-32">
|
||||
<div className="container mx-auto grid max-w-[1440px] grid-cols-[auto_600px] items-center gap-20 px-8">
|
||||
<div>
|
||||
<motion.div
|
||||
initial={{ y: -35, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.5, delay: 0.2 }}
|
||||
viewport={{ once: true }}
|
||||
className="flex"
|
||||
>
|
||||
<Image src={logoImg} alt="" className="mb-6 w-[44px]" />
|
||||
</motion.div>
|
||||
|
||||
<motion.h2
|
||||
initial={{ y: -35, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.5, delay: 0.4 }}
|
||||
viewport={{ once: true }}
|
||||
className="gradient-text mb-5 font-serif text-4xl"
|
||||
>
|
||||
Specialized AI models working together to produce the most accurate responses to your
|
||||
queries
|
||||
</motion.h2>
|
||||
|
||||
<motion.p
|
||||
initial={{ y: -35, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.5, delay: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
className="gradient-text mb-8 text-xl font-medium"
|
||||
>
|
||||
Our mission is to make AI accessible and empower individuals and businesses to harness
|
||||
the potential of autonomous agents. We strive to create a user-friendly platform that
|
||||
simplifies the process of building and deploying AI agents, enabling users to focus on
|
||||
their goals while Allinix handles the complexities.
|
||||
</motion.p>
|
||||
|
||||
<Link href={"/signin"}>
|
||||
<motion.button
|
||||
initial={{ y: -35, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.5, delay: 0.8 }}
|
||||
viewport={{ once: true }}
|
||||
className="btn-primary rounded-xl px-6 py-2.5 font-serif text-2xl text-white"
|
||||
>
|
||||
Get Access to Allinix
|
||||
</motion.button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ y: -35, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.5, delay: 1 }}
|
||||
viewport={{ once: true }}
|
||||
className="relative flex h-[567px]"
|
||||
>
|
||||
<Image src={img1} alt="" className="relative z-10 w-full" />
|
||||
|
||||
<div className="absolute left-[15px] top-[105px] h-[150px] w-[150px]">
|
||||
<Ripple rippleBgColor="rgba(255,105,0,0.25)" />
|
||||
</div>
|
||||
|
||||
<div className="absolute right-[130px] top-[0px] h-[150px] w-[150px]">
|
||||
<Ripple rippleBgColor="rgba(157,81,239,0.25)" />
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-[110px] left-[145px] h-[150px] w-[150px]">
|
||||
<Ripple rippleBgColor="rgba(255,52,67,0.25)" />
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-[175px] right-[35px] h-[150px] w-[150px]">
|
||||
<Ripple rippleBgColor="rgba(1,215,230,0.25)" />
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
32
lander/src/components/index/Footer.tsx
Normal file
32
lander/src/components/index/Footer.tsx
Normal file
@ -0,0 +1,32 @@
|
||||
"use client";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import logoImg from "./assets/images/brand/logo.png";
|
||||
import SocialLinks from "./SocialLinks";
|
||||
import { motion } from "motion/react";
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<motion.footer
|
||||
initial={{ y: 50, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
viewport={{ once: true }}
|
||||
className="border-t border-white/20"
|
||||
>
|
||||
<div className="relative mx-auto container max-w-[1440px] py-6 px-8 flex justify-between items-center">
|
||||
<Link href={"/"} className="flex">
|
||||
<Image src={logoImg} alt="" className="w-[44px]" />
|
||||
</Link>
|
||||
|
||||
<div className="absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2">
|
||||
<SocialLinks />
|
||||
</div>
|
||||
|
||||
<p className="gradient-text text-lg font-medium">
|
||||
© 2025 Allinix.ai | All Rights Reserved
|
||||
</p>
|
||||
</div>
|
||||
</motion.footer>
|
||||
);
|
||||
}
|
||||
81
lander/src/components/index/Header.tsx
Normal file
81
lander/src/components/index/Header.tsx
Normal file
@ -0,0 +1,81 @@
|
||||
"use client";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import logoImg from "./assets/images/brand/logo.png";
|
||||
import SocialLinks from "./SocialLinks";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
export default function Header() {
|
||||
return (
|
||||
<motion.nav
|
||||
initial={{ y: -50, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
viewport={{ once: true }}
|
||||
className="fixed left-0 top-0 z-[1000] w-full border-b border-white/20 bg-black"
|
||||
>
|
||||
<div className="container mx-auto flex h-[85px] max-w-[1440px] items-center justify-between px-8">
|
||||
<ul className="flex items-center gap-6">
|
||||
<li>
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.1, opacity: 0.9 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
transition={{ type: "spring", stiffness: 300, damping: 15 }}
|
||||
>
|
||||
<Link href={"#features"} className="gradient-text text-lg font-medium">
|
||||
Features
|
||||
</Link>
|
||||
</motion.div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.1, opacity: 0.9 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
transition={{ type: "spring", stiffness: 300, damping: 15 }}
|
||||
>
|
||||
<Link href={"#tokenomics"} className="gradient-text text-lg font-medium">
|
||||
Tokenomics
|
||||
</Link>
|
||||
</motion.div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.1, opacity: 0.9 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
transition={{ type: "spring", stiffness: 300, damping: 15 }}
|
||||
>
|
||||
<Link href={"#roadmap"} className="gradient-text text-lg font-medium">
|
||||
Roadmap
|
||||
</Link>
|
||||
</motion.div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<Link
|
||||
href={"/"}
|
||||
className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2"
|
||||
>
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.1, opacity: 0.9 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
transition={{ type: "spring", stiffness: 300, damping: 15 }}
|
||||
>
|
||||
<Image src={logoImg} alt="" className="w-[44px]" />
|
||||
</motion.div>
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center gap-5">
|
||||
<SocialLinks />
|
||||
|
||||
{/* <Link href={"/chat"}>
|
||||
<button className="btn-primary py-2.5 px-6 rounded-xl font-serif text-lg text-white">
|
||||
Get Access to Allinix
|
||||
</button>
|
||||
</Link> */}
|
||||
</div>
|
||||
</div>
|
||||
</motion.nav>
|
||||
);
|
||||
}
|
||||
108
lander/src/components/index/HeroSection.tsx
Normal file
108
lander/src/components/index/HeroSection.tsx
Normal file
@ -0,0 +1,108 @@
|
||||
"use client";
|
||||
import { useEffect, useState } from "react";
|
||||
import {
|
||||
useMotionTemplate,
|
||||
useMotionValue,
|
||||
motion,
|
||||
animate,
|
||||
} from "framer-motion";
|
||||
import { Vortex } from "./ui/vortex";
|
||||
import Link from "next/link";
|
||||
import axios from "axios";
|
||||
|
||||
const COLORS_TOP = ["rgba(255,255,255,0.25)"];
|
||||
|
||||
export default function HeroSection() {
|
||||
const [isCopied, setIsCopied] = useState<boolean>(false);
|
||||
const [ca, setCa] = useState<string>(
|
||||
"4H5RiKf7N5Ji7jbozjccG8SqTq3zQbnGXAtdyNL5MugC"
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (isCopied) {
|
||||
setTimeout(() => {
|
||||
setIsCopied(false);
|
||||
}, 3000);
|
||||
}
|
||||
}, [isCopied]);
|
||||
|
||||
const color = useMotionValue(COLORS_TOP[0]);
|
||||
|
||||
useEffect(() => {
|
||||
animate(color, COLORS_TOP, {
|
||||
ease: "easeInOut",
|
||||
duration: 10,
|
||||
repeat: Infinity,
|
||||
repeatType: "mirror",
|
||||
});
|
||||
|
||||
axios
|
||||
.get("https://catools.dev3vds1.link/get/allinix")
|
||||
.then((res) => {
|
||||
setCa(res.data[0].address);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const backgroundImage = useMotionTemplate`radial-gradient(125% 125% at 50% 0%, #000 50%, ${color})`;
|
||||
|
||||
return (
|
||||
<motion.section
|
||||
style={{
|
||||
backgroundImage,
|
||||
}}
|
||||
className="relative mt-[85px] overflow-hidden py-44"
|
||||
>
|
||||
<Vortex>
|
||||
<div className="container relative z-10 mx-auto flex max-w-[1440px] flex-col items-center gap-6 px-8">
|
||||
<motion.button
|
||||
initial={{ y: -50, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.5, delay: 0.2 }}
|
||||
viewport={{ once: true }}
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(ca);
|
||||
setIsCopied(true);
|
||||
}}
|
||||
className="btn-primary flex items-center gap-2 rounded-xl px-6 py-2.5 font-serif text-xl text-white"
|
||||
>
|
||||
CA : {isCopied ? "Copied!" : ca}
|
||||
</motion.button>
|
||||
|
||||
<motion.h1
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
transition={{ duration: 0.5, delay: 0.4 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-center font-serif text-7xl text-white"
|
||||
>
|
||||
AI Agents that scrape <br /> web data for you on the go
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
initial={{ y: 50, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.5, delay: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-center text-xl font-medium text-white"
|
||||
>
|
||||
An innovative open-source platform that allows you to create <br />{" "}
|
||||
and manage autonomous AI agents directly in your browser.
|
||||
</motion.p>
|
||||
|
||||
<motion.button
|
||||
initial={{ y: 50, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.5, delay: 0.8 }}
|
||||
viewport={{ once: true }}
|
||||
className="btn-primary rounded-xl px-6 py-2.5 font-serif text-2xl text-white"
|
||||
>
|
||||
<Link href="/signin">Get Access to Allinix</Link>
|
||||
</motion.button>
|
||||
</div>
|
||||
</Vortex>
|
||||
</motion.section>
|
||||
);
|
||||
}
|
||||
347
lander/src/components/index/RoadmapSection.tsx
Normal file
347
lander/src/components/index/RoadmapSection.tsx
Normal file
@ -0,0 +1,347 @@
|
||||
"use client";
|
||||
import Image from "next/image";
|
||||
import img1 from "./assets/images/roadmap-section-1.png";
|
||||
import { motion } from "motion/react";
|
||||
|
||||
export default function RoadmapSection() {
|
||||
return (
|
||||
<section id="roadmap" className="pt-32">
|
||||
<div className="mx-auto container max-w-[1440px] px-8 flex flex-col items-center">
|
||||
<motion.h2
|
||||
initial={{ y: -35, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.5, delay: 0.2 }}
|
||||
viewport={{ once: true }}
|
||||
className="mb-5 gradient-text font-serif text-6xl text-center"
|
||||
>
|
||||
Roadmap for the year
|
||||
</motion.h2>
|
||||
|
||||
<motion.p
|
||||
initial={{ y: -35, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.5, delay: 0.4 }}
|
||||
viewport={{ once: true }}
|
||||
className="mb-12 gradient-text text-xl font-medium text-center"
|
||||
>
|
||||
Driving progress and innovation every step of the way.
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="py-24"
|
||||
style={{
|
||||
backgroundImage: `url("/images/roadmap-section-bg.png")`,
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
}}
|
||||
>
|
||||
<div className="relative mx-auto container max-w-[1440px] px-8 flex">
|
||||
<Image src={img1} alt="" className="w-full" />
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
transition={{ duration: 1, delay: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
className="absolute top-52 left-12 space-y-2"
|
||||
>
|
||||
<p className="btn-primary w-fit py-2.5 px-4 rounded-lg font-serif text-xl text-white">
|
||||
Q1 - 2025
|
||||
</p>
|
||||
|
||||
<p className="btn-primary max-w-[260px] py-2.5 px-4 rounded-lg flex items-center gap-4 font-serif text-lg leading-5 text-[#D9D9D9]">
|
||||
<svg
|
||||
width="18"
|
||||
height="19"
|
||||
viewBox="0 0 18 19"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="w-[18px] min-w-[18px]"
|
||||
>
|
||||
<path
|
||||
d="M5.625 9.31104L7.875 11.561L12.375 7.06104M16.5 9.31104C16.5 13.4531 13.1421 16.811 9 16.811C4.85786 16.811 1.5 13.4531 1.5 9.31104C1.5 5.1689 4.85786 1.81104 9 1.81104C13.1421 1.81104 16.5 5.1689 16.5 9.31104Z"
|
||||
stroke="#FF3443"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<span>Launch core features and tools.</span>
|
||||
</p>
|
||||
|
||||
<p className="btn-primary max-w-[260px] py-2.5 px-4 rounded-lg flex items-center gap-4 font-serif text-lg leading-5 text-[#D9D9D9]">
|
||||
<svg
|
||||
width="18"
|
||||
height="19"
|
||||
viewBox="0 0 18 19"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="w-[18px] min-w-[18px]"
|
||||
>
|
||||
<path
|
||||
d="M5.625 9.31104L7.875 11.561L12.375 7.06104M16.5 9.31104C16.5 13.4531 13.1421 16.811 9 16.811C4.85786 16.811 1.5 13.4531 1.5 9.31104C1.5 5.1689 4.85786 1.81104 9 1.81104C13.1421 1.81104 16.5 5.1689 16.5 9.31104Z"
|
||||
stroke="#FF3443"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<span>Establish strategic partnerships.</span>
|
||||
</p>
|
||||
|
||||
<p className="btn-primary max-w-[260px] py-2.5 px-4 rounded-lg flex items-center gap-4 font-serif text-lg leading-5 text-[#D9D9D9]">
|
||||
<svg
|
||||
width="18"
|
||||
height="19"
|
||||
viewBox="0 0 18 19"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="w-[18px] min-w-[18px]"
|
||||
>
|
||||
<path
|
||||
d="M5.625 9.31104L7.875 11.561L12.375 7.06104M16.5 9.31104C16.5 13.4531 13.1421 16.811 9 16.811C4.85786 16.811 1.5 13.4531 1.5 9.31104C1.5 5.1689 4.85786 1.81104 9 1.81104C13.1421 1.81104 16.5 5.1689 16.5 9.31104Z"
|
||||
stroke="#FF3443"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<span>Initiate community engagement programs.</span>
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
transition={{ duration: 1, delay: 0.8 }}
|
||||
viewport={{ once: true }}
|
||||
className="absolute top-[135px] left-[432px] space-y-2"
|
||||
>
|
||||
<p className="btn-primary w-fit py-2.5 px-4 rounded-lg font-serif text-xl text-white">
|
||||
Q2 - 2025
|
||||
</p>
|
||||
|
||||
<p className="btn-primary max-w-[260px] py-2.5 px-4 rounded-lg flex items-center gap-4 font-serif text-lg leading-5 text-[#D9D9D9]">
|
||||
<svg
|
||||
width="18"
|
||||
height="19"
|
||||
viewBox="0 0 18 19"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="w-[18px] min-w-[18px]"
|
||||
>
|
||||
<path
|
||||
d="M5.625 9.31104L7.875 11.561L12.375 7.06104M16.5 9.31104C16.5 13.4531 13.1421 16.811 9 16.811C4.85786 16.811 1.5 13.4531 1.5 9.31104C1.5 5.1689 4.85786 1.81104 9 1.81104C13.1421 1.81104 16.5 5.1689 16.5 9.31104Z"
|
||||
stroke="#9D51EF"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<span>
|
||||
Expand platform capabilities with new functionalities.{" "}
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<p className="btn-primary max-w-[260px] py-2.5 px-4 rounded-lg flex items-center gap-4 font-serif text-lg leading-5 text-[#D9D9D9]">
|
||||
<svg
|
||||
width="18"
|
||||
height="19"
|
||||
viewBox="0 0 18 19"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="w-[18px] min-w-[18px]"
|
||||
>
|
||||
<path
|
||||
d="M5.625 9.31104L7.875 11.561L12.375 7.06104M16.5 9.31104C16.5 13.4531 13.1421 16.811 9 16.811C4.85786 16.811 1.5 13.4531 1.5 9.31104C1.5 5.1689 4.85786 1.81104 9 1.81104C13.1421 1.81104 16.5 5.1689 16.5 9.31104Z"
|
||||
stroke="#9D51EF"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<span>Integrate user feedback for system improvements.</span>
|
||||
</p>
|
||||
|
||||
<p className="btn-primary max-w-[260px] py-2.5 px-4 rounded-lg flex items-center gap-4 font-serif text-lg leading-5 text-[#D9D9D9]">
|
||||
<svg
|
||||
width="18"
|
||||
height="19"
|
||||
viewBox="0 0 18 19"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="w-[18px] min-w-[18px]"
|
||||
>
|
||||
<path
|
||||
d="M5.625 9.31104L7.875 11.561L12.375 7.06104M16.5 9.31104C16.5 13.4531 13.1421 16.811 9 16.811C4.85786 16.811 1.5 13.4531 1.5 9.31104C1.5 5.1689 4.85786 1.81104 9 1.81104C13.1421 1.81104 16.5 5.1689 16.5 9.31104Z"
|
||||
stroke="#9D51EF"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<span>Host webinars and events to grow the user base.</span>
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
transition={{ duration: 1, delay: 1 }}
|
||||
viewport={{ once: true }}
|
||||
className="absolute top-[35px] right-[380px] space-y-2"
|
||||
>
|
||||
<p className="btn-primary w-fit py-2.5 px-4 rounded-lg font-serif text-xl text-white">
|
||||
Q3 - 2025
|
||||
</p>
|
||||
|
||||
<p className="btn-primary max-w-[260px] py-2.5 px-4 rounded-lg flex items-center gap-4 font-serif text-lg leading-5 text-[#D9D9D9]">
|
||||
<svg
|
||||
width="18"
|
||||
height="19"
|
||||
viewBox="0 0 18 19"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="w-[18px] min-w-[18px]"
|
||||
>
|
||||
<path
|
||||
d="M5.625 9.31104L7.875 11.561L12.375 7.06104M16.5 9.31104C16.5 13.4531 13.1421 16.811 9 16.811C4.85786 16.811 1.5 13.4531 1.5 9.31104C1.5 5.1689 4.85786 1.81104 9 1.81104C13.1421 1.81104 16.5 5.1689 16.5 9.31104Z"
|
||||
stroke="#FF6900"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<span>Optimize performance for scalability.</span>
|
||||
</p>
|
||||
|
||||
<p className="btn-primary max-w-[260px] py-2.5 px-4 rounded-lg flex items-center gap-4 font-serif text-lg leading-5 text-[#D9D9D9]">
|
||||
<svg
|
||||
width="18"
|
||||
height="19"
|
||||
viewBox="0 0 18 19"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="w-[18px] min-w-[18px]"
|
||||
>
|
||||
<path
|
||||
d="M5.625 9.31104L7.875 11.561L12.375 7.06104M16.5 9.31104C16.5 13.4531 13.1421 16.811 9 16.811C4.85786 16.811 1.5 13.4531 1.5 9.31104C1.5 5.1689 4.85786 1.81104 9 1.81104C13.1421 1.81104 16.5 5.1689 16.5 9.31104Z"
|
||||
stroke="#FF6900"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<span>Roll out advanced analytics and reporting features.</span>
|
||||
</p>
|
||||
|
||||
<p className="btn-primary max-w-[260px] py-2.5 px-4 rounded-lg flex items-center gap-4 font-serif text-lg leading-5 text-[#D9D9D9]">
|
||||
<svg
|
||||
width="18"
|
||||
height="19"
|
||||
viewBox="0 0 18 19"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="w-[18px] min-w-[18px]"
|
||||
>
|
||||
<path
|
||||
d="M5.625 9.31104L7.875 11.561L12.375 7.06104M16.5 9.31104C16.5 13.4531 13.1421 16.811 9 16.811C4.85786 16.811 1.5 13.4531 1.5 9.31104C1.5 5.1689 4.85786 1.81104 9 1.81104C13.1421 1.81104 16.5 5.1689 16.5 9.31104Z"
|
||||
stroke="#FF6900"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<span>Introduce new collaboration tools.</span>
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
transition={{ duration: 1, delay: 1.2 }}
|
||||
viewport={{ once: true }}
|
||||
className="absolute top-[120px] right-[32px] flex flex-col items-end gap-y-2"
|
||||
>
|
||||
<p className="btn-primary w-fit py-2.5 px-4 rounded-lg font-serif text-xl text-white">
|
||||
Q4 - 2025
|
||||
</p>
|
||||
|
||||
<p className="btn-primary max-w-[260px] py-2.5 px-4 rounded-lg flex items-center gap-4 font-serif text-lg leading-5 text-[#D9D9D9]">
|
||||
<svg
|
||||
width="18"
|
||||
height="19"
|
||||
viewBox="0 0 18 19"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="w-[18px] min-w-[18px]"
|
||||
>
|
||||
<path
|
||||
d="M5.625 9.31104L7.875 11.561L12.375 7.06104M16.5 9.31104C16.5 13.4531 13.1421 16.811 9 16.811C4.85786 16.811 1.5 13.4531 1.5 9.31104C1.5 5.1689 4.85786 1.81104 9 1.81104C13.1421 1.81104 16.5 5.1689 16.5 9.31104Z"
|
||||
stroke="#01D7E6"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<span>Launch innovative solutions to meet emerging needs.</span>
|
||||
</p>
|
||||
|
||||
<p className="btn-primary max-w-[260px] py-2.5 px-4 rounded-lg flex items-center gap-4 font-serif text-lg leading-5 text-[#D9D9D9]">
|
||||
<svg
|
||||
width="18"
|
||||
height="19"
|
||||
viewBox="0 0 18 19"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="w-[18px] min-w-[18px]"
|
||||
>
|
||||
<path
|
||||
d="M5.625 9.31104L7.875 11.561L12.375 7.06104M16.5 9.31104C16.5 13.4531 13.1421 16.811 9 16.811C4.85786 16.811 1.5 13.4531 1.5 9.31104C1.5 5.1689 4.85786 1.81104 9 1.81104C13.1421 1.81104 16.5 5.1689 16.5 9.31104Z"
|
||||
stroke="#01D7E6"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<span>Strengthen community and ecosystem partnerships.</span>
|
||||
</p>
|
||||
|
||||
<p className="btn-primary max-w-[260px] py-2.5 px-4 rounded-lg flex items-center gap-4 font-serif text-lg leading-5 text-[#D9D9D9]">
|
||||
<svg
|
||||
width="18"
|
||||
height="19"
|
||||
viewBox="0 0 18 19"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="w-[18px] min-w-[18px]"
|
||||
>
|
||||
<path
|
||||
d="M5.625 9.31104L7.875 11.561L12.375 7.06104M16.5 9.31104C16.5 13.4531 13.1421 16.811 9 16.811C4.85786 16.811 1.5 13.4531 1.5 9.31104C1.5 5.1689 4.85786 1.81104 9 1.81104C13.1421 1.81104 16.5 5.1689 16.5 9.31104Z"
|
||||
stroke="#01D7E6"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<span>Plan and outline goals for the upcoming year.</span>
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
99
lander/src/components/index/SocialLinks.tsx
Normal file
99
lander/src/components/index/SocialLinks.tsx
Normal file
@ -0,0 +1,99 @@
|
||||
import Link from "next/link";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
export default function SocialLinks() {
|
||||
return (
|
||||
<div className="flex items-center gap-6">
|
||||
{/* <Link href={"#"} target="_blank" className="flex">
|
||||
<svg
|
||||
width="24"
|
||||
height="29"
|
||||
viewBox="0 0 24 29"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clipPath="url(#clip0_1_1526)">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M14.372 10.1166C15.2407 9.68345 16.3461 9.04578 17.4529 8.1721C17.6863 8.6567 17.7118 9.07957 17.5916 9.42104C17.5064 9.66168 17.3458 9.87099 17.1347 10.0375C16.9061 10.2175 16.6206 10.3485 16.305 10.4193C15.7061 10.5542 15.0069 10.4754 14.372 10.1166ZM14.5226 14.5552L15.6726 15.2195C13.3245 16.5355 12.6861 18.9792 11.9279 21.3595C11.1697 18.9792 10.5312 16.5355 8.18323 15.2195L9.33324 14.5552C9.44449 14.5131 9.53958 14.437 9.60488 14.3376C9.67018 14.2382 9.70234 14.1207 9.69676 14.0019C9.5914 11.7727 10.1933 10.787 11.0051 10.1681C11.2963 9.94634 11.6142 9.83501 11.9279 9.83501C12.2415 9.83501 12.5594 9.94634 12.8507 10.1681C13.6625 10.787 14.2644 11.7727 14.1591 14.0019C14.1535 14.1207 14.1856 14.2382 14.2509 14.3376C14.3162 14.437 14.4113 14.5131 14.5226 14.5552ZM11.9279 0C13.2572 0.0356893 14.5898 0.293751 15.7463 0.795768C16.5472 1.14386 17.2945 1.60365 17.9712 2.15348C18.2768 2.40169 18.5284 2.64148 18.8056 2.91753C19.5532 2.94338 20.6457 2.11287 21.1529 1.33575C20.28 4.19752 16.2966 7.57703 13.5389 8.87017C13.5378 8.8697 13.537 8.86904 13.5362 8.86847C13.0412 8.49056 12.4846 8.3016 11.9279 8.3016C11.3711 8.3016 10.8146 8.49056 10.3197 8.86847C10.3188 8.86894 10.3181 8.86979 10.3169 8.87017C7.55909 7.57703 3.5758 4.19752 2.70288 1.33575C3.21001 2.11287 4.30256 2.94338 5.05014 2.91753C5.32742 2.64158 5.57904 2.40169 5.88453 2.15348C6.56121 1.60365 7.30851 1.14386 8.10939 0.795768C9.26603 0.293751 10.5986 0.0356893 11.9279 0ZM9.48376 10.1166C8.6151 9.68345 7.50958 9.04578 6.40293 8.1721C6.16957 8.6567 6.14401 9.07957 6.26415 9.42104C6.34944 9.66168 6.51 9.87099 6.72101 10.0375C6.94972 10.2175 7.23524 10.3485 7.55086 10.4193C8.14972 10.5542 8.84883 10.4754 9.48376 10.1166Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M18.6651 7.10192C19.2744 6.48706 19.8113 5.80651 20.243 5.19922L20.4622 5.61187C21.168 7.02401 21.5348 8.43048 21.5348 10.0133L21.5333 12.525L21.5465 13.827C21.5976 17.0236 22.2893 20.2577 23.856 23.2173L20.578 20.574L18.2585 24.3379L15.8218 22.044L11.928 28.3629L8.03417 22.0441L5.59755 24.338L3.27812 20.5741L0 23.2174C1.56673 20.2578 2.25837 17.0237 2.30958 13.8271L2.32284 12.5251L2.32132 10.0134C2.32132 8.43048 2.68797 7.02401 3.39399 5.61197L3.61314 5.19931C4.04482 5.8066 4.58158 6.48706 5.19095 7.10202L5.00067 7.49725C4.631 8.2649 4.50859 9.12325 4.79657 9.93956C4.98221 10.4653 5.32102 10.9162 5.75782 11.2604C6.18192 11.5947 6.68384 11.82 7.20934 11.9384C7.55165 12.0154 7.90041 12.0471 8.24689 12.0363C8.16604 12.4946 8.13073 12.9699 8.12846 13.4542L5.03627 15.2402L7.42243 16.5778C7.61315 16.6847 7.79471 16.8072 7.96525 16.944C9.93252 18.7103 11.1153 23.9356 11.9281 26.488C12.741 23.9356 13.9237 18.7103 15.891 16.944C16.0616 16.8072 16.2431 16.6847 16.4338 16.5778L18.82 15.2402L15.7277 13.4542C15.7255 12.9699 15.6901 12.4946 15.6093 12.0363C15.9558 12.0471 16.3045 12.0154 16.6468 11.9384C17.1723 11.82 17.6744 11.5947 18.0984 11.2604C18.5351 10.9162 18.874 10.4653 19.0595 9.93956C19.3476 9.12325 19.2251 8.265 18.8555 7.49725L18.6652 7.10202L18.6651 7.10192Z"
|
||||
fill="white"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1_1526">
|
||||
<rect width="23.856" height="28.4" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</Link> */}
|
||||
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.2, opacity: 0.9 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
transition={{ type: "spring", stiffness: 300, damping: 15 }}
|
||||
>
|
||||
<Link href={"https://github.com/Allinix-Labs/Allinix"} target="_blank" className="flex">
|
||||
<svg
|
||||
width="29"
|
||||
height="29"
|
||||
viewBox="0 0 29 29"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clipPath="url(#clip0_1_1529)">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M14.7398 0C6.8811 0 0.528076 6.39985 0.528076 14.3173C0.528076 20.6462 4.59867 26.0035 10.2457 27.8996C10.9517 28.0421 11.2103 27.5915 11.2103 27.2125C11.2103 26.8806 11.187 25.7428 11.187 24.5574C7.23367 25.4109 6.41042 22.8507 6.41042 22.8507C5.77508 21.1914 4.83372 20.7649 4.83372 20.7649C3.53979 19.8878 4.92798 19.8878 4.92798 19.8878C6.36329 19.9827 7.11644 21.3575 7.11644 21.3575C8.38681 23.5381 10.4339 22.922 11.2574 22.5426C11.375 21.6181 11.7517 20.9781 12.1517 20.6227C8.99858 20.2907 5.68112 19.0582 5.68112 13.5587C5.68112 11.9942 6.24547 10.7142 7.13971 9.71876C6.99862 9.36328 6.50438 7.89335 7.28109 5.92597C7.28109 5.92597 8.48106 5.54664 11.1867 7.39561C12.3451 7.08221 13.5398 6.92279 14.7398 6.92144C15.9398 6.92144 17.163 7.08755 18.2926 7.39561C20.9986 5.54664 22.1986 5.92597 22.1986 5.92597C22.9753 7.89335 22.4807 9.36328 22.3397 9.71876C23.2575 10.7142 23.7985 11.9942 23.7985 13.5587C23.7985 19.0582 20.4811 20.2669 17.3044 20.6227C17.8222 21.073 18.2691 21.9262 18.2691 23.2774C18.2691 25.1974 18.2458 26.7383 18.2458 27.2122C18.2458 27.5915 18.5047 28.0421 19.2104 27.8999C24.8574 26.0032 28.928 20.6462 28.928 14.3173C28.9513 6.39985 22.575 0 14.7398 0Z"
|
||||
fill="white"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1_1529">
|
||||
<rect width="28.4" height="28.4" fill="white" transform="translate(0.528076)" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.2, opacity: 0.9 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
transition={{ type: "spring", stiffness: 300, damping: 15 }}
|
||||
>
|
||||
<Link href={"https://docs.allinix.ai/"} className="flex">
|
||||
<img src="/gitbook.png" width={28} height={28} />
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.2, opacity: 0.9 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
transition={{ type: "spring", stiffness: 300, damping: 15 }}
|
||||
>
|
||||
<Link href={"https://x.com/allinix_ai"} target="_blank" className="flex">
|
||||
<svg
|
||||
width="29"
|
||||
height="29"
|
||||
viewBox="0 0 29 29"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M22.286 2.25293H26.2779L17.5567 12.2207L27.8165 25.7847H19.7832L13.4911 17.5582L6.29164 25.7847H2.29728L11.6255 15.123L1.7832 2.25293H10.0205L15.708 9.77222L22.286 2.25293ZM20.8849 23.3953H23.0969L8.81859 4.5168H6.4449L20.8849 23.3953Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
</Link>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
267
lander/src/components/index/TokenomicsSection.tsx
Normal file
267
lander/src/components/index/TokenomicsSection.tsx
Normal file
@ -0,0 +1,267 @@
|
||||
"use client";
|
||||
import { motion } from "motion/react";
|
||||
import Image from "next/image";
|
||||
import img1 from "./assets/images/tokenomics-section-1.png";
|
||||
import img2 from "./assets/images/tokenomics-section-2.png";
|
||||
import img3 from "./assets/images/tokenomics-section-3.png";
|
||||
|
||||
export default function TokenomicsSection() {
|
||||
return (
|
||||
<section id="tokenomics" className="pt-32">
|
||||
<div className="mx-auto container max-w-[1440px] px-8 flex flex-col items-center">
|
||||
<motion.h2
|
||||
initial={{ y: -35, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.5, delay: 0.2 }}
|
||||
viewport={{ once: true }}
|
||||
className="mb-5 gradient-text font-serif text-6xl text-center"
|
||||
>
|
||||
We serve the community <br /> First and Second
|
||||
</motion.h2>
|
||||
|
||||
<motion.p
|
||||
initial={{ y: -35, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.5, delay: 0.4 }}
|
||||
viewport={{ once: true }}
|
||||
className="mb-28 gradient-text text-xl font-medium text-center"
|
||||
>
|
||||
Dedicated to delivering tools and solutions that make a meaningful
|
||||
impact.
|
||||
</motion.p>
|
||||
|
||||
<div className="mb-5 w-full grid grid-cols-3 gap-5">
|
||||
<motion.div
|
||||
initial={{ y: -35, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.5, delay: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
className="group relative"
|
||||
>
|
||||
<Image
|
||||
src={img1}
|
||||
alt=""
|
||||
className="absolute -top-14 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 pointer-events-none duration-300"
|
||||
/>
|
||||
|
||||
<div className="relative z-10 p-8 flex justify-between items-center">
|
||||
<h3 className="font-serif text-3xl text-white">
|
||||
2<span className="font-sans">%</span>
|
||||
</h3>
|
||||
|
||||
<svg
|
||||
width="44"
|
||||
height="44"
|
||||
viewBox="0 0 44 44"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M38.0854 33C39.4591 33 40.5518 32.1356 41.5328 30.9267C43.5412 28.4522 40.2438 26.4748 38.9861 25.5064C37.7078 24.5219 36.2803 23.9642 34.8331 23.8333M32.9998 20.1667C35.531 20.1667 37.5831 18.1146 37.5831 15.5833C37.5831 13.052 35.531 11 32.9998 11"
|
||||
stroke="white"
|
||||
strokeWidth="2.75"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M5.91418 33C4.54045 33 3.44782 32.1356 2.46675 30.9267C0.458419 28.4522 3.75582 26.4748 5.01343 25.5064C6.29187 24.5219 7.71932 23.9642 9.16659 23.8333M10.0833 20.1667C7.55196 20.1667 5.49992 18.1146 5.49992 15.5833C5.49992 13.052 7.55196 11 10.0833 11"
|
||||
stroke="white"
|
||||
strokeWidth="2.75"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M14.82 27.7039C12.9467 28.8622 8.03514 31.2274 11.0266 34.187C12.4879 35.6327 14.1155 36.6667 16.1617 36.6667H27.8378C29.884 36.6667 31.5114 35.6327 32.9728 34.187C35.9642 31.2274 31.0527 28.8622 29.1794 27.7039C24.7866 24.9877 19.2127 24.9877 14.82 27.7039Z"
|
||||
stroke="white"
|
||||
strokeWidth="2.75"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M28.4164 13.7497C28.4164 17.2935 25.5435 20.1663 21.9997 20.1663C18.4559 20.1663 15.583 17.2935 15.583 13.7497C15.583 10.2058 18.4559 7.33301 21.9997 7.33301C25.5435 7.33301 28.4164 10.2058 28.4164 13.7497Z"
|
||||
stroke="white"
|
||||
strokeWidth="2.75"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="absolute top-0 left-0 -scale-y-[1] w-full h-full rounded-xl"
|
||||
style={{
|
||||
background: `linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), radial-gradient(153.35% 100% at 50% 0%, #FF6900 0%, #000 100%)`,
|
||||
boxShadow: `0px 0px 15px 0px rgba(255, 255, 255, 0.50) inset`,
|
||||
}}
|
||||
></div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ y: -35, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.5, delay: 0.8 }}
|
||||
viewport={{ once: true }}
|
||||
className="group relative"
|
||||
>
|
||||
<Image
|
||||
src={img2}
|
||||
alt=""
|
||||
className="absolute -top-14 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 pointer-events-none duration-300"
|
||||
/>
|
||||
|
||||
<div className="relative z-10 p-8 flex justify-between items-center">
|
||||
<h3 className="font-serif text-3xl text-white">
|
||||
2<span className="font-sans">%</span>
|
||||
</h3>
|
||||
|
||||
<svg
|
||||
width="44"
|
||||
height="44"
|
||||
viewBox="0 0 44 44"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5.99375 27.6538C7.26527 24.9819 7.90104 23.6457 9.00887 22.8733C9.09835 22.811 9.18971 22.7516 9.28282 22.6955C10.4358 21.9998 11.8461 21.9998 14.6666 21.9998C17.4872 21.9998 18.8974 21.9998 20.0504 22.6955C20.1435 22.7516 20.2348 22.811 20.3243 22.8733C21.4322 23.6457 22.068 24.9819 23.3396 27.6538C25.2354 31.638 26.1834 33.6301 25.3793 35.0943C25.3491 35.1492 25.3174 35.2031 25.2842 35.2559C24.3974 36.6664 22.2957 36.6664 18.0925 36.6664H11.2407C7.03748 36.6664 4.93586 36.6664 4.04904 35.2559C4.0158 35.2031 3.9841 35.1492 3.95398 35.0943C3.14988 33.6301 4.09784 31.638 5.99375 27.6538Z"
|
||||
stroke="white"
|
||||
strokeWidth="2.75"
|
||||
/>
|
||||
<path
|
||||
d="M26.6692 22.0377C27.3957 21.9998 28.2622 21.9998 29.3312 21.9998C32.1518 21.9998 33.5622 21.9998 34.7151 22.6955C34.8081 22.7516 34.8996 22.811 34.989 22.8733C36.0969 23.6457 36.7325 24.9819 38.0041 27.6538C39.9 31.638 40.848 33.6301 40.0439 35.0943C40.0138 35.1492 39.9821 35.2031 39.9489 35.2559C39.062 36.6664 36.9604 36.6664 32.7571 36.6664H30.6882"
|
||||
stroke="white"
|
||||
strokeWidth="2.75"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M32.2801 16.4997C31.8833 15.5308 31.3361 14.3808 30.6728 12.9871C29.4014 10.3151 28.7656 8.97903 27.6577 8.20659C27.5682 8.1442 27.4769 8.08488 27.3838 8.02868C26.2308 7.33301 24.8206 7.33301 22 7.33301C19.1794 7.33301 17.7692 7.33301 16.6162 8.02868C16.5231 8.08488 16.4317 8.1442 16.3422 8.20659C15.2344 8.97903 14.5986 10.3151 13.3271 12.9871C12.6639 14.3808 12.1166 15.5308 11.7198 16.4997"
|
||||
stroke="white"
|
||||
strokeWidth="2.75"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="absolute top-0 left-0 -scale-y-[1] w-full h-full rounded-xl"
|
||||
style={{
|
||||
background: `linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), radial-gradient(153.35% 100% at 50% 0%, #9D51EF 0%, #000 100%)`,
|
||||
boxShadow: `0px 0px 15px 0px rgba(255, 255, 255, 0.50) inset`,
|
||||
}}
|
||||
></div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ y: -35, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.5, delay: 1 }}
|
||||
viewport={{ once: true }}
|
||||
className="group relative"
|
||||
>
|
||||
<Image
|
||||
src={img3}
|
||||
alt=""
|
||||
className="absolute -top-14 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 pointer-events-none duration-300"
|
||||
/>
|
||||
|
||||
<div className="relative z-10 p-8 flex justify-between items-center">
|
||||
<h3 className="font-serif text-3xl text-white">
|
||||
1<span className="font-sans">%</span>
|
||||
</h3>
|
||||
|
||||
<svg
|
||||
width="44"
|
||||
height="44"
|
||||
viewBox="0 0 44 44"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M27.3649 5.33721L15.1681 11.1919C14.2294 11.6425 13.2265 11.7554 12.204 11.5264C11.5349 11.3765 11.2003 11.3015 10.9309 11.2708C7.58529 10.8887 5.5 13.5366 5.5 16.5815V18.2525C5.5 21.2974 7.58529 23.9453 10.9309 23.5632C11.2003 23.5324 11.5349 23.4575 12.204 23.3077C13.2265 23.0785 14.2294 23.1914 15.1681 23.6421L27.3649 29.4968C30.1646 30.8408 31.5645 31.5128 33.1254 30.989C34.6861 30.4652 35.2218 29.3412 36.2934 27.0933C39.2355 20.9209 39.2355 13.9132 36.2934 7.74058C35.2218 5.49273 34.6861 4.36881 33.1254 3.84501C31.5645 3.32122 30.1646 3.99321 27.3649 5.33721Z"
|
||||
stroke="white"
|
||||
strokeWidth="2.75"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M21.0064 38.0797L18.2723 40.333C12.1094 35.4452 12.8623 33.1143 12.8623 23.833H14.941C15.7845 29.078 17.7743 31.5623 20.5199 33.3608C22.2111 34.4685 22.5598 36.7993 21.0064 38.0797Z"
|
||||
stroke="white"
|
||||
strokeWidth="2.75"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M13.75 22.9167V11.9167"
|
||||
stroke="white"
|
||||
strokeWidth="2.75"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="absolute top-0 left-0 -scale-y-[1] w-full h-full rounded-xl"
|
||||
style={{
|
||||
background: `linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), radial-gradient(153.35% 100% at 50% 0%, #01D7E6 0%, #000 100%)`,
|
||||
boxShadow: `0px 0px 15px 0px rgba(255, 255, 255, 0.50) inset`,
|
||||
}}
|
||||
></div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ y: -35, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.5, delay: 1.2 }}
|
||||
viewport={{ once: true }}
|
||||
className="w-full min-h-[650px] p-12 rounded-xl flex flex-col justify-end gap-3"
|
||||
style={{
|
||||
backgroundImage: `url("/images/tokenomics-section-bg-1.png")`,
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
boxShadow: `0px 0px 15px 0px rgba(255, 255, 255, 0.50) inset`,
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
width="44"
|
||||
height="44"
|
||||
viewBox="0 0 44 44"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8.25 18.8197V11H35.75V18.8197C35.75 24.6402 35.75 27.5504 33.9601 29.3585C32.1702 31.1667 29.2893 31.1667 23.5277 31.1667H20.4723C14.7106 31.1667 11.8298 31.1667 10.0399 29.3585C8.25 27.5504 8.25 24.6402 8.25 18.8197Z"
|
||||
stroke="white"
|
||||
strokeWidth="3.3"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M8.25 11.0001L9.57211 8.17957C10.5975 5.99211 11.1102 4.89838 12.1494 4.28256C13.1885 3.66675 14.5215 3.66675 17.1875 3.66675H26.8125C29.4785 3.66675 30.8114 3.66675 31.8507 4.28256C32.8898 4.89838 33.4026 5.99211 34.4278 8.17957L35.75 11.0001"
|
||||
stroke="white"
|
||||
strokeWidth="3.3"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M19.25 16.5H24.75"
|
||||
stroke="white"
|
||||
strokeWidth="3.3"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M7.33337 40.3333H22M22 40.3333H36.6667M22 40.3333V35.75"
|
||||
stroke="white"
|
||||
strokeWidth="3.3"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<h3 className="font-serif text-3xl text-[#D9D9D9]">
|
||||
95<span className="font-sans">%</span> Circulating Supply
|
||||
</h3>
|
||||
|
||||
<p className="max-w-[560px] font-medium text-white/75">
|
||||
Ensuring maximum availability and transparency for the community.
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
231
lander/src/components/index/ToolsSection.tsx
Normal file
231
lander/src/components/index/ToolsSection.tsx
Normal file
@ -0,0 +1,231 @@
|
||||
"use client";
|
||||
import Image from "next/image";
|
||||
import tool1Img from "./assets/images/tool-1.png";
|
||||
import tool2Img from "./assets/images/tool-2.png";
|
||||
import tool3Img from "./assets/images/tool-3.png";
|
||||
import tool4Img from "./assets/images/tool-4.png";
|
||||
import { motion } from "motion/react";
|
||||
|
||||
export default function ToolsSection() {
|
||||
return (
|
||||
<section id="features" className="pt-32">
|
||||
<div className="mx-auto container max-w-[1440px] px-8 flex flex-col items-center">
|
||||
<motion.h2
|
||||
initial={{ y: -35, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.5, delay: 0.2 }}
|
||||
viewport={{ once: true }}
|
||||
className="mb-5 gradient-text font-serif text-6xl text-center"
|
||||
>
|
||||
Powered by Tools <br /> that work <span className="-mr-2.5">f</span>{" "}
|
||||
lawlessly
|
||||
</motion.h2>
|
||||
|
||||
<motion.p
|
||||
initial={{ y: -35, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.5, delay: 0.4 }}
|
||||
viewport={{ once: true }}
|
||||
className="mb-12 gradient-text text-xl font-medium text-center"
|
||||
>
|
||||
Unlock the potential of cutting-edge tools designed to <br /> simplify
|
||||
your workflow and elevate your productivity.
|
||||
</motion.p>
|
||||
|
||||
<div className="w-full grid grid-cols-4 gap-5">
|
||||
<motion.div
|
||||
initial={{ y: -35, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 1, delay: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
className="relative"
|
||||
>
|
||||
<div className="relative z-10 h-full flex flex-col justify-between items-center">
|
||||
<div className="p-10 flex flex-col items-center">
|
||||
<svg
|
||||
width="25"
|
||||
height="24"
|
||||
viewBox="0 0 25 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M20.5 9.5V6.8C20.5 5.11984 20.5 4.27976 20.173 3.63803C19.8854 3.07354 19.4265 2.6146 18.862 2.32698C18.2202 2 17.3802 2 15.7 2H9.3C7.61984 2 6.77976 2 6.13803 2.32698C5.57354 2.6146 5.1146 3.07354 4.82698 3.63803C4.5 4.27976 4.5 5.11984 4.5 6.8V17.2C4.5 18.8802 4.5 19.7202 4.82698 20.362C5.1146 20.9265 5.57354 21.3854 6.13803 21.673C6.77976 22 7.61984 22 9.3 22H14.5M14.5 11H8.5M10.5 15H8.5M16.5 7H8.5M17 15.0022C17.1762 14.5014 17.524 14.079 17.9817 13.81C18.4395 13.5409 18.9777 13.4426 19.501 13.5324C20.0243 13.6221 20.499 13.8942 20.8409 14.3004C21.1829 14.7066 21.37 15.2207 21.3692 15.7517C21.3692 17.2506 19.1209 18 19.1209 18M19.1499 21H19.1599"
|
||||
stroke="#FF6900"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<h3 className="gradient-text mt-6 mb-1.5 font-serif text-3xl text-center">
|
||||
Prodigy
|
||||
</h3>
|
||||
|
||||
<p className="gradient-text font-medium text-center">
|
||||
The mastermind of intelligent research. Prodigy dives deep
|
||||
into vast databases, uncovering insights and information to
|
||||
fuel your next big idea.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Image src={tool1Img} alt="" className="w-full max-w-[250px]" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="absolute top-0 left-0 -scale-y-[1] w-full h-full rounded-2xl"
|
||||
style={{
|
||||
background: `linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), radial-gradient(85.71% 55.89% at 50% 0%, #FF6900 0%, #000 100%)`,
|
||||
boxShadow: `0px 0px 15px 0px rgba(255, 255, 255, 0.50) inset`,
|
||||
}}
|
||||
></div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ y: -35, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 1, delay: 0.8 }}
|
||||
viewport={{ once: true }}
|
||||
className="relative"
|
||||
>
|
||||
<div className="relative z-10 h-full flex flex-col justify-between items-center">
|
||||
<div className="p-10 flex flex-col items-center">
|
||||
<svg
|
||||
width="25"
|
||||
height="24"
|
||||
viewBox="0 0 25 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8.5 21V7C8.5 6.07003 8.5 5.60504 8.60222 5.22354C8.87962 4.18827 9.68827 3.37962 10.7235 3.10222C11.105 3 11.57 3 12.5 3C13.43 3 13.895 3 14.2765 3.10222C15.3117 3.37962 16.1204 4.18827 16.3978 5.22354C16.5 5.60504 16.5 6.07003 16.5 7V21M5.7 21H19.3C20.4201 21 20.9802 21 21.408 20.782C21.7843 20.5903 22.0903 20.2843 22.282 19.908C22.5 19.4802 22.5 18.9201 22.5 17.8V10.2C22.5 9.07989 22.5 8.51984 22.282 8.09202C22.0903 7.71569 21.7843 7.40973 21.408 7.21799C20.9802 7 20.4201 7 19.3 7H5.7C4.57989 7 4.01984 7 3.59202 7.21799C3.21569 7.40973 2.90973 7.71569 2.71799 8.09202C2.5 8.51984 2.5 9.07989 2.5 10.2V17.8C2.5 18.9201 2.5 19.4802 2.71799 19.908C2.90973 20.2843 3.21569 20.5903 3.59202 20.782C4.01984 21 4.5799 21 5.7 21Z"
|
||||
stroke="#01D7E6"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<h3 className="gradient-text mt-6 mb-1.5 font-serif text-3xl text-center">
|
||||
Workman
|
||||
</h3>
|
||||
|
||||
<p className="gradient-text font-medium text-center">
|
||||
Your reliable workhorse for data processing and organization.
|
||||
Workman excels at automating repetitive tasks and ensuring
|
||||
your workflow remains smooth and efficient.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Image src={tool2Img} alt="" className="w-full max-w-[250px]" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="absolute top-0 left-0 -scale-y-[1] w-full h-full rounded-2xl"
|
||||
style={{
|
||||
background: `linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), radial-gradient(85.71% 55.89% at 50% 0%, #01D7E6 0%, #000 100%)`,
|
||||
boxShadow: `0px 0px 15px 0px rgba(255, 255, 255, 0.50) inset`,
|
||||
}}
|
||||
></div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ y: -35, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 1, delay: 1 }}
|
||||
viewport={{ once: true }}
|
||||
className="relative"
|
||||
>
|
||||
<div className="relative z-10 h-full flex flex-col justify-between items-center">
|
||||
<div className="p-10 flex flex-col items-center">
|
||||
<svg
|
||||
width="25"
|
||||
height="24"
|
||||
viewBox="0 0 25 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M18.2447 2.81298C19.2094 1.8165 20.8035 1.80361 21.7842 2.78436C22.7381 3.73823 22.7558 5.27921 21.8242 6.25481L19.0455 9.16457C18.8277 9.39265 18.7189 9.50668 18.6517 9.64024C18.5923 9.75847 18.557 9.88732 18.5477 10.0193C18.5373 10.1684 18.5727 10.3221 18.6437 10.6293L20.3716 18.1169C20.4443 18.4323 20.4807 18.59 20.469 18.7426C20.4586 18.8776 20.4209 19.0091 20.3581 19.1291C20.2872 19.2647 20.1728 19.3792 19.9439 19.608L19.5731 19.9788C18.967 20.585 18.6639 20.888 18.3537 20.9429C18.0829 20.9908 17.8042 20.925 17.5834 20.761C17.3305 20.5733 17.1949 20.1666 16.9239 19.3534L14.9141 13.3241L11.5688 16.6695C11.3691 16.8691 11.2693 16.969 11.2025 17.0866C11.1433 17.1907 11.1033 17.3047 11.0845 17.423C11.0632 17.5565 11.0788 17.6968 11.1099 17.9775L11.2936 19.6309C11.3248 19.9116 11.3404 20.0519 11.3191 20.1854C11.3003 20.3037 11.2603 20.4177 11.2011 20.5219C11.1343 20.6394 11.0345 20.7393 10.8348 20.939L10.6373 21.1365C10.1643 21.6095 9.92775 21.8461 9.6649 21.9146C9.43436 21.9746 9.18993 21.9504 8.97565 21.8463C8.73134 21.7276 8.54579 21.4493 8.17469 20.8926L6.60637 18.5401C6.54007 18.4407 6.50692 18.391 6.46843 18.3459C6.43424 18.3058 6.39695 18.2685 6.35688 18.2343C6.31178 18.1958 6.26206 18.1627 6.16261 18.0964L3.81012 16.5281C3.25348 16.157 2.97515 15.9714 2.85643 15.7271C2.7523 15.5128 2.7281 15.2684 2.78818 15.0378C2.85668 14.775 3.09321 14.5385 3.56627 14.0654L3.76378 13.8679C3.96346 13.6682 4.06331 13.5684 4.18089 13.5016C4.28505 13.4424 4.399 13.4024 4.5173 13.3836C4.65083 13.3623 4.79117 13.3779 5.07184 13.4091L6.72523 13.5928C7.0059 13.6239 7.14624 13.6395 7.27977 13.6182C7.39807 13.5994 7.51202 13.5594 7.61618 13.5002C7.73376 13.4334 7.8336 13.3336 8.03329 13.1339L11.3786 9.7886L5.34933 7.77884C4.5361 7.50776 4.12949 7.37222 3.9417 7.11932C3.77771 6.89848 3.71194 6.61984 3.75984 6.34898C3.81471 6.03879 4.11778 5.73572 4.72393 5.12957L5.0947 4.7588C5.32359 4.52991 5.43804 4.41546 5.57363 4.34457C5.69364 4.28183 5.82514 4.24411 5.96017 4.23371C6.11272 4.22197 6.27043 4.25836 6.58584 4.33115L14.0449 6.05249C14.3549 6.12401 14.5099 6.15978 14.6595 6.14914C14.804 6.13886 14.9445 6.09733 15.0713 6.02742C15.2027 5.95501 15.3133 5.84074 15.5346 5.6122L18.2447 2.81298Z"
|
||||
stroke="#9D51EF"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<h3 className="gradient-text mt-6 mb-1.5 font-serif text-3xl text-center">
|
||||
Explorer
|
||||
</h3>
|
||||
|
||||
<p className="gradient-text font-medium text-center">
|
||||
The ultimate guide for web scraping and discovery. Explorer
|
||||
scours the web, extracting valuable data and presenting it in
|
||||
a clean, structured format.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Image src={tool3Img} alt="" className="w-full max-w-[320px]" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="absolute top-0 left-0 -scale-y-[1] w-full h-full rounded-2xl"
|
||||
style={{
|
||||
background: `linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), radial-gradient(85.71% 55.89% at 50% 0%, #9D51EF 0%, #000 100%)`,
|
||||
boxShadow: `0px 0px 15px 0px rgba(255, 255, 255, 0.50) inset`,
|
||||
}}
|
||||
></div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ y: -35, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 1, delay: 1.2 }}
|
||||
viewport={{ once: true }}
|
||||
className="relative"
|
||||
>
|
||||
<div className="relative z-10 h-full flex flex-col justify-between items-center">
|
||||
<div className="p-10 flex flex-col items-center">
|
||||
<svg
|
||||
width="25"
|
||||
height="24"
|
||||
viewBox="0 0 25 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M20.5 19V16H7.5C5.84315 16 4.5 17.3431 4.5 19M9.3 22H17.3C18.4201 22 18.9802 22 19.408 21.782C19.7843 21.5903 20.0903 21.2843 20.282 20.908C20.5 20.4802 20.5 19.9201 20.5 18.8V5.2C20.5 4.07989 20.5 3.51984 20.282 3.09202C20.0903 2.71569 19.7843 2.40973 19.408 2.21799C18.9802 2 18.4201 2 17.3 2H9.3C7.61984 2 6.77976 2 6.13803 2.32698C5.57354 2.6146 5.1146 3.07354 4.82698 3.63803C4.5 4.27976 4.5 5.11984 4.5 6.8V17.2C4.5 18.8802 4.5 19.7202 4.82698 20.362C5.1146 20.9265 5.57354 21.3854 6.13803 21.673C6.77976 22 7.61984 22 9.3 22Z"
|
||||
stroke="#FF3443"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<h3 className="gradient-text mt-6 mb-1.5 font-serif text-3xl text-center">
|
||||
Scholarly
|
||||
</h3>
|
||||
|
||||
<p className="gradient-text font-medium text-center">
|
||||
Your academic assistant for in-depth analysis and synthesis.
|
||||
Scholarly specializes in research, citations, and generating
|
||||
high-quality, knowledge-based content.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Image src={tool4Img} alt="" className="w-full max-w-[250px]" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="absolute top-0 left-0 -scale-y-[1] w-full h-full rounded-2xl"
|
||||
style={{
|
||||
background: `linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), radial-gradient(85.71% 55.89% at 50% 0%, #FF3443 0%, #000 100%)`,
|
||||
boxShadow: `0px 0px 15px 0px rgba(255, 255, 255, 0.50) inset`,
|
||||
}}
|
||||
></div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
BIN
lander/src/components/index/assets/images/about-section-1.png
Normal file
BIN
lander/src/components/index/assets/images/about-section-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 163 KiB |
BIN
lander/src/components/index/assets/images/brand/logo.png
Normal file
BIN
lander/src/components/index/assets/images/brand/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
15
lander/src/components/index/assets/images/brand/logo.svg
Normal file
15
lander/src/components/index/assets/images/brand/logo.svg
Normal file
@ -0,0 +1,15 @@
|
||||
<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1_216)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M34.4437 3.3302L37.5568 6.44327L40.6699 9.55634C36.2167 14.4596 37.3756 17.2779 44.0001 17.5957V26.4014C37.3756 26.7207 36.2167 29.5375 40.6699 34.4408L37.5568 37.5539L34.4437 40.6669C29.539 36.2137 26.7221 37.3712 26.4044 43.9971H22.0015H17.5986C17.2794 37.3712 14.4625 36.2137 9.55927 40.6669L6.4462 37.5539L3.33313 34.4408C7.78633 29.5375 6.62737 26.7192 0.00292969 26.4014V17.5957C6.62737 17.2765 7.78633 14.4596 3.33313 9.55634L6.4462 6.44327L9.55927 3.3302C14.4611 7.7834 17.278 6.62588 17.5972 0H22.0001H26.4029C26.7221 6.62588 29.539 7.7834 34.4423 3.3302H34.4437Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M26.6645 16.5187L28.8861 21.2135H30.7151V25.0771L32.5312 28.9149H27.7962L26.0045 25.1692H17.994L16.2023 28.9149H11.4673L13.2834 25.0771V21.2135H15.1124L17.334 16.5187V12.6133H26.6631V16.5187H26.6645ZM22 21.2149H24.1137L22.0244 16.8451H21.977L19.8877 21.2149H22.0014H22Z" fill="black"/>
|
||||
<path opacity="0.92" d="M29.3677 12.6133H14.6306V16.569H29.3677V12.6133Z" fill="#161616"/>
|
||||
<path opacity="0.27" d="M30.6606 21.2149H13.2302V25.1706H30.6606V21.2149Z" fill="#494A4A"/>
|
||||
<path opacity="0.96" fill-rule="evenodd" clip-rule="evenodd" d="M26.0045 25.1691L19.8862 21.2149H24.1137L26.0045 25.1691Z" fill="#787777"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M22 8.16444C29.641 8.16444 35.8355 14.359 35.8355 22C35.8355 29.641 29.641 35.8356 22 35.8356C14.3589 35.8356 8.16443 29.641 8.16443 22C8.16443 14.359 14.3589 8.16444 22 8.16444ZM36.7285 22C36.7285 13.8658 30.1342 7.2715 22 7.2715C13.8657 7.2715 7.27148 13.8658 7.27148 22C7.27148 30.1342 13.8657 36.7285 22 36.7285C30.1342 36.7285 36.7285 30.1342 36.7285 22Z" fill="black"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1_216">
|
||||
<rect width="44" height="44" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
BIN
lander/src/components/index/assets/images/roadmap-section-1.png
Normal file
BIN
lander/src/components/index/assets/images/roadmap-section-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 153 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 7.3 KiB |
BIN
lander/src/components/index/assets/images/tool-1.png
Normal file
BIN
lander/src/components/index/assets/images/tool-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
BIN
lander/src/components/index/assets/images/tool-2.png
Normal file
BIN
lander/src/components/index/assets/images/tool-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
BIN
lander/src/components/index/assets/images/tool-3.png
Normal file
BIN
lander/src/components/index/assets/images/tool-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 145 KiB |
BIN
lander/src/components/index/assets/images/tool-4.png
Normal file
BIN
lander/src/components/index/assets/images/tool-4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
60
lander/src/components/index/magicui/ripple.tsx
Normal file
60
lander/src/components/index/magicui/ripple.tsx
Normal file
@ -0,0 +1,60 @@
|
||||
import React, { ComponentPropsWithoutRef, CSSProperties } from "react";
|
||||
|
||||
import { cn } from "../../lib/utils";
|
||||
|
||||
interface RippleProps extends ComponentPropsWithoutRef<"div"> {
|
||||
mainCircleSize?: number;
|
||||
mainCircleOpacity?: number;
|
||||
numCircles?: number;
|
||||
rippleBgColor?: string;
|
||||
}
|
||||
|
||||
export const Ripple = React.memo(function Ripple({
|
||||
mainCircleSize = 50,
|
||||
mainCircleOpacity = 0.24,
|
||||
numCircles = 8,
|
||||
className,
|
||||
rippleBgColor = "rgba(255, 255, 255, 0.25)",
|
||||
...props
|
||||
}: RippleProps) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"pointer-events-none absolute inset-0 select-none",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{Array.from({ length: numCircles }, (_, i) => {
|
||||
const size = mainCircleSize + i * 30;
|
||||
const opacity = mainCircleOpacity - i * 0.03;
|
||||
const animationDelay = `${i * 0.06}s`;
|
||||
// const borderStyle = i === numCircles - 1 ? "dashed" : "solid";
|
||||
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className={`[--i: absolute animate-ripple rounded-full bg-foreground/25 shadow-xl${i}]`}
|
||||
style={
|
||||
{
|
||||
width: `${size}px`,
|
||||
height: `${size}px`,
|
||||
opacity,
|
||||
animationDelay,
|
||||
// borderStyle,
|
||||
// borderWidth: "1px",
|
||||
// borderColor: "#fff",
|
||||
backgroundColor: rippleBgColor,
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%) scale(1)",
|
||||
} as CSSProperties
|
||||
}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
Ripple.displayName = "Ripple";
|
||||
146
lander/src/components/index/ui/shooting-stars.tsx
Normal file
146
lander/src/components/index/ui/shooting-stars.tsx
Normal file
@ -0,0 +1,146 @@
|
||||
"use client";
|
||||
import { cn } from "@/lib/utils";
|
||||
import React, { useEffect, useState, useRef } from "react";
|
||||
|
||||
interface ShootingStar {
|
||||
id: number;
|
||||
x: number;
|
||||
y: number;
|
||||
angle: number;
|
||||
scale: number;
|
||||
speed: number;
|
||||
distance: number;
|
||||
}
|
||||
|
||||
interface ShootingStarsProps {
|
||||
minSpeed?: number;
|
||||
maxSpeed?: number;
|
||||
minDelay?: number;
|
||||
maxDelay?: number;
|
||||
starColor?: string;
|
||||
trailColor?: string;
|
||||
starWidth?: number;
|
||||
starHeight?: number;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const getRandomStartPoint = () => {
|
||||
const side = Math.floor(Math.random() * 4);
|
||||
const offset = Math.random() * window.innerWidth;
|
||||
|
||||
switch (side) {
|
||||
case 0:
|
||||
return { x: offset, y: 0, angle: 45 };
|
||||
case 1:
|
||||
return { x: window.innerWidth, y: offset, angle: 135 };
|
||||
case 2:
|
||||
return { x: offset, y: window.innerHeight, angle: 225 };
|
||||
case 3:
|
||||
return { x: 0, y: offset, angle: 315 };
|
||||
default:
|
||||
return { x: 0, y: 0, angle: 45 };
|
||||
}
|
||||
};
|
||||
export const ShootingStars: React.FC<ShootingStarsProps> = ({
|
||||
minSpeed = 10,
|
||||
maxSpeed = 30,
|
||||
minDelay = 1200,
|
||||
maxDelay = 4200,
|
||||
starColor = "#fff",
|
||||
trailColor = "#fff",
|
||||
starWidth = 10,
|
||||
starHeight = 1,
|
||||
className,
|
||||
}) => {
|
||||
const [star, setStar] = useState<ShootingStar | null>(null);
|
||||
const svgRef = useRef<SVGSVGElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const createStar = () => {
|
||||
const { x, y, angle } = getRandomStartPoint();
|
||||
const newStar: ShootingStar = {
|
||||
id: Date.now(),
|
||||
x,
|
||||
y,
|
||||
angle,
|
||||
scale: 1,
|
||||
speed: Math.random() * (maxSpeed - minSpeed) + minSpeed,
|
||||
distance: 0,
|
||||
};
|
||||
setStar(newStar);
|
||||
|
||||
const randomDelay = Math.random() * (maxDelay - minDelay) + minDelay;
|
||||
setTimeout(createStar, randomDelay);
|
||||
};
|
||||
|
||||
createStar();
|
||||
|
||||
return () => {};
|
||||
}, [minSpeed, maxSpeed, minDelay, maxDelay]);
|
||||
|
||||
useEffect(() => {
|
||||
const moveStar = () => {
|
||||
if (star) {
|
||||
setStar((prevStar) => {
|
||||
if (!prevStar) return null;
|
||||
const newX =
|
||||
prevStar.x +
|
||||
prevStar.speed * Math.cos((prevStar.angle * Math.PI) / 180);
|
||||
const newY =
|
||||
prevStar.y +
|
||||
prevStar.speed * Math.sin((prevStar.angle * Math.PI) / 180);
|
||||
const newDistance = prevStar.distance + prevStar.speed;
|
||||
const newScale = 1 + newDistance / 100;
|
||||
if (
|
||||
newX < -20 ||
|
||||
newX > window.innerWidth + 20 ||
|
||||
newY < -20 ||
|
||||
newY > window.innerHeight + 20
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
return {
|
||||
...prevStar,
|
||||
x: newX,
|
||||
y: newY,
|
||||
distance: newDistance,
|
||||
scale: newScale,
|
||||
};
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const animationFrame = requestAnimationFrame(moveStar);
|
||||
return () => cancelAnimationFrame(animationFrame);
|
||||
}, [star]);
|
||||
|
||||
return (
|
||||
<svg
|
||||
ref={svgRef}
|
||||
className={cn("w-full h-full absolute inset-0", className)}
|
||||
>
|
||||
{star && (
|
||||
<rect
|
||||
key={star.id}
|
||||
x={star.x}
|
||||
y={star.y}
|
||||
width={starWidth * star.scale}
|
||||
height={starHeight}
|
||||
fill="url(#gradient)"
|
||||
transform={`rotate(${star.angle}, ${
|
||||
star.x + (starWidth * star.scale) / 2
|
||||
}, ${star.y + starHeight / 2})`}
|
||||
/>
|
||||
)}
|
||||
<defs>
|
||||
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style={{ stopColor: trailColor, stopOpacity: 0 }} />
|
||||
<stop
|
||||
offset="100%"
|
||||
style={{ stopColor: starColor, stopOpacity: 1 }}
|
||||
/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
143
lander/src/components/index/ui/stars-background.tsx
Normal file
143
lander/src/components/index/ui/stars-background.tsx
Normal file
@ -0,0 +1,143 @@
|
||||
"use client";
|
||||
import { cn } from "@/lib/utils";
|
||||
import React, {
|
||||
useState,
|
||||
useEffect,
|
||||
useRef,
|
||||
RefObject,
|
||||
useCallback,
|
||||
} from "react";
|
||||
|
||||
interface StarProps {
|
||||
x: number;
|
||||
y: number;
|
||||
radius: number;
|
||||
opacity: number;
|
||||
twinkleSpeed: number | null;
|
||||
}
|
||||
|
||||
interface StarBackgroundProps {
|
||||
starDensity?: number;
|
||||
allStarsTwinkle?: boolean;
|
||||
twinkleProbability?: number;
|
||||
minTwinkleSpeed?: number;
|
||||
maxTwinkleSpeed?: number;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const StarsBackground: React.FC<StarBackgroundProps> = ({
|
||||
starDensity = 0.00015,
|
||||
allStarsTwinkle = true,
|
||||
twinkleProbability = 0.7,
|
||||
minTwinkleSpeed = 0.5,
|
||||
maxTwinkleSpeed = 1,
|
||||
className,
|
||||
}) => {
|
||||
const [stars, setStars] = useState<StarProps[]>([]);
|
||||
const canvasRef: RefObject<HTMLCanvasElement | null> =
|
||||
useRef<HTMLCanvasElement | null>(null);
|
||||
|
||||
const generateStars = useCallback(
|
||||
(width: number, height: number): StarProps[] => {
|
||||
const area = width * height;
|
||||
const numStars = Math.floor(area * starDensity);
|
||||
return Array.from({ length: numStars }, () => {
|
||||
const shouldTwinkle =
|
||||
allStarsTwinkle || Math.random() < twinkleProbability;
|
||||
return {
|
||||
x: Math.random() * width,
|
||||
y: Math.random() * height,
|
||||
radius: Math.random() * 0.05 + 0.5,
|
||||
opacity: Math.random() * 0.5 + 0.5,
|
||||
twinkleSpeed: shouldTwinkle
|
||||
? minTwinkleSpeed +
|
||||
Math.random() * (maxTwinkleSpeed - minTwinkleSpeed)
|
||||
: null,
|
||||
};
|
||||
});
|
||||
},
|
||||
[
|
||||
starDensity,
|
||||
allStarsTwinkle,
|
||||
twinkleProbability,
|
||||
minTwinkleSpeed,
|
||||
maxTwinkleSpeed,
|
||||
]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const updateStars = () => {
|
||||
if (canvasRef.current) {
|
||||
const canvas = canvasRef.current;
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (!ctx) return;
|
||||
|
||||
const { width, height } = canvas.getBoundingClientRect();
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
setStars(generateStars(width, height));
|
||||
}
|
||||
};
|
||||
|
||||
updateStars();
|
||||
|
||||
const resizeObserver = new ResizeObserver(updateStars);
|
||||
if (canvasRef.current) {
|
||||
resizeObserver.observe(canvasRef.current);
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (canvasRef.current) {
|
||||
resizeObserver.unobserve(canvasRef.current);
|
||||
}
|
||||
};
|
||||
}, [
|
||||
starDensity,
|
||||
allStarsTwinkle,
|
||||
twinkleProbability,
|
||||
minTwinkleSpeed,
|
||||
maxTwinkleSpeed,
|
||||
generateStars,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) return;
|
||||
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (!ctx) return;
|
||||
|
||||
let animationFrameId: number;
|
||||
|
||||
const render = () => {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
stars.forEach((star) => {
|
||||
ctx.beginPath();
|
||||
ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2);
|
||||
ctx.fillStyle = `rgba(255, 255, 255, ${star.opacity})`;
|
||||
ctx.fill();
|
||||
|
||||
if (star.twinkleSpeed !== null) {
|
||||
star.opacity =
|
||||
0.5 +
|
||||
Math.abs(Math.sin((Date.now() * 0.001) / star.twinkleSpeed) * 0.5);
|
||||
}
|
||||
});
|
||||
|
||||
animationFrameId = requestAnimationFrame(render);
|
||||
};
|
||||
|
||||
render();
|
||||
|
||||
return () => {
|
||||
cancelAnimationFrame(animationFrameId);
|
||||
};
|
||||
}, [stars]);
|
||||
|
||||
return (
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
className={cn("h-full w-full absolute inset-0", className)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
252
lander/src/components/index/ui/vortex.tsx
Normal file
252
lander/src/components/index/ui/vortex.tsx
Normal file
@ -0,0 +1,252 @@
|
||||
import { cn } from "../../lib/utils";
|
||||
import React, { useEffect, useRef } from "react";
|
||||
import { createNoise3D } from "simplex-noise";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
interface VortexProps {
|
||||
children?: React.ReactNode;
|
||||
className?: string;
|
||||
containerClassName?: string;
|
||||
particleCount?: number;
|
||||
rangeY?: number;
|
||||
baseHue?: number;
|
||||
baseSpeed?: number;
|
||||
rangeSpeed?: number;
|
||||
baseRadius?: number;
|
||||
rangeRadius?: number;
|
||||
backgroundColor?: string;
|
||||
}
|
||||
|
||||
export const Vortex = (props: VortexProps) => {
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const containerRef = useRef(null);
|
||||
const particleCount = props.particleCount || 700;
|
||||
const particlePropCount = 9;
|
||||
const particlePropsLength = particleCount * particlePropCount;
|
||||
const rangeY = props.rangeY || 100;
|
||||
const baseTTL = 50;
|
||||
const rangeTTL = 150;
|
||||
const baseSpeed = props.baseSpeed || 0.0;
|
||||
const rangeSpeed = props.rangeSpeed || 1.5;
|
||||
const baseRadius = props.baseRadius || 1;
|
||||
const rangeRadius = props.rangeRadius || 2;
|
||||
const baseHue = props.baseHue || 220;
|
||||
const rangeHue = 100;
|
||||
const noiseSteps = 3;
|
||||
const xOff = 0.00125;
|
||||
const yOff = 0.00125;
|
||||
const zOff = 0.0005;
|
||||
const backgroundColor = props.backgroundColor || "#000000";
|
||||
let tick = 0;
|
||||
const noise3D = createNoise3D();
|
||||
let particleProps = new Float32Array(particlePropsLength);
|
||||
const center: [number, number] = [0, 0];
|
||||
|
||||
const TAU: number = 2 * Math.PI;
|
||||
const rand = (n: number): number => n * Math.random();
|
||||
const randRange = (n: number): number => n - rand(2 * n);
|
||||
const fadeInOut = (t: number, m: number): number => {
|
||||
const hm = 0.5 * m;
|
||||
return Math.abs(((t + hm) % m) - hm) / hm;
|
||||
};
|
||||
const lerp = (n1: number, n2: number, speed: number): number =>
|
||||
(1 - speed) * n1 + speed * n2;
|
||||
|
||||
const setup = () => {
|
||||
const canvas = canvasRef.current;
|
||||
const container = containerRef.current;
|
||||
if (canvas && container) {
|
||||
const ctx = canvas.getContext("2d");
|
||||
|
||||
if (ctx) {
|
||||
resize(canvas);
|
||||
initParticles();
|
||||
draw(canvas, ctx);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const initParticles = () => {
|
||||
tick = 0;
|
||||
// simplex = new SimplexNoise();
|
||||
particleProps = new Float32Array(particlePropsLength);
|
||||
|
||||
for (let i = 0; i < particlePropsLength; i += particlePropCount) {
|
||||
initParticle(i);
|
||||
}
|
||||
};
|
||||
|
||||
const initParticle = (i: number) => {
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) return;
|
||||
|
||||
const x = rand(canvas.width);
|
||||
const y = center[1] + randRange(rangeY);
|
||||
const vx = 0;
|
||||
const vy = 0;
|
||||
const life = 0;
|
||||
const ttl = baseTTL + rand(rangeTTL);
|
||||
const speed = baseSpeed + rand(rangeSpeed);
|
||||
const radius = baseRadius + rand(rangeRadius);
|
||||
const hue = baseHue + rand(rangeHue);
|
||||
|
||||
particleProps.set([x, y, vx, vy, life, ttl, speed, radius, hue], i);
|
||||
};
|
||||
|
||||
const draw = (canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D) => {
|
||||
tick++;
|
||||
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
ctx.fillStyle = backgroundColor;
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
drawParticles(ctx);
|
||||
renderGlow(canvas, ctx);
|
||||
renderToScreen(canvas, ctx);
|
||||
|
||||
window.requestAnimationFrame(() => draw(canvas, ctx));
|
||||
};
|
||||
|
||||
const drawParticles = (ctx: CanvasRenderingContext2D) => {
|
||||
for (let i = 0; i < particlePropsLength; i += particlePropCount) {
|
||||
updateParticle(i, ctx);
|
||||
}
|
||||
};
|
||||
|
||||
const updateParticle = (i: number, ctx: CanvasRenderingContext2D) => {
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) return;
|
||||
|
||||
const i2 = 1 + i,
|
||||
i3 = 2 + i,
|
||||
i4 = 3 + i,
|
||||
i5 = 4 + i,
|
||||
i6 = 5 + i,
|
||||
i7 = 6 + i,
|
||||
i8 = 7 + i,
|
||||
i9 = 8 + i;
|
||||
|
||||
const x = particleProps[i];
|
||||
const y = particleProps[i2];
|
||||
const n = noise3D(x * xOff, y * yOff, tick * zOff) * noiseSteps * TAU;
|
||||
const vx = lerp(particleProps[i3], Math.cos(n), 0.5);
|
||||
const vy = lerp(particleProps[i4], Math.sin(n), 0.5);
|
||||
let life = particleProps[i5];
|
||||
const ttl = particleProps[i6];
|
||||
const speed = particleProps[i7];
|
||||
const x2 = x + vx * speed;
|
||||
const y2 = y + vy * speed;
|
||||
const radius = particleProps[i8];
|
||||
const hue = particleProps[i9];
|
||||
|
||||
drawParticle(x, y, x2, y2, life, ttl, radius, hue, ctx);
|
||||
|
||||
life++;
|
||||
|
||||
particleProps[i] = x2;
|
||||
particleProps[i2] = y2;
|
||||
particleProps[i3] = vx;
|
||||
particleProps[i4] = vy;
|
||||
particleProps[i5] = life;
|
||||
|
||||
if (checkBounds(x, y, canvas) || life > ttl) {
|
||||
initParticle(i);
|
||||
}
|
||||
};
|
||||
|
||||
const drawParticle = (
|
||||
x: number,
|
||||
y: number,
|
||||
x2: number,
|
||||
y2: number,
|
||||
life: number,
|
||||
ttl: number,
|
||||
radius: number,
|
||||
hue: number,
|
||||
ctx: CanvasRenderingContext2D
|
||||
) => {
|
||||
ctx.save();
|
||||
ctx.lineCap = "round";
|
||||
ctx.lineWidth = radius;
|
||||
ctx.strokeStyle = `hsla(0,0%,35%,${fadeInOut(life, ttl)})`;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x, y);
|
||||
ctx.lineTo(x2, y2);
|
||||
ctx.stroke();
|
||||
ctx.closePath();
|
||||
ctx.restore();
|
||||
};
|
||||
|
||||
const checkBounds = (x: number, y: number, canvas: HTMLCanvasElement) => {
|
||||
return x > canvas.width || x < 0 || y > canvas.height || y < 0;
|
||||
};
|
||||
|
||||
const resize = (canvas: HTMLCanvasElement) => {
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (!ctx) return;
|
||||
|
||||
const { innerWidth, innerHeight } = window;
|
||||
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
|
||||
center[0] = 0.5 * canvas.width;
|
||||
center[1] = 0.5 * canvas.height;
|
||||
};
|
||||
|
||||
const renderGlow = (
|
||||
canvas: HTMLCanvasElement,
|
||||
ctx: CanvasRenderingContext2D
|
||||
) => {
|
||||
ctx.save();
|
||||
ctx.filter = "blur(8px) brightness(200%)";
|
||||
ctx.globalCompositeOperation = "lighter";
|
||||
ctx.drawImage(canvas, 0, 0);
|
||||
ctx.restore();
|
||||
|
||||
ctx.save();
|
||||
ctx.filter = "blur(4px) brightness(200%)";
|
||||
ctx.globalCompositeOperation = "lighter";
|
||||
ctx.drawImage(canvas, 0, 0);
|
||||
ctx.restore();
|
||||
};
|
||||
|
||||
const renderToScreen = (
|
||||
canvas: HTMLCanvasElement,
|
||||
ctx: CanvasRenderingContext2D
|
||||
) => {
|
||||
ctx.save();
|
||||
ctx.globalCompositeOperation = "lighter";
|
||||
ctx.drawImage(canvas, 0, 0);
|
||||
ctx.restore();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setup();
|
||||
window.addEventListener("resize", () => {
|
||||
const canvas = canvasRef.current;
|
||||
const ctx = canvas?.getContext("2d");
|
||||
if (canvas && ctx) {
|
||||
resize(canvas);
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className={cn("relative h-full w-full", props.containerClassName)}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
ref={containerRef}
|
||||
className="absolute h-full w-full inset-0 z-0 bg-transparent flex items-center justify-center"
|
||||
>
|
||||
<canvas ref={canvasRef}></canvas>
|
||||
</motion.div>
|
||||
|
||||
<div className={cn("relative z-10", props.className)}>
|
||||
{props.children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
57
lander/src/components/lib/posts.ts
Normal file
57
lander/src/components/lib/posts.ts
Normal file
@ -0,0 +1,57 @@
|
||||
import fs from "fs";
|
||||
import path from "path";
|
||||
|
||||
import matter from "gray-matter";
|
||||
|
||||
// Define the types for the data
|
||||
export interface SlugData {
|
||||
id: string;
|
||||
date: string;
|
||||
|
||||
[key: string]: string;
|
||||
}
|
||||
|
||||
const postsDirectory = path.join(process.cwd(), "posts");
|
||||
|
||||
export function getSortedPostsData(): SlugData[] {
|
||||
const fileNames = fs.readdirSync(postsDirectory);
|
||||
const allPostsData: SlugData[] = fileNames.map((fileName) => {
|
||||
const id = fileName.replace(/\.mdx$/, "");
|
||||
const fullPath = path.join(postsDirectory, fileName);
|
||||
const fileContents = fs.readFileSync(fullPath, "utf8");
|
||||
const matterResult = matter(fileContents);
|
||||
|
||||
return {
|
||||
id,
|
||||
date: matterResult.data.date as string,
|
||||
...matterResult.data,
|
||||
};
|
||||
});
|
||||
|
||||
return allPostsData.sort((a, b) => {
|
||||
if (a.date < b.date) {
|
||||
return 1;
|
||||
} else {
|
||||
return -1;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export interface PostData {
|
||||
slug: string;
|
||||
content: string;
|
||||
|
||||
[key: string]: string;
|
||||
}
|
||||
|
||||
export function getPostData(slug: string): PostData {
|
||||
const fullPath = path.join(postsDirectory, `${slug}.mdx`);
|
||||
const fileContents = fs.readFileSync(fullPath, "utf8");
|
||||
const matterResult = matter(fileContents);
|
||||
|
||||
return {
|
||||
slug,
|
||||
...matterResult.data,
|
||||
content: matterResult.content,
|
||||
};
|
||||
}
|
||||
6
lander/src/components/lib/utils.ts
Normal file
6
lander/src/components/lib/utils.ts
Normal file
@ -0,0 +1,6 @@
|
||||
import { type ClassValue, clsx } from "clsx";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
18
lander/tailwind.config.ts
Normal file
18
lander/tailwind.config.ts
Normal file
@ -0,0 +1,18 @@
|
||||
import type { Config } from "tailwindcss";
|
||||
|
||||
export default {
|
||||
content: [
|
||||
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
background: "var(--background)",
|
||||
foreground: "var(--foreground)",
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
} satisfies Config;
|
||||
27
lander/tsconfig.json
Normal file
27
lander/tsconfig.json
Normal file
@ -0,0 +1,27 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2017",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true,
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
}
|
||||
],
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
BIN
next/public/images/brand/logo.png
Normal file
BIN
next/public/images/brand/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
@ -1,26 +1,70 @@
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { usePrivy } from "@privy-io/react-auth";
|
||||
|
||||
import Header from "../components/index/Header";
|
||||
import Footer from "../components/index/Footer";
|
||||
import HeroSection from "../components/index/HeroSection";
|
||||
import AboutSection from "../components/index/AboutSection";
|
||||
import ToolsSection from "../components/index/ToolsSection";
|
||||
import TokenomicsSection from "../components/index/TokenomicsSection";
|
||||
import RoadmapSection from "../components/index/RoadmapSection";
|
||||
import CTASection from "../components/index/CTASection";
|
||||
const signin: React.FC = () => {
|
||||
const router = useRouter();
|
||||
const { login, authenticated, ready } = usePrivy();
|
||||
|
||||
const handleAccess = () => {
|
||||
if (authenticated) {
|
||||
router.push("/chat");
|
||||
} else {
|
||||
login();
|
||||
}
|
||||
};
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<main className="text-white">
|
||||
<Header />
|
||||
|
||||
<HeroSection />
|
||||
<AboutSection />
|
||||
<ToolsSection />
|
||||
<TokenomicsSection />
|
||||
<RoadmapSection />
|
||||
{/* <CTASection /> */}
|
||||
|
||||
<Footer />
|
||||
</main>
|
||||
<div className="flex h-screen w-screen items-center justify-center bg-[#101010]">
|
||||
<div className="relative max-w-sm rounded-lg bg-[#222222] p-16 text-center shadow-lg">
|
||||
<div className="absolute left-0 top-0 h-full w-full rounded-lg opacity-50"></div>
|
||||
<div className="relative z-10">
|
||||
<div className="mb-6 flex justify-center">
|
||||
<Link href="/" className="cursor-pointer duration-300 hover:scale-110">
|
||||
<img src="/images/brand/logo.png" alt="Logo" width={40} height={40} />
|
||||
</Link>
|
||||
</div>
|
||||
<h1 className="text-xl font-bold text-white">Welcome to Allinix</h1>
|
||||
<p className="mb-8 text-gray-400">Get access to dashboard</p>
|
||||
<button
|
||||
onClick={handleAccess}
|
||||
className="btn-primary w-full rounded-md px-4 py-2 font-semibold text-white"
|
||||
>
|
||||
SIGN IN
|
||||
</button>
|
||||
<div className="mt-8 flex justify-center gap-8">
|
||||
<Link
|
||||
href={"https://x.com/allinix_ai"}
|
||||
target="_blank"
|
||||
className="h-8 w-8 duration-300 hover:scale-110"
|
||||
>
|
||||
<svg
|
||||
width="29"
|
||||
height="29"
|
||||
viewBox="0 0 29 29"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M22.286 2.25293H26.2779L17.5567 12.2207L27.8165 25.7847H19.7832L13.4911 17.5582L6.29164 25.7847H2.29728L11.6255 15.123L1.7832 2.25293H10.0205L15.708 9.77222L22.286 2.25293ZM20.8849 23.3953H23.0969L8.81859 4.5168H6.4449L20.8849 23.3953Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
</Link>
|
||||
<Link
|
||||
href={"https://docs.allinix.ai/"}
|
||||
target="_blank"
|
||||
className="h-8 w-8 duration-300 hover:scale-110"
|
||||
>
|
||||
<img src="/gitbook.png" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default signin;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user