Skip to content
Permalink
Browse files
Add files via upload
  • Loading branch information
@nagarkotij
nagarkotij committed Nov 1, 2022
1 parent bc7bb03 commit 0e5d8de4a82588d1046266687494674b0a7e9017
Show file tree
Hide file tree
Showing 5 changed files with 303 additions and 0 deletions.
35 About.jsx
View file
@@ -0,0 +1,35 @@
import React from 'react'

const About = () => {
return (
<div className='w-full my-32'>
<div className='max-w-[1240px] mx-auto'>
<div className='text-center'>
<h2 className='text-5xl font-bold'>
Annual Club Management Sees:
</h2>
<p className='text-3xl py-6 text-gray-500'>Throughout the year, club managemnet has received well dissertation. The overrall report for the year is shown below:
</p>
</div>


<div name='about' className='grid md:grid-cols-3 gap-1 px-2 text-center'>
<div className='border py-8 rounded-xl shadow-xl'>
<p className='text-6xl font-bold text-indigo-600'>4,500</p>
<p className='text-gray-400 mt-2'>Session Scheduled</p>
</div>
<div className='border py-8 rounded-xl shadow-xl'>
<p className='text-6xl font-bold text-indigo-600'>$10</p>
<p className='text-gray-400 mt-2'>Million Processed</p>
</div>
<div className='border py-8 rounded-xl shadow-xl'>
<p className='text-6xl font-bold text-indigo-600'>10,500</p>
<p className='text-gray-400 mt-2'>Membership Sold</p>
</div>
</div>
</div>
</div>
)
}

export default About
89 Club.jsx
View file
@@ -0,0 +1,89 @@
import React from 'react'
import fImage from '../assets/football.jpg'
import bImage from '../assets/basketball.jpg'
import cImage from '../assets/cricket.jpg'
import tImage from '../assets/tennis.jpg'
import sImage from '../assets/swimming.jpg'
import aImage from '../assets/archery.jpg'

const Club = () => {
return (
<div name='club' className='w-full my-24'>
<div className='max-w-[1240px] mx-auto'>
<div className='text-center'>
<h2 className='text-4xl font-bold'>CLUB</h2>
<p className='text-2xl py-6 text-gray-500'>Join the club now</p>
</div>


<div className='grid md:grid-cols-3 gap-8 px-2 text-center'>
<div className='border py-10 rounded-xl shadow-xl'>
{/* Image for basketball*/}
<div>
<a href="https://google.com" target="_blank" rel="noreferrer">
<img className='w-full h-80' src={bImage}></img>
</a>
</div>
<p className='text-6xl font-bold'>Basketball</p>
<p className='text-gray-400 mt-2'>Join Session</p>
</div>
<div className='border py-8 rounded-xl shadow-xl'>
{/* Image for swimming*/}
<div>
<a href="https://google.com" target="_blank" rel="noreferrer">
<img className='w-full my-2 h-80' src={sImage}></img>
</a>
</div>
<p className='text-6xl font-bold'>Swimming</p>
<p className='text-gray-400 mt-2'>Join Session</p>
</div>
<div className='border py-8 rounded-xl shadow-xl'>
{/* Image for Archery*/}

<div>
<a href="https://google.com" target="_blank" rel="noreferrer">
<img className='w-full my-2 h-80' src={aImage} ></img>
</a>
</div>
<p className='text-6xl font-bold'>Archery</p>
<p className='text-gray-400 mt-2'>Join Session</p>
</div>
</div>
<div className='grid md:grid-cols-3 gap-8 px-2 text-center my-10'>
<div className='border py-8 rounded-xl shadow-xl'>
{/* Image for Cricket*/}
<div>
<a href="https://google.com" target="_blank" rel="noreferrer">
<img className='w-full h-80' src={cImage}></img>
</a>
</div>
<p className='text-6xl font-bold'>Cricket</p>
<p className='text-gray-400 mt-2'>Join Session</p>
</div>
<div className='border py-8 rounded-xl shadow-xl'>
{/* Image for football*/}
<div>
<a href="https://google.com" target="_blank" rel="noreferrer">
<img className='w-full h-80' src={fImage}></img>
</a>
</div>
<p className='text-6xl font-bold'>Football</p>
<p className='text-gray-400 mt-2'>Join Session</p>
</div>
<div className='border py-8 rounded-xl shadow-xl'>
{/* Image for tennis*/}
<div>
<a href="https://google.com" target="_blank" rel="noreferrer">
<img className='w-full h-80' src={tImage}></img>
</a>
</div>
<p className='text-6xl font-bold'>Tennis</p>
<p className='text-gray-400 mt-2'>Membership Sold</p>
</div>
</div>
</div>
</div>
)
}

export default Club
78 Footer.jsx
View file
@@ -0,0 +1,78 @@
import React from 'react'

import{
FaFacebook,
FaGithub,
FaInstagram,
FaTwitter,
FaTwitch
} from 'react-icons/fa'

const footer = () => {
return (
<div className='w-full mt-24 bg-slate-900 text-gray-300 py-y px-2'>
<div className='max-w-[1240px] mx-auto grid grid-cols-2 md:grid-cols-6 border-b-2 border-gray-600 py-8'>
<div>
<h6 className='font-bold uppercase pt-2'>Solutions</h6>
<ul>
<li className='py-1'>Marketing</li>
<li className='py-1'>Analytics</li>
<li className='py-1'>Commerce</li>
<li className='py-1'>Data</li>
<li className='py-1'>Cloud</li>
</ul>
</div>
<div>
<h6 className='font-bold uppercase pt-2'>Support</h6>
<ul>
<li className='py-1'>Docementation</li>
<li className='py-1'>Gides</li>
<li className='py-1'>Status</li>
<li className='py-1'>Chat</li>
</ul>
</div>
<div>
<h6 className='font-bold uppercase pt-2'>Club</h6>
<ul>
<li className='py-1'>About</li>
<li className='py-1'>Press</li>
<li className='py-1'>Partners</li>
<li className='py-1'>Jobs</li>
<li className='py-1'>Blog</li>
</ul>
</div>
<div>
<h6 className='font-bold uppercase pt-2'>Legal</h6>
<ul>
<li className='py-1'>Claims</li>
<li className='py-1'>Privacy</li>
<li className='py-1'>Terms</li>
<li className='py-1'>Policies</li>
<li className='py-1'>Conditions</li>
</ul>
</div>
<div className='col-span-2 pt-8 md:pt-2'>
<p className='font-bold uppercase'>Subscribe to our newsletter</p>
<p className='py-4'>The latest news, articles, and resources, sent to your inbox weekly.</p>
<form className='flex flex-col sm:flex-row'>
<input className='w-full p-2 mr-4 rounded-md mb-4' type = "email" placeholder='Enterr email..'/>
<button className='p-2 mb-4'>Subscribe</button>
</form>
</div>
</div>

<div className='flex flex-col max-w-[1240px] px-2 py-4 m-auto justify-between sm:flex-row text-center text-gray-500'>
<p className='py-4'>2022 Workflow, LLC. All rights reserved</p>
<div className='flex justify-between sm:w-[300px] pt-4 text-2xl'>
<FaFacebook />
<FaInstagram />
<FaTwitter />
<FaGithub />
<FaTwitch />
</div>
</div>
</div>
)
}

export default footer
42 Landing.jsx
View file
@@ -0,0 +1,42 @@
import React from 'react'
import bB from '../assets/sport.jpg'
import bImg from '../assets/club.png'
import {
StarIcon,
CalendarIcon,
NewspaperIcon,
CurrencyPoundIcon
} from '@heroicons/react/solid'

const Landing = () => {
return(
<div name='home' className='w-full h-screen bg-zinc-200 flex flex-col justify-between'>
<div className='grid md:grid-cols-2 max-w-[1240px] m-auto'>
<div className='flex flex-col justify-center md:items-start w-full px-2 py-8'>
<p className='text-2xl'>Welcome to the Club</p>
<h1 className='py-3 text-5xl md:text-7xl font-bold'>Club Champions</h1>
<p className='text-2xl'>Login to get access</p>
<button className='py-3 px-6 sm:w-[60%] my-4'>Get Started</button>
</div>
<div>
<img className='w-full' src={bB}></img>
</div>
<div className='absolute flex flex-col py-8 md:min-w-[760px] bottom-[-5%]
mx-1 md:left-1/2 transform md:-translate-x-1/2 bg-zinc-200
border border-slate-300 rounded-xl text-center shadow-xl'>
<p className='font-bold'>Resources</p>

<div className='flex justify-between flex-wrap px-4'>
<p className='flex px-4 py-2 text-slate-500'><StarIcon className='h-6 text-indigo-600'/>Blog</p>
<p className='flex px-4 py-2 text-slate-500'><NewspaperIcon className='h-6 text-indigo-600'/>Press & News</p>
<p className='flex px-4 py-2 text-slate-500'><CalendarIcon className='h-6 text-indigo-600'/>Events & Webinars</p>
<p className='flex px-4 py-2 text-slate-500'><CurrencyPoundIcon className='h-6 text-indigo-600'/>Benefits</p>
</div>
</div>
</div>

</div>
);
}

export default Landing
59 Navbar.jsx
View file
@@ -0,0 +1,59 @@
import React, {useState} from 'react'
import { MenuIcon, XIcon} from '@heroicons/react/outline'
import { Link } from "react-router-dom"

{/* <li><Link to="/president">Pres</Link></li> */}



const Navbar = () => {
const [nav, setNav] = useState(false)
const handleClick = () => setNav(!nav)

const handleClose =()=> setNav(!nav)

return (
<div name='navbar' className='w-screen h-[80px] z-10 bg-zinc-200 fixed drop-shadow-lg'>
<div className='px-2 flex justify-between items-center w-full h-full'>
<div className='flex items-center'>
<h1 className='text-3xl font-bold mr-4 sm:text-4xl'>Club Champions</h1>
<ul className='hidden md:flex'>
{/* Navigation*/}
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/club">Club</Link></li>
<li><Link to="/description">Description</Link></li>
<li><Link to="/support">Support</Link></li>
</ul>

</div>
<div className='hidden md:flex pr-4'>
<button className='border-none bg-transparent text-black mr-4'> Sign In </button>
<button className='px-8 py-3'> Sign Up</button>
</div>
<div className='md:hidden mr-4' onClick={handleClick}>
{!nav ? <MenuIcon className='w-5'/> : <XIcon className='w-5'/>}
</div>
</div>
{/* Navigation for mobile device*/}
<ul className={!nav ? 'hidden' : 'absolute bg-zinc-400 w-full px-8'}>
<li className='border-b-2 border-zinc-300 w-full'><Link onClick={handleClose} to="/" smooth={true} duration={500}>Home</Link></li>
<li className='border-b-2 border-zinc-300 w-full'><Link onClick={handleClose} to="/about" smooth={true} offset={-500} duration={500}>About</Link></li>
<li className='border-b-2 border-zinc-300 w-full'><Link onClick={handleClose} to="/club" smooth={true} offset={-100} duration={500}>Club</Link></li>
<li className='border-b-2 border-zinc-300 w-full'><Link onClick={handleClose} to="/description" smooth={true} offset={50} duration={500}>Description</Link></li>
<li className='border-b-2 border-zinc-300 w-full'><Link onClick={handleClose} to="/support" smooth={true} offset={50} duration={500}>Support</Link></li>



<div className='flex flex-col my-4'>
<button className='bg-transparent text-indigo-600 px-8 py-3 mb-4'>Sign In</button>
<button className='px-8 py-3'>Sign Up</button>
</div>
</ul>


</div>
)
}

export default Navbar

0 comments on commit 0e5d8de

Please sign in to comment.