57 lines
1.9 KiB
JavaScript
57 lines
1.9 KiB
JavaScript
import React from "react";
|
|
import { Spotlight } from "./components/SpotLight";
|
|
import { GridBackgroundDemo } from "./components/Line";
|
|
import { Button } from "./components/Button";
|
|
import { TextGenerateEffect } from "./components/text-generate-effect";
|
|
|
|
import { FloatingNav } from "./components/Navbar";
|
|
|
|
function Hero() {
|
|
return (
|
|
<div className="relative bg-[#010217] overflow-hidden p-4 h-screen flex flex-col justify-center items-center">
|
|
<FloatingNav />
|
|
|
|
{/* خلفية الخطوط */}
|
|
<GridBackgroundDemo />
|
|
|
|
{/* Spotlights */}
|
|
<Spotlight
|
|
className="absolute top-[20%] left-[80px] opacity-70 z-10 pointer-events-none"
|
|
fill="white"
|
|
/>
|
|
<Spotlight
|
|
className="absolute top-[20%] left-[240px] opacity-20 z-10 pointer-events-none"
|
|
fill="purple"
|
|
/>
|
|
<Spotlight
|
|
className="absolute top-[10%] left-[90%] opacity-100 z-30 pointer-events-none"
|
|
fill="white"
|
|
/>
|
|
|
|
{/* المحتوى النصي */}
|
|
<div className="absolute top-50 left-1/2 transform -translate-x-1/2 z-40 text-white text-center px-4">
|
|
<h1 className="capitalize">dynamic web magic with next.js</h1>
|
|
<TextGenerateEffect className="text-[#caccdc] text-center font-bold sm:text-xl md:text-4xl capitalize">
|
|
<>
|
|
<p className="text-[#caccdc] ">
|
|
{" "}
|
|
transforming concepts into seamless
|
|
</p>{" "}
|
|
<span className="text-fuchsia-300 text-5xl">user experiences</span>
|
|
<h1 className="text-sm font-normal mt-3 text-[#caccdc] ">
|
|
Hi, I'm Adrian, a Next.js developer based in Croatia.
|
|
</h1>
|
|
</>
|
|
</TextGenerateEffect>
|
|
</div>
|
|
|
|
{/* زرار Show my Work */}
|
|
<div className="flex relative bottom-10 z-40">
|
|
<Button className={"w-52"}>Show my Work</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Hero;
|