Skip to content

Commit 35c7bf9

Browse files
devwithzaindevwithzain
committed
Completed
1 parent 1327d7f commit 35c7bf9

File tree

1 file changed

+154
-0
lines changed

1 file changed

+154
-0
lines changed

‎components/Hero-section/Hero.tsx

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
"use client";
2+
import Link from "next/link";
3+
import Image from "next/image";
4+
import { useState } from "react";
5+
import { Navbar } from "@components";
6+
import { motion } from "framer-motion";
7+
import { collabBracket } from "@public";
8+
import { heroBrandsItem } from "@constants";
9+
10+
export default function Hero() {
11+
const [hovered1, setHovered1] = useState<boolean>(false);
12+
return (
13+
<div className="w-full relative min-h-screen">
14+
<Navbar />
15+
<div className="w-full min-h-[90vh] flex flex-col items-center justify-center pt-20">
16+
<div className="flex w-full">
17+
<div className="flex flex-col items-center md:mx-10">
18+
<motion.div
19+
initial={{ opacity: 0 }}
20+
whileInView={{ opacity: 1 }}
21+
transition={{ delay: 0.5 }}
22+
className="relative w-[20px">
23+
<div className="border-2 border-[#ffffff4d] w-[20px] h-[20px] rounded-full" />
24+
<span className="absolute left-0 top-0 h-full w-full home-campaign-glowing-icon-glow-2 z-3" />
25+
</motion.div>
26+
<motion.div
27+
initial={{ height: 0 }}
28+
whileInView={{ height: "100%" }}
29+
transition={{ delay: 0.8 }}
30+
className="h-full w-[4px] mt-2 rounded-md bg-gradient-to-b from-transparent to-[#7C72FF]"
31+
/>
32+
</div>
33+
<motion.div
34+
initial={{ opacity: 0, x: -30 }}
35+
whileInView={{ opacity: 1, x: 0 }}
36+
transition={{ delay: 0.6, type: "tween" }}
37+
className="w-full mb-20 max-md:ml-4">
38+
<h1 className="relative z-2 max-md:mb-5 text-[48px] md:text-[72px] max-sm:leading-[60px] max-md:leading-[80px] lg:text-[80px] font-semibold text-white">
39+
{" "}
40+
Let&apos;s build from&nbsp;here
41+
</h1>
42+
<p className="relative z-1 text-[24px] md:text-[28px] lg:text-[32px] leading-[30px] md:leading-[36px] lg:leading-[44px] text-[#7d8590]">
43+
The world’s leading AI-powered developer platform.
44+
</p>
45+
</motion.div>
46+
</div>
47+
<div className="flex relative w-full">
48+
<div className="flex flex-col items-center md:mx-10 relative">
49+
<motion.div
50+
initial={{ opacity: 0 }}
51+
whileInView={{ opacity: 1 }}
52+
transition={{ delay: 1 }}
53+
className="relative w-[20px] my-6">
54+
<Image
55+
src={collabBracket}
56+
alt="bracket"
57+
className="text-white"
58+
width={20}
59+
height={20}
60+
/>
61+
<span className="absolute left-0 top-0 h-full w-full home-campaign-glowing-icon-glow-2 z-3" />
62+
</motion.div>
63+
<motion.div
64+
initial={{ height: 0 }}
65+
whileInView={{ height: "100%" }}
66+
transition={{ delay: 1.2 }}
67+
className="h-full w-[4px] rounded-md bg-gradient-to-b from-[#7C72FF] via-[#2DA44E ] to-[#3FB950]"
68+
/>
69+
</div>
70+
<div className="w-full h-full max-md:ml-4">
71+
<div className="flex lg:w-11/12 lg:space-x-5 max-lg:flex-col max-lg:gap-y-5">
72+
<form action="">
73+
<div className="grid max-md:grid-rows-2 md:grid-cols-[300px_minmax(200px,_1fr)]">
74+
<dl>
75+
<dd>
76+
<input
77+
className="h-12 focus:outline-none max-md:rounded-md md:rounded-s-md right-0 w-full placeholder:text-[16px] pl-3"
78+
placeholder="Email address"
79+
type="email"
80+
name="user_email"
81+
id="user_email"
82+
autoComplete="off"
83+
spellCheck="false"
84+
/>
85+
</dd>
86+
</dl>
87+
<button
88+
type="button"
89+
className="mb-10 md:mb-0 py-3 w-full home-campaign-signup-button text-[16px] max-md:rounded-md md:rounded-e-md text-white font-semibold">
90+
Sign up for GitHub
91+
</button>
92+
</div>
93+
</form>
94+
<span className="border-t-[1px] md:border-l-[1px] border-neutral-700 md:mx-10 mb-3 md:mb-0" />
95+
<Link
96+
onMouseEnter={() => setHovered1(true)}
97+
onMouseLeave={() => setHovered1(false)}
98+
href=""
99+
className="flex items-center w-full lg:w-[30%] justify-center text-[16px] py-3 px-3 max-md:mt-4 rounded-md border-[#ae88f9] border-[1.5px] text-white">
100+
Start a free enterprise trial
101+
<svg
102+
xmlns="http://www.w3.org/2000/svg"
103+
className={` arrow-symbol-mktg text-white ml-3 transition ease-in duration-150 ${
104+
hovered1 ? "translate-x-0 " : "-translate-x-1"
105+
}`}
106+
width="20"
107+
height="20"
108+
viewBox="0 0 16 16"
109+
fill="none">
110+
<path
111+
fill="currentColor"
112+
d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"
113+
/>
114+
<path
115+
className={` text-white transition ease-in duration-150 ${
116+
hovered1 ? " opacity-100" : "opacity-0 "
117+
}`}
118+
stroke="currentColor"
119+
d="M1.75 8H11"
120+
strokeWidth="1.5"
121+
strokeLinecap="round"
122+
/>
123+
</svg>
124+
</Link>
125+
</div>
126+
<div className="md:my-20 my-8">
127+
<p className="text-[20px] leading-[24px] text-[#7d8590]">
128+
Trusted by the world&apos;s leading&nbsp;organizations&nbsp;
129+
<span className="bg-blue-600 px-1 py-[0.3px] text-[12px]">
130+
↘︎
131+
</span>
132+
</p>
133+
<div className="flex flex-wrap gap-x-5 items-center w-full lg:w-[70%] justify-between">
134+
{heroBrandsItem.map((item) => (
135+
<div
136+
className="w-[70px] items-center h-[70px]"
137+
key={item.id}>
138+
<Image
139+
src={item.src}
140+
alt="Stripe logo"
141+
height="70"
142+
width="70"
143+
className="my-5 w-full h-full"
144+
/>
145+
</div>
146+
))}
147+
</div>
148+
</div>
149+
</div>
150+
</div>
151+
</div>
152+
</div>
153+
);
154+
}

0 commit comments

Comments
 (0)