From a84fc30473164290384ff27128fe9356f69cd06b Mon Sep 17 00:00:00 2001 From: spitkov Date: Mon, 7 Oct 2024 17:51:35 +0200 Subject: [PATCH] update v2 --- package-lock.json | 44 ++++++------ package.json | 3 +- src/App.js | 2 + src/components/Features.js | 10 ++- src/components/Features.module.css | 53 ++++++++++----- src/components/Hero.js | 79 ++++++++-------------- src/components/Hero.module.css | 49 ++++++-------- src/components/StarryBackground.js | 27 ++++++++ src/components/StarryBackground.module.css | 22 ++++++ src/pages/Download.module.css | 3 +- 10 files changed, 168 insertions(+), 124 deletions(-) create mode 100644 src/components/StarryBackground.js create mode 100644 src/components/StarryBackground.module.css diff --git a/package-lock.json b/package-lock.json index 7d27360..ddc1da6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 0335ee2..9d3d7f7 100644 --- a/package.json +++ b/package.json @@ -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": { diff --git a/src/App.js b/src/App.js index 75f1170..96ebc5f 100644 --- a/src/App.js +++ b/src/App.js @@ -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} > +
+
@@ -58,7 +64,7 @@ function Features() { ))} - + ); } diff --git a/src/components/Features.module.css b/src/components/Features.module.css index c5ff365..69bcb62 100644 --- a/src/components/Features.module.css +++ b/src/components/Features.module.css @@ -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 */ + } } \ No newline at end of file diff --git a/src/components/Hero.js b/src/components/Hero.js index 38343f9..f1f1609 100644 --- a/src/components/Hero.js +++ b/src/components/Hero.js @@ -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 ( -
-
-
- - Coming Soon - - - NebulaOS - - - Get ready for the future of Android with our sleek and powerful operating system. - - - - Download Beta - - -
+
+ + Coming Soon + + + NebulaOS + + + Get ready for the future of Android with our sleek and powerful operating system. + + + + Download Beta + +
); diff --git a/src/components/Hero.module.css b/src/components/Hero.module.css index 7bb1339..0b64306 100644 --- a/src/components/Hero.module.css +++ b/src/components/Hero.module.css @@ -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; diff --git a/src/components/StarryBackground.js b/src/components/StarryBackground.js new file mode 100644 index 0000000..1300772 --- /dev/null +++ b/src/components/StarryBackground.js @@ -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
; +} + +export default StarryBackground; \ No newline at end of file diff --git a/src/components/StarryBackground.module.css b/src/components/StarryBackground.module.css new file mode 100644 index 0000000..0aa8777 --- /dev/null +++ b/src/components/StarryBackground.module.css @@ -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; } +} \ No newline at end of file diff --git a/src/pages/Download.module.css b/src/pages/Download.module.css index b08d8c6..ef1e001 100644 --- a/src/pages/Download.module.css +++ b/src/pages/Download.module.css @@ -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);