Skip to content

Commit e94eac8

Browse files
buddhimac111buddhimac111
committed
Feat: Landing page Hero section
1 parent 8da894e commit e94eac8

File tree

5 files changed

+206
-7
lines changed

5 files changed

+206
-7
lines changed

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@
1010
"email": "email dev --dir src/email"
1111
},
1212
"dependencies": {
13+
"@headlessui/react": "^1.7.17",
14+
"@heroicons/react": "^2.0.18",
1315
"@types/node": "20.5.1",
1416
"@types/nodemailer": "^6.4.9",
1517
"@types/react": "18.2.20",

‎public/images/FOSS_logo.png

13.9 KB
Loading

‎public/images/hero_logo.jpg

2.01 MB
Loading

‎src/components/landing/HeroLanding.tsx

+191-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,192 @@
1-
const HeroLanding = () => {
2-
return (
3-
<div>HeroLanding</div>
4-
)
5-
}
1+
/* This example requires Tailwind CSS v3.0+ */
2+
import { useState , useEffect } from 'react'
3+
import { Dialog } from '@headlessui/react'
4+
import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
5+
import Image from 'next/image'
6+
7+
const navigation = [
8+
{ name: 'Events', href: 'events/sfd-2023' },
9+
{ name: 'Blogs', href: 'https://medium.com/foss-nsbm' },
10+
]
11+
12+
export default function Example() {
13+
14+
const [animate, setAnimate] = useState(true);
615

7-
export default HeroLanding;
16+
useEffect(() => {
17+
// Remove the animation class after a delay (adjust the delay as needed)
18+
const animationTimeout = setTimeout(() => {
19+
setAnimate(false);
20+
}, 1500); // Remove the class after 2 seconds (adjust as needed)
21+
22+
return () => {
23+
clearTimeout(animationTimeout); // Clear the timeout if the component unmounts
24+
};
25+
}, []);
26+
27+
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
28+
29+
return (
30+
<div className="relative isolate overflow-hidden bg-gray-900">
31+
<Image
32+
src='/images/hero_logo.jpg'
33+
className="absolute inset-0 -z-10 object-cover opacity-[15%]"
34+
alt='hero-image'
35+
fill
36+
/>
37+
{/* <img
38+
src="/images/hero_logo.jpg"
39+
alt=""
40+
41+
/> */}
42+
<div className="absolute inset-x-0 top-[-10rem] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[-20rem]">
43+
<svg
44+
className="relative left-[calc(50%-11rem)] -z-10 h-[21.1875rem] max-w-none -translate-x-1/2 rotate-[30deg] sm:left-[calc(50%-30rem)] sm:h-[42.375rem]"
45+
viewBox="0 0 1155 678"
46+
>
47+
<path
48+
fill="url(#45de2b6b-92d5-4d68-a6a0-9b9b2abad533)"
49+
fillOpacity=".2"
50+
d="M317.219 518.975L203.852 678 0 438.341l317.219 80.634 204.172-286.402c1.307 132.337 45.083 346.658 209.733 145.248C936.936 126.058 882.053-94.234 1031.02 41.331c119.18 108.451 130.68 295.337 121.53 375.223L855 299l21.173 362.054-558.954-142.079z"
51+
/>
52+
<defs>
53+
<linearGradient
54+
id="45de2b6b-92d5-4d68-a6a0-9b9b2abad533"
55+
x1="1155.49"
56+
x2="-78.208"
57+
y1=".177"
58+
y2="474.645"
59+
gradientUnits="userSpaceOnUse"
60+
>
61+
<stop stopColor="#9089FC" />
62+
<stop offset={1} stopColor="#FF80B5" />
63+
</linearGradient>
64+
</defs>
65+
</svg>
66+
</div>
67+
<div className="px-6 lg:px-8">
68+
<nav className="flex items-center justify-between pt-6 md:ms-20 md:me-20" aria-label="Global">
69+
<div className="flex lg:flex-1">
70+
<a href="#" className="-m-1.5 p-1.5">
71+
<span className="sr-only">Your Company</span>
72+
<Image
73+
src='/images/FOSS_logo.png'
74+
alt='sfd-logo'
75+
width={60}
76+
height={0}
77+
className='cursor-pointer'
78+
/>
79+
</a>
80+
</div>
81+
<div className="flex lg:hidden">
82+
<button
83+
type="button"
84+
className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-white"
85+
onClick={() => setMobileMenuOpen(true)}
86+
>
87+
<span className="sr-only">Open main menu</span>
88+
<Bars3Icon className="h-6 w-6" aria-hidden="true" />
89+
</button>
90+
</div>
91+
<div className="hidden lg:flex lg:gap-x-12">
92+
{navigation.map((item) => (
93+
<a key={item.name} href={item.href} className="text-sm font-semibold leading-6 text-white">
94+
{item.name}
95+
</a>
96+
))}
97+
</div>
98+
{/* <div className="hidden lg:flex lg:flex-1 lg:justify-end">
99+
<a href="#" className="text-sm font-semibold leading-6 text-white">
100+
Log in <span aria-hidden="true">&rarr;</span>
101+
</a>
102+
</div> */}
103+
</nav>
104+
<Dialog as="div" open={mobileMenuOpen} onClose={setMobileMenuOpen}>
105+
<Dialog.Panel className="fixed inset-0 z-10 overflow-y-auto bg-black px-6 py-6 lg:hidden">
106+
<div className="flex items-center justify-between">
107+
<a href="#" className="-m-1.5 p-1.5">
108+
<span className="sr-only">Your Company</span>
109+
<Image
110+
src='/images/FOSS_logo.png'
111+
alt='sfd-logo'
112+
width={60}
113+
height={0}
114+
className='cursor-pointer'
115+
/>
116+
</a>
117+
<button
118+
type="button"
119+
className="-m-2.5 rounded-md p-2.5 text-white"
120+
onClick={() => setMobileMenuOpen(false)}
121+
>
122+
<span className="sr-only">Close menu</span>
123+
<XMarkIcon className="h-6 w-6" aria-hidden="true" />
124+
</button>
125+
</div>
126+
<div className="mt-6 flow-root">
127+
<div className="-my-6 divide-y divide-gray-500/25">
128+
<div className="space-y-2 py-6">
129+
{navigation.map((item) => (
130+
<a
131+
key={item.name}
132+
href={item.href}
133+
className="-mx-3 block rounded-lg py-2 px-3 text-base font-semibold leading-7 text-white hover:bg-gray-400/10"
134+
>
135+
{item.name}
136+
</a>
137+
))}
138+
</div>
139+
</div>
140+
</div>
141+
</Dialog.Panel>
142+
</Dialog>
143+
<div className="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
144+
<div className="text-center">
145+
<h1 className={`text-4xl font-bold tracking-tight text-white sm:text-6xl ${animate ? 'animate-bounce' : ''}`}>
146+
FOSS COMMUNITY NSBM
147+
</h1>
148+
<p className="mt-6 text-lg leading-8 text-gray">
149+
Contribute to the society with developments and new concepts transforming young lives to feel as a part of the world{"'"}s largest developing community.
150+
</p>
151+
{/* <div className="mt-10 flex items-center justify-center gap-x-6">
152+
<a
153+
href="#"
154+
className="rounded-md bg-indigo-500 px-3.5 py-1.5 text-base font-semibold leading-7 text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400"
155+
>
156+
Get started
157+
</a>
158+
<a href="#" className="text-base font-semibold leading-7 text-white">
159+
Learn more <span aria-hidden="true">→</span>
160+
</a>
161+
</div> */}
162+
</div>
163+
</div>
164+
</div>
165+
<div className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]">
166+
<svg
167+
className="relative left-[calc(50%+3rem)] h-[21.1875rem] max-w-none -translate-x-1/2 sm:left-[calc(50%+36rem)] sm:h-[42.375rem]"
168+
viewBox="0 0 1155 678"
169+
>
170+
<path
171+
fill="url(#ecb5b0c9-546c-4772-8c71-4d3f06d544bc)"
172+
fillOpacity=".2"
173+
d="M317.219 518.975L203.852 678 0 438.341l317.219 80.634 204.172-286.402c1.307 132.337 45.083 346.658 209.733 145.248C936.936 126.058 882.053-94.234 1031.02 41.331c119.18 108.451 130.68 295.337 121.53 375.223L855 299l21.173 362.054-558.954-142.079z"
174+
/>
175+
<defs>
176+
<linearGradient
177+
id="ecb5b0c9-546c-4772-8c71-4d3f06d544bc"
178+
x1="1155.49"
179+
x2="-78.208"
180+
y1=".177"
181+
y2="474.645"
182+
gradientUnits="userSpaceOnUse"
183+
>
184+
<stop stopColor="#9089FC" />
185+
<stop offset={1} stopColor="#FF80B5" />
186+
</linearGradient>
187+
</defs>
188+
</svg>
189+
</div>
190+
</div>
191+
)
192+
}

‎yarn.lock

+13-1
Original file line numberDiff line numberDiff line change
@@ -200,6 +200,18 @@
200200
resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.47.0.tgz#5478fdf443ff8158f9de171c704ae45308696c7d"
201201
integrity sha512-P6omY1zv5MItm93kLM8s2vr1HICJH8v0dvddDhysbIuZ+vcjOHg5Zbkf1mTkcmi2JA9oBG2anOkRnW8WJTS8Og==
202202

203+
"@headlessui/react@^1.7.17":
204+
version "1.7.17"
205+
resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.17.tgz#a0ec23af21b527c030967245fd99776aa7352bc6"
206+
integrity sha512-4am+tzvkqDSSgiwrsEpGWqgGo9dz8qU5M3znCkC4PgkpY4HcCZzEDEvozltGGGHIKl9jbXbZPSH5TWn4sWJdow==
207+
dependencies:
208+
client-only "^0.0.1"
209+
210+
"@heroicons/react@^2.0.18":
211+
version "2.0.18"
212+
resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-2.0.18.tgz#f80301907c243df03c7e9fd76c0286e95361f7c1"
213+
integrity sha512-7TyMjRrZZMBPa+/5Y8lN0iyvUU/01PeMGX2+RE7cQWpEUIcb4QotzUObFkJDejj/HUH4qjP/eQ0gzzKs2f+6Yw==
214+
203215
"@humanwhocodes/config-array@^0.11.10":
204216
version "0.11.10"
205217
resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.10.tgz#5a3ffe32cc9306365fb3fd572596cd602d5e12d2"
@@ -1013,7 +1025,7 @@ cli-spinners@^2.5.0:
10131025
resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-2.9.0.tgz#5881d0ad96381e117bbe07ad91f2008fe6ffd8db"
10141026
integrity sha512-4/aL9X3Wh0yiMQlE+eeRhWP6vclO3QRtw1JHKIT0FFUs5FjpFmESqtMvYZ0+lbzBw900b95mS0hohy+qn2VK/g==
10151027

1016-
[email protected]:
1028+
[email protected], client-only@^0.0.1:
10171029
version "0.0.1"
10181030
resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
10191031
integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==

0 commit comments

Comments
 (0)