spitkov/nebualossite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update v2

Browse Source
This commit is contained in:
spitkov 2024-10-07 17:51:35 +02:00
parent 0b31fbe37f
commit a84fc30473
10 changed files with 168 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
package-lock.json generated
View File

@ -11,7 +11,6 @@
"framer-motion": "^4.1.17",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-draggable": "^4.4.6",
"react-icons": "^4.2.0",
"react-router-dom": "^6.26.2",
"react-scroll": "^1.9.0",
@ -19,6 +18,7 @@
},
"devDependencies": {
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
"cross-env": "^7.0.3",
"react-scripts": "4.0.3"
}
},
@ -6532,15 +6532,6 @@
"wrap-ansi": "^6.2.0"
}
},
"node_modules/clsx": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
"integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
"license": "MIT",
"engines": {
"node": ">=6"
}
},
"node_modules/co": {
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@ -6999,6 +6990,25 @@
"optional": true,
"peer": true
},
"node_modules/cross-env": {
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
"integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
"dev": true,
"license": "MIT",
"dependencies": {
"cross-spawn": "^7.0.1"
},
"bin": {
"cross-env": "src/bin/cross-env.js",
"cross-env-shell": "src/bin/cross-env-shell.js"
},
"engines": {
"node": ">=10.14",
"npm": ">=6",
"yarn": ">=1"
}
},
"node_modules/cross-spawn": {
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@ -19553,20 +19563,6 @@
"react": "17.0.2"
}
},
"node_modules/react-draggable": {
"version": "4.4.6",
"resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.6.tgz",
"integrity": "sha512-LtY5Xw1zTPqHkVmtM3X8MUOxNDOUhv/khTgBgrUvwaS064bwVvxT+q5El0uUFNx5IEPKXuRejr7UqLwBIg5pdw==",
"license": "MIT",
"dependencies": {
"clsx": "^1.1.1",
"prop-types": "^15.8.1"
},
"peerDependencies": {
"react": ">= 16.3.0",
"react-dom": ">= 16.3.0"
}
},
"node_modules/react-error-overlay": {
"version": "6.0.11",
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",

3
package.json
View File

@ -4,7 +4,7 @@
"description": "Website for NebulaOS Android operating system",
"main": "src/index.js",
"scripts": {
"start": "PORT=5590 react-scripts --openssl-legacy-provider start",
"start": "cross-env PORT=5590 react-scripts --openssl-legacy-provider start",
"build": "react-scripts --openssl-legacy-provider build",
"test": "react-scripts test",
"eject": "react-scripts eject"
@ -20,6 +20,7 @@
},
"devDependencies": {
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
"cross-env": "^7.0.3",
"react-scripts": "4.0.3"
},
"browserslist": {

2
src/App.js
View File

@ -7,6 +7,7 @@ import Features from './components/Features';
import Footer from './components/Footer';
import Download from './pages/Download';
import Donate from './pages/Donate'; // Renamed from Support
import StarryBackground from './components/StarryBackground';
import styles from './App.module.css';
function App() {
@ -18,6 +19,7 @@ function App() {
transition={{ duration: 0.5 }}
className={styles.app}
>
<StarryBackground />
<Header />
<Routes>
<Route path="/" element={

10
src/components/Features.js
View File

@ -29,7 +29,13 @@ function Features() {
}, []);
return (
<section id="features" className={styles.features}>
<motion.section
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.5, delay: 0.2 }}
id="features"
className={styles.features}
>
<div ref={starryBackgroundRef} className={styles.starryBackground}></div>
<div className={styles.floatingElement}></div>
<div className={styles.floatingElement}></div>
@ -58,7 +64,7 @@ function Features() {
))}
</div>
</div>
</section>
</motion.section>
);
}

53
src/components/Features.module.css
View File

@ -1,8 +1,9 @@
.features {
background: linear-gradient(135deg, rgba(26, 32, 44, 0.9) 0%, rgba(45, 55, 72, 0.9) 100%);
padding: 2rem 0; /* Reduced padding */
background: transparent; /* Removed the gradient */
padding: 4rem 0 2rem;
position: relative;
overflow: hidden;
margin-top: 0;
}
.starryBackground {
@ -70,43 +71,63 @@
.container {
position: relative;
z-index: 1;
max-width: 1200px;
max-width: 1100px;
margin: 0 auto;
padding: 0 2rem;
padding: 3rem;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
border-radius: 24px;
backdrop-filter: blur(10px);
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);
border: 1px solid rgba(255, 255, 255, 0.18);
}
.title {
font-size: 2rem; /* Reduced font size */
font-size: 2.25rem; /* Slightly reduced font size */
text-align: center;
margin-bottom: 1.5rem; /* Reduced margin */
margin-bottom: 2.5rem; /* Increased margin */
color: #81e6d9;
}
.featureGrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Reduced minmax width */
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Reduced minmax width */
gap: 1.5rem; /* Reduced gap */
margin-bottom: 1.5rem; /* Reduced bottom margin */
}
.featureCard {
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
padding: 1rem; /* Reduced padding */
backdrop-filter: blur(10px);
transition: transform 0.3s ease;
background: rgba(255, 255, 255, 0.08); /* Slightly reduced opacity */
border-radius: 12px; /* Reduced border radius */
padding: 1.25rem; /* Reduced padding */
backdrop-filter: blur(8px);
transition: transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.featureCard:hover {
transform: translateY(-5px);
transform: translateY(-3px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
.featureCard h3 {
font-size: 1.3rem; /* Reduced font size */
margin-bottom: 0.5rem;
font-size: 1.2rem; /* Reduced font size */
margin-bottom: 0.75rem;
color: #81e6d9;
}
.featureCard p {
font-size: 0.9rem; /* Reduced font size */
font-size: 0.9rem;
color: #e2e8f0;
line-height: 1.5;
}
/* Add a media query for smaller screens */
@media (max-width: 768px) {
.container {
padding: 2rem;
}
.featureGrid {
grid-template-columns: 1fr; /* Single column on smaller screens */
}
}

79
src/components/Hero.js
View File

@ -1,27 +1,9 @@
import React, { useEffect, useRef } from 'react';
import React from 'react';
import { motion } from 'framer-motion';
import { Link } from 'react-router-dom';
import styles from './Hero.module.css';
function Hero() {
const starryBackgroundRef = useRef(null);
useEffect(() => {
const starryBackground = starryBackgroundRef.current;
const numberOfStars = 100;
for (let i = 0; i < numberOfStars; i++) {
const star = document.createElement('div');
star.className = styles.star;
star.style.width = `${Math.random() * 3}px`;
star.style.height = star.style.width;
star.style.left = `${Math.random() * 100}%`;
star.style.top = `${Math.random() * 100}%`;
star.style.animationDelay = `${Math.random() * 4}s`;
starryBackground.appendChild(star);
}
}, []);
return (
<motion.section
initial={{ opacity: 0, y: 50 }}
@ -29,40 +11,37 @@ function Hero() {
transition={{ duration: 0.5 }}
className={styles.hero}
>
<div ref={starryBackgroundRef} className={styles.starryBackground}></div>
<div className={styles.floatingElement}></div>
<div className={styles.floatingElement}></div>
<div className={styles.floatingElement}></div>
<div className={styles.container}>
<div className={styles.content}>
<motion.h2
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.2, duration: 0.5 }}
className={styles.comingSoon}
>
Coming Soon
</motion.h2>
<motion.h1
initial={{ scale: 0.5 }}
animate={{ scale: 1 }}
transition={{ type: 'spring', stiffness: 260, damping: 20 }}
>
NebulaOS
</motion.h1>
<motion.p
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.4, duration: 0.5 }}
>
Get ready for the future of Android with our sleek and powerful operating system.
</motion.p>
<motion.div className={styles.ctaContainer}>
<Link to="/download" className={styles.cta}>
Download Beta
</Link>
</motion.div>
</div>
<div className={styles.content}>
<motion.h2
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.2, duration: 0.5 }}
className={styles.comingSoon}
>
Coming Soon
</motion.h2>
<motion.h1
initial={{ scale: 0.5 }}
animate={{ scale: 1 }}
transition={{ type: 'spring', stiffness: 260, damping: 20 }}
>
NebulaOS
</motion.h1>
<motion.p
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.4, duration: 0.5 }}
>
Get ready for the future of Android with our sleek and powerful operating system.
</motion.p>
<motion.div className={styles.ctaContainer}>
<Link to="/download" className={styles.cta}>
Download Beta
</Link>
</motion.div>
</div>
</motion.section>
);

49
src/components/Hero.module.css
View File

@ -1,12 +1,13 @@
.hero {
background: linear-gradient(135deg, rgba(26, 32, 44, 0.9) 0%, rgba(45, 55, 72, 0.9) 100%);
background: transparent; /* Removed the gradient */
color: white;
padding: 2rem 0; /* Reduced padding */
padding: 4rem 0 2rem;
position: relative;
overflow: hidden;
min-height: 60vh; /* Reduced height */
min-height: 60vh;
display: flex;
align-items: center;
justify-content: center;
}
.starryBackground {
@ -71,49 +72,39 @@
75% { transform: translate(-10px, -10px) rotate(-5deg); }
}
.container {
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
width: 100%;
}
.content {
max-width: 600px;
max-width: 800px;
margin: 0 auto;
backdrop-filter: blur(10px);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
padding: 1.5rem; /* Reduced padding */
border-radius: 16px;
background: rgba(26, 32, 44, 0.5); /* Darker, more transparent background */
padding: 3rem;
border-radius: 24px;
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);
border: 1px solid rgba(255, 255, 255, 0.18);
transform: translateY(0); /* Remove vertical translation */
border: 1px solid rgba(255, 255, 255, 0.1);
text-align: center;
}
.content h1 {
font-size: 3.5rem; /* Reduced font size */
font-size: 3.5rem;
font-weight: bold;
margin-bottom: 1rem;
background: linear-gradient(45deg, #ffffff, #81e6d9, #4fd1c5);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
color: #81e6d9; /* Changed to a light teal color for better contrast */
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}
.comingSoon {
font-size: 1.5rem; /* Reduced font size */
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 0.5rem;
color: #81e6d9;
color: #ffffff; /* Changed to white for better visibility */
text-transform: uppercase;
letter-spacing: 0.1em;
}
.content p {
font-size: 1.1rem; /* Reduced font size */
margin-bottom: 1.5rem; /* Reduced margin */
font-size: 1.1rem;
margin-bottom: 1.5rem;
color: #e2e8f0; /* Light gray color for better readability */
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
line-height: 1.6;
}
@ -121,14 +112,14 @@
.ctaContainer {
display: flex;
justify-content: center;
gap: 1rem; /* Add gap between buttons */
gap: 1rem;
}
.cta {
display: inline-block;
background: linear-gradient(45deg, rgba(129, 230, 217, 0.8), rgba(79, 209, 197, 0.8));
color: #2d3748;
padding: 1rem 2rem; /* Adjust padding */
padding: 1rem 2rem;
border-radius: 9999px;
font-weight: bold;
font-size: 1rem;

27
src/components/StarryBackground.js Normal file
View File

@ -0,0 +1,27 @@
import React, { useEffect, useRef } from 'react';
import styles from './StarryBackground.module.css';
function StarryBackground() {
const starryBackgroundRef = useRef(null);
useEffect(() => {
const starryBackground = starryBackgroundRef.current;
const numberOfStars = 200; // Increased number of stars
const { width, height } = starryBackground.getBoundingClientRect();
for (let i = 0; i < numberOfStars; i++) {
const star = document.createElement('div');
star.className = styles.star;
star.style.width = `${Math.random() * 2 + 1}px`; // Size between 1-3px
star.style.height = star.style.width;
star.style.left = `${Math.random() * width}px`;
star.style.top = `${Math.random() * height}px`;
star.style.animationDelay = `${Math.random() * 4}s`;
starryBackground.appendChild(star);
}
}, []);
return <div ref={starryBackgroundRef} className={styles.starryBackground}></div>;
}
export default StarryBackground;

22
src/components/StarryBackground.module.css Normal file
View File

@ -0,0 +1,22 @@
.starryBackground {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
}
.star {
position: absolute;
background: white;
border-radius: 50%;
opacity: 0.3;
animation: twinkle 4s infinite ease-in-out;
}
@keyframes twinkle {
0%, 100% { opacity: 0.3; }
50% { opacity: 1; }
}

3
src/pages/Download.module.css
View File

@ -3,7 +3,6 @@
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, rgba(26, 32, 44, 0.9) 0%, rgba(45, 55, 72, 0.9) 100%);
color: white;
position: relative;
overflow: hidden;
@ -38,7 +37,7 @@
padding: 2rem;
max-width: 600px;
backdrop-filter: blur(10px);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
background: rgba(255, 255, 255, 0.1);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);
border: 1px solid rgba(255, 255, 255, 0.18);