all raw html css file for react router video
header component
export default function Header ( ) {
return (
< header className = "shadow sticky z-50 top-0" >
< nav className = "bg-white border-gray-200 px-4 lg:px-6 py-2.5" >
< div className = "flex flex-wrap justify-between items-center mx-auto max-w-screen-xl" >
< Link to = "/" className = "flex items-center" >
< img
src = "https://alexharkness.com/wp-content/uploads/2020/06/logo-2.png"
className = "mr-3 h-12"
alt = "Logo"
/ >
< / Link >
< div className = "flex items-center lg:order-2" >
< Link
to = "#"
className = "text-gray-800 hover:bg-gray-50 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 focus:outline-none"
>
Log in
< / Link >
< Link
to = "#"
className = "text-white bg-orange-700 hover:bg-orange-800 focus:ring-4 focus:ring-orange-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 focus:outline-none"
>
Get started
< / Link >
< / div >
< div
className = "hidden justify-between items-center w-full lg:flex lg:w-auto lg:order-1"
id = "mobile-menu-2"
>
< ul className = "flex flex-col mt-4 font-medium lg:flex-row lg:space-x-8 lg:mt-0" >
< li >
< NavLink
className = { ( ) =>
`block py-2 pr-4 pl-3 duration-200 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 hover:text-orange-700 lg:p-0`
}
>
Home
< / NavLink >
< / li >
< / ul >
< / div >
< / div >
< / nav >
< / header >
) ;
}
Footer component
export default function Footer ( ) {
return (
< footer className = "bg-white border-y" >
< div className = "mx-auto w-full max-w-screen-xl p-4 py-6 lg:py-8" >
< div className = "md:flex md:justify-between" >
< div className = "mb-6 md:mb-0" >
< Link to = "/" className = "flex items-center" >
< img
src = "https://alexharkness.com/wp-content/uploads/2020/06/logo-2.png"
className = "mr-3 h-16"
alt = "Logo"
/ >
< / Link >
< / div >
< div className = "grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3" >
< div >
< h2 className = "mb-6 text-sm font-semibold text-gray-900 uppercase" > Resources< / h2 >
< ul className = "text-gray-500 font-medium" >
< li className = "mb-4" >
< Link to = "/" className = "hover:underline" >
Home
< / Link >
< / li >
< li >
< Link to = "/about" className = "hover:underline" >
About
< / Link >
< / li >
< / ul >
< / div >
< div >
< h2 className = "mb-6 text-sm font-semibold text-gray-900 uppercase" > Follow us< / h2 >
< ul className = "text-gray-500 font-medium" >
< li className = "mb-4" >
< a
href = "https://github.com/hiteshchoudhary"
className = "hover:underline"
target = "_blank"
rel = "noreferrer"
>
Github
< / a >
< / li >
< li >
< Link to = "/" className = "hover:underline" >
Discord
< / Link >
< / li >
< / ul >
< / div >
< div >
< h2 className = "mb-6 text-sm font-semibold text-gray-900 uppercase" > Legal< / h2 >
< ul className = "text-gray-500 font-medium" >
< li className = "mb-4" >
< Link to = "#" className = "hover:underline" >
Privacy Policy
< / Link >
< / li >
< li >
< Link to = "#" className = "hover:underline" >
Terms & Conditions
< / Link >
< / li >
< / ul >
< / div >
< / div >
< / div >
< hr className = "my-6 border-gray-200 sm:mx-auto lg:my-8" / >
< div className = "sm:flex sm:items-center sm:justify-between" >
< span className = "text-sm text-gray-500 sm:text-center" >
© 2023
< a href = "https://hiteshchoudhary.com/" className = "hover:underline" >
hiteshchoudhary
< / a >
. All Rights Reserved.
< / span >
< div className = "flex mt-4 space-x-5 sm:justify-center sm:mt-0" >
< Link to = "#" className = "text-gray-500 hover:text-gray-900" >
< svg
className = "w-4 h-4"
aria-hidden = "true"
xmlns = "http://www.w3.org/2000/svg"
fill = "currentColor"
viewBox = "0 0 8 19"
>
< path
fill-rule = "evenodd"
d = "M6.135 3H8V0H6.135a4.147 4.147 0 0 0-4.142 4.142V6H0v3h2v9.938h3V9h2.021l.592-3H5V3.591A.6.6 0 0 1 5.592 3h.543Z"
clip-rule = "evenodd"
/ >
< / svg >
< span className = "sr-only" > Facebook page< / span >
< / Link >
< Link to = "#" className = "text-gray-500" >
< svg
className = "w-4 h-4"
aria-hidden = "true"
xmlns = "http://www.w3.org/2000/svg"
fill = "currentColor"
viewBox = "0 0 21 16"
>
< path d = "M16.942 1.556a16.3 16.3 0 0 0-4.126-1.3 12.04 12.04 0 0 0-.529 1.1 15.175 15.175 0 0 0-4.573 0 11.585 11.585 0 0 0-.535-1.1 16.274 16.274 0 0 0-4.129 1.3A17.392 17.392 0 0 0 .182 13.218a15.785 15.785 0 0 0 4.963 2.521c.41-.564.773-1.16 1.084-1.785a10.63 10.63 0 0 1-1.706-.83c.143-.106.283-.217.418-.33a11.664 11.664 0 0 0 10.118 0c.137.113.277.224.418.33-.544.328-1.116.606-1.71.832a12.52 12.52 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595 17.286 17.286 0 0 0-2.973-11.59ZM6.678 10.813a1.941 1.941 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.919 1.919 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Zm6.644 0a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.918 1.918 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Z" / >
< / svg >
< span className = "sr-only" > Discord community< / span >
< / Link >
< Link to = "#" className = "text-gray-500" >
< svg
className = "w-4 h-4"
aria-hidden = "true"
xmlns = "http://www.w3.org/2000/svg"
fill = "currentColor"
viewBox = "0 0 20 17"
>
< path
fill-rule = "evenodd"
d = "M20 1.892a8.178 8.178 0 0 1-2.355.635 4.074 4.074 0 0 0 1.8-2.235 8.344 8.344 0 0 1-2.605.98A4.13 4.13 0 0 0 13.85 0a4.068 4.068 0 0 0-4.1 4.038 4 4 0 0 0 .105.919A11.705 11.705 0 0 1 1.4.734a4.006 4.006 0 0 0 1.268 5.392 4.165 4.165 0 0 1-1.859-.5v.05A4.057 4.057 0 0 0 4.1 9.635a4.19 4.19 0 0 1-1.856.07 4.108 4.108 0 0 0 3.831 2.807A8.36 8.36 0 0 1 0 14.184 11.732 11.732 0 0 0 6.291 16 11.502 11.502 0 0 0 17.964 4.5c0-.177 0-.35-.012-.523A8.143 8.143 0 0 0 20 1.892Z"
clip-rule = "evenodd"
/ >
< / svg >
< span className = "sr-only" > Twitter page< / span >
< / Link >
< Link to = "#" className = "text-gray-500" >
< svg
className = "w-4 h-4"
aria-hidden = "true"
xmlns = "http://www.w3.org/2000/svg"
fill = "currentColor"
viewBox = "0 0 20 20"
>
< path
fill-rule = "evenodd"
d = "M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z"
clip-rule = "evenodd"
/ >
< / svg >
< span className = "sr-only" > GitHub account< / span >
< / Link >
< Link to = "#" className = "text-gray-500" >
< svg
className = "w-4 h-4"
aria-hidden = "true"
xmlns = "http://www.w3.org/2000/svg"
fill = "currentColor"
viewBox = "0 0 20 20"
>
< path
fill-rule = "evenodd"
d = "M10 0a10 10 0 1 0 10 10A10.009 10.009 0 0 0 10 0Zm6.613 4.614a8.523 8.523 0 0 1 1.93 5.32 20.094 20.094 0 0 0-5.949-.274c-.059-.149-.122-.292-.184-.441a23.879 23.879 0 0 0-.566-1.239 11.41 11.41 0 0 0 4.769-3.366ZM8 1.707a8.821 8.821 0 0 1 2-.238 8.5 8.5 0 0 1 5.664 2.152 9.608 9.608 0 0 1-4.476 3.087A45.758 45.758 0 0 0 8 1.707ZM1.642 8.262a8.57 8.57 0 0 1 4.73-5.981A53.998 53.998 0 0 1 9.54 7.222a32.078 32.078 0 0 1-7.9 1.04h.002Zm2.01 7.46a8.51 8.51 0 0 1-2.2-5.707v-.262a31.64 31.64 0 0 0 8.777-1.219c.243.477.477.964.692 1.449-.114.032-.227.067-.336.1a13.569 13.569 0 0 0-6.942 5.636l.009.003ZM10 18.556a8.508 8.508 0 0 1-5.243-1.8 11.717 11.717 0 0 1 6.7-5.332.509.509 0 0 1 .055-.02 35.65 35.65 0 0 1 1.819 6.476 8.476 8.476 0 0 1-3.331.676Zm4.772-1.462A37.232 37.232 0 0 0 13.113 11a12.513 12.513 0 0 1 5.321.364 8.56 8.56 0 0 1-3.66 5.73h-.002Z"
clip-rule = "evenodd"
/ >
< / svg >
< span className = "sr-only" > Dribbble account< / span >
< / Link >
< / div >
< / div >
< / div >
< / footer >
) ;
} export default function Home ( ) {
return (
< div className = "mx-auto w-full max-w-7xl" >
< aside className = "relative overflow-hidden text-black rounded-lg sm:mx-16 mx-2 sm:py-16" >
< div className = "relative z-10 max-w-screen-xl px-4 pb-20 pt-10 sm:py-24 mx-auto sm:px-6 lg:px-8" >
< div className = "max-w-xl sm:mt-1 mt-80 space-y-8 text-center sm:text-right sm:ml-auto" >
< h2 className = "text-4xl font-bold sm:text-5xl" >
Download Now
< span className = "hidden sm:block text-4xl" > Lorem Ipsum< / span >
< / h2 >
< Link
className = "inline-flex text-white items-center px-6 py-3 font-medium bg-orange-700 rounded-lg hover:opacity-75"
to = "/"
>
< svg
fill = "white"
width = "24"
height = "24"
xmlns = "http://www.w3.org/2000/svg"
fillRule = "evenodd"
clipRule = "evenodd"
>
< path d = "M1.571 23.664l10.531-10.501 3.712 3.701-12.519 6.941c-.476.264-1.059.26-1.532-.011l-.192-.13zm9.469-11.56l-10.04 10.011v-20.022l10.04 10.011zm6.274-4.137l4.905 2.719c.482.268.781.77.781 1.314s-.299 1.046-.781 1.314l-5.039 2.793-4.015-4.003 4.149-4.137zm-15.854-7.534c.09-.087.191-.163.303-.227.473-.271 1.056-.275 1.532-.011l12.653 7.015-3.846 3.835-10.642-10.612z" / >
< / svg >
Download now
< / Link >
< / div >
< / div >
< div className = "absolute inset-0 w-full sm:my-20 sm:pt-1 pt-12 h-full " >
< img className = "w-96" src = "https://i.ibb.co/5BCcDYB/Remote2.png" alt = "image1" / >
< / div >
< / aside >
< div className = "grid place-items-center sm:mt-20" >
< img className = "sm:w-96 w-48" src = "https://i.ibb.co/2M7rtLk/Remote1.png" alt = "image2" / >
< / div >
< h1 className = "text-center text-2xl sm:text-5xl py-10 font-medium" > Lorem Ipsum Yojo< / h1 >
< / div >
) ;
} export default function About ( ) {
return (
< div className = "py-16 bg-white" >
< div className = "container m-auto px-6 text-gray-600 md:px-12 xl:px-6" >
< div className = "space-y-6 md:space-y-0 md:flex md:gap-6 lg:items-center lg:gap-12" >
< div className = "md:5/12 lg:w-5/12" >
< img
src = "https://tailus.io/sources/blocks/left-image/preview/images/startup.png"
alt = "image"
/ >
< / div >
< div className = "md:7/12 lg:w-6/12" >
< h2 className = "text-2xl text-gray-900 font-bold md:text-4xl" >
React development is carried out by passionate developers
< / h2 >
< p className = "mt-6 text-gray-600" >
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum omnis voluptatem
accusantium nemo perspiciatis delectus atque autem! Voluptatum tenetur beatae unde
aperiam, repellat expedita consequatur! Officiis id consequatur atque doloremque!
< / p >
< p className = "mt-4 text-gray-600" >
Nobis minus voluptatibus pariatur dignissimos libero quaerat iure expedita at?
Asperiores nemo possimus nesciunt dicta veniam aspernatur quam mollitia.
< / p >
< / div >
< / div >
< / div >
< / div >
) ;
} export default function Contact ( ) {
return (
< div className = "relative flex items-top justify-center min-h-[700px] bg-white sm:items-center sm:pt-0" >
< div className = "max-w-6xl mx-auto sm:px-6 lg:px-8" >
< div className = "mt-8 overflow-hidden" >
< div className = "grid grid-cols-1 md:grid-cols-2" >
< div className = "p-6 mr-2 bg-gray-100 sm:rounded-lg" >
< h1 className = "text-3xl sm:text-4xl text-gray-800 font-extrabold tracking-tight" >
Get in touch:
< / h1 >
< p className = "text-normal text-lg sm:text-xl font-medium text-gray-600 mt-2" >
Fill in the form to start a conversation
< / p >
< div className = "flex items-center mt-8 text-gray-600" >
< svg
fill = "none"
stroke = "currentColor"
stroke-linecap = "round"
stroke-linejoin = "round"
stroke-width = "1.5"
viewBox = "0 0 24 24"
className = "w-8 h-8 text-gray-500"
>
< path
stroke-linecap = "round"
stroke-linejoin = "round"
stroke-width = "1.5"
d = "M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
/ >
< path
stroke-linecap = "round"
stroke-linejoin = "round"
stroke-width = "1.5"
d = "M15 11a3 3 0 11-6 0 3 3 0 016 0z"
/ >
< / svg >
< div className = "ml-4 text-md tracking-wide font-semibold w-40" >
Acme Inc, Street, State, Postal Code
< / div >
< / div >
< div className = "flex items-center mt-4 text-gray-600" >
< svg
fill = "none"
stroke = "currentColor"
stroke-linecap = "round"
stroke-linejoin = "round"
stroke-width = "1.5"
viewBox = "0 0 24 24"
className = "w-8 h-8 text-gray-500"
>
< path
stroke-linecap = "round"
stroke-linejoin = "round"
stroke-width = "1.5"
d = "M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
/ >
< / svg >
< div className = "ml-4 text-md tracking-wide font-semibold w-40" >
+44 1234567890
< / div >
< / div >
< div className = "flex items-center mt-2 text-gray-600" >
< svg
fill = "none"
stroke = "currentColor"
stroke-linecap = "round"
stroke-linejoin = "round"
stroke-width = "1.5"
viewBox = "0 0 24 24"
className = "w-8 h-8 text-gray-500"
>
< path
stroke-linecap = "round"
stroke-linejoin = "round"
stroke-width = "1.5"
d = "M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
/ >
< / svg >
< div className = "ml-4 text-md tracking-wide font-semibold w-40" >
info@acme.org
< / div >
< / div >
< / div >
< form className = "p-6 flex flex-col justify-center" >
< div className = "flex flex-col" >
< label for = "name" className = "hidden" >
Full Name
< / label >
< input
type = "name"
name = "name"
id = "name"
placeholder = "Full Name"
className = "w-100 mt-2 py-3 px-3 rounded-lg bg-white border border-gray-400 text-gray-800 font-semibold focus:border-orange-500 focus:outline-none"
/ >
< / div >
< div className = "flex flex-col mt-2" >
< label for = "email" className = "hidden" >
Email
< / label >
< input
type = "email"
name = "email"
id = "email"
placeholder = "Email"
className = "w-100 mt-2 py-3 px-3 rounded-lg bg-white border border-gray-400 text-gray-800 font-semibold focus:border-orange-500 focus:outline-none"
/ >
< / div >
< div className = "flex flex-col mt-2" >
< label for = "tel" className = "hidden" >
Number
< / label >
< input
type = "tel"
name = "tel"
id = "tel"
placeholder = "Telephone Number"
className = "w-100 mt-2 py-3 px-3 rounded-lg bg-white border border-gray-400 text-gray-800 font-semibold focus:border-orange-500 focus:outline-none"
/ >
< / div >
< button
type = "submit"
className = "md:w-32 bg-orange-700 hover:bg-blue-dark text-white font-bold py-3 px-6 rounded-lg mt-3 hover:bg-orange-600 transition ease-in-out duration-300"
>
Submit
< / button >
< / form >
< / div >
< / div >
< / div >
< / div >
) ;
}