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", "framer-motion": "^4.1.17",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-draggable": "^4.4.6",
"react-icons": "^4.2.0", "react-icons": "^4.2.0",
"react-router-dom": "^6.26.2", "react-router-dom": "^6.26.2",
"react-scroll": "^1.9.0", "react-scroll": "^1.9.0",
@ -19,6 +18,7 @@
}, },
"devDependencies": { "devDependencies": {
"@babel/plugin-proposal-private-property-in-object": "^7.21.11", "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
"cross-env": "^7.0.3",
"react-scripts": "4.0.3" "react-scripts": "4.0.3"
} }
}, },
@ -6532,15 +6532,6 @@
"wrap-ansi": "^6.2.0" "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": { "node_modules/co": {
"version": "4.6.0", "version": "4.6.0",
"resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@ -6999,6 +6990,25 @@
"optional": true, "optional": true,
"peer": 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": { "node_modules/cross-spawn": {
"version": "7.0.3", "version": "7.0.3",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@ -19553,20 +19563,6 @@
"react": "17.0.2" "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": { "node_modules/react-error-overlay": {
"version": "6.0.11", "version": "6.0.11",
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "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", "description": "Website for NebulaOS Android operating system",
"main": "src/index.js", "main": "src/index.js",
"scripts": { "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", "build": "react-scripts --openssl-legacy-provider build",
"test": "react-scripts test", "test": "react-scripts test",
"eject": "react-scripts eject" "eject": "react-scripts eject"
@ -20,6 +20,7 @@
}, },
"devDependencies": { "devDependencies": {
"@babel/plugin-proposal-private-property-in-object": "^7.21.11", "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
"cross-env": "^7.0.3",
"react-scripts": "4.0.3" "react-scripts": "4.0.3"
}, },
"browserslist": { "browserslist": {

2
src/App.js
View File

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

10
src/components/Features.js
View File

@ -29,7 +29,13 @@ function Features() {
}, []); }, []);
return ( 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 ref={starryBackgroundRef} className={styles.starryBackground}></div>
<div className={styles.floatingElement}></div> <div className={styles.floatingElement}></div>
<div className={styles.floatingElement}></div> <div className={styles.floatingElement}></div>
@ -58,7 +64,7 @@ function Features() {
))} ))}
</div> </div>
</div> </div>
</section> </motion.section>
); );
} }

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

@ -1,8 +1,9 @@
.features { .features {
background: linear-gradient(135deg, rgba(26, 32, 44, 0.9) 0%, rgba(45, 55, 72, 0.9) 100%); background: transparent; /* Removed the gradient */
padding: 2rem 0; /* Reduced padding */ padding: 4rem 0 2rem;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
margin-top: 0;
} }
.starryBackground { .starryBackground {
@ -70,43 +71,63 @@
.container { .container {
position: relative; position: relative;
z-index: 1; z-index: 1;
max-width: 1200px; max-width: 1100px;
margin: 0 auto; 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 { .title {
font-size: 2rem; /* Reduced font size */ font-size: 2.25rem; /* Slightly reduced font size */
text-align: center; text-align: center;
margin-bottom: 1.5rem; /* Reduced margin */ margin-bottom: 2.5rem; /* Increased margin */
color: #81e6d9; color: #81e6d9;
} }
.featureGrid { .featureGrid {
display: grid; 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 */ gap: 1.5rem; /* Reduced gap */
margin-bottom: 1.5rem; /* Reduced bottom margin */
} }
.featureCard { .featureCard {
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.08); /* Slightly reduced opacity */
border-radius: 10px; border-radius: 12px; /* Reduced border radius */
padding: 1rem; /* Reduced padding */ padding: 1.25rem; /* Reduced padding */
backdrop-filter: blur(10px); backdrop-filter: blur(8px);
transition: transform 0.3s ease; transition: transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
} }
.featureCard:hover { .featureCard:hover {
transform: translateY(-5px); transform: translateY(-3px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
} }
.featureCard h3 { .featureCard h3 {
font-size: 1.3rem; /* Reduced font size */ font-size: 1.2rem; /* Reduced font size */
margin-bottom: 0.5rem; margin-bottom: 0.75rem;
color: #81e6d9; color: #81e6d9;
} }
.featureCard p { .featureCard p {
font-size: 0.9rem; /* Reduced font size */ font-size: 0.9rem;
color: #e2e8f0; 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 { motion } from 'framer-motion';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import styles from './Hero.module.css'; import styles from './Hero.module.css';
function Hero() { 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 ( return (
<motion.section <motion.section
initial={{ opacity: 0, y: 50 }} initial={{ opacity: 0, y: 50 }}
@ -29,40 +11,37 @@ function Hero() {
transition={{ duration: 0.5 }} transition={{ duration: 0.5 }}
className={styles.hero} 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.floatingElement}></div>
<div className={styles.floatingElement}></div> <div className={styles.floatingElement}></div>
<div className={styles.container}> <div className={styles.content}>
<div className={styles.content}> <motion.h2
<motion.h2 initial={{ opacity: 0 }}
initial={{ opacity: 0 }} animate={{ opacity: 1 }}
animate={{ opacity: 1 }} transition={{ delay: 0.2, duration: 0.5 }}
transition={{ delay: 0.2, duration: 0.5 }} className={styles.comingSoon}
className={styles.comingSoon} >
> Coming Soon
Coming Soon </motion.h2>
</motion.h2> <motion.h1
<motion.h1 initial={{ scale: 0.5 }}
initial={{ scale: 0.5 }} animate={{ scale: 1 }}
animate={{ scale: 1 }} transition={{ type: 'spring', stiffness: 260, damping: 20 }}
transition={{ type: 'spring', stiffness: 260, damping: 20 }} >
> NebulaOS
NebulaOS </motion.h1>
</motion.h1> <motion.p
<motion.p initial={{ opacity: 0 }}
initial={{ opacity: 0 }} animate={{ opacity: 1 }}
animate={{ opacity: 1 }} transition={{ delay: 0.4, duration: 0.5 }}
transition={{ delay: 0.4, duration: 0.5 }} >
> Get ready for the future of Android with our sleek and powerful operating system.
Get ready for the future of Android with our sleek and powerful operating system. </motion.p>
</motion.p> <motion.div className={styles.ctaContainer}>
<motion.div className={styles.ctaContainer}> <Link to="/download" className={styles.cta}>
<Link to="/download" className={styles.cta}> Download Beta
Download Beta </Link>
</Link> </motion.div>
</motion.div>
</div>
</div> </div>
</motion.section> </motion.section>
); );

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

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