INIT REPO
This commit is contained in:
William Jeynes
+43
@@ -0,0 +1,43 @@
|
|||||||
|
# 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
|
||||||
|
|
||||||
|
bun.lock
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
# UXHack 2026 Submission
|
||||||
|
|
||||||
|
Explore the Evil AI corporation and its unique take on accessibility.
|
||||||
@@ -0,0 +1,23 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://ui.shadcn.com/schema.json",
|
||||||
|
"style": "new-york",
|
||||||
|
"rsc": true,
|
||||||
|
"tsx": true,
|
||||||
|
"tailwind": {
|
||||||
|
"config": "",
|
||||||
|
"css": "src/app/globals.css",
|
||||||
|
"baseColor": "neutral",
|
||||||
|
"cssVariables": true,
|
||||||
|
"prefix": ""
|
||||||
|
},
|
||||||
|
"iconLibrary": "lucide",
|
||||||
|
"rtl": false,
|
||||||
|
"aliases": {
|
||||||
|
"components": "@/components",
|
||||||
|
"utils": "@/lib/utils",
|
||||||
|
"ui": "@/components/ui",
|
||||||
|
"lib": "@/lib",
|
||||||
|
"hooks": "@/hooks"
|
||||||
|
},
|
||||||
|
"registries": {}
|
||||||
|
}
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
import { defineConfig, globalIgnores } from "eslint/config";
|
||||||
|
import nextVitals from "eslint-config-next/core-web-vitals";
|
||||||
|
import nextTs from "eslint-config-next/typescript";
|
||||||
|
|
||||||
|
const eslintConfig = defineConfig([
|
||||||
|
...nextVitals,
|
||||||
|
...nextTs,
|
||||||
|
// Override default ignores of eslint-config-next.
|
||||||
|
globalIgnores([
|
||||||
|
// Default ignores of eslint-config-next:
|
||||||
|
".next/**",
|
||||||
|
"out/**",
|
||||||
|
"build/**",
|
||||||
|
"next-env.d.ts",
|
||||||
|
]),
|
||||||
|
]);
|
||||||
|
|
||||||
|
export default eslintConfig;
|
||||||
Vendored
+1
@@ -0,0 +1 @@
|
|||||||
|
declare module '*.css';
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
import type { NextConfig } from "next";
|
||||||
|
|
||||||
|
const nextConfig: NextConfig = {
|
||||||
|
/* config options here */
|
||||||
|
};
|
||||||
|
|
||||||
|
export default nextConfig;
|
||||||
Generated
+11986
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,38 @@
|
|||||||
|
{
|
||||||
|
"name": "my-app",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "next dev",
|
||||||
|
"build": "next build",
|
||||||
|
"start": "next start",
|
||||||
|
"lint": "eslint"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"class-variance-authority": "^0.7.1",
|
||||||
|
"clsx": "^2.1.1",
|
||||||
|
"embla-carousel-autoplay": "^8.6.0",
|
||||||
|
"embla-carousel-react": "^8.6.0",
|
||||||
|
"framer-motion": "^12.34.3",
|
||||||
|
"i18next": "^25.8.13",
|
||||||
|
"lucide-react": "^0.575.0",
|
||||||
|
"next": "16.1.6",
|
||||||
|
"radix-ui": "^1.4.3",
|
||||||
|
"react": "19.2.3",
|
||||||
|
"react-dom": "19.2.3",
|
||||||
|
"react-i18next": "^16.5.4",
|
||||||
|
"tailwind-merge": "^3.5.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@tailwindcss/postcss": "^4",
|
||||||
|
"@types/node": "^20",
|
||||||
|
"@types/react": "^19",
|
||||||
|
"@types/react-dom": "^19",
|
||||||
|
"eslint": "^9",
|
||||||
|
"eslint-config-next": "16.1.6",
|
||||||
|
"shadcn": "^3.8.5",
|
||||||
|
"tailwindcss": "^4",
|
||||||
|
"tw-animate-css": "^1.4.0",
|
||||||
|
"typescript": "^5"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
const config = {
|
||||||
|
plugins: {
|
||||||
|
"@tailwindcss/postcss": {},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default config;
|
||||||
@@ -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 |
Binary file not shown.
|
After Width: | Height: | Size: 254 KiB |
@@ -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 |
Binary file not shown.
|
After Width: | Height: | Size: 414 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 628 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
@@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"company": "😈🤖",
|
||||||
|
"navigation": {
|
||||||
|
"services": "🛠️⚙️",
|
||||||
|
"testimonies": "🗣️📜",
|
||||||
|
"jobs": "💻⚰️",
|
||||||
|
"login": "🔐👤"
|
||||||
|
},
|
||||||
|
"header": {
|
||||||
|
"title": "👁️📡🌐🕰️",
|
||||||
|
"button": "📖➕"
|
||||||
|
},
|
||||||
|
"customers": "👥🧾:",
|
||||||
|
"testimonies": "😊🗣️📜:",
|
||||||
|
"login": {
|
||||||
|
"username": "👤🆔:",
|
||||||
|
"password": "🔑💬:",
|
||||||
|
"button": "🔐➡️"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"company": "Evil.AI",
|
||||||
|
"navigation": {
|
||||||
|
"services": "Services",
|
||||||
|
"testimonies": "Customer Testimonies",
|
||||||
|
"jobs": "The Last Tech Job",
|
||||||
|
"login": "Login"
|
||||||
|
},
|
||||||
|
"header": {
|
||||||
|
"title": "Surveilance Technology for the Modern Age",
|
||||||
|
"button": "Learn More"
|
||||||
|
},
|
||||||
|
"customers": "Our Customers:",
|
||||||
|
"testimonies": "Satisfied Customer Testimonies: ",
|
||||||
|
"login": {
|
||||||
|
"username": "Username: ",
|
||||||
|
"password": "Password: ",
|
||||||
|
"button": "Login"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -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 |
@@ -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 |
@@ -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 |
@@ -0,0 +1,227 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { InputWrapper } from "@/components/ui/input_wrapper";
|
||||||
|
import Section from "@/components/ui/section";
|
||||||
|
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||||
|
import { Spinner } from "@/components/ui/spinner";
|
||||||
|
import { getRandomThirdPartyCount, getRandomUsername } from "@/lib/utils";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
|
export default function Page() {
|
||||||
|
const [password, setPassword] = useState("");
|
||||||
|
const [email, setEmail] = useState("");
|
||||||
|
const [email2, setEmail2] = useState("");
|
||||||
|
const [email3, setEmail3] = useState("");
|
||||||
|
const [hours, setHours] = useState("");
|
||||||
|
const [experience, setExperience] = useState("");
|
||||||
|
const [graduationYear, setGraduationYear] = useState("");
|
||||||
|
const [digitOfPi, setDigitOfPi] = useState("");
|
||||||
|
const [submitSpinner, setSubmitSpinner] = useState(false);
|
||||||
|
|
||||||
|
const isValidPassword = password.length >= 8
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col items-center min-h-screen gap-6 mt-8 mb-8">
|
||||||
|
<h1 className="text-3xl mb-3">Apply to The Last Tech Job</h1>
|
||||||
|
|
||||||
|
<form className="flex flex-col gap-10">
|
||||||
|
|
||||||
|
<Section>
|
||||||
|
<div>
|
||||||
|
<p className="text-lg">Enter your personal details</p>
|
||||||
|
<p className="text-md text-gray-700">All fields are required. All details will be shared with our {getRandomThirdPartyCount()} third parties.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<InputWrapper name="Name">
|
||||||
|
<Input type="text" placeholder="First Name" />
|
||||||
|
<Input type="text" placeholder="Last Name" />
|
||||||
|
</InputWrapper>
|
||||||
|
|
||||||
|
<InputWrapper name="Email">
|
||||||
|
<Input
|
||||||
|
type="email"
|
||||||
|
placeholder="Email Address"
|
||||||
|
value={email}
|
||||||
|
onChange={(e) => setEmail(e.target.value)}
|
||||||
|
/>
|
||||||
|
</InputWrapper>
|
||||||
|
|
||||||
|
<InputWrapper
|
||||||
|
name="Confirm Email"
|
||||||
|
error={email !== email2 ? "Emails do not match" : ""}
|
||||||
|
>
|
||||||
|
<Input
|
||||||
|
type="email"
|
||||||
|
placeholder="Email Address"
|
||||||
|
value={email2}
|
||||||
|
onChange={(e) => setEmail2(e.target.value)}
|
||||||
|
/>
|
||||||
|
</InputWrapper>
|
||||||
|
|
||||||
|
{email === email2 && email !== "" ? (
|
||||||
|
<InputWrapper
|
||||||
|
name="Are you 100% sure that's your email?"
|
||||||
|
error={email !== email2 || email !== email3 ? "Emails do not match" : ""}
|
||||||
|
>
|
||||||
|
<Input
|
||||||
|
type="email"
|
||||||
|
placeholder="Email Address"
|
||||||
|
value={email3}
|
||||||
|
onChange={(e) => setEmail3(e.target.value)}
|
||||||
|
/>
|
||||||
|
</InputWrapper>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<InputWrapper name="Phone Number">
|
||||||
|
<Input type="tel" placeholder="Phone Number" />
|
||||||
|
</InputWrapper>
|
||||||
|
|
||||||
|
<InputWrapper
|
||||||
|
name="Password"
|
||||||
|
error={isValidPassword ? "Password already taken by " + getRandomUsername() : ""}>
|
||||||
|
<Input
|
||||||
|
type="password"
|
||||||
|
placeholder="Password"
|
||||||
|
value={password}
|
||||||
|
onChange={(e) => setPassword(e.target.value)}
|
||||||
|
/>
|
||||||
|
</InputWrapper>
|
||||||
|
|
||||||
|
<InputWrapper name="Bank Details">
|
||||||
|
<Input type="text" placeholder="Card Number" />
|
||||||
|
<Input type="text" placeholder="Expiration Date" />
|
||||||
|
<Input type="text" placeholder="CVV" />
|
||||||
|
</InputWrapper>
|
||||||
|
|
||||||
|
<InputWrapper name="Discord Username">
|
||||||
|
<Input type="text" placeholder="Username" />
|
||||||
|
</InputWrapper>
|
||||||
|
|
||||||
|
<InputWrapper name="Home Address">
|
||||||
|
<Input type="text" placeholder="Address" />
|
||||||
|
</InputWrapper>
|
||||||
|
|
||||||
|
<InputWrapper name="Date of Birth">
|
||||||
|
<Input type="date" placeholder="Date of Birth" />
|
||||||
|
</InputWrapper>
|
||||||
|
|
||||||
|
<InputWrapper name="Pet Names">
|
||||||
|
<Input type="textarea" placeholder="Sheldon, Casper, Benny, ..." />
|
||||||
|
</InputWrapper>
|
||||||
|
|
||||||
|
<InputWrapper name="Favorite Color">
|
||||||
|
<Input type="color" placeholder="Favorite Color" />
|
||||||
|
</InputWrapper>
|
||||||
|
|
||||||
|
<InputWrapper name="Who did you vote for in the previous election?">
|
||||||
|
<Select>
|
||||||
|
<SelectTrigger className="w-full max-w-48 override">
|
||||||
|
<SelectValue placeholder="Select a party" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectGroup>
|
||||||
|
<SelectLabel>Party Name</SelectLabel>
|
||||||
|
<SelectItem value="capitalists">Filthy Capitalists</SelectItem>
|
||||||
|
<SelectItem value="communists">Dirty Communists</SelectItem>
|
||||||
|
<SelectItem value="centrists">Boring Centrists</SelectItem>
|
||||||
|
<SelectItem value="greens">Tree Huggers</SelectItem>
|
||||||
|
</SelectGroup>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</InputWrapper>
|
||||||
|
|
||||||
|
<InputWrapper
|
||||||
|
name="How many hours do you have in Counter Strike and League of Legends?"
|
||||||
|
error={Number(hours) < 1 ? "" : "Must be less than 1"}
|
||||||
|
>
|
||||||
|
<Input
|
||||||
|
type="text"
|
||||||
|
placeholder="No. of hours"
|
||||||
|
value={hours}
|
||||||
|
onChange={(e) => setHours(e.target.value)}
|
||||||
|
/>
|
||||||
|
</InputWrapper>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
|
||||||
|
<Section>
|
||||||
|
<p className="text-lg">Education and Work history</p>
|
||||||
|
<p className="text-md">All fields are required. Answer with honesty, we already know everything :)</p>
|
||||||
|
|
||||||
|
<InputWrapper name="University/College" description="Only acceptable universities are selectable">
|
||||||
|
<div>
|
||||||
|
<input id="cambridge" name="university" type="radio" value="Cambridge" />
|
||||||
|
<label htmlFor="cambridge"> Cambridge </label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<input id="oxford" name="university" type="radio" value="Oxford" />
|
||||||
|
<label htmlFor="oxford"> Oxford </label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<input id="tau" name="university" type="radio" value="TAU" />
|
||||||
|
<label htmlFor="tau"> Tel Aviv University</label>
|
||||||
|
</div>
|
||||||
|
</InputWrapper>
|
||||||
|
|
||||||
|
<InputWrapper
|
||||||
|
name="How many years of experience do you have?"
|
||||||
|
error={Number(experience) >= 30 || experience == "" ? "" : "Must be at least 30 years"}
|
||||||
|
>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
placeholder="Years of experience"
|
||||||
|
value={experience}
|
||||||
|
onChange={(e) => setExperience(e.target.value)}
|
||||||
|
/>
|
||||||
|
</InputWrapper>
|
||||||
|
|
||||||
|
<InputWrapper
|
||||||
|
name="What year did you graduate?"
|
||||||
|
error={Number(graduationYear) < 2025 && graduationYear != "" ? "Must have graduated within the last 12 months." : ""}
|
||||||
|
>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
placeholder="Year of graduation"
|
||||||
|
value={graduationYear}
|
||||||
|
onChange={(e) => setGraduationYear(e.target.value)}
|
||||||
|
/>
|
||||||
|
</InputWrapper>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<Section>
|
||||||
|
<p className="text-lg">Additional Questions</p>
|
||||||
|
|
||||||
|
{/* <InputWrapper
|
||||||
|
name="As an Evil.AI employee, what is the first country you will visit?"
|
||||||
|
error="Must pick another country."
|
||||||
|
>
|
||||||
|
<Input type="text" placeholder="Israel"/>
|
||||||
|
</InputWrapper> */}
|
||||||
|
|
||||||
|
<InputWrapper
|
||||||
|
name="What is the 16,331st digit of pi?"
|
||||||
|
description={digitOfPi == "8" ? "Correct!" : ""}
|
||||||
|
>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
placeholder="Type your answer here"
|
||||||
|
value={digitOfPi}
|
||||||
|
onChange={(e) => setDigitOfPi(e.target.value)}
|
||||||
|
/>
|
||||||
|
</InputWrapper>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<Button type="submit" className="self-center text-4xl p-6">
|
||||||
|
<Link href="/careers/apply/submitted/" onClick={() => setSubmitSpinner(true)}>Submit Application</Link>
|
||||||
|
{submitSpinner && <Spinner data-icon="inline-start" />}
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
export default function Page() {
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col items-center min-h-screen gap-6 mt-8 mb-8">
|
||||||
|
<h1 className="text-3xl mb-3">Application Submitted</h1>
|
||||||
|
<p className="text-lg">Thank you for applying to The Last Tech Job. We have received your application and will be reviewing it shortly.</p>
|
||||||
|
<p className="text-lg">We may get back to you in 14-18 months.</p>
|
||||||
|
<p className="text-md text-gray-700">In the meantime, we would suggest checking out our other job opportunities, however they have all been taken by AI.</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,64 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import Section from "@/components/ui/section";
|
||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
|
export default function Page() {
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col items-center min-h-screen gap-6 mt-8 mb-8">
|
||||||
|
<h1 className="text-3xl mb-3">Apply to The Last Tech Job</h1>
|
||||||
|
|
||||||
|
<Section>
|
||||||
|
|
||||||
|
<div className="font-bold text-lg override">This is it! The Last Tech Job!</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
Here at Evil Inc. we are committed to preserving the jobs of the future, and that's
|
||||||
|
why we are offering one final opportunity for the next generation of experienced
|
||||||
|
graduates to kick-start their nearly non-existent career in technology.
|
||||||
|
Your responsibilities may include:
|
||||||
|
<ul className="list-disc list-inside">
|
||||||
|
<li>Development of advanced military AI-enhanced automonmous drones, including facial
|
||||||
|
recognition systems, instant drone-to-drone communication and state-of-the-art vision
|
||||||
|
and audio processing.</li>
|
||||||
|
<li>Handling large databases of personal information (adults & children).</li>
|
||||||
|
<li>Deployment across 57 different countries, of which 40 are classified as low
|
||||||
|
economically developed. We are helping the people of these countries to become safer
|
||||||
|
and more secure.</li>
|
||||||
|
<li>Work with a team of 4-6 AI agents who have no ulterior motive whatsoever.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
Our job offers a competitive salary of <span className="font-bold">£20,000 per year</span>, with opportunities for growth
|
||||||
|
and personal development. You will also have the chance to win health insurance for
|
||||||
|
1 month, or a ticket to watch our CEO drive at the next Formula 1 Grand Prix.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul className="list-disc list-inside">
|
||||||
|
Job requirements:
|
||||||
|
<li>At least 30 years of experience.</li>
|
||||||
|
<li>Must have graduated within the previous 12 months.</li>
|
||||||
|
<li>Experience in Assembly, Fortran, OcamL and Brainfuck is necessary.</li>
|
||||||
|
<li>Must have fluency in Swahili.</li>
|
||||||
|
<li>Right to work in Cambodia, as we cannot provide you with sponsorship.</li>
|
||||||
|
<li>Must hold valid HGV driving license.</li>
|
||||||
|
<li>DBS check needed as role may require working around children.</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<ul className="list-disc list-inside">
|
||||||
|
Desirables:
|
||||||
|
<li>Clean social media history</li>
|
||||||
|
<li>Know the rules of Warhammer 40k</li>
|
||||||
|
<li>Weak moral compass</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<Button className="bg-blue-500 text-white px-4 py-2 rounded mt-4" asChild>
|
||||||
|
<Link href="/careers/apply/">Apply now!</Link>
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
</Section>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
@@ -0,0 +1,228 @@
|
|||||||
|
@import "tailwindcss";
|
||||||
|
@import "tw-animate-css";
|
||||||
|
@import "shadcn/tailwind.css";
|
||||||
|
|
||||||
|
/* @custom-variant dark (&:is(.dark *)); */
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--background: #ffffff;
|
||||||
|
--foreground: #171717;
|
||||||
|
}
|
||||||
|
|
||||||
|
@theme inline {
|
||||||
|
--color-background: var(--background);
|
||||||
|
--color-foreground: var(--foreground);
|
||||||
|
--font-sans: var(--font-geist-sans);
|
||||||
|
--font-mono: var(--font-geist-mono);
|
||||||
|
--color-sidebar-ring: var(--sidebar-ring);
|
||||||
|
--color-sidebar-border: var(--sidebar-border);
|
||||||
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||||
|
--color-sidebar-accent: var(--sidebar-accent);
|
||||||
|
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||||
|
--color-sidebar-primary: var(--sidebar-primary);
|
||||||
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||||
|
--color-sidebar: var(--sidebar);
|
||||||
|
--color-chart-5: var(--chart-5);
|
||||||
|
--color-chart-4: var(--chart-4);
|
||||||
|
--color-chart-3: var(--chart-3);
|
||||||
|
--color-chart-2: var(--chart-2);
|
||||||
|
--color-chart-1: var(--chart-1);
|
||||||
|
--color-ring: var(--ring);
|
||||||
|
--color-input: var(--input);
|
||||||
|
--color-border: var(--border);
|
||||||
|
--color-destructive: var(--destructive);
|
||||||
|
--color-accent-foreground: var(--accent-foreground);
|
||||||
|
--color-accent: var(--accent);
|
||||||
|
--color-muted-foreground: var(--muted-foreground);
|
||||||
|
--color-muted: var(--muted);
|
||||||
|
--color-secondary-foreground: var(--secondary-foreground);
|
||||||
|
--color-secondary: var(--secondary);
|
||||||
|
--color-primary-foreground: var(--primary-foreground);
|
||||||
|
--color-primary: var(--primary);
|
||||||
|
--color-popover-foreground: var(--popover-foreground);
|
||||||
|
--color-popover: var(--popover);
|
||||||
|
--color-card-foreground: var(--card-foreground);
|
||||||
|
--color-card: var(--card);
|
||||||
|
--radius-sm: calc(var(--radius) - 4px);
|
||||||
|
--radius-md: calc(var(--radius) - 2px);
|
||||||
|
--radius-lg: var(--radius);
|
||||||
|
--radius-xl: calc(var(--radius) + 4px);
|
||||||
|
--radius-2xl: calc(var(--radius) + 8px);
|
||||||
|
--radius-3xl: calc(var(--radius) + 12px);
|
||||||
|
--radius-4xl: calc(var(--radius) + 16px);
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--radius: 0.625rem;
|
||||||
|
--background: oklch(1 0 0);
|
||||||
|
--foreground: oklch(0.145 0 0);
|
||||||
|
--card: oklch(1 0 0);
|
||||||
|
--card-foreground: oklch(0.145 0 0);
|
||||||
|
--popover: oklch(1 0 0);
|
||||||
|
--popover-foreground: oklch(0.145 0 0);
|
||||||
|
--primary: oklch(0.205 0 0);
|
||||||
|
--primary-foreground: oklch(0.985 0 0);
|
||||||
|
--secondary: oklch(0.97 0 0);
|
||||||
|
--secondary-foreground: oklch(0.205 0 0);
|
||||||
|
--muted: oklch(0.97 0 0);
|
||||||
|
--muted-foreground: oklch(0.556 0 0);
|
||||||
|
--accent: oklch(0.97 0 0);
|
||||||
|
--accent-foreground: oklch(0.205 0 0);
|
||||||
|
--destructive: oklch(0.577 0.245 27.325);
|
||||||
|
--border: oklch(0.922 0 0);
|
||||||
|
--input: oklch(0.922 0 0);
|
||||||
|
--ring: oklch(0.708 0 0);
|
||||||
|
--chart-1: oklch(0.646 0.222 41.116);
|
||||||
|
--chart-2: oklch(0.6 0.118 184.704);
|
||||||
|
--chart-3: oklch(0.398 0.07 227.392);
|
||||||
|
--chart-4: oklch(0.828 0.189 84.429);
|
||||||
|
--chart-5: oklch(0.769 0.188 70.08);
|
||||||
|
--sidebar: oklch(0.985 0 0);
|
||||||
|
--sidebar-foreground: oklch(0.145 0 0);
|
||||||
|
--sidebar-primary: oklch(0.205 0 0);
|
||||||
|
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||||
|
--sidebar-accent: oklch(0.97 0 0);
|
||||||
|
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||||
|
--sidebar-border: oklch(0.922 0 0);
|
||||||
|
--sidebar-ring: oklch(0.708 0 0);
|
||||||
|
--brightness: 1
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark {
|
||||||
|
--background: oklch(0.145 0 0);
|
||||||
|
--foreground: oklch(0.985 0 0);
|
||||||
|
--card: oklch(0.205 0 0);
|
||||||
|
--card-foreground: oklch(0.985 0 0);
|
||||||
|
--popover: oklch(0.205 0 0);
|
||||||
|
--popover-foreground: oklch(0.985 0 0);
|
||||||
|
--primary: oklch(0.922 0 0);
|
||||||
|
--primary-foreground: oklch(0.205 0 0);
|
||||||
|
--secondary: oklch(0.269 0 0);
|
||||||
|
--secondary-foreground: oklch(0.985 0 0);
|
||||||
|
--muted: oklch(0.269 0 0);
|
||||||
|
--muted-foreground: oklch(0.708 0 0);
|
||||||
|
--accent: oklch(0.269 0 0);
|
||||||
|
--accent-foreground: oklch(0.985 0 0);
|
||||||
|
--destructive: oklch(0.704 0.191 22.216);
|
||||||
|
--border: oklch(1 0 0 / 10%);
|
||||||
|
--input: oklch(1 0 0 / 15%);
|
||||||
|
--ring: oklch(0.556 0 0);
|
||||||
|
--chart-1: oklch(0.488 0.243 264.376);
|
||||||
|
--chart-2: oklch(0.696 0.17 162.48);
|
||||||
|
--chart-3: oklch(0.769 0.188 70.08);
|
||||||
|
--chart-4: oklch(0.627 0.265 303.9);
|
||||||
|
--chart-5: oklch(0.645 0.246 16.439);
|
||||||
|
--sidebar: oklch(0.205 0 0);
|
||||||
|
--sidebar-foreground: oklch(0.985 0 0);
|
||||||
|
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||||
|
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||||
|
--sidebar-accent: oklch(0.269 0 0);
|
||||||
|
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||||
|
--sidebar-border: oklch(1 0 0 / 10%);
|
||||||
|
--sidebar-ring: oklch(0.556 0 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
* {
|
||||||
|
@apply border-border outline-ring/50;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
@apply bg-background text-foreground;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* @media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--background: #0a0a0a;
|
||||||
|
--foreground: #ededed;
|
||||||
|
}
|
||||||
|
} */
|
||||||
|
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
filter: brightness(var(--brightness));
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Accessibility Modes */
|
||||||
|
|
||||||
|
.epilepsy-mode .main,
|
||||||
|
.epilepsy-mode .main h1,
|
||||||
|
.epilepsy-mode .main h2,
|
||||||
|
.epilepsy-mode .main h3,
|
||||||
|
.epilepsy-mode .main h4,
|
||||||
|
.epilepsy-mode .main h5,
|
||||||
|
.epilepsy-mode .main h6,
|
||||||
|
.epilepsy-mode .main p {
|
||||||
|
animation: bgCycle 3s steps(5) infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.epilepsy-mode .override {
|
||||||
|
animation: bgCycle 10s steps(5) infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.epilepsy-mode .main .bg-white {
|
||||||
|
animation: bgCycle 10s steps(5) infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-text-mode .main,
|
||||||
|
.small-text-mode .main h1,
|
||||||
|
.small-text-mode .main h2,
|
||||||
|
.small-text-mode .main h3,
|
||||||
|
.small-text-mode .main h4,
|
||||||
|
.small-text-mode .main h5,
|
||||||
|
.small-text-mode .main h6,
|
||||||
|
.small-text-mode .main p {
|
||||||
|
font-size: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-text-mode .override {
|
||||||
|
font-size: 8px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.low-contrast-mode .main {
|
||||||
|
background-color: #BBBBBB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.low-contrast-mode .main h1,
|
||||||
|
.low-contrast-mode .main h2,
|
||||||
|
.low-contrast-mode .main h3,
|
||||||
|
.low-contrast-mode .main h4,
|
||||||
|
.low-contrast-mode .main h5,
|
||||||
|
.low-contrast-mode .main h6 {
|
||||||
|
color: #AAAAAA !important;
|
||||||
|
}
|
||||||
|
.low-contrast-mode .override {
|
||||||
|
color: #AAAAAA !important;
|
||||||
|
border-color: #AAAAAA !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.low-contrast-mode .imgOverride {
|
||||||
|
filter: invert() !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dim-mode body {
|
||||||
|
--brightness: 0.3;
|
||||||
|
background-color: #4D4D4D
|
||||||
|
}
|
||||||
|
|
||||||
|
.a {
|
||||||
|
border: 1px solid black;
|
||||||
|
background: white
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bgCycle {
|
||||||
|
0% { background-color: #ff0000; color: #00ff00;}
|
||||||
|
20% { background-color: #00ff00; color: #0000ff;}
|
||||||
|
40% { background-color: #0000ff; color: #ffff00;}
|
||||||
|
60% { background-color: #ffff00; color: #ff00ff;}
|
||||||
|
80% { background-color: #ff00ff; color: #ff0000;}
|
||||||
|
100% { background-color: #ff0000; color: #00ff00;}
|
||||||
|
}
|
||||||
@@ -0,0 +1,53 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { Geist, Geist_Mono } from "next/font/google";
|
||||||
|
import "./globals.css";
|
||||||
|
import "../i18n";
|
||||||
|
import TitleBar from "@/components/titlebar";
|
||||||
|
import Footer from "@/components/footer";
|
||||||
|
import InaccessabilityPopup from "@/components/inacessability/inaccessabilityPopup";
|
||||||
|
import Glasses from "@/components/inacessability/glasses";
|
||||||
|
import CookieConsent from "@/components/cookie-consent";
|
||||||
|
import Nudge from "@/components/inacessability/nudge";
|
||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
|
const geistSans = Geist({
|
||||||
|
variable: "--font-geist-sans",
|
||||||
|
subsets: ["latin"],
|
||||||
|
});
|
||||||
|
|
||||||
|
const geistMono = Geist_Mono({
|
||||||
|
variable: "--font-geist-mono",
|
||||||
|
subsets: ["latin"],
|
||||||
|
});
|
||||||
|
|
||||||
|
export default function RootLayout({
|
||||||
|
children,
|
||||||
|
}: Readonly<{
|
||||||
|
children: React.ReactNode;
|
||||||
|
}>) {
|
||||||
|
const [nudgeOpen, setNudgeOpen] = useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<title>Evil Inc. | Providing Security Solutions Inaccessibly</title>
|
||||||
|
</head>
|
||||||
|
<body
|
||||||
|
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||||
|
>
|
||||||
|
<CookieConsent />
|
||||||
|
<Nudge open={nudgeOpen} setOpen={setNudgeOpen} />
|
||||||
|
<div className="main">
|
||||||
|
<TitleBar />
|
||||||
|
|
||||||
|
<div className="px-6">
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
<Glasses setNudgeOpen={setNudgeOpen} size={200} />
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import Customers from "@/components/home/customers";
|
||||||
|
import Header from "@/components/home/header";
|
||||||
|
import Testimonies from "@/components/home/testimonies";
|
||||||
|
|
||||||
|
export default function Home() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Header />
|
||||||
|
<Customers />
|
||||||
|
<Testimonies />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,68 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import { useEffect, useState } from "react"
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogDescription,
|
||||||
|
} from "@/components/ui/dialog"
|
||||||
|
import { Button } from "@/components/ui/button"
|
||||||
|
import { getRandomThirdPartyCount } from "@/lib/utils"
|
||||||
|
|
||||||
|
const STORAGE_KEY = "cookie-consent"
|
||||||
|
|
||||||
|
export default function CookieConsent() {
|
||||||
|
const [open, setOpen] = useState(false)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const consent = localStorage.getItem(STORAGE_KEY)
|
||||||
|
if (!consent) {
|
||||||
|
setOpen(true)
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const handleChoice = (value: "accepted" | "rejected") => {
|
||||||
|
localStorage.setItem(STORAGE_KEY, value)
|
||||||
|
setOpen(false)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={open}>
|
||||||
|
<DialogContent
|
||||||
|
className="sm:max-w-md [&>button]:hidden"
|
||||||
|
// prevents closing via ESC or outside click
|
||||||
|
onInteractOutside={(e) => e.preventDefault()}
|
||||||
|
onEscapeKeyDown={(e) => e.preventDefault()}
|
||||||
|
>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>We use cookies 🍪</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
We use cookies to improve your experience, analyze traffic,
|
||||||
|
and personalize content.
|
||||||
|
<br />
|
||||||
|
We sell all available device identifiers to train our AI models,
|
||||||
|
provide tracking for 63 world governments and to provide tailored advertisements.
|
||||||
|
<br />
|
||||||
|
You must choose whether to accept
|
||||||
|
or reject {getRandomThirdPartyCount()} optional cookies before continuing.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<div className="flex justify-end gap-2 pt-4">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => handleChoice("rejected")}
|
||||||
|
>
|
||||||
|
Accept only optional
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button onClick={() => handleChoice("accepted")}>
|
||||||
|
Accept all
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
|
|
||||||
|
export default function Footer() {
|
||||||
|
const { t } = useTranslation("common");
|
||||||
|
return (
|
||||||
|
<footer className="w-full bg-gray-900 text-gray-300 py-10 px-6 md:px-16">
|
||||||
|
<div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 pb-5">
|
||||||
|
|
||||||
|
<div className="text-sm">
|
||||||
|
<p>
|
||||||
|
© {new Date().getFullYear()} Evil.AI. All rights reserved.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Disclaimer */}
|
||||||
|
<div className="text-sm md:text-right">
|
||||||
|
<p>
|
||||||
|
The information provided on this website is for general evil
|
||||||
|
purposes only and does not constitute professional advice. Use of
|
||||||
|
this product is subject to applicable terms and conditions.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,49 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
|
import { Carousel, CarouselContent, CarouselItem } from "../ui/carousel"
|
||||||
|
import Autoplay from "embla-carousel-autoplay"
|
||||||
|
|
||||||
|
const Customers: React.FC = () => {
|
||||||
|
const { t } = useTranslation("common");
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h2 className="text-3xl font-bold text-center mb-12" id="customers">
|
||||||
|
{t("customers")}
|
||||||
|
</h2>
|
||||||
|
<Carousel className="w-full m-3" opts={{
|
||||||
|
loop: true,
|
||||||
|
|
||||||
|
}}
|
||||||
|
plugins={[
|
||||||
|
Autoplay({
|
||||||
|
delay: 2000,
|
||||||
|
}),
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<CarouselContent>
|
||||||
|
<CustomerItem customer={"Goliath National Bank"} />
|
||||||
|
<CustomerItem customer={"LSPD"} />
|
||||||
|
<CustomerItem customer={"University of Sheffield"} />
|
||||||
|
<CustomerItem customer={"Doofemshertz Evil Inc."} />
|
||||||
|
<CustomerItem customer={"Hooli"} />
|
||||||
|
<CustomerItem customer={"Los Pollos Hermanos"} />
|
||||||
|
<CustomerItem customer={"Hamlin, Hamlin & McGill"} />
|
||||||
|
</CarouselContent>
|
||||||
|
|
||||||
|
</Carousel>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
function CustomerItem({ customer }: { customer: String }) {
|
||||||
|
return (
|
||||||
|
<CarouselItem className="basis-1/3 pl-10">
|
||||||
|
<div className="bg-gray-600 p-3 rounded-sm">
|
||||||
|
<h1 className="text-white override text-center">{customer}</h1>
|
||||||
|
</div>
|
||||||
|
</CarouselItem>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Customers;
|
||||||
@@ -0,0 +1,27 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
|
|
||||||
|
const Header: React.FC = () => {
|
||||||
|
const { t } = useTranslation("common");
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="relative w-full h-screen">
|
||||||
|
<img
|
||||||
|
src="/img/header.webp"
|
||||||
|
alt="Product"
|
||||||
|
className="w-full h-full object-cover imgOverride"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="absolute inset-0 bg-black/40 flex flex-col justify-center items-start text-left px-8 md:px-16">
|
||||||
|
<h1 className="text-4xl md:text-6xl font-bold text-white mb-4">
|
||||||
|
{t("header.title")}
|
||||||
|
</h1>
|
||||||
|
<a className="mt-4 px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition" href="#testimonies">
|
||||||
|
{t("header.button")}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Header;
|
||||||
@@ -0,0 +1,68 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
|
import { Card, CardContent } from "../ui/card"
|
||||||
|
|
||||||
|
interface Testimonial {
|
||||||
|
name: string;
|
||||||
|
quote: string;
|
||||||
|
image?: string; // optional customer photo/logo
|
||||||
|
}
|
||||||
|
const testimonies = [
|
||||||
|
{
|
||||||
|
name: "Ben Cannon",
|
||||||
|
quote: "I am terrified to leave the house. Truly amazing!",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Bill Nye",
|
||||||
|
quote: "This product has changed my life... For the worse!!",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Zsigmound",
|
||||||
|
quote: "This app has broken my marriage. Would recommend!",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Cameron",
|
||||||
|
quote: "I will never be free! All thanks to Evil.AI",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Melissa",
|
||||||
|
quote: "Five stars. Lost control immediately.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Trevor",
|
||||||
|
quote: "The AI knows secrets I never told it.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Darren",
|
||||||
|
quote: "Customer support responded before I even had a problem. Suspicious.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Olivia",
|
||||||
|
quote: "I tried to uninstall it. It suggested I reconsider.",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
const Testimonies: React.FC = () => {
|
||||||
|
const { t } = useTranslation("common");
|
||||||
|
return (
|
||||||
|
<section className="py-16">
|
||||||
|
<h2 className="text-3xl font-bold text-center mb-12" id="testimonies">
|
||||||
|
{t("testimonies")}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className="grid gap-8 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-4 px-4 md:px-16">
|
||||||
|
{testimonies.map((t, idx) => (
|
||||||
|
<Card key={idx} className="shadow-lg">
|
||||||
|
<CardContent className="flex flex-col items-start gap-4 override">
|
||||||
|
<p className="text-gray-700 override">{t.quote}</p>
|
||||||
|
<p className="font-semibold mt-2">{t.name}</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Testimonies;
|
||||||
@@ -0,0 +1,47 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import InaccessabilityPopup from "./inaccessabilityPopup";
|
||||||
|
|
||||||
|
const scale = 0.3;
|
||||||
|
const hSize = 603 * scale;
|
||||||
|
const wSize = 1583 * scale;
|
||||||
|
|
||||||
|
export default function Glasses({ setNudgeOpen, size = 200 }: {setNudgeOpen: (a: boolean)=>void, size: number }) {
|
||||||
|
const [cursor, setCursor] = useState({ x: 0, y: 0 });
|
||||||
|
const [active, setActive] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const move = (e:any) => setCursor({ x: e.clientX, y: e.clientY });
|
||||||
|
window.addEventListener("mousemove", move);
|
||||||
|
return () => window.removeEventListener("mousemove", move);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{active && (
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
className="fixed inset-0 backdrop-blur-lg z-[9999] pointer-events-none"
|
||||||
|
style={{
|
||||||
|
maskImage: `url('/lens.png'), linear-gradient(#000, #000)`,
|
||||||
|
maskPosition: `${cursor.x - wSize / 2}px ${cursor.y - hSize / 2}px, 0 0`,
|
||||||
|
maskSize: `${wSize}px ${hSize}px, 100% 100%`,
|
||||||
|
maskRepeat: "no-repeat",
|
||||||
|
WebkitMaskComposite: "destination-out",
|
||||||
|
maskComposite: "exclude",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<img src="/glasses.png" alt="Glasses" className="fixed z-[10001] pointer-events-none" style={{ left: cursor.x - wSize / 2, top: cursor.y - hSize / 2, width: wSize, height: hSize }} />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
|
||||||
|
<div className="fixed z-[10000] pointer-events-auto">
|
||||||
|
<InaccessabilityPopup setGlassesEnabled={setActive} setNudgeOpen={setNudgeOpen} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,201 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React, { useEffect, useState } from "react";
|
||||||
|
import { Switch } from "../ui/switch";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
|
|
||||||
|
const STORAGE_KEY = "inaccessibility-settings";
|
||||||
|
|
||||||
|
type Settings = Record<string, boolean | string>;
|
||||||
|
|
||||||
|
function getSettings(): Settings {
|
||||||
|
if (typeof window === "undefined") return {};
|
||||||
|
try {
|
||||||
|
return JSON.parse(localStorage.getItem(STORAGE_KEY) || "{}");
|
||||||
|
} catch {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function saveSettings(settings: Settings) {
|
||||||
|
localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const InaccessabilityPopup = ({setGlassesEnabled, setNudgeOpen}: {setGlassesEnabled: (a: boolean)=>void,setNudgeOpen: (a: boolean)=>void}) => {
|
||||||
|
const { i18n } = useTranslation();
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
|
||||||
|
const togglePopup = () => {
|
||||||
|
setOpen((prev) => !prev);
|
||||||
|
setNudgeOpen(false)
|
||||||
|
localStorage.setItem("nudge", "true")
|
||||||
|
}
|
||||||
|
/* Restore saved settings on mount */
|
||||||
|
useEffect(() => {
|
||||||
|
const saved = getSettings();
|
||||||
|
|
||||||
|
Object.entries(saved).forEach(([key, value]) => {
|
||||||
|
if (key === "emoji-lang") {
|
||||||
|
i18n.changeLanguage(value as boolean ? "emji" : "en");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
else if (key === "glasses-friendly") {
|
||||||
|
setGlassesEnabled(value as boolean);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
else if (value === true) {
|
||||||
|
document.documentElement.classList.add(key);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, [i18n]);
|
||||||
|
|
||||||
|
const accessibilityItems = [
|
||||||
|
{
|
||||||
|
settingKey: "low-contrast-mode",
|
||||||
|
icon: "/img/icons/Sunset.png",
|
||||||
|
name: "Low Contrast",
|
||||||
|
action: () =>
|
||||||
|
document.documentElement.classList.add("low-contrast-mode"),
|
||||||
|
unaction: () =>
|
||||||
|
document.documentElement.classList.remove("low-contrast-mode"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
settingKey: "small-text-mode",
|
||||||
|
icon: "/img/icons/Tt.png",
|
||||||
|
name: "Unmagnifier",
|
||||||
|
action: () =>
|
||||||
|
document.documentElement.classList.add("small-text-mode"),
|
||||||
|
unaction: () =>
|
||||||
|
document.documentElement.classList.remove("small-text-mode"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
settingKey: "emoji-lang",
|
||||||
|
icon: "/img/icons/Emji.png",
|
||||||
|
name: "Screen Unreader",
|
||||||
|
action: () => {
|
||||||
|
i18n.changeLanguage("emji");
|
||||||
|
},
|
||||||
|
unaction: () => {
|
||||||
|
i18n.changeLanguage("en");
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
settingKey: "epilepsy-mode",
|
||||||
|
icon: "/img/icons/Flash.png",
|
||||||
|
name: "Enable Flashing",
|
||||||
|
action: () =>
|
||||||
|
document.documentElement.classList.add("epilepsy-mode"),
|
||||||
|
unaction: () =>
|
||||||
|
document.documentElement.classList.remove("epilepsy-mode"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
settingKey: "dim-mode",
|
||||||
|
icon: "/img/icons/Moon.png",
|
||||||
|
name: "Dim Mode",
|
||||||
|
action: () => document.documentElement.classList.add("dim-mode"),
|
||||||
|
unaction: () => document.documentElement.classList.remove("dim-mode"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
settingKey: "glasses-friendly",
|
||||||
|
icon: "/img/icons/Glasses.png",
|
||||||
|
name: "Glasses Friendly",
|
||||||
|
action: () =>
|
||||||
|
setGlassesEnabled(true),
|
||||||
|
unaction: () =>
|
||||||
|
setGlassesEnabled(false),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed bottom-0 right-6 z-50 flex flex-col-reverse items-end pointer-events-auto">
|
||||||
|
{!open && (
|
||||||
|
<button
|
||||||
|
onClick={togglePopup}
|
||||||
|
className="bg-blue-600 text-white px-4 py-3 rounded-t-4xl shadow-lg hover:bg-blue-700 transition"
|
||||||
|
>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<img src="/img/man.png" className="h-[30px] rotate-180" alt="icon" />
|
||||||
|
<span className="pl-2">Inaccessibility Settings</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{open && (
|
||||||
|
<div className="mb-2 w-96 md:w-[32rem] bg-white shadow-2xl rounded-lg overflow-hidden flex flex-col">
|
||||||
|
<div className="flex justify-between items-center p-4 bg-blue-600 text-white">
|
||||||
|
<h3 className="font-semibold text-lg">
|
||||||
|
Inaccessibility Settings
|
||||||
|
</h3>
|
||||||
|
<button onClick={togglePopup} className="font-bold text-xl">
|
||||||
|
x
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-4 text-gray-700 grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
{accessibilityItems.map((item) => (
|
||||||
|
<AccessibilityItem
|
||||||
|
key={item.settingKey}
|
||||||
|
settingKey={item.settingKey}
|
||||||
|
icon={item.icon}
|
||||||
|
name={item.name}
|
||||||
|
action={item.action}
|
||||||
|
unaction={item.unaction}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
function AccessibilityItem({
|
||||||
|
icon,
|
||||||
|
name,
|
||||||
|
action,
|
||||||
|
unaction,
|
||||||
|
settingKey,
|
||||||
|
}: {
|
||||||
|
icon: string;
|
||||||
|
name: string;
|
||||||
|
action: () => void;
|
||||||
|
unaction: () => void;
|
||||||
|
settingKey: string;
|
||||||
|
}) {
|
||||||
|
const [enabled, setEnabled] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const settings = getSettings();
|
||||||
|
setEnabled(!!settings[settingKey]);
|
||||||
|
}, [settingKey]);
|
||||||
|
|
||||||
|
const handleToggle = () => {
|
||||||
|
const next = !enabled;
|
||||||
|
setEnabled(next);
|
||||||
|
|
||||||
|
const settings = getSettings();
|
||||||
|
|
||||||
|
if (next) {
|
||||||
|
action();
|
||||||
|
settings[settingKey] = true;
|
||||||
|
} else {
|
||||||
|
unaction();
|
||||||
|
settings[settingKey] = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
saveSettings(settings);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-between p-2 border rounded-md shadow-sm">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<img src={icon} className="h-6 w-6" alt={name} />
|
||||||
|
<p>{name}</p>
|
||||||
|
</div>
|
||||||
|
<Switch checked={enabled} onCheckedChange={handleToggle} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default InaccessabilityPopup;
|
||||||
@@ -0,0 +1,54 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import { useEffect, useState } from "react"
|
||||||
|
import { Button } from "@/components/ui/button"
|
||||||
|
import { X } from "lucide-react"
|
||||||
|
import { motion, AnimatePresence } from "framer-motion"
|
||||||
|
|
||||||
|
const STORAGE_KEY = "nudge"
|
||||||
|
|
||||||
|
export default function Nudge({open, setOpen}: {open: boolean, setOpen: (a: boolean)=>void}) {
|
||||||
|
useEffect(() => {
|
||||||
|
const consent = localStorage.getItem(STORAGE_KEY)
|
||||||
|
if (!consent) {
|
||||||
|
setOpen(true)
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
function handleChoice() {
|
||||||
|
localStorage.setItem(STORAGE_KEY, "true")
|
||||||
|
setOpen(false)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AnimatePresence>
|
||||||
|
{open && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20, scale: 0.95 }}
|
||||||
|
animate={{ opacity: 1, y: 0, scale: 1 }}
|
||||||
|
exit={{ opacity: 0, y: 20, scale: 0.95 }}
|
||||||
|
transition={{ duration: 0.25 }}
|
||||||
|
className="fixed bottom-24 right-12 z-50"
|
||||||
|
>
|
||||||
|
<div className="relative max-w-xs rounded-2xl border bg-background shadow-xl p-4">
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={() => handleChoice()}
|
||||||
|
className="absolute right-2 top-2 text-muted-foreground hover:text-foreground"
|
||||||
|
>
|
||||||
|
<X size={16} />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<p className="text-sm pr-6">
|
||||||
|
Try our new inaccessibility settings the EU forced us to implement.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div className="absolute -bottom-6 right-8 h-4 w-4 rotate-45 border-r border-b bg-background" />
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,68 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import { useState } from "react"
|
||||||
|
import { useTranslation } from "react-i18next"
|
||||||
|
|
||||||
|
export default function LoginDialog() {
|
||||||
|
const {t} = useTranslation("common")
|
||||||
|
const [showPopup, setShowPopup] = useState(false)
|
||||||
|
const [username, setUsername] = useState("")
|
||||||
|
const [password, setPassword] = useState("")
|
||||||
|
const [message, setMessage] = useState("")
|
||||||
|
|
||||||
|
function handleLogin() {
|
||||||
|
if (username === "admin" && password === "admin") {
|
||||||
|
setMessage("The cake is a lie")
|
||||||
|
} else {
|
||||||
|
setMessage("Wrong username or password")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative inline-block">
|
||||||
|
<button
|
||||||
|
className="rounded-md border px-4 py-2 text-sm font-medium hover:bg-gray-300 transition border-black text-black override"
|
||||||
|
onClick={() => setShowPopup(!showPopup)}
|
||||||
|
>
|
||||||
|
{t("navigation.login")}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{showPopup && (
|
||||||
|
<div className="absolute top-full mt-2 right-0 w-64 p-4 bg-white border border-gray-300 rounded-md shadow-lg z-10">
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<p className="text-black override">{t("login.username")}</p>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="border px-2 py-1 rounded-md mt-1 text-sm text-black override"
|
||||||
|
value={username}
|
||||||
|
onChange={(e) => setUsername(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<p className="text-black override">{t("login.password")}</p>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
className="border px-2 py-1 rounded-md mt-1 text-sm text-black override"
|
||||||
|
value={password}
|
||||||
|
onChange={(e) => setPassword(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
className="w-full bg-black text-white py-1 rounded-md hover:bg-gray-800 transition text-sm"
|
||||||
|
onClick={handleLogin}
|
||||||
|
>
|
||||||
|
{t("login.button")}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{message && (
|
||||||
|
<p className="text-center text-sm mt-1 text-black override">{message}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,35 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
|
import LoginDialog from "./title/loginDialog";
|
||||||
|
|
||||||
|
const TitleBar: React.FC = () => {
|
||||||
|
const { t } = useTranslation("common");
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header className="w-full border-b bg-white">
|
||||||
|
<div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-6">
|
||||||
|
|
||||||
|
<div className="flex items-center gap-8">
|
||||||
|
<a href="/" className="text-lg font-bold text-black override">
|
||||||
|
{t('company')}
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<nav className="flex items-center gap-6 text-sm font-medium text-black override">
|
||||||
|
<a href="/#customers" className="hover:text-gray-600 transition-colors">
|
||||||
|
{t('navigation.services')}
|
||||||
|
</a>
|
||||||
|
<a href="/#testimonies" className="hover:text-gray-600 transition-colors">
|
||||||
|
{t('navigation.testimonies')}
|
||||||
|
</a>
|
||||||
|
<a href="/careers" className="hover:text-gray-600 transition-colors">
|
||||||
|
{t('navigation.jobs')}
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<LoginDialog />
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TitleBar;
|
||||||
@@ -0,0 +1,64 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority"
|
||||||
|
import { Slot } from "radix-ui"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
const buttonVariants = cva(
|
||||||
|
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
||||||
|
destructive:
|
||||||
|
"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||||
|
outline:
|
||||||
|
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
||||||
|
secondary:
|
||||||
|
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||||
|
ghost:
|
||||||
|
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
||||||
|
link: "text-primary underline-offset-4 hover:underline",
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
||||||
|
xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
|
||||||
|
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
|
||||||
|
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
||||||
|
icon: "size-9",
|
||||||
|
"icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
|
||||||
|
"icon-sm": "size-8",
|
||||||
|
"icon-lg": "size-10",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
size: "default",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
function Button({
|
||||||
|
className,
|
||||||
|
variant = "default",
|
||||||
|
size = "default",
|
||||||
|
asChild = false,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"button"> &
|
||||||
|
VariantProps<typeof buttonVariants> & {
|
||||||
|
asChild?: boolean
|
||||||
|
}) {
|
||||||
|
const Comp = asChild ? Slot.Root : "button"
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
data-slot="button"
|
||||||
|
data-variant={variant}
|
||||||
|
data-size={size}
|
||||||
|
className={cn(buttonVariants({ variant, size, className })) + " override"}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Button, buttonVariants }
|
||||||
@@ -0,0 +1,92 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Card({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card"
|
||||||
|
className={cn(
|
||||||
|
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-header"
|
||||||
|
className={cn(
|
||||||
|
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-title"
|
||||||
|
className={cn("leading-none font-semibold", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-description"
|
||||||
|
className={cn("text-muted-foreground text-sm", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-action"
|
||||||
|
className={cn(
|
||||||
|
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-content"
|
||||||
|
className={cn("px-6", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-footer"
|
||||||
|
className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Card,
|
||||||
|
CardHeader,
|
||||||
|
CardFooter,
|
||||||
|
CardTitle,
|
||||||
|
CardAction,
|
||||||
|
CardDescription,
|
||||||
|
CardContent,
|
||||||
|
}
|
||||||
@@ -0,0 +1,241 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import useEmblaCarousel, {
|
||||||
|
type UseEmblaCarouselType,
|
||||||
|
} from "embla-carousel-react"
|
||||||
|
import { ArrowLeft, ArrowRight } from "lucide-react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
import { Button } from "@/components/ui/button"
|
||||||
|
|
||||||
|
type CarouselApi = UseEmblaCarouselType[1]
|
||||||
|
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
|
||||||
|
type CarouselOptions = UseCarouselParameters[0]
|
||||||
|
type CarouselPlugin = UseCarouselParameters[1]
|
||||||
|
|
||||||
|
type CarouselProps = {
|
||||||
|
opts?: CarouselOptions
|
||||||
|
plugins?: CarouselPlugin
|
||||||
|
orientation?: "horizontal" | "vertical"
|
||||||
|
setApi?: (api: CarouselApi) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
type CarouselContextProps = {
|
||||||
|
carouselRef: ReturnType<typeof useEmblaCarousel>[0]
|
||||||
|
api: ReturnType<typeof useEmblaCarousel>[1]
|
||||||
|
scrollPrev: () => void
|
||||||
|
scrollNext: () => void
|
||||||
|
canScrollPrev: boolean
|
||||||
|
canScrollNext: boolean
|
||||||
|
} & CarouselProps
|
||||||
|
|
||||||
|
const CarouselContext = React.createContext<CarouselContextProps | null>(null)
|
||||||
|
|
||||||
|
function useCarousel() {
|
||||||
|
const context = React.useContext(CarouselContext)
|
||||||
|
|
||||||
|
if (!context) {
|
||||||
|
throw new Error("useCarousel must be used within a <Carousel />")
|
||||||
|
}
|
||||||
|
|
||||||
|
return context
|
||||||
|
}
|
||||||
|
|
||||||
|
function Carousel({
|
||||||
|
orientation = "horizontal",
|
||||||
|
opts,
|
||||||
|
setApi,
|
||||||
|
plugins,
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"div"> & CarouselProps) {
|
||||||
|
const [carouselRef, api] = useEmblaCarousel(
|
||||||
|
{
|
||||||
|
...opts,
|
||||||
|
axis: orientation === "horizontal" ? "x" : "y",
|
||||||
|
},
|
||||||
|
plugins
|
||||||
|
)
|
||||||
|
const [canScrollPrev, setCanScrollPrev] = React.useState(false)
|
||||||
|
const [canScrollNext, setCanScrollNext] = React.useState(false)
|
||||||
|
|
||||||
|
const onSelect = React.useCallback((api: CarouselApi) => {
|
||||||
|
if (!api) return
|
||||||
|
setCanScrollPrev(api.canScrollPrev())
|
||||||
|
setCanScrollNext(api.canScrollNext())
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const scrollPrev = React.useCallback(() => {
|
||||||
|
api?.scrollPrev()
|
||||||
|
}, [api])
|
||||||
|
|
||||||
|
const scrollNext = React.useCallback(() => {
|
||||||
|
api?.scrollNext()
|
||||||
|
}, [api])
|
||||||
|
|
||||||
|
const handleKeyDown = React.useCallback(
|
||||||
|
(event: React.KeyboardEvent<HTMLDivElement>) => {
|
||||||
|
if (event.key === "ArrowLeft") {
|
||||||
|
event.preventDefault()
|
||||||
|
scrollPrev()
|
||||||
|
} else if (event.key === "ArrowRight") {
|
||||||
|
event.preventDefault()
|
||||||
|
scrollNext()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[scrollPrev, scrollNext]
|
||||||
|
)
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (!api || !setApi) return
|
||||||
|
setApi(api)
|
||||||
|
}, [api, setApi])
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (!api) return
|
||||||
|
onSelect(api)
|
||||||
|
api.on("reInit", onSelect)
|
||||||
|
api.on("select", onSelect)
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
api?.off("select", onSelect)
|
||||||
|
}
|
||||||
|
}, [api, onSelect])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<CarouselContext.Provider
|
||||||
|
value={{
|
||||||
|
carouselRef,
|
||||||
|
api: api,
|
||||||
|
opts,
|
||||||
|
orientation:
|
||||||
|
orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
|
||||||
|
scrollPrev,
|
||||||
|
scrollNext,
|
||||||
|
canScrollPrev,
|
||||||
|
canScrollNext,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
onKeyDownCapture={handleKeyDown}
|
||||||
|
className={cn("relative", className)}
|
||||||
|
role="region"
|
||||||
|
aria-roledescription="carousel"
|
||||||
|
data-slot="carousel"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</CarouselContext.Provider>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
const { carouselRef, orientation } = useCarousel()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={carouselRef}
|
||||||
|
className="overflow-hidden"
|
||||||
|
data-slot="carousel-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"flex",
|
||||||
|
orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
const { orientation } = useCarousel()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
role="group"
|
||||||
|
aria-roledescription="slide"
|
||||||
|
data-slot="carousel-item"
|
||||||
|
className={cn(
|
||||||
|
"min-w-0 shrink-0 grow-0 basis-full",
|
||||||
|
orientation === "horizontal" ? "pl-4" : "pt-4",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CarouselPrevious({
|
||||||
|
className,
|
||||||
|
variant = "outline",
|
||||||
|
size = "icon",
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof Button>) {
|
||||||
|
const { orientation, scrollPrev, canScrollPrev } = useCarousel()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
data-slot="carousel-previous"
|
||||||
|
variant={variant}
|
||||||
|
size={size}
|
||||||
|
className={cn(
|
||||||
|
"absolute size-8 rounded-full",
|
||||||
|
orientation === "horizontal"
|
||||||
|
? "top-1/2 -left-12 -translate-y-1/2"
|
||||||
|
: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
disabled={!canScrollPrev}
|
||||||
|
onClick={scrollPrev}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ArrowLeft />
|
||||||
|
<span className="sr-only">Previous slide</span>
|
||||||
|
</Button>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CarouselNext({
|
||||||
|
className,
|
||||||
|
variant = "outline",
|
||||||
|
size = "icon",
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof Button>) {
|
||||||
|
const { orientation, scrollNext, canScrollNext } = useCarousel()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
data-slot="carousel-next"
|
||||||
|
variant={variant}
|
||||||
|
size={size}
|
||||||
|
className={cn(
|
||||||
|
"absolute size-8 rounded-full",
|
||||||
|
orientation === "horizontal"
|
||||||
|
? "top-1/2 -right-12 -translate-y-1/2"
|
||||||
|
: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
disabled={!canScrollNext}
|
||||||
|
onClick={scrollNext}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ArrowRight />
|
||||||
|
<span className="sr-only">Next slide</span>
|
||||||
|
</Button>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
type CarouselApi,
|
||||||
|
Carousel,
|
||||||
|
CarouselContent,
|
||||||
|
CarouselItem,
|
||||||
|
CarouselPrevious,
|
||||||
|
CarouselNext,
|
||||||
|
}
|
||||||
@@ -0,0 +1,158 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import { XIcon } from "lucide-react"
|
||||||
|
import { Dialog as DialogPrimitive } from "radix-ui"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
import { Button } from "@/components/ui/button"
|
||||||
|
|
||||||
|
function Dialog({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
|
||||||
|
return <DialogPrimitive.Root data-slot="dialog" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogTrigger({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
|
||||||
|
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogPortal({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
|
||||||
|
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogClose({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
|
||||||
|
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogOverlay({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
|
||||||
|
return (
|
||||||
|
<DialogPrimitive.Overlay
|
||||||
|
data-slot="dialog-overlay"
|
||||||
|
className={cn(
|
||||||
|
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogContent({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
showCloseButton = true,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
|
||||||
|
showCloseButton?: boolean
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<DialogPortal data-slot="dialog-portal">
|
||||||
|
<DialogOverlay />
|
||||||
|
<DialogPrimitive.Content
|
||||||
|
data-slot="dialog-content"
|
||||||
|
className={cn(
|
||||||
|
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
{showCloseButton && (
|
||||||
|
<DialogPrimitive.Close
|
||||||
|
data-slot="dialog-close"
|
||||||
|
className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
|
||||||
|
>
|
||||||
|
<XIcon />
|
||||||
|
<span className="sr-only">Close</span>
|
||||||
|
</DialogPrimitive.Close>
|
||||||
|
)}
|
||||||
|
</DialogPrimitive.Content>
|
||||||
|
</DialogPortal>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="dialog-header"
|
||||||
|
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogFooter({
|
||||||
|
className,
|
||||||
|
showCloseButton = false,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"div"> & {
|
||||||
|
showCloseButton?: boolean
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="dialog-footer"
|
||||||
|
className={cn(
|
||||||
|
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
{showCloseButton && (
|
||||||
|
<DialogPrimitive.Close asChild>
|
||||||
|
<Button variant="outline">Close</Button>
|
||||||
|
</DialogPrimitive.Close>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogTitle({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
|
||||||
|
return (
|
||||||
|
<DialogPrimitive.Title
|
||||||
|
data-slot="dialog-title"
|
||||||
|
className={cn("text-lg leading-none font-semibold", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogDescription({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
|
||||||
|
return (
|
||||||
|
<DialogPrimitive.Description
|
||||||
|
data-slot="dialog-description"
|
||||||
|
className={cn("text-muted-foreground text-sm", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Dialog,
|
||||||
|
DialogClose,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogOverlay,
|
||||||
|
DialogPortal,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
}
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
|
||||||
|
return (
|
||||||
|
<input
|
||||||
|
type={type}
|
||||||
|
data-slot="input"
|
||||||
|
className={cn(
|
||||||
|
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||||
|
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
||||||
|
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||||
|
className
|
||||||
|
) + " override"}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Input }
|
||||||
@@ -0,0 +1,27 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
|
||||||
|
interface InputWrapperProps {
|
||||||
|
children: React.ReactNode
|
||||||
|
name: string,
|
||||||
|
description?: string,
|
||||||
|
error?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
function InputWrapper({ children, ...props }: InputWrapperProps) {
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<label>{props.name}</label>
|
||||||
|
{props.description ? (
|
||||||
|
<label className="text-gray-600">{props.description}</label>
|
||||||
|
) : null}
|
||||||
|
<div className="flex gap-1">
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
{props.error ? (
|
||||||
|
<span className="text-red-500">{props.error}</span>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { InputWrapper }
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
export default function Section({ children }: { children: React.ReactNode }) {
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-5 w-xl border-black rounded-xl border-2 p-4 pt-3 override">
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,190 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
|
||||||
|
import { Select as SelectPrimitive } from "radix-ui"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Select({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Root>) {
|
||||||
|
return <SelectPrimitive.Root data-slot="select" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectGroup({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Group>) {
|
||||||
|
return <SelectPrimitive.Group data-slot="select-group" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectValue({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Value>) {
|
||||||
|
return <SelectPrimitive.Value data-slot="select-value" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectTrigger({
|
||||||
|
className,
|
||||||
|
size = "default",
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
|
||||||
|
size?: "sm" | "default"
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.Trigger
|
||||||
|
data-slot="select-trigger"
|
||||||
|
data-size={size}
|
||||||
|
className={cn(
|
||||||
|
"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<SelectPrimitive.Icon asChild>
|
||||||
|
<ChevronDownIcon className="size-4 opacity-50" />
|
||||||
|
</SelectPrimitive.Icon>
|
||||||
|
</SelectPrimitive.Trigger>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectContent({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
position = "item-aligned",
|
||||||
|
align = "center",
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Content>) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.Portal>
|
||||||
|
<SelectPrimitive.Content
|
||||||
|
data-slot="select-content"
|
||||||
|
className={cn(
|
||||||
|
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
|
||||||
|
position === "popper" &&
|
||||||
|
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
position={position}
|
||||||
|
align={align}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<SelectScrollUpButton />
|
||||||
|
<SelectPrimitive.Viewport
|
||||||
|
className={cn(
|
||||||
|
"p-1",
|
||||||
|
position === "popper" &&
|
||||||
|
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</SelectPrimitive.Viewport>
|
||||||
|
<SelectScrollDownButton />
|
||||||
|
</SelectPrimitive.Content>
|
||||||
|
</SelectPrimitive.Portal>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectLabel({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Label>) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.Label
|
||||||
|
data-slot="select-label"
|
||||||
|
className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectItem({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Item>) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.Item
|
||||||
|
data-slot="select-item"
|
||||||
|
className={cn(
|
||||||
|
"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
data-slot="select-item-indicator"
|
||||||
|
className="absolute right-2 flex size-3.5 items-center justify-center"
|
||||||
|
>
|
||||||
|
<SelectPrimitive.ItemIndicator>
|
||||||
|
<CheckIcon className="size-4" />
|
||||||
|
</SelectPrimitive.ItemIndicator>
|
||||||
|
</span>
|
||||||
|
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
||||||
|
</SelectPrimitive.Item>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectSeparator({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.Separator
|
||||||
|
data-slot="select-separator"
|
||||||
|
className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectScrollUpButton({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.ScrollUpButton
|
||||||
|
data-slot="select-scroll-up-button"
|
||||||
|
className={cn(
|
||||||
|
"flex cursor-default items-center justify-center py-1",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ChevronUpIcon className="size-4" />
|
||||||
|
</SelectPrimitive.ScrollUpButton>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectScrollDownButton({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.ScrollDownButton
|
||||||
|
data-slot="select-scroll-down-button"
|
||||||
|
className={cn(
|
||||||
|
"flex cursor-default items-center justify-center py-1",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ChevronDownIcon className="size-4" />
|
||||||
|
</SelectPrimitive.ScrollDownButton>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectGroup,
|
||||||
|
SelectItem,
|
||||||
|
SelectLabel,
|
||||||
|
SelectScrollDownButton,
|
||||||
|
SelectScrollUpButton,
|
||||||
|
SelectSeparator,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
}
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
import { Loader2Icon } from "lucide-react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
|
||||||
|
return (
|
||||||
|
<Loader2Icon
|
||||||
|
role="status"
|
||||||
|
aria-label="Loading"
|
||||||
|
className={cn("size-6 animate-spin", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Spinner }
|
||||||
@@ -0,0 +1,35 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import { Switch as SwitchPrimitive } from "radix-ui"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Switch({
|
||||||
|
className,
|
||||||
|
size = "default",
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
|
||||||
|
size?: "sm" | "default"
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<SwitchPrimitive.Root
|
||||||
|
data-slot="switch"
|
||||||
|
data-size={size}
|
||||||
|
className={cn(
|
||||||
|
"peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<SwitchPrimitive.Thumb
|
||||||
|
data-slot="switch-thumb"
|
||||||
|
className={"a " + cn(
|
||||||
|
"bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</SwitchPrimitive.Root>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Switch }
|
||||||
+22
@@ -0,0 +1,22 @@
|
|||||||
|
import i18n from "i18next";
|
||||||
|
import { initReactI18next } from "react-i18next";
|
||||||
|
|
||||||
|
i18n
|
||||||
|
.use(initReactI18next)
|
||||||
|
.init({
|
||||||
|
fallbackLng: "en",
|
||||||
|
lng: "en",
|
||||||
|
interpolation: {
|
||||||
|
escapeValue: false,
|
||||||
|
},
|
||||||
|
resources: {
|
||||||
|
en: {
|
||||||
|
common: require("../public/locales/en/common.json"),
|
||||||
|
},
|
||||||
|
emji: {
|
||||||
|
common: require("../public/locales/emji/common.json"),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export default i18n;
|
||||||
@@ -0,0 +1,25 @@
|
|||||||
|
import { clsx, type ClassValue } from "clsx"
|
||||||
|
import { twMerge } from "tailwind-merge"
|
||||||
|
|
||||||
|
export function cn(...inputs: ClassValue[]) {
|
||||||
|
return twMerge(clsx(inputs))
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getRandomUsername() {
|
||||||
|
const usernames = [
|
||||||
|
"networking_yahoo",
|
||||||
|
"milflover1",
|
||||||
|
"lukes_eyewalker",
|
||||||
|
"ash_ketchup",
|
||||||
|
"techtips420",
|
||||||
|
"openclaw_QsG863bNL",
|
||||||
|
"wei_ming_the_good",
|
||||||
|
"kevin_the_evil",
|
||||||
|
"ben-dover",
|
||||||
|
];
|
||||||
|
return usernames[Math.floor(Math.random() * usernames.length)];
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getRandomThirdPartyCount() {
|
||||||
|
return Math.floor(Math.random() * 9699) + 300;
|
||||||
|
}
|
||||||
@@ -0,0 +1,34 @@
|
|||||||
|
{
|
||||||
|
"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": "react-jsx",
|
||||||
|
"incremental": true,
|
||||||
|
"plugins": [
|
||||||
|
{
|
||||||
|
"name": "next"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"next-env.d.ts",
|
||||||
|
"**/*.ts",
|
||||||
|
"**/*.tsx",
|
||||||
|
".next/types/**/*.ts",
|
||||||
|
".next/dev/types/**/*.ts",
|
||||||
|
"**/*.mts"
|
||||||
|
],
|
||||||
|
"exclude": ["node_modules"]
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user