react-use#useTitle JavaScript Examples

Home = () => {
	useTitle("DisStreamChat");

	const currentUser = firebase.auth.currentUser;

	return (
		<>
			<div className="main-view">
				<div className="header-area">
					<h1 className="body-header">Integrate your Discord server with Twitch</h1>
					<h3 className="body-subheader">
						Chat, moderation, interactivity, and much more easily integrated with Twitch
						and Discord!
					</h3>
				</div>
				<div className="buttons">
					<A href="#features" className="main-button dashboard-button">
						See Features
					</A>
					<A
						href="https://invite.disstreamchat.com"
						className="main-button dashboard-button"
					>
						Add to Discord
					</A>
					{currentUser && (
						<Link to="/dashboard" className="dashboard-button">
							My Dashboard
						</Link>
					)}
				</div>
			</div>
			<img src={`${process.env.PUBLIC_URL}/wave_top.svg`} alt="" />
			<div className="landing-background">
				<div className="landing" id="features">
					<Feature
						title="Manage all your chats from one app"
						body="Open, interact with, moderate, and do so much more for any channel you own or moderate for. You can even open multiple
							chats at once by Ctrl+clicking them and be a super-moderator of doom!"
						images={[`${process.env.PUBLIC_URL}/home.png`]}
					></Feature>
					<Feature
						title="Customize just about anything"
						body="You have the option to customize an abundance of different settings, both within the app and on the website. Updating a
                setting anywhere will apply them on the client immediately so you could change those secret settings off screen."
						images={[
							`${process.env.PUBLIC_URL}/merged2.png`,
						]}
						imageClassNames={["drop-shadow"]}
						reversed
					></Feature>
					<Feature
						title="Never miss a new follower again"
						body="Get all the notifications you could ever wish for in the app, like followers, subscriptions, bits, and many more. Customize
                them to fit your style or ignore them completely, whichever serves you and your army of viewing minions best."
						images={[`${process.env.PUBLIC_URL}/notifications.png`]}
					></Feature>
					<Feature
						title="No more scrolling for days looking for that one message"
						body="DisStreamChat provides an easy-to-use searchbar that you can access through Ctrl+f, not only does it allow you to search
                for that amazing cat gif you just missed, it also allows you to use tags to search for things like follows, links,
                usernames, and plenty more."
						images={[`${process.env.PUBLIC_URL}/merged1.png`]}
						imageClassNames={["drop-shadow"]}
						reversed
					></Feature>
					<Feature
						title="Turn the app into an overlay that actually shows"
						body="Set key-binds of your choice to make the app turn between focused and unfocused mode. When unfocused the app becomes as
							transparent as you want and allows you to interact with anything behind it. It's basically an overlay that works live on
							your own screen. Perfect for single monitor streamers or multiple monitor streamers that still don't have enough screen
                            space."
						images={[`${process.env.PUBLIC_URL}/unfocus.png`]}
					></Feature>
					<Feature
						title="Integrate your super-secret exclusive Discord chat channel"
						body="Set up the Discord bot to listen to any channels you want and integrate any chat going on in those chats into your chat
							client. At least now you can see your moderators talking about your messed up audio right from your own chat."
						images={[`${process.env.PUBLIC_URL}/discordmessage.png`]}
						reversed
					></Feature>
					{/* <Feature
						title="Integrate your super-secret exclusive discord chat channel"
						body="Set up the discord bot to listen to any channels you want and integrate any chat going on in those chats into your chat
							client. At least now you can see your moderators talking about your messed up audio right from your own chat."
						images={[`${process.env.PUBLIC_URL}/discordmessage.png`]}
						reversed
					></Feature> */}
				</div>
			</div>
			<img id="bottom-img" src={`${process.env.PUBLIC_URL}/wave_invert.svg`} alt="" />
		</>
	);
}