Added Sections

YuriClan · Aug 2, 2023 · c12ecf3 · c12ecf3
1 parent d2ce566
commit c12ecf3
Show file tree

Hide file tree

Showing 22 changed files with 5,762 additions and 112 deletions.
diff --git a/components/Command.tsx b/components/Command.tsx
@@ -0,0 +1,64 @@
+import React from 'react'
+import {
+    Calculator,
+    Calendar,
+    CreditCard,
+    Settings,
+    Smile,
+    User,
+} from "lucide-react"
+import style from '../styles/style.module.css'
+
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList,
+    CommandSeparator,
+    CommandShortcut,
+} from "@/components/ui/command"
+
+export function CommandDemo() {
+    return (
+      <Command className={style.comamndContainer}>
+        <CommandInput placeholder="Type a command or search..." />
+        <CommandList>
+          <CommandEmpty>No results found.</CommandEmpty>
+          <CommandGroup heading="q'command'">
+            <CommandItem>
+              <Calendar className="mr-2 h-4 w-4" />
+              <span>help</span>
+            </CommandItem>
+            <CommandItem>
+              <Smile className="mr-2 h-4 w-4" />
+              <span>inspire</span>
+            </CommandItem>
+            <CommandItem>
+              <Calculator className="mr-2 h-4 w-4" />
+              <span>quotecategories</span>
+            </CommandItem>
+          </CommandGroup>
+          <CommandSeparator />
+          <CommandGroup heading="Nerdy Commands">
+            <CommandItem>
+              <User className="mr-2 h-4 w-4" />
+              <span>nutrition `egg` `1` `boiled`</span>
+              <CommandShortcut>qnutrition</CommandShortcut>
+            </CommandItem>
+            {/* <CommandItem>
+              <CreditCard className="mr-2 h-4 w-4" />
+              <span>Billing</span>
+              <CommandShortcut>⌘B</CommandShortcut>
+            </CommandItem>
+            <CommandItem>
+              <Settings className="mr-2 h-4 w-4" />
+              <span>Settings</span>
+              <CommandShortcut>⌘S</CommandShortcut>
+            </CommandItem> */}
+          </CommandGroup>
+        </CommandList>
+      </Command>
+    )
+}
diff --git a/components/CommandSection.tsx b/components/CommandSection.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import { CommandDemo } from './Command'
+import style from '../styles/style.module.css'
+import Image from 'next/image'
+
+function CommandSection() {
+  return (
+    <>
+        <div className={style.commandMenuSection}>
+            <div className={style.leftCommand}>
+                <h1 className={style.commandMenuTitle}>Commands that are dope.</h1>
+                <p className={style.commandMenuPara}>
+                    YuriBot has a wide range of commands that are useful for your server. From moderation to fun commands, YuriBot has it all.
+                </p>
+            </div>
+            <div className={style.rightCommand}>
+                <CommandDemo/>
+            </div>
+        </div>
+    </>
+  )
+}
+
+export default CommandSection
diff --git a/components/Foot.tsx b/components/Foot.tsx
@@ -0,0 +1,76 @@
+import React from "react";
+import {
+Box,
+Container,
+Row,
+Column,
+FooterLink,
+Heading,
+} from "components/FooterStyles";
+import style from '../styles/style.module.css'
+
+const Footer = () => {
+return (
+	<Box>
+	<h1 className={style.footerTitle}>
+		YuriClan - Yuri - A Discord Bot
+	</h1>
+	<Container>
+		<Row>
+		<Column>
+			<Heading>About Us</Heading>
+			<FooterLink href="#">Aim</FooterLink>
+			<FooterLink href="#">Vision</FooterLink>
+			<FooterLink href="#">Testimonials</FooterLink>
+		</Column>
+		<Column>
+			<Heading>Services</Heading>
+			<FooterLink href="#">Writing</FooterLink>
+			<FooterLink href="#">Internships</FooterLink>
+			<FooterLink href="#">Coding</FooterLink>
+			<FooterLink href="#">Teaching</FooterLink>
+		</Column>
+		<Column>
+			<Heading>Contact Us</Heading>
+			<FooterLink href="#">Uttar Pradesh</FooterLink>
+			<FooterLink href="#">Ahemdabad</FooterLink>
+			<FooterLink href="#">Indore</FooterLink>
+			<FooterLink href="#">Mumbai</FooterLink>
+		</Column>
+		<Column>
+			<Heading>Social Media</Heading>
+			<FooterLink href="#">
+			<i className="fab fa-facebook-f">
+				<span style={{ marginLeft: "10px" }}>
+				Facebook
+				</span>
+			</i>
+			</FooterLink>
+			<FooterLink href="#">
+			<i className="fab fa-instagram">
+				<span style={{ marginLeft: "10px" }}>
+				Instagram
+				</span>
+			</i>
+			</FooterLink>
+			<FooterLink href="#">
+			<i className="fab fa-twitter">
+				<span style={{ marginLeft: "10px" }}>
+				Twitter
+				</span>
+			</i>
+			</FooterLink>
+			<FooterLink href="#">
+			<i className="fab fa-youtube">
+				<span style={{ marginLeft: "10px" }}>
+				Youtube
+				</span>
+			</i>
+			</FooterLink>
+		</Column>
+		</Row>
+	</Container>
+	</Box>
+);
+};
+export default Footer;
diff --git a/components/FooterStyles.ts b/components/FooterStyles.ts
@@ -0,0 +1,61 @@
+import styled from 'styled-components';
+
+export const Box = styled.div`
+padding: 80px 60px;
+background: black;
+// position: absolute;
+bottom: 0;
+width: 100%;
+
+
+@media (max-width: 1000px) {
+	padding: 70px 30px;
+}
+`;
+
+export const Container = styled.div`
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	max-width: 1000px;
+	margin: 0 auto;
+	/* background: red; */
+`
+
+export const Column = styled.div`
+display: flex;
+flex-direction: column;
+text-align: left;
+margin-left: 60px;
+`;
+
+export const Row = styled.div`
+display: grid;
+grid-template-columns: repeat(auto-fill,
+						minmax(185px, 1fr));
+grid-gap: 20px;
+
+@media (max-width: 1000px) {
+	grid-template-columns: repeat(auto-fill,
+						minmax(200px, 1fr));
+}
+`;
+
+export const FooterLink = styled.a`
+color: #fff;
+margin-bottom: 20px;
+font-size: 18px;
+text-decoration: none;
+
+&:hover {
+	color: green;
+	transition: 200ms ease-in;
+}
+`;
+
+export const Heading = styled.p`
+font-size: 24px;
+color: #fff;
+margin-bottom: 40px;
+font-weight: bold;
+`;
diff --git a/components/Grid.tsx b/components/Grid.tsx
@@ -0,0 +1,84 @@
+import React from "react";
+import { Container, Row, Col } from "reactstrap";
+import 'bootstrap/dist/css/bootstrap.min.css';
+import style from '../styles/style.module.css'
+import Image from "next/image";
+import { useState } from "react";
+
+const colorMap = {
+    gridContainer1: "#a756cc",
+    gridContainer2: "#0e2072",
+    gridContainer3: "#55dcd1",
+};
+
+function Grid() {
+    const [hoveredContainer, setHoveredContainer] = useState(null);
+
+    const handleContainerHover = (container) => {
+        setHoveredContainer(container);
+    };
+
+    const handleContainerLeave = () => {
+        setHoveredContainer(null);
+    };
+    return (
+      <>
+         <div className={`${style.gridChange}`} style={{ backgroundColor: colorMap[hoveredContainer] }}>
+          <Container>
+            <Row>
+              <Col sm>
+                <div className={style.backText}>
+                    <p>AUTOMOD<br/>INSPIRE<br/>CUTE<br/>POWERFULL</p>
+                </div>
+              <div className={`${style.gridContainers} ${style.gridContainer1}`}
+                                onMouseEnter={() => handleContainerHover("gridContainer1")}
+                                onMouseLeave={handleContainerLeave}>
+                  <div className={style.gridLogo1}>
+                    <Image src="/skeptical.png" alt="YuriClan" width={75} height={100}/>
+                  </div>
+                  <div className={style.gridHero}>
+                    <p>Always Skeptical.</p>
+                  </div>
+                  <div className={style.gridPara}>
+                    <p>Zero-mercy for anti-peace discordians</p>
+                  </div>
+                </div>
+              </Col>
+              <Col sm>
+                <div className={`${style.gridContainers} ${style.gridContainer2}`}
+                                onMouseEnter={() => handleContainerHover("gridContainer2")}
+                                onMouseLeave={handleContainerLeave}>
+                  <div className={style.gridLogo2}>
+                    <Image src="/stardust.png" alt="Aggressive Icon" width={95} height={85}/>
+                  </div>
+                  <div className={style.gridHero}>
+                    <p>Fear the Dominance.</p>
+                  </div>
+                  <div className={style.gridPara}>
+                    <p>Unleashing power, one code at a time.</p>
+                  </div>
+                </div>
+              </Col>
+              <Col sm>
+                <div className={`${style.gridContainers} ${style.gridContainer3}`}
+                                onMouseEnter={() => handleContainerHover("gridContainer3")}
+                                onMouseLeave={handleContainerLeave}>
+                  <div className={style.gridLogo3}>
+                    <Image src="/cryo.png" alt="Powerful Icon" width={95} height={95}/>
+                  </div>
+                  <div className={style.gridHero}>
+                    <p>The Unstoppable Force.</p>
+                  </div>
+                  <div className={style.gridPara}>
+                    <p>Commanding the digital realm with might.</p>
+                  </div>
+                </div>
+              </Col>
+            </Row>
+          </Container>
+        </div>
+      </>
+    );
+}
+
+export default Grid;
diff --git a/components/HoverCard.tsx b/components/HoverCard.tsx
@@ -0,0 +1,44 @@
+import { CalendarDays } from "lucide-react"
+
+import style from "../styles/style.module.css"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/components/ui/avatar"
+import { Button } from "components/ui/button"
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/components/ui/hover-card"
+
+export function HoverCardDemo() {
+  return (
+    <HoverCard>
+      <HoverCardTrigger asChild className={style.mainHover}>
+        <Button variant="link" className={style.hoverButton}>@YuriClan</Button>
+      </HoverCardTrigger>
+      <HoverCardContent className="w-80 bg-[#e7e7e7]">
+        <div className="flex justify-between space-x-4">
+          <Avatar>
+            <AvatarImage src="/pyro_red.png" />
+            <AvatarFallback>YC</AvatarFallback>
+          </Avatar>
+          <div className={style.hoverMainRight}>
+            <h4 className="text-sm font-semibold">@YuriClan</h4>
+            <p className="text-sm">
+              YuriBot: Enrich Your Discord Community with Power and Style!
+            </p>
+            <div className="flex items-center pt-2">
+              <CalendarDays className="mr-2 h-4 w-4 opacity-70" />{" "}
+              <span className="text-xs text-muted-foreground">
+                Emoticon Eruption Day! 😎🎉
+              </span>
+            </div>
+          </div>
+        </div>
+      </HoverCardContent>
+    </HoverCard>
+  )
+}
diff --git a/components/MainSection.tsx b/components/MainSection.tsx
@@ -4,6 +4,7 @@ import Image from 'next/image'
 import { Badge } from "@/components/ui/badge"
 // import { Button } from "@/components/ui/button"
 import { badgeVariants } from "@/components/ui/badge"
+import {HoverCardDemo} from 'components/HoverCard'
 
 
 function MainSection() {
@@ -19,6 +20,9 @@ function MainSection() {
                 <p className={style.mainSectionPara}>
                     YuriBot: Your Discord Commando! Dominate with inspiration, crush <span>offenders</span> with <span>ruthless</span> moderation, and unleash its untamed potential. <span>The ultimate force in action!</span>
                 </p>
+                <div className="hoverContainer">
+                    Made with &#10084; by<HoverCardDemo/>
+                </div>
             </div>
         </div>
     </>