299 lines
12 KiB
JavaScript
299 lines
12 KiB
JavaScript
"use client";
|
|
|
|
import React from "react";
|
|
import { PinContainer } from "./components/3d-pin";
|
|
|
|
export default function HomePage() {
|
|
return (
|
|
<div>
|
|
<p className="font-bold mb-5 text-white sm:text-2xl md:text-3xl text-center z-[1000] mt-5">
|
|
A small selection of
|
|
<span className="text-[#CBACF9]"> recent project</span>
|
|
</p>
|
|
<main className="min-h-screen w-[80%] mx-auto grid grid-cols-1 md:grid md:grid-cols-2 gap-x-0 gap-y-52 place-items-center bg-[#010217] py-20">
|
|
<PinContainer>
|
|
<div
|
|
className="w-[400px] h-[400px] text-white text-lg font-bold space-y-5 flex flex-col justify-between p-5 rounded-xl"
|
|
style={{
|
|
background:
|
|
"linear-gradient(103.4deg, #04071D 16.66%, #0C0E23 81.61%)",
|
|
}}
|
|
>
|
|
<div className="space-y-4">
|
|
<div className="relative w-[500px] h-[200px]">
|
|
{/* الصورة الخلفية */}
|
|
<img
|
|
src="/f.png"
|
|
alt="bg image"
|
|
className=" w-full h-full object-cover "
|
|
/>
|
|
|
|
{/* الصورة الأمامية */}
|
|
<img
|
|
src="/1.png"
|
|
alt="ai content image"
|
|
className="absolute bottom-0 left-20 w-[230px] h-[180px] z-10"
|
|
/>
|
|
</div>
|
|
|
|
<p className="font-bold">AI Image SaaS - Canva Application</p>
|
|
<p className="font-normal text-sm text-[#BEC1DD]">
|
|
A REAL Software-as-a-Service app with AI features and a payments
|
|
and credits system using the latest tech stack.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex justify-between items-center">
|
|
<div className="flex items-center gap-4">
|
|
<img
|
|
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg"
|
|
alt="TypeScript"
|
|
className="w-5 h-5"
|
|
/>
|
|
<img
|
|
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nextjs/nextjs-original.svg"
|
|
alt="Next.js"
|
|
className="w-5 h-5 invert"
|
|
/>
|
|
<img
|
|
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg"
|
|
alt="JavaScript"
|
|
className="w-5 h-5"
|
|
/>
|
|
<img
|
|
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg"
|
|
alt="Vue.js"
|
|
className="w-5 h-5"
|
|
/>
|
|
<img
|
|
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg"
|
|
alt="HTML5"
|
|
className="w-5 h-5"
|
|
/>
|
|
<img
|
|
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-original.svg"
|
|
alt="CSS3"
|
|
className="w-5 h-5"
|
|
/>
|
|
</div>
|
|
<p className="text-[#CBACF9] font-thin">check live site</p>
|
|
</div>
|
|
</div>
|
|
</PinContainer>
|
|
|
|
<PinContainer>
|
|
<div
|
|
className="w-[400px] h-[400px] text-white text-lg font-bold flex flex-col justify-between p-5 rounded-xl bg-cover bg-center"
|
|
style={{
|
|
background:
|
|
"linear-gradient(103.4deg, #04071D 16.66%, #0C0E23 81.61%)",
|
|
}}
|
|
>
|
|
<div className="space-y-4 flex flex-col items-center">
|
|
<div className="relative w-[500px] h-[200px]">
|
|
{/* الصورة الخلفية */}
|
|
<img
|
|
src="/f.png"
|
|
alt="bg image"
|
|
className="absolute inset-0 w-full h-full object-cover "
|
|
/>
|
|
|
|
{/* الصورة الأمامية */}
|
|
<img
|
|
src="/99.png"
|
|
alt="ai content image"
|
|
className="absolute bottom-0 left-32 w-[250px] h-[180px] z-10"
|
|
/>
|
|
</div>
|
|
|
|
<p className="font-bold relative z-10 -left-10">
|
|
Yoom - Video Conferencing App
|
|
</p>
|
|
<p className="font-normal text-sm relative z-10 text-[#BEC1DD] ">
|
|
Simplify your video conferencing experience with Yoom.
|
|
Seamlessly connect with colleagues and friends.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex justify-between items-center">
|
|
<div className="flex items-center gap-4">
|
|
<img
|
|
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg"
|
|
alt="TypeScript"
|
|
className="w-5 h-5"
|
|
/>
|
|
<img
|
|
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nextjs/nextjs-original.svg"
|
|
alt="Next.js"
|
|
className="w-5 h-5 invert"
|
|
/>
|
|
<img
|
|
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg"
|
|
alt="JavaScript"
|
|
className="w-5 h-5"
|
|
/>
|
|
<img
|
|
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg"
|
|
alt="Vue.js"
|
|
className="w-5 h-5"
|
|
/>
|
|
<img
|
|
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg"
|
|
alt="HTML5"
|
|
className="w-5 h-5"
|
|
/>
|
|
<img
|
|
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-original.svg"
|
|
alt="CSS3"
|
|
className="w-5 h-5"
|
|
/>
|
|
</div>
|
|
<p className="text-[#CBACF9] font-thin">check live site</p>
|
|
</div>
|
|
</div>
|
|
</PinContainer>
|
|
|
|
<PinContainer>
|
|
<div
|
|
className="w-[400px] h-[400px] text-white text-lg font-bold space-y-5 flex flex-col justify-between p-5 rounded-xl"
|
|
style={{
|
|
background:
|
|
"linear-gradient(103.4deg, #04071D 16.66%, #0C0E23 81.61%)",
|
|
}}
|
|
>
|
|
<div className="space-y-4">
|
|
<div className="relative w-[500px] h-[200px]">
|
|
{/* الصورة الخلفية */}
|
|
<img
|
|
src="/f.png"
|
|
alt="bg image"
|
|
className="absolute inset-0 w-full h-full object-cover "
|
|
/>
|
|
|
|
{/* الصورة الأمامية */}
|
|
<img
|
|
src="/234.png"
|
|
alt="ai content image"
|
|
className="absolute bottom-0 left-16 w-[250px] h-[180px] z-10"
|
|
/>
|
|
</div>
|
|
|
|
<p className="font-bold">3D Solar System Planets to Explore</p>
|
|
<p className="font-normal text-sm text-[#BEC1DD]">
|
|
Explore the wonders of our solar system with this captivating 3D
|
|
simulation of the planets using Three.js.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex justify-between items-center">
|
|
<div className="flex items-center gap-4">
|
|
<img
|
|
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg"
|
|
alt="TypeScript"
|
|
className="w-5 h-5"
|
|
/>
|
|
<img
|
|
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nextjs/nextjs-original.svg"
|
|
alt="Next.js"
|
|
className="w-5 h-5 invert"
|
|
/>
|
|
<img
|
|
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg"
|
|
alt="JavaScript"
|
|
className="w-5 h-5"
|
|
/>
|
|
<img
|
|
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg"
|
|
alt="Vue.js"
|
|
className="w-5 h-5"
|
|
/>
|
|
<img
|
|
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg"
|
|
alt="HTML5"
|
|
className="w-5 h-5"
|
|
/>
|
|
<img
|
|
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-original.svg"
|
|
alt="CSS3"
|
|
className="w-5 h-5"
|
|
/>
|
|
</div>
|
|
<p className="text-[#CBACF9] font-thin">check live site</p>
|
|
</div>
|
|
</div>
|
|
</PinContainer>
|
|
|
|
<PinContainer>
|
|
<div
|
|
className="w-[400px] h-[400px] text-white text-lg font-bold space-y-5 flex flex-col justify-between p-5 rounded-xl"
|
|
style={{
|
|
background:
|
|
"linear-gradient(103.4deg, #04071D 16.66%, #0C0E23 81.61%)",
|
|
}}
|
|
>
|
|
<div className="space-y-4">
|
|
<div className="relative w-[500px] h-[200px]">
|
|
{/* الصورة الخلفية */}
|
|
<img
|
|
src="/f.png"
|
|
alt="bg image"
|
|
className="absolute inset-0 w-full h-full object-cover "
|
|
/>
|
|
|
|
{/* الصورة الأمامية */}
|
|
<img
|
|
src="/66.png"
|
|
alt="ai content image"
|
|
className="absolute bottom-0 left-16 w-[250px] h-[180px] z-10"
|
|
/>
|
|
</div>
|
|
|
|
<p className="font-bold">Animated Apple Iphone 3D Website</p>
|
|
<p className="font-normal text-sm text-[#BEC1DD]">
|
|
Recreated the Apple iPhone 15 Pro website, combining GSAP
|
|
animations and Three.js 3D effects.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex justify-between items-center">
|
|
<div className="flex items-center gap-4">
|
|
<img
|
|
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg"
|
|
alt="TypeScript"
|
|
className="w-5 h-5"
|
|
/>
|
|
<img
|
|
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nextjs/nextjs-original.svg"
|
|
alt="Next.js"
|
|
className="w-5 h-5 invert"
|
|
/>
|
|
<img
|
|
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg"
|
|
alt="JavaScript"
|
|
className="w-5 h-5"
|
|
/>
|
|
<img
|
|
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg"
|
|
alt="Vue.js"
|
|
className="w-5 h-5"
|
|
/>
|
|
<img
|
|
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg"
|
|
alt="HTML5"
|
|
className="w-5 h-5"
|
|
/>
|
|
<img
|
|
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-original.svg"
|
|
alt="CSS3"
|
|
className="w-5 h-5"
|
|
/>
|
|
</div>
|
|
<p className="text-[#CBACF9] font-thin">check live site</p>
|
|
</div>
|
|
</div>
|
|
</PinContainer>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|