Skip to content

Commit b4debdb

Browse files
mkubdevmkubdev
committed
[⚡] design update: new landing page and new hero!
1 parent 7e1229f commit b4debdb

File tree

14 files changed

+245
-294
lines changed

14 files changed

+245
-294
lines changed

‎public/images/logo/test.PNG

-186 KB
Binary file not shown.

‎src/components/Content.js

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

‎src/components/Global/Footer.js

Lines changed: 109 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,115 @@
1+
import Link from 'next/link';
2+
import { SiGithubsponsors } from 'react-icons/si';
3+
4+
/**
5+
* info:
6+
* - navigation: string
7+
*/
8+
const navigation = [
9+
{
10+
name: 'ABOUT US',
11+
href: '/about',
12+
children: [
13+
{ name: 'Who we are?', href: '/about#who' },
14+
{ name: 'What we do?', href: '/about#what' },
15+
{ name: 'Team WebX', href: '/team' },
16+
],
17+
},
18+
{
19+
name: 'SOCIALS',
20+
href: '/',
21+
children: [
22+
{ name: 'GitHub', href: '' },
23+
{ name: 'Twitter', href: '' },
24+
{ name: 'Discord', href: '' },
25+
{ name: 'LinkedIn', href: '' },
26+
],
27+
},
28+
{
29+
name: 'CONTACT',
30+
href: '/contact',
31+
children: [{ name: 'Contact us', href: '' }],
32+
},
33+
{
34+
name: 'PARTNERS',
35+
href: '/partners',
36+
children: [
37+
{ name: 'Our partners', href: '' },
38+
{ name: 'Get partner', href: '' },
39+
],
40+
},
41+
];
42+
143
const Footer = () => {
244
return (
3-
<div className="bg-cover bg-white bg-opacity-10 text-white">
4-
<div className="justify-center items-center flex h-full">
5-
WebXDAO Footer
45+
<footer className="bg-transparent">
46+
<div className="max-w-screen-xl px-4 pt-16 pb-6 mx-auto sm:px-6 lg:px-8 lg:pt-24">
47+
<div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
48+
<div>
49+
<div className="flex justify-center text-teal-600 sm:justify-start">
50+
<a href="#">
51+
<span className="sr-only">WebX DAO</span>
52+
<img
53+
className="w-auto h-8 sm:h-10"
54+
src="/images/logo/white_logo.png"
55+
alt=""
56+
/>
57+
</a>
58+
</div>
59+
{/*
60+
<p className="max-w-md mx-auto mt-6 leading-relaxed text-center text-gray-500 sm:max-w-xs sm:mx-0 sm:text-left">
61+
Add organization description here!
62+
</p> */}
63+
</div>
64+
65+
<div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:col-span-2 md:grid-cols-4">
66+
{navigation.map((item) => (
67+
<>
68+
<div key={item.name} className="text-center sm:text-left">
69+
<p className="text-sm font-medium text-white/90">
70+
{item.name}
71+
</p>
72+
73+
<nav className="mt-8">
74+
<ul className="space-y-4 text-sm">
75+
{item.children.map((child) => (
76+
<li key={child.name}>
77+
<Link
78+
className="transition text-white/60 hover:text-white/60/75"
79+
href="/"
80+
>
81+
<span className="text-white/60">{child.name}</span>
82+
</Link>
83+
</li>
84+
))}
85+
</ul>
86+
</nav>
87+
</div>
88+
</>
89+
))}
90+
</div>
91+
</div>
92+
93+
<div className="pt-6 mt-12">
94+
<div className="text-center sm:flex sm:justify-between sm:text-left">
95+
<p className="text-sm text-gray-500">
96+
<span className="block sm:inline">All rights reserved.</span>
97+
</p>
98+
99+
<p className="mt-4 text-sm text-gray-500 sm:order-first sm:mt-0">
100+
<span className="flex items-center justify-center">
101+
&copy; {new Date().getFullYear()} Made with
102+
<SiGithubsponsors
103+
className="w-3 h-3 m-2 text-pink-600"
104+
aria-hidden="true"
105+
/>
106+
by WebX DAO
107+
</span>
108+
</p>
109+
</div>
110+
</div>
6111
</div>
7-
</div>
112+
</footer>
8113
);
9114
};
10115

‎src/components/Global/Navbar.js

Lines changed: 11 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { Fragment } from 'react';
22
import { Popover, Transition } from '@headlessui/react';
33
import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
4-
import { ChevronRightIcon } from '@heroicons/react/20/solid';
54
import { SiGithubsponsors } from 'react-icons/si';
5+
66
const navigation = [
77
{ name: 'Blog', href: '/blog' },
88
{ name: 'Projects', href: '/projects' },
@@ -12,18 +12,6 @@ const navigation = [
1212

1313
const Navbar = () => {
1414
return (
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>
2715
<Popover as="header" className="relative">
2816
<div className="bg-transparent pt-6">
2917
{/* NAVIGATION BAR */}
@@ -37,7 +25,7 @@ const Navbar = () => {
3725
<span className="sr-only">WebX DAO</span>
3826
<img
3927
className="h-8 w-auto sm:h-10"
40-
src="/images/logo/webxdao_logo.png"
28+
src="/images/logo/white_logo.png"
4129
alt=""
4230
/>
4331
</a>
@@ -90,17 +78,17 @@ const Navbar = () => {
9078
focus
9179
className="absolute inset-x-0 top-0 z-10 origin-top transform p-2 transition md:hidden"
9280
>
93-
<div className="overflow-hidden rounded-lg bg-white shadow-md ring-1 ring-black ring-opacity-5">
81+
<div className="overflow-hidden rounded-lg backdrop-blur-sm bg-gradient1/50 shadow-xl ring-1 ring-white ring-opacity-5">
9482
<div className="flex items-center justify-between px-5 pt-4">
9583
<div>
9684
<img
9785
className="h-8 w-auto"
98-
src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
99-
alt=""
86+
src="/images/logo/white_logo.png"
87+
alt="WebX DAO"
10088
/>
10189
</div>
10290
<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">
91+
<Popover.Button className="inline-flex items-center justify-center rounded-md bg-white/20 p-2 text-gray-400 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-cyber-webx">
10492
<span className="sr-only">Close menu</span>
10593
<XMarkIcon className="h-6 w-6" aria-hidden="true" />
10694
</Popover.Button>
@@ -112,28 +100,28 @@ const Navbar = () => {
112100
<a
113101
key={item.name}
114102
href={item.href}
115-
className="block rounded-md px-3 py-2 text-base font-medium text-gray-900 hover:bg-gray-50"
103+
className="block rounded-md px-3 py-2 text-base font-medium text-gray-100 hover:bg-gray-50"
116104
>
117105
{item.name}
118106
</a>
119107
))}
120108
</div>
121-
<div className="mt-6 px-5">
109+
{/* <div className="mt-6 px-5">
122110
<a
123111
href="#"
124112
className="block w-full rounded-md bg-indigo-600 py-3 px-4 text-center font-medium text-white shadow hover:bg-indigo-700"
125113
>
126114
Start free trial
127115
</a>
128-
</div>
129-
<div className="mt-6 px-5">
116+
</div> */}
117+
{/* <div className="mt-6 px-5">
130118
<p className="text-center text-base font-medium text-gray-500">
131119
Existing customer?{' '}
132120
<a href="#" className="text-gray-900 hover:underline">
133121
Login
134122
</a>
135123
</p>
136-
</div>
124+
</div> */}
137125
</div>
138126
</div>
139127
</Popover.Panel>

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
1-
import Link from 'next/link';
21
import { VscGithub } from 'react-icons/vsc';
2+
import Link from 'next/link';
33

44
const CallToActionHero = () => {
55
return (
6-
<div class="pb-8 flex">
7-
<div class="grid gap-8 items-start justify-center">
6+
<div class="pb-2 flex">
7+
<div class="w-full grid gap-8 items-start">
88
<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" />
9+
<div class="absolute -inset-0.5 bg-gradient-to-r from-pink-600 to-fuchsia-700 rounded-lg blur opacity-75 group-hover:opacity-100 transition duration-1000 group-hover:duration-200 animate-tilt"></div>
10+
<button class="w-full relative px-7 py-4 bg-black/80 rounded-lg leading-none flex items-center divide-x divide-gray-600 ">
11+
<span class="flex items-center space-x-5 ">
12+
<VscGithub className="w-6 h-6 text-cyber-webx hover:text-pink-600 hover:-rotate-6" />
1313
<span class="pr-6 text-gray-100 text-sm md:text-base">
14-
Ready for Hacktoberfest 2022
14+
Hacktoberfest 2022
1515
</span>
1616
</span>
1717
<Link href="https://github.com/WebXDAO">

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

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,14 @@ const ContributeButton = () => {
55
return (
66
<>
77
<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"
8+
className="inline-flex items-center justify-center px-8 py-3 text-base font-medium transition-all duration-100 bg-gray-100 border border-transparent rounded-md shadow-md border-dark hover:border-white/80 text-slate-700 hover:bg-gray-700 hover:text-slate-100 focus:outline-none focus:ring-2 focus:ring-cyber-webx focus:ring-offset-2"
99
whileHover={{ scale: 1.05 }}
10-
onHoverStart={(e) => {}}
11-
onHoverEnd={(e) => {}}
1210
whileTap={{ scale: 1 }}
1311
>
14-
<Link href="https://dsc.gg/webxdao">
15-
<div className="w-full justify-center items-center inline-flex">
12+
<Link href="https://github.com/webxdao">
13+
<a className="inline-flex items-center justify-center w-full">
1614
Contribute
17-
{/* <FaDiscord className="ml-3 -mr-1 h-5 w-5" aria-hidden="true" /> */}
18-
</div>
15+
</a>
1916
</Link>
2017
</motion.button>
2118
</>

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

Lines changed: 5 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,20 @@
1+
import { FaDiscord } from 'react-icons/fa';
12
import { motion } from 'framer-motion';
23
import Link from 'next/link';
3-
import { FaDiscord } from 'react-icons/fa';
44

55
const DiscordButton = () => {
66
return (
77
<>
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-
188
<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"
9+
className="inline-flex items-center justify-center px-4 py-3 text-base font-medium transition-all duration-100 border border-transparent rounded-md shadow-sm hover:border-white/80 bg-cyber-webx text-white/80 hover:text-white 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"
2010
whileHover={{ scale: 1.05 }}
21-
onHoverStart={(e) => {}}
22-
onHoverEnd={(e) => {}}
2311
whileTap={{ scale: 1 }}
2412
>
2513
<Link href="https://dsc.gg/webxdao">
26-
<div className="w-full justify-center items-center inline-flex">
14+
<a className="inline-flex items-center justify-center w-full">
2715
Join WebXDAO
28-
<FaDiscord className="ml-3 -mr-1 h-5 w-5" aria-hidden="true" />
29-
</div>
16+
<FaDiscord className="w-5 h-5 ml-3 -mr-1" aria-hidden="true" />
17+
</a>
3018
</Link>
3119
</motion.button>
3220
</>

0 commit comments

Comments
 (0)