Patrick_Pluto/react-typescript-test
1
0
Fork 0
forked from React-Group/react-typescript-test
Code Pull requests Activity

Compare commits

base: Patrick_Pluto:bce1f0579838fa677ad2a09f96d4ba7dad9d5dda
Branches Tags
Patrick_Pluto:main
React-Group:main
..
compare: Patrick_Pluto:c2a178cdffff58efd4b9f8594db75f08de6764f3
Branches Tags
Patrick_Pluto:main
React-Group:main

16 commits
bce1f05798 ... c2a178cdff

Author SHA1 Message Date
Patrick
c2a178cdff Merge pull request 'main' (#2) from React-Group/react-typescript-test:main into main 
Reviewed-on: https://interstellardevelopment.org/code/code/Patrick_Pluto/react-typescript-test/pulls/2
 2024-09-04 22:11:46 +02:00
Patrick
f99a5353de Merge pull request 'Fixed my mistake' (#3) from sageTheDm/react-typescript-test:main into main 
Reviewed-on: https://interstellardevelopment.org/code/code/React-Group/react-typescript-test/pulls/3
 2024-09-04 22:06:51 +02:00
Sage The DM
27b9e05e5e Fixed my mistake 2024-09-04 21:49:06 +02:00
Patrick_Pluto
8438ec2f9c Update app/LandingPage.tsx 2024-09-04 21:27:47 +02:00
Patrick_Pluto
8e4ba2de74 Update app/App.css 2024-09-04 21:27:26 +02:00
Patrick_Pluto
bab57ab5a8 Update app/App.css 2024-09-04 21:24:16 +02:00
Patrick_Pluto
d2ddd362a9 Update app/App.css 2024-09-04 21:21:29 +02:00
Patrick_Pluto
dc850140b3 Update app/LandingPage.tsx 2024-09-04 21:21:06 +02:00
Patrick_Pluto
cc42680e34 Update app/LandingPage.tsx 2024-09-04 21:17:26 +02:00
Patrick_Pluto
f6fabd0c2c Update next.config.mjs 2024-09-04 21:15:18 +02:00
Patrick_Pluto
02156bd30c Update next.config.mjs 2024-09-04 21:13:28 +02:00
Patrick_Pluto
ca090ed4ab Update next.config.mjs 2024-09-04 21:11:49 +02:00
Patrick_Pluto
f812ac1d2b Update next.config.mjs 2024-09-04 21:10:21 +02:00
Patrick_Pluto
47e7c006bf Update next.config.mjs 2024-09-04 20:57:29 +02:00
Patrick_Pluto
595b50585b Update package.json 2024-09-04 20:18:21 +02:00
Patrick
5d2a13de4c Merge pull request 'Changes' (#2) from Patrick_Pluto/react-typescript-test:main into main 
Reviewed-on: https://interstellardevelopment.org/code/code/React-Group/react-typescript-test/pulls/2
 2024-09-04 19:40:20 +02:00
3 changed files with 38 additions and 343 deletions
Download patch file Download diff file Expand all files Collapse all files

375
app/App.css
View file

@ -1,157 +1,4 @@
/* app.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Basic body styling */
body {
background-color: #f4f4f4;
color: #333;
line-height: 1.6;
display: flex;
flex-direction: column;
min-height: 100vh;
margin-top: 10em;
background-image: url(/img/image.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
/* Header styling */
.header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: 100%;
position: fixed;
top: 0;
}
.header h1 {
font-size: 24px;
margin-bottom: 10px;
}
.header nav {
margin-top: 10px;
}
.header button {
margin: 0 10px;
padding: 10px 20px;
border-radius: 4px;
background-color: #4a90e2;
color: #fff;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
border: none;
}
.header button:hover {
background-color: #357ab8;
}
/* Content container */
.content {
padding: 20px;
flex: 1;
text-align: center;
max-width: 1200px;
margin: 0 auto;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* Card styles */
section .cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-top: 50px;
}
section .card {
text-align: center;
list-style: none;
background-color: rgba(46, 58, 95, 0.9); /* Dark blue with transparency */
padding: 20px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8); /* Stronger shadow for depth */
border: 1px solid #3a4971; /* Slightly lighter border for card edges */
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
section .card:hover {
transform: translateY(-5px); /* Slight lift effect */
box-shadow: 0 10px 30px rgba(255, 221, 85, 0.5); /* Yellow glow on hover */
}
section .card img {
height: 80px; /* Image size */
width: 80px;
object-fit: cover;
border-radius: 50%; /* Circular image */
margin: 0 auto 15px;
box-shadow: 0 0 10px rgba(255, 221, 85, 0.5); /* Glow around the image */
}
section .card h3 {
margin: 10px 0;
font-size: 1.2em;
font-weight: bold;
color: #ffdd55; /* Star yellow for card titles */
text-shadow: 0 0 10px #ffdd55; /* Glow effect */
}
section .card p {
flex-grow: 1;
color: #c7d5e0; /* Light gray-blue for card content */
margin-bottom: 10px;
}
/* Responsive layout */
@media (max-width: 768px) {
.header h1 {
font-size: 20px;
}
.header button {
margin: 5px 0;
padding: 10px;
font-size: 14px;
}
.content {
padding: 15px;
margin-top: 15px;
}
section .card {
padding: 12px; /* Adjusted padding */
}
section .card img {
height: 60px; /* Adjusted height */
width: 60px; /* Adjusted width */
border-radius: 8px; /* Adjusted border-radius */
}
}
/* app.css */
/* General Reset */
* {
margin: 0;
padding: 0;
@ -160,12 +7,13 @@ section .card p {
/* Basic body styling */
body {
background-color: #f4f4f4;
background: #f4f4f4 url(/img/image.png) no-repeat center/cover fixed;
color: #333;
line-height: 1.6;
display: flex;
flex-direction: column;
min-height: 100vh;
margin-top: 10em;
}
/* Header styling */
@ -176,6 +24,9 @@ body {
text-align: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: 100%;
position: fixed;
top: 0;
z-index: 1000;
}
.header h1 {
@ -195,8 +46,8 @@ body {
color: #fff;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
border: none;
transition: background-color 0.3s ease;
}
.header button:hover {
@ -209,29 +60,28 @@ body {
flex: 1;
text-align: center;
max-width: 1200px;
margin: 0 auto;
margin: 80px auto 0; /* Adjusted for fixed header height */
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin-top: 20px;
}
/* Card styles */
section.cards {
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-top: 50px;
}
section.card {
.card {
text-align: center;
list-style: none;
background-color: rgba(46, 58, 95, 0.9); /* Dark blue with transparency */
background-color: rgba(46, 58, 95, 0.9);
padding: 20px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8); /* Stronger shadow for depth */
border: 1px solid #3a4971; /* Slightly lighter border for card edges */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);
border: 1px solid #3a4971;
position: relative;
overflow: hidden;
display: flex;
@ -240,31 +90,31 @@ section.card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
section.card:hover {
transform: translateY(-5px); /* Slight lift effect */
box-shadow: 0 10px 30px rgba(255, 221, 85, 0.5); /* Yellow glow on hover */
.card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(255, 221, 85, 0.5);
}
section.card img {
height: 80px; /* Image size */
.card img {
height: 80px;
width: 80px;
object-fit: cover;
border-radius: 50%; /* Circular image */
border-radius: 50%;
margin: 0 auto 15px;
box-shadow: 0 0 10px rgba(255, 221, 85, 0.5); /* Glow around the image */
box-shadow: 0 0 10px rgba(255, 221, 85, 0.5);
}
section.card h3 {
.card h3 {
margin: 10px 0;
font-size: 1.2em;
font-weight: bold;
color: #ffdd55; /* Star yellow for card titles */
text-shadow: 0 0 10px #ffdd55; /* Glow effect */
color: #ffdd55;
text-shadow: 0 0 10px #ffdd55;
}
section.card p {
.card p {
flex-grow: 1;
color: #c7d5e0; /* Light gray-blue for card content */
color: #c7d5e0;
margin-bottom: 10px;
}
@ -285,174 +135,17 @@ section.card p {
margin-top: 15px;
}
section.cards {/* app.css */
.cards {
grid-template-columns: 1fr;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.card {
padding: 12px;
}
/* Basic body styling */
body {
background-color: #f4f4f4;
color: #333;
line-height: 1.6;
display: flex;
flex-direction: column;
min-height: 100vh;
background-image: url(/img/image.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
/* Header styling */
.header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: 100%;
position: fixed;
top: 0;
z-index: 1000; /* Ensure header stays above other content */
}
.header h1 {
font-size: 24px;
margin-bottom: 10px;
}
.header nav {
margin-top: 10px;
}
.header button {
margin: 0 10px;
padding: 10px 20px;
border-radius: 4px;
background-color: #4a90e2;
color: #fff;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
border: none;
}
.header button:hover {
background-color: #357ab8;
}
/* Content container */
.content {
padding: 20px;
flex: 1;
text-align: center;
max-width: 1200px;
margin: 80px auto 0; /* Adjusted for fixed header height */
background-color: #fff;
.card img {
height: 60px;
width: 60px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* Card styles */
section.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-top: 50px;
}
section.card {
text-align: center;
list-style: none;
background-color: rgba(46, 58, 95, 0.9); /* Dark blue with transparency */
padding: 20px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8); /* Stronger shadow for depth */
border: 1px solid #3a4971; /* Slightly lighter border for card edges */
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
section.card:hover {
transform: translateY(-5px); /* Slight lift effect */
box-shadow: 0 10px 30px rgba(255, 221, 85, 0.5); /* Yellow glow on hover */
}
section.card img {
height: 80px; /* Image size */
width: 80px;
object-fit: cover;
border-radius: 50%; /* Circular image */
margin: 0 auto 15px;
box-shadow: 0 0 10px rgba(255, 221, 85, 0.5); /* Glow around the image */
}
section.card h3 {
margin: 10px 0;
font-size: 1.2em;
font-weight: bold;
color: #ffdd55; /* Star yellow for card titles */
text-shadow: 0 0 10px #ffdd55; /* Glow effect */
}
section.card p {
flex-grow: 1;
color: #c7d5e0; /* Light gray-blue for card content */
margin-bottom: 10px;
}
/* Responsive layout */
@media (max-width: 768px) {
.header h1 {
font-size: 20px;
}
.header button {
margin: 5px 0;
padding: 10px;
font-size: 14px;
}
.content {
padding: 15px;
margin-top: 15px; /* Adjusted for smaller screen size */
}
section.cards {
grid-template-columns: 1fr; /* One card per row on mobile */
}
section.card {
padding: 12px; /* Adjusted padding */
}
section.card img {
height: 60px; /* Adjusted height */
width: 60px; /* Adjusted width */
border-radius: 8px; /* Adjusted border-radius */
}
}
grid-template-columns: 1fr; /* One card per row on mobile */
}
section.card {
padding: 12px; /* Adjusted padding */
}
section.card img {
height: 60px; /* Adjusted height */
width: 60px; /* Adjusted width */
border-radius: 8px; /* Adjusted border-radius */
}
}

4
next.config.mjs
View file

@ -1,4 +1,6 @@
/** @type {import('next').NextConfig} */
const nextConfig = {};
const nextConfig = {
basePath: '/react',
};
export default nextConfig;

2
package.json
View file

@ -3,7 +3,7 @@
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"dev": "next dev -p 3001",
"build": "next build",
"start": "next start",
"lint": "next lint"