selimaj-dev/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated layout and background

Browse Source
This commit is contained in:
selimaj-dev
2025-09-21 19:46:11 +02:00
parent 70c1a3f528
commit fae6b16bb6
17 changed files with 713 additions and 796 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pricing/page.tsx
-181
View File
@@ -1,181 +0,0 @@
import {
faCheck,
faCode,
faDatabase,
faRocket,
faWrench,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
export default function Pricing() {
return (
<div>
{/* <Background /> */}
<div className="content-center w-full lg:mx-auto pt-16 lg:pt-0 relative z-20 pb-16 md:pb-0 animate-fadeIn">
<div className="w-full max-w-screen-lg mx-auto px-4 md:px-10">
<h1 className="pt-10 w-max mx-auto text-red-400">Pricing plans</h1>
<div className="pt-10 h-full grid grid-cols-1 lg:grid-cols-2 grid-rows-2 gap-8">
<div className="h-full rounded-xl bg-transparent-ish border border-red p-9">
<FontAwesomeIcon
className="mx-auto text-red-600 w-6"
icon={faCode}
/>
<h1 className="w-max mx-auto text-red-400">Standard</h1>
<h2 className="text-2xl w-max mx-auto text-red">$25</h2>
<ul className="pt-4 list-none space-y-2">
<li className="flex items-center">
<FontAwesomeIcon
className="text-green-500 mr-2"
icon={faCheck}
width={14}
/>
24-48 hours
</li>
<li className="flex items-center">
<FontAwesomeIcon
className="text-green-500 mr-2"
icon={faCheck}
width={14}
/>
Simple projects or tasks (e.g., bug fixes)
</li>
<li className="flex items-center">
<FontAwesomeIcon
className="text-green-500 mr-2"
icon={faCheck}
width={14}
/>
Response via Email or Discord
</li>
</ul>
</div>
<div className="h-full rounded-xl bg-transparent-ish border border-red p-9">
<FontAwesomeIcon
className="mx-auto text-red-600 w-6"
icon={faRocket}
/>
<h1 className="w-max mx-auto text-red-400">Premium</h1>
<h2 className="text-2xl w-max mx-auto text-red">$50</h2>
<ul className="pt-4 list-none space-y-2">
<li className="flex items-center">
<FontAwesomeIcon
className="text-green-500 mr-2"
icon={faCheck}
width={14}
/>
Up to a week
</li>
<li className="flex items-center">
<FontAwesomeIcon
className="text-green-500 mr-2"
icon={faCheck}
width={14}
/>
Complex projects
</li>
<li className="flex items-center">
<FontAwesomeIcon
className="text-green-500 mr-2"
icon={faCheck}
width={14}
/>
Large tasks (e.g., refractoring, bug hunting)
</li>
<li className="flex items-center">
<FontAwesomeIcon
className="text-green-500 mr-2"
icon={faCheck}
width={14}
/>
Documenting
</li>
</ul>
</div>
<div className="h-full rounded-xl bg-transparent-ish border border-red p-9">
<FontAwesomeIcon
className="mx-auto text-red-600 w-6"
icon={faDatabase}
/>
<h1 className="w-max mx-auto text-red-400">Enterprise</h1>
<h2 className="text-2xl w-max mx-auto text-red">$200</h2>
<ul className="pt-4 list-none space-y-2">
<li className="flex items-center">
<FontAwesomeIcon
className="text-green-500 mr-2"
icon={faCheck}
width={14}
/>
Up to a month
</li>
<li className="flex items-center">
<FontAwesomeIcon
className="text-green-500 mr-2"
icon={faCheck}
width={14}
/>
Large, Complex projects
</li>
<li className="flex items-center">
<FontAwesomeIcon
className="text-green-500 mr-2"
icon={faCheck}
width={14}
/>
Higher priority
</li>
</ul>
</div>
<div className="h-full rounded-xl bg-transparent-ish border border-red p-9">
<FontAwesomeIcon
className="mx-auto text-red-600 w-6"
icon={faWrench}
/>
<h1 className="w-max mx-auto text-red-400">Maintenance</h1>
<h2 className="text-2xl w-max mx-auto text-red">$40-150 / mo</h2>
<ul className="pt-4 list-none space-y-2">
<li className="flex items-center">
<FontAwesomeIcon
className="text-green-500 mr-2"
icon={faCheck}
width={14}
/>
Weekly bug checks & fixes
</li>
<li className="flex items-center">
<FontAwesomeIcon
className="text-green-500 mr-2"
icon={faCheck}
width={14}
/>
Cybersecurity pen testing
</li>
<li className="flex items-center">
<FontAwesomeIcon
className="text-green-500 mr-2"
icon={faCheck}
width={14}
/>
Feature requests
</li>
<li className="flex items-center">
<FontAwesomeIcon
className="text-green-500 mr-2"
icon={faCheck}
width={14}
/>
Performance Optimization
</li>
</ul>
</div>
</div>
<p className="md:mx-auto md:w-max">NOTE: if the project requires more than a month there will be a extra payments</p>
</div>
</div>
</div>
);
}