Skip to content

Commit 8a9fc8c

Browse files
mkubdevmkubdev
committed
[ui] update Heron + add CTA component with glowing shadow. WIP
1 parent da21ea4 commit 8a9fc8c

File tree

13 files changed

+6871
-2246
lines changed

13 files changed

+6871
-2246
lines changed

‎package-lock.json

Lines changed: 6428 additions & 2198 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,15 @@
99
"export": "next build && next export"
1010
},
1111
"dependencies": {
12+
"@headlessui/react": "^1.7.1",
13+
"@heroicons/react": "^2.0.11",
14+
"framer-motion": "^7.3.4",
15+
"install": "^0.13.0",
1216
"next": "^12.3.0",
17+
"npm": "^8.19.2",
1318
"react": "18.2.0",
1419
"react-dom": "18.2.0",
15-
"react-icons": "^4.3.1"
20+
"react-icons": "^4.4.0"
1621
},
1722
"devDependencies": {
1823
"autoprefixer": "^10.4.2",

‎src/components/Content.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
export default function Content() {
2+
return (
3+
<div className="h-full bg-white">
4+
<div className="mx-auto max-w-6xl py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
5+
<div className="text-center">
6+
<h1 className="bg-gradient-to-r from-purple-900 to-pink-700 bg-clip-text text-6xl sm:text-8xl font-extrabold text-transparent">
7+
Dapp Hackathon Next.js Starter
8+
</h1>
9+
<p className="mt-4 font-semibold text-slate-700">
10+
Let&apos;s build your Hackathon Dapp faster with this starter -
11+
Tailwind + Redux
12+
</p>
13+
<div className="flex items-center justify-center space-x-4">
14+
<button
15+
type="button"
16+
className="border-dark mt-10 inline-flex items-center rounded-md border bg-gray-100 px-4 py-2 text-base font-medium text-slate-700 shadow-md hover:bg-gray-700 hover:text-slate-100 focus:outline-none focus:ring-2 focus:ring-pink-700 focus:ring-offset-2"
17+
>
18+
Join WebXDAO
19+
</button>
20+
<button
21+
href="https://github.com/WebXDAO/nextjs-dapp-template"
22+
type="button"
23+
className="border-dark mt-10 inline-flex items-center rounded-md border bg-gray-100 px-4 py-2 text-base font-medium text-slate-700 shadow-md hover:bg-gray-700 hover:text-slate-100 focus:outline-none focus:ring-2 focus:ring-pink-700 focus:ring-offset-2"
24+
>
25+
Contribute
26+
</button>
27+
</div>
28+
</div>
29+
</div>
30+
</div>
31+
);
32+
}

‎src/components/Global/Navbar.js

Lines changed: 138 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,144 @@
1+
import { Fragment } from 'react';
2+
import { Popover, Transition } from '@headlessui/react';
3+
import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
4+
import { ChevronRightIcon } from '@heroicons/react/20/solid';
5+
import { SiGithubsponsors } from 'react-icons/si';
6+
const navigation = [
7+
{ name: 'Blog', href: '/blog' },
8+
{ name: 'Projects', href: '/projects' },
9+
{ name: 'Community Partners', href: '/partners' },
10+
{ name: 'WebX Team', href: '/team' },
11+
];
12+
113
const Navbar = () => {
214
return (
3-
<header className="bg-cover bg-white bg-opacity-10 min-h-16 h-16 text-white">
4-
<div className="justify-center items-center flex h-full">
5-
WebXDAO Navbar
15+
// <header className="bg-cover bg-white bg-opacity-10 min-h-16 h-16 text-white">
16+
// <div className="justify-center items-center flex h-full">
17+
// WebXDAO Navbar
18+
// </div>
19+
// {/* <div className=" flex h-full">
20+
// <div className="flex justify-between items-center">
21+
// <div className="bg-red-500">1</div>
22+
// <div className="bg-lime-500">2</div>
23+
// <div className="bg-sky-500">3</div>
24+
// </div>
25+
// </div> */}
26+
// </header>
27+
<Popover as="header" className="relative">
28+
<div className="bg-transparent pt-6">
29+
{/* NAVIGATION BAR */}
30+
<nav
31+
className="relative mx-auto flex max-w-7xl items-center justify-between px-4 sm:px-6"
32+
aria-label="Global"
33+
>
34+
<div className="flex flex-1 items-center">
35+
<div className="flex w-full items-center justify-between md:w-auto">
36+
<a href="#">
37+
<span className="sr-only">WebX DAO</span>
38+
<img
39+
className="h-8 w-auto sm:h-10"
40+
src="/images/logo/webxdao_logo.png"
41+
alt=""
42+
/>
43+
</a>
44+
<div className="-mr-2 flex items-center md:hidden">
45+
<Popover.Button className="focus-ring-inset inline-flex items-center justify-center rounded-md bg-transparent p-2 text-gray-400 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-white">
46+
<span className="sr-only">Open main menu</span>
47+
<Bars3Icon className="h-6 w-6" aria-hidden="true" />
48+
</Popover.Button>
49+
</div>
50+
</div>
51+
{/* Add content here to get menu next to icon */}
52+
</div>
53+
<div className="hidden md:flex md:items-center md:space-x-6">
54+
<div className="hidden space-x-8 md:ml-10 md:flex">
55+
{navigation.map((item) => (
56+
<a
57+
key={item.name}
58+
href={item.href}
59+
className="text-base font-medium text-white hover:text-gray-300"
60+
>
61+
{item.name}
62+
</a>
63+
))}
64+
</div>
65+
66+
<a
67+
href="#"
68+
className="inline-flex items-center rounded-md border border-transparent bg-gray-100 px-4 py-2 text-base font-medium text-gray-600 hover:text-white/80 hover:bg-gray-700"
69+
>
70+
GitHub
71+
<SiGithubsponsors
72+
className="ml-3 h-5 w-5 text-pink-600"
73+
aria-hidden="true"
74+
/>
75+
</a>
76+
</div>
77+
</nav>
678
</div>
7-
</header>
79+
80+
<Transition
81+
as={Fragment}
82+
enter="duration-150 ease-out"
83+
enterFrom="opacity-0 scale-95"
84+
enterTo="opacity-100 scale-100"
85+
leave="duration-100 ease-in"
86+
leaveFrom="opacity-100 scale-100"
87+
leaveTo="opacity-0 scale-95"
88+
>
89+
<Popover.Panel
90+
focus
91+
className="absolute inset-x-0 top-0 z-10 origin-top transform p-2 transition md:hidden"
92+
>
93+
<div className="overflow-hidden rounded-lg bg-white shadow-md ring-1 ring-black ring-opacity-5">
94+
<div className="flex items-center justify-between px-5 pt-4">
95+
<div>
96+
<img
97+
className="h-8 w-auto"
98+
src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
99+
alt=""
100+
/>
101+
</div>
102+
<div className="-mr-2">
103+
<Popover.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-600">
104+
<span className="sr-only">Close menu</span>
105+
<XMarkIcon className="h-6 w-6" aria-hidden="true" />
106+
</Popover.Button>
107+
</div>
108+
</div>
109+
<div className="pt-5 pb-6">
110+
<div className="space-y-1 px-2">
111+
{navigation.map((item) => (
112+
<a
113+
key={item.name}
114+
href={item.href}
115+
className="block rounded-md px-3 py-2 text-base font-medium text-gray-900 hover:bg-gray-50"
116+
>
117+
{item.name}
118+
</a>
119+
))}
120+
</div>
121+
<div className="mt-6 px-5">
122+
<a
123+
href="#"
124+
className="block w-full rounded-md bg-indigo-600 py-3 px-4 text-center font-medium text-white shadow hover:bg-indigo-700"
125+
>
126+
Start free trial
127+
</a>
128+
</div>
129+
<div className="mt-6 px-5">
130+
<p className="text-center text-base font-medium text-gray-500">
131+
Existing customer?{' '}
132+
<a href="#" className="text-gray-900 hover:underline">
133+
Login
134+
</a>
135+
</p>
136+
</div>
137+
</div>
138+
</div>
139+
</Popover.Panel>
140+
</Transition>
141+
</Popover>
8142
);
9143
};
10144

‎src/components/Home/Hero.js

Lines changed: 0 additions & 39 deletions
This file was deleted.

‎src/components/Home/HeroSection/CallToActionHero.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import Link from 'next/link';
2+
import { VscGithub } from 'react-icons/vsc';
3+
4+
const CallToActionHero = () => {
5+
return (
6+
<div class="pb-8 flex">
7+
<div class="grid gap-8 items-start justify-center">
8+
<div class="relative group">
9+
<div class="absolute -inset-0.5 bg-gradient-to-r from-pink-600 to-purple-800 rounded-lg blur opacity-75 group-hover:opacity-100 transition duration-1000 group-hover:duration-200 animate-tilt"></div>
10+
<button class="relative px-7 py-4 bg-black rounded-lg leading-none flex items-center divide-x divide-gray-600">
11+
<span class="flex items-center space-x-5">
12+
<VscGithub className="h-6 w-6 text-cyber-webx hover:text-pink-600 hover:-rotate-6" />
13+
<span class="pr-6 text-gray-100 text-sm md:text-base">
14+
Ready for Hacktoberfest 2022
15+
</span>
16+
</span>
17+
<Link href="https://github.com/WebXDAO">
18+
<span class="pl-6 text-white/50 group-hover:text-gray-100 transition duration-200 text-sm md:text-base">
19+
See GitHub org &rarr;
20+
</span>
21+
</Link>
22+
</button>
23+
</div>
24+
</div>
25+
</div>
26+
);
27+
};
28+
29+
export default CallToActionHero;

‎src/components/Home/HeroSection/ContributeButton.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { motion } from 'framer-motion';
2+
import Link from 'next/link';
3+
4+
const ContributeButton = () => {
5+
return (
6+
<>
7+
<motion.button
8+
className="justify-center border-dark transition-all duration-100 inline-flex items-center rounded-md border border-transparent hover:border-white/80 bg-gray-100 px-8 py-3 text-base font-medium text-slate-700 shadow-md hover:bg-gray-700 hover:text-slate-100 focus:outline-none focus:ring-2 focus:ring-cyber-webx focus:ring-offset-2"
9+
whileHover={{ scale: 1.05 }}
10+
onHoverStart={(e) => {}}
11+
onHoverEnd={(e) => {}}
12+
whileTap={{ scale: 1 }}
13+
>
14+
<Link href="https://dsc.gg/webxdao">
15+
<div className="w-full justify-center items-center inline-flex">
16+
Contribute
17+
{/* <FaDiscord className="ml-3 -mr-1 h-5 w-5" aria-hidden="true" /> */}
18+
</div>
19+
</Link>
20+
</motion.button>
21+
</>
22+
);
23+
};
24+
25+
export default ContributeButton;

‎src/components/Home/HeroSection/DiscordButton.js

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { motion } from 'framer-motion';
2+
import Link from 'next/link';
3+
import { FaDiscord } from 'react-icons/fa';
4+
5+
const DiscordButton = () => {
6+
return (
7+
<>
8+
{/* <div className="inline-flex w-full">
9+
<button
10+
type="submit"
11+
className="w-full rounded-md bg-indigo-500 py-3 px-4 font-medium text-white shadow hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-300 focus:ring-offset-2 focus:ring-offset-gray-900"
12+
>
13+
Join WebXDAO
14+
<FaDiscord className="ml-3 -mr-1 h-5 w-5" aria-hidden="true" />
15+
</button>
16+
</div> */}
17+
18+
<motion.button
19+
className="justify-center inline-flex transition-all duration-100 items-center rounded-md border border-transparent hover:border-white/80 bg-cyber-webx px-4 py-3 text-base font-medium text-white/80 hover:text-white shadow-sm hover:bg-gradient-to-r hover:from-pink-700 hover:to-pink-900 focus:outline-none focus:ring-2 focus:ring-cyber-webx focus:ring-offset-2"
20+
whileHover={{ scale: 1.05 }}
21+
onHoverStart={(e) => {}}
22+
onHoverEnd={(e) => {}}
23+
whileTap={{ scale: 1 }}
24+
>
25+
<Link href="https://dsc.gg/webxdao">
26+
<div className="w-full justify-center items-center inline-flex">
27+
Join WebXDAO
28+
<FaDiscord className="ml-3 -mr-1 h-5 w-5" aria-hidden="true" />
29+
</div>
30+
</Link>
31+
</motion.button>
32+
</>
33+
);
34+
};
35+
36+
export default DiscordButton;

‎src/components/Home/HeroSection/Hero.js

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { motion } from 'framer-motion';
2+
import CallToActionHero from './CallToActionHero';
3+
import DiscordButton from './DiscordButton';
4+
import ContributeButton from './ContributeButton';
5+
import Image from 'next/image';
6+
7+
/**
8+
* hint: use h-screen to make a fullscreen hero banner
9+
*/
10+
const Hero = () => {
11+
return (
12+
<>
13+
<section className="bg-transparent h-full">
14+
<div className="px-8 py-36 mx-auto max-w-screen-xl lg:h-full lg:items-center flex flex-row w-full">
15+
{/* 1 */}
16+
<div className="w-full text-white text-center md:text-left">
17+
<h1 className="text-6xl font-bold sm:text-7xl">
18+
Build with us,{' '}
19+
<span className="sm:block">the future of web.</span>
20+
</h1>
21+
22+
<p className="max-w-lg mt-4 sm:leading-relaxed sm:text-xl text-white/50">
23+
We focus on building and talking about possible future usage of
24+
web technologies.
25+
</p>
26+
27+
<div className="flex flex-wrap mt-8 text-center items-center justify-center md:justify-start gap-4 w-full">
28+
<CallToActionHero></CallToActionHero>
29+
<DiscordButton></DiscordButton>
30+
<ContributeButton></ContributeButton>
31+
</div>
32+
</div>
33+
{/* 2 */}
34+
<div className="w-full text-white text-center md:text-left justify-center items-center">
35+
<Image
36+
src="/images/shapes/1.png"
37+
alt="WebXDAO logo"
38+
layout=""
39+
width={750}
40+
height={750}
41+
/>
42+
</div>
43+
</div>
44+
</section>
45+
</>
46+
);
47+
};
48+
49+
export default Hero;

0 commit comments

Comments
 (0)