asowneryt/computer-repair
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

i forgot

Browse Source
This commit is contained in:
ASOwnerYT
2024-11-29 21:53:46 +13:00
parent c36d7bf52a
commit b22461cd61
8 changed files with 87 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/assets/close.svg
+4
View File
@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 6L18 18M18 6L6 18" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 344 B

src/app/components/Button.js
+7
View File
@@ -0,0 +1,7 @@
import styles from "./Button.module.css";
export default function Button({ children, onClick }) {
return (
<button className={styles.button} onClick={onClick}>{children}</button>
);
}
src/app/components/Button.module.css
+20
View File
@@ -0,0 +1,20 @@
.button {
background-color: white;
border: none;
color: black;
padding: 1em 2em;
text-align: center;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5em;
font-size: 1em;
cursor: pointer;
border-radius: 5px;
}
.button svg {
width: 1em;
height: 1em;
}
src/app/components/Navbar.js
+16 -5
View File
@@ -1,10 +1,21 @@
"use client"
import { useState } from "react";
import Image from "next/image";
import Link from 'next/link'
import Link from "next/link";
import styles from "./Navbar.module.css";
import logo from "../assets/logo.svg";
import menu from "../assets/menu.svg";
import close from "../assets/close.svg"
export default function Navbar() {
const [isActive, setActive] = useState("false");
function handleToggle() {
setActive(!isActive);
console.log("asdhjiuashd")
}
return (
<nav className={`${styles.navbar} shadow`}>
<div className={`${styles.container} container`}>
@@ -14,11 +25,11 @@ export default function Navbar() {
<Image src={logo} width="32" height="32" alt="Logo" />
</Link>
</div>
<button className={styles.menuIcon} aria-label="Menu">
<Image src={menu} width="32" height="32" alt="Menu" />
<button className={styles.menuIcon} aria-label="Menu" onClick={handleToggle}>
<Image src={isActive ? menu : close} width="32" height="32" alt="Menu" />
</button>
</div>
<ul className={styles.links}>
<ul className={`${styles.links} ${isActive ? "" : styles.active }`}>
<li>
<Link href="/" className={styles.active}>
Home
@@ -30,7 +41,7 @@ export default function Navbar() {
<li>
<a href="gallery.html">Gallery</a>
</li>
<li>
<li className={styles.last}>
<Link href="/contact">Contact Us</Link>
</li>
</ul>
src/app/components/Navbar.module.css
+10 -14
View File
@@ -18,11 +18,8 @@
/* Position nav items correctly */
.navbar .container li {
display: inline;
}
/* Padding betweeen nav items */
.navbar .container li:not(:last-of-type) {
padding-right: 1rem;
padding-left: 0.5em;
padding-right: 0.5em;
}
/* Reset default styling on links */
@@ -31,11 +28,6 @@
text-decoration: none;
}
.highlight {
color: white;
background-color: blue;
}
/* Underline links on hover */
.navbar .container li a:hover {
text-decoration: underline;
@@ -68,6 +60,7 @@
z-index: -2;
font-size: 1rem;
background-color: white;
transition-property: top border-radius;
transition-duration: 0.3s;
@@ -85,8 +78,8 @@
margin-bottom: 0.5rem;
}
.links.active {
top: 60px;
.active {
top: 65px;
border-radius: 0 0 0.5em 0.5em;
}
@@ -107,6 +100,11 @@
flex-direction: row;
}
.links li {
padding-top: 1rem;
padding-bottom: 1rem;
}
.menuIcon {
display: none;
}
@@ -116,8 +114,6 @@
flex-direction: row;
align-items: center;
justify-content: space-between;
padding-top: 1rem;
padding-bottom: 1rem;
}
}
src/app/globals.css
+3 -11
View File
@@ -19,10 +19,6 @@ html {
--accent: #034ea2;
--accent-secondary: #085fc3;
/* Spacing */
--section-spacing: 4rem;
--spacing: 3rem;
/* Misc */
--transition: 0.2s ease-in-out;
}
@@ -260,7 +256,8 @@ textarea {
*/
h1 {
margin-bottom: 1rem;
font-size: 2em;
margin-bottom: 1em;
}
h2 {
@@ -269,7 +266,7 @@ h2 {
@media screen and (min-width: 480px) {
h1 {
font-size: 2.5rem;
font-size: 2.5em;
}
}
@@ -348,8 +345,3 @@ a:hover,
box-shadow var(--transition),
-webkit-box-shadow var(--transition);
}
/* Section */
section {
margin-bottom: var(--spacing);
}
src/app/page.js
+24
View File
@@ -1,6 +1,9 @@
import Image from "next/image";
import styles from "./page.module.css";
import bgimage from "./assets/header-bg.jpg";
import Button from "./components/Button";
import Card from "./components/Card";
import Link from "next/link";
export default function Home() {
return (
@@ -29,11 +32,32 @@ export default function Home() {
supportive community, and prompt assistance make working
with us a breeze.
</p>
<Link href="/contact">
<Button>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M2 3.5A1.5 1.5 0 0 1 3.5 2h1.148a1.5 1.5 0 0 1 1.465 1.175l.716 3.223a1.5 1.5 0 0 1-1.052 1.767l-.933.267c-.41.117-.643.555-.48.95a11.542 11.542 0 0 0 6.254 6.254c.395.163.833-.07.95-.48l.267-.933a1.5 1.5 0 0 1 1.767-1.052l3.223.716A1.5 1.5 0 0 1 18 15.352V16.5a1.5 1.5 0 0 1-1.5 1.5H15c-1.149 0-2.263-.15-3.326-.43A13.022 13.022 0 0 1 2.43 8.326 13.019 13.019 0 0 1 2 5V3.5Z"
clipRule="evenodd"
/>
</svg>
Get in touch with us today
</Button>
</Link>
</div>
</div>
</div>
</div>
</section>
<section className="container">
<h1>Services we Offer</h1>
<Card />
</section>
</main>
</div>
);
src/app/page.module.css
+2
View File
@@ -1,6 +1,7 @@
.header {
position: relative;
height: 50em;
margin-bottom: 3.5em;
}
.header img {
@@ -24,6 +25,7 @@
.header {
height: 50em;
clip-path: polygon(0 0, 100% 0, 100% 25em, 0 100%);
margin-bottom: none;
}
.textbox {