inital
This commit is contained in:
commit
424068648a
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
node_modules
|
||||||
12
craco.config.js
Normal file
12
craco.config.js
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
const path = require('path');
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
style: {
|
||||||
|
postcss: {
|
||||||
|
plugins: [
|
||||||
|
require('tailwindcss'),
|
||||||
|
require('autoprefixer'),
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
17
index.html
Normal file
17
index.html
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>NebulaOS - The Future of Android</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
|
||||||
|
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
|
||||||
|
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
|
||||||
|
<script type="text/babel" src="src/App.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
26910
package-lock.json
generated
Normal file
26910
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
37
package.json
Normal file
37
package.json
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
{
|
||||||
|
"name": "nebulaos-site",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "Website for NebulaOS Android operating system",
|
||||||
|
"main": "src/index.js",
|
||||||
|
"scripts": {
|
||||||
|
"start": "react-scripts --openssl-legacy-provider start",
|
||||||
|
"build": "react-scripts --openssl-legacy-provider build",
|
||||||
|
"test": "react-scripts test",
|
||||||
|
"eject": "react-scripts eject"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"framer-motion": "^4.1.17",
|
||||||
|
"react": "^17.0.2",
|
||||||
|
"react-dom": "^17.0.2",
|
||||||
|
"react-icons": "^4.2.0",
|
||||||
|
"react-router-dom": "^6.26.2",
|
||||||
|
"react-scroll": "^1.9.0",
|
||||||
|
"web-vitals": "^1.1.2"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
|
||||||
|
"react-scripts": "4.0.3"
|
||||||
|
},
|
||||||
|
"browserslist": {
|
||||||
|
"production": [
|
||||||
|
">0.2%",
|
||||||
|
"not dead",
|
||||||
|
"not op_mini all"
|
||||||
|
],
|
||||||
|
"development": [
|
||||||
|
"last 1 chrome version",
|
||||||
|
"last 1 firefox version",
|
||||||
|
"last 1 safari version"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
module.exports = {
|
||||||
|
plugins: [
|
||||||
|
require('tailwindcss'),
|
||||||
|
require('autoprefixer'),
|
||||||
|
]
|
||||||
|
}
|
||||||
27
public/index.html
Normal file
27
public/index.html
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<meta name="theme-color" content="#000000" />
|
||||||
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="NebulaOS - The Future of Android"
|
||||||
|
/>
|
||||||
|
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||||
|
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||||
|
<title>NebulaOS - The Future of Android</title>
|
||||||
|
<script>
|
||||||
|
window.process = {
|
||||||
|
env: {
|
||||||
|
NODE_ENV: 'development'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
|
<div id="root"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
38
src/App.js
Normal file
38
src/App.js
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
import Header from './components/Header';
|
||||||
|
import Hero from './components/Hero';
|
||||||
|
import Features from './components/Features';
|
||||||
|
import Footer from './components/Footer';
|
||||||
|
import Download from './pages/Download';
|
||||||
|
import Donate from './pages/Donate'; // Renamed from Support
|
||||||
|
import styles from './App.module.css';
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
return (
|
||||||
|
<Router>
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
transition={{ duration: 0.5 }}
|
||||||
|
className={styles.app}
|
||||||
|
>
|
||||||
|
<Header />
|
||||||
|
<Routes>
|
||||||
|
<Route path="/" element={
|
||||||
|
<main className={styles.main}>
|
||||||
|
<Hero />
|
||||||
|
<Features />
|
||||||
|
</main>
|
||||||
|
} />
|
||||||
|
<Route path="/download" element={<Download />} />
|
||||||
|
<Route path="/donate" element={<Donate />} /> {/* Changed to Donate */}
|
||||||
|
</Routes>
|
||||||
|
<Footer />
|
||||||
|
</motion.div>
|
||||||
|
</Router>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
9
src/App.module.css
Normal file
9
src/App.module.css
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
.app {
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #1a202c;
|
||||||
|
color: #f0f4f8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
padding: 2rem 0;
|
||||||
|
}
|
||||||
16
src/components/Download.js
Normal file
16
src/components/Download.js
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
function Download() {
|
||||||
|
return (
|
||||||
|
<section id="download" className="py-20 bg-gray-100">
|
||||||
|
<div className="container mx-auto px-4 text-center">
|
||||||
|
<h2 className="text-4xl font-bold mb-8">Download NebulaOS</h2>
|
||||||
|
<p className="text-xl mb-8">Experience the next generation of Android on your device today.</p>
|
||||||
|
<a href="#" className="bg-purple-700 text-white px-8 py-3 rounded-full font-semibold hover:bg-purple-800 transition duration-300">Download Now</a>
|
||||||
|
<p className="mt-4 text-sm text-gray-600">Compatible with most Android devices</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Download;
|
||||||
65
src/components/Features.js
Normal file
65
src/components/Features.js
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
import React, { useEffect, useRef } from 'react';
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
import styles from './Features.module.css';
|
||||||
|
|
||||||
|
const features = [
|
||||||
|
{ title: 'Sleek Design', description: 'Modern and intuitive user interface' },
|
||||||
|
{ title: 'Enhanced Performance', description: 'Optimized for speed and efficiency' },
|
||||||
|
{ title: 'Advanced Security', description: 'Cutting-edge protection for your device' },
|
||||||
|
{ title: 'Customization', description: 'Tailor your experience to your preferences' },
|
||||||
|
];
|
||||||
|
|
||||||
|
function Features() {
|
||||||
|
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 (
|
||||||
|
<section id="features" className={styles.features}>
|
||||||
|
<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}>
|
||||||
|
<motion.h2
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.5 }}
|
||||||
|
className={styles.title}
|
||||||
|
>
|
||||||
|
Key Features
|
||||||
|
</motion.h2>
|
||||||
|
<div className={styles.featureGrid}>
|
||||||
|
{features.map((feature, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={index}
|
||||||
|
className={styles.featureCard}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||||
|
>
|
||||||
|
<h3>{feature.title}</h3>
|
||||||
|
<p>{feature.description}</p>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Features;
|
||||||
112
src/components/Features.module.css
Normal file
112
src/components/Features.module.css
Normal file
@ -0,0 +1,112 @@
|
|||||||
|
.features {
|
||||||
|
background: linear-gradient(135deg, rgba(26, 32, 44, 0.9) 0%, rgba(45, 55, 72, 0.9) 100%);
|
||||||
|
padding: 2rem 0; /* Reduced padding */
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.starryBackground {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.floatingElement {
|
||||||
|
position: absolute;
|
||||||
|
background: linear-gradient(135deg, rgba(129, 230, 217, 0.2), rgba(79, 209, 197, 0.2));
|
||||||
|
border-radius: 50%;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 1;
|
||||||
|
box-shadow: 0 0 20px rgba(129, 230, 217, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.floatingElement:nth-child(2) {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
top: 20%;
|
||||||
|
right: 10%;
|
||||||
|
animation: float 12s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.floatingElement:nth-child(3) {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
bottom: 15%;
|
||||||
|
left: 5%;
|
||||||
|
animation: float 10s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.floatingElement:nth-child(4) {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
top: 40%;
|
||||||
|
left: 15%;
|
||||||
|
animation: float 8s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% { transform: translate(0, 0) rotate(0deg); }
|
||||||
|
25% { transform: translate(10px, -10px) rotate(5deg); }
|
||||||
|
50% { transform: translate(0, -20px) rotate(0deg); }
|
||||||
|
75% { transform: translate(-10px, -10px) rotate(-5deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 2rem; /* Reduced font size */
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 1.5rem; /* Reduced margin */
|
||||||
|
color: #81e6d9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.featureGrid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Reduced minmax width */
|
||||||
|
gap: 1.5rem; /* Reduced gap */
|
||||||
|
}
|
||||||
|
|
||||||
|
.featureCard {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 1rem; /* Reduced padding */
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.featureCard:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.featureCard h3 {
|
||||||
|
font-size: 1.3rem; /* Reduced font size */
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
color: #81e6d9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.featureCard p {
|
||||||
|
font-size: 0.9rem; /* Reduced font size */
|
||||||
|
color: #e2e8f0;
|
||||||
|
}
|
||||||
39
src/components/Footer.js
Normal file
39
src/components/Footer.js
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import styles from './Footer.module.css';
|
||||||
|
|
||||||
|
function Footer() {
|
||||||
|
return (
|
||||||
|
<footer className={styles.footer}>
|
||||||
|
<div className={styles.container}>
|
||||||
|
<div className={styles.content}>
|
||||||
|
<div className={styles.section}>
|
||||||
|
<h3>NebulaOS</h3>
|
||||||
|
<p>Revolutionizing mobile experiences</p>
|
||||||
|
</div>
|
||||||
|
<div className={styles.section}>
|
||||||
|
<h4>Resources</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#features">Features</a></li>
|
||||||
|
<li><a href="#download">Download</a></li>
|
||||||
|
<li><a href="#support">Support</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div className={styles.section}>
|
||||||
|
<h4>Connect</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Twitter</a></li>
|
||||||
|
<li><a href="#">Facebook</a></li>
|
||||||
|
<li><a href="#">Instagram</a></li>
|
||||||
|
<li><a href="#">GitHub</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.copyright}>
|
||||||
|
<p>© 2024 NebulaOS. All rights reserved.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Footer;
|
||||||
61
src/components/Footer.module.css
Normal file
61
src/components/Footer.module.css
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
.footer {
|
||||||
|
background-color: #2d3748;
|
||||||
|
color: #e2e8f0;
|
||||||
|
padding: 4rem 0 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 200px;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section h3 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
color: #81e6d9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section h4 {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
color: #81e6d9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section ul {
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section li {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section a {
|
||||||
|
color: #e2e8f0;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section a:hover {
|
||||||
|
color: #81e6d9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copyright {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 2rem;
|
||||||
|
padding-top: 2rem;
|
||||||
|
border-top: 1px solid #4a5568;
|
||||||
|
}
|
||||||
28
src/components/Header.js
Normal file
28
src/components/Header.js
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import styles from './Header.module.css';
|
||||||
|
|
||||||
|
function Header() {
|
||||||
|
return (
|
||||||
|
<motion.header
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
transition={{ duration: 0.5 }}
|
||||||
|
className={styles.header}
|
||||||
|
>
|
||||||
|
<div className={styles.container}>
|
||||||
|
<Link to="/" className={styles.logo}>NebulaOS</Link>
|
||||||
|
<nav className={styles.nav}>
|
||||||
|
<ul>
|
||||||
|
<li><Link to="/#features" className={styles.navLink}>Features</Link></li>
|
||||||
|
<li><Link to="/download" className={styles.navLink}>Download</Link></li>
|
||||||
|
<li><Link to="/donate" className={styles.navLink}>Donate</Link></li> {/* Changed to Donate */}
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</motion.header>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Header;
|
||||||
68
src/components/Header.module.css
Normal file
68
src/components/Header.module.css
Normal file
@ -0,0 +1,68 @@
|
|||||||
|
.header {
|
||||||
|
background: linear-gradient(to right, rgba(74, 85, 104, 0.7), rgba(45, 55, 72, 0.7));
|
||||||
|
color: white;
|
||||||
|
padding: 1rem 0;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 1000;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
font-weight: bold;
|
||||||
|
background: linear-gradient(45deg, #81e6d9, #4fd1c5, #38b2ac);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
text-shadow: 0 0 10px rgba(129, 230, 217, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav ul {
|
||||||
|
display: flex;
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav li {
|
||||||
|
margin-left: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav a, .navLink {
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border-radius: 9999px;
|
||||||
|
background: linear-gradient(45deg, rgba(129, 230, 217, 0.1), rgba(79, 209, 197, 0.1));
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav a:hover, .navLink:hover {
|
||||||
|
background: linear-gradient(45deg, rgba(129, 230, 217, 0.3), rgba(79, 209, 197, 0.3));
|
||||||
|
color: #81e6d9;
|
||||||
|
box-shadow: 0 0 15px rgba(129, 230, 217, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.themeToggle {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-left: 2rem;
|
||||||
|
}
|
||||||
71
src/components/Hero.js
Normal file
71
src/components/Hero.js
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
import React, { useEffect, useRef } 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 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
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>
|
||||||
|
</motion.section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Hero;
|
||||||
146
src/components/Hero.module.css
Normal file
146
src/components/Hero.module.css
Normal file
@ -0,0 +1,146 @@
|
|||||||
|
.hero {
|
||||||
|
background: linear-gradient(135deg, rgba(26, 32, 44, 0.9) 0%, rgba(45, 55, 72, 0.9) 100%);
|
||||||
|
color: white;
|
||||||
|
padding: 2rem 0; /* Reduced padding */
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
min-height: 60vh; /* Reduced height */
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.starryBackground {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.floatingElement {
|
||||||
|
position: absolute;
|
||||||
|
background: linear-gradient(135deg, rgba(129, 230, 217, 0.2), rgba(79, 209, 197, 0.2));
|
||||||
|
border-radius: 50%;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 1;
|
||||||
|
box-shadow: 0 0 20px rgba(129, 230, 217, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.floatingElement:nth-child(1) {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
top: 10%;
|
||||||
|
left: 10%;
|
||||||
|
animation: float 12s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.floatingElement:nth-child(2) {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
top: 20%;
|
||||||
|
right: 20%;
|
||||||
|
animation: float 8s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.floatingElement:nth-child(3) {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
bottom: 15%;
|
||||||
|
left: 15%;
|
||||||
|
animation: float 10s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% { transform: translate(0, 0) rotate(0deg); }
|
||||||
|
25% { transform: translate(10px, -10px) rotate(5deg); }
|
||||||
|
50% { transform: translate(0, -20px) rotate(0deg); }
|
||||||
|
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;
|
||||||
|
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;
|
||||||
|
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 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.content h1 {
|
||||||
|
font-size: 3.5rem; /* Reduced font size */
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.comingSoon {
|
||||||
|
font-size: 1.5rem; /* Reduced font size */
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
color: #81e6d9;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content p {
|
||||||
|
font-size: 1.1rem; /* Reduced font size */
|
||||||
|
margin-bottom: 1.5rem; /* Reduced margin */
|
||||||
|
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ctaContainer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 1rem; /* Add gap between buttons */
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 */
|
||||||
|
border-radius: 9999px;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 1rem;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
||||||
|
backdrop-filter: blur(5px);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta:hover {
|
||||||
|
transform: translateY(-3px);
|
||||||
|
box-shadow: 0 6px 12px rgba(0,0,0,0.15);
|
||||||
|
background: linear-gradient(45deg, rgba(129, 230, 217, 1), rgba(79, 209, 197, 1));
|
||||||
|
}
|
||||||
19
src/index.css
Normal file
19
src/index.css
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||||
|
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||||
|
sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||||
|
monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 1rem;
|
||||||
|
}
|
||||||
14
src/index.js
Normal file
14
src/index.js
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import ReactDOM from 'react-dom';
|
||||||
|
import './index.css';
|
||||||
|
import App from './App';
|
||||||
|
import reportWebVitals from './reportWebVitals';
|
||||||
|
|
||||||
|
ReactDOM.render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<App />
|
||||||
|
</React.StrictMode>,
|
||||||
|
document.getElementById('root')
|
||||||
|
);
|
||||||
|
|
||||||
|
reportWebVitals();
|
||||||
45
src/pages/Donate.js
Normal file
45
src/pages/Donate.js
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
import React, { useEffect, useRef } from 'react';
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
import styles from './Donate.module.css';
|
||||||
|
|
||||||
|
function Donate() {
|
||||||
|
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.div
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
exit={{ opacity: 0 }}
|
||||||
|
transition={{ duration: 0.5 }}
|
||||||
|
className={styles.donatePage}
|
||||||
|
>
|
||||||
|
<div ref={starryBackgroundRef} className={styles.starryBackground}></div>
|
||||||
|
<div className={styles.container}>
|
||||||
|
<h1 className={styles.title}>Donate to NebulaOS</h1>
|
||||||
|
<p className={styles.description}>
|
||||||
|
Your support helps us continue developing and improving NebulaOS.
|
||||||
|
Thank you for considering a donation!
|
||||||
|
</p>
|
||||||
|
{/* Add donation options or links here */}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Donate;
|
||||||
11
src/pages/Donate.module.css
Normal file
11
src/pages/Donate.module.css
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
.donatePage {
|
||||||
|
min-height: 100vh;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
48
src/pages/Download.js
Normal file
48
src/pages/Download.js
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
import React, { useEffect, useRef } from 'react';
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
import styles from './Download.module.css';
|
||||||
|
|
||||||
|
function Download() {
|
||||||
|
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.div
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
transition={{ duration: 0.5 }}
|
||||||
|
className={styles.downloadPage}
|
||||||
|
>
|
||||||
|
<div ref={starryBackgroundRef} className={styles.starryBackground}></div>
|
||||||
|
<div className={`${styles.floatingElement} ${styles.floatingElement1}`}></div>
|
||||||
|
<div className={`${styles.floatingElement} ${styles.floatingElement2}`}></div>
|
||||||
|
<div className={`${styles.floatingElement} ${styles.floatingElement3}`}></div>
|
||||||
|
<div className={styles.container}>
|
||||||
|
<h1 className={styles.title}>NebulaOS Download</h1>
|
||||||
|
<p className={styles.comingSoon}>Coming Soon</p>
|
||||||
|
<p className={styles.description}>
|
||||||
|
We're working hard to bring you the future of Android.
|
||||||
|
Stay tuned for the release of NebulaOS!
|
||||||
|
</p>
|
||||||
|
<a href="/" className={styles.backButton}>Back to Home</a>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Download;
|
||||||
125
src/pages/Download.module.css
Normal file
125
src/pages/Download.module.css
Normal file
@ -0,0 +1,125 @@
|
|||||||
|
.downloadPage {
|
||||||
|
min-height: 100vh;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.starryBackground {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
text-align: center;
|
||||||
|
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));
|
||||||
|
border-radius: 16px;
|
||||||
|
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 3rem;
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.comingSoon {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
color: #81e6d9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.backButton {
|
||||||
|
display: inline-block;
|
||||||
|
background: linear-gradient(45deg, rgba(129, 230, 217, 0.8), rgba(79, 209, 197, 0.8));
|
||||||
|
color: #2d3748;
|
||||||
|
padding: 0.75rem 1.5rem;
|
||||||
|
border-radius: 9999px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.backButton:hover {
|
||||||
|
transform: translateY(-3px);
|
||||||
|
box-shadow: 0 6px 12px rgba(0,0,0,0.15);
|
||||||
|
background: linear-gradient(45deg, rgba(129, 230, 217, 1), rgba(79, 209, 197, 1));
|
||||||
|
}
|
||||||
|
|
||||||
|
.floatingElement {
|
||||||
|
position: absolute;
|
||||||
|
background: linear-gradient(135deg, rgba(129, 230, 217, 0.2), rgba(79, 209, 197, 0.2));
|
||||||
|
border-radius: 50%;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 1;
|
||||||
|
box-shadow: 0 0 20px rgba(129, 230, 217, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.floatingElement1 {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
top: 10%;
|
||||||
|
left: 10%;
|
||||||
|
animation: float 12s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.floatingElement2 {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
top: 20%;
|
||||||
|
right: 20%;
|
||||||
|
animation: float 8s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.floatingElement3 {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
bottom: 15%;
|
||||||
|
left: 15%;
|
||||||
|
animation: float 10s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% { transform: translate(0, 0) rotate(0deg); }
|
||||||
|
25% { transform: translate(10px, -10px) rotate(5deg); }
|
||||||
|
50% { transform: translate(0, -20px) rotate(0deg); }
|
||||||
|
75% { transform: translate(-10px, -10px) rotate(-5deg); }
|
||||||
|
}
|
||||||
48
src/pages/Support.js
Normal file
48
src/pages/Support.js
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
import React, { useEffect, useRef } from 'react';
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
import styles from './Support.module.css';
|
||||||
|
|
||||||
|
function Support() {
|
||||||
|
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.div
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
transition={{ duration: 0.5 }}
|
||||||
|
className={styles.supportPage}
|
||||||
|
>
|
||||||
|
<div ref={starryBackgroundRef} className={styles.starryBackground}></div>
|
||||||
|
<div className={`${styles.floatingElement} ${styles.floatingElement1}`}></div>
|
||||||
|
<div className={`${styles.floatingElement} ${styles.floatingElement2}`}></div>
|
||||||
|
<div className={`${styles.floatingElement} ${styles.floatingElement3}`}></div>
|
||||||
|
<div className={styles.container}>
|
||||||
|
<h1 className={styles.title}>NebulaOS Support</h1>
|
||||||
|
<p className={styles.comingSoon}>Coming Soon</p>
|
||||||
|
<p className={styles.description}>
|
||||||
|
We're working on building a comprehensive support system for NebulaOS.
|
||||||
|
Stay tuned for updates on how you can get help and contribute to our project!
|
||||||
|
</p>
|
||||||
|
<a href="/" className={styles.backButton}>Back to Home</a>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Support;
|
||||||
125
src/pages/Support.module.css
Normal file
125
src/pages/Support.module.css
Normal file
@ -0,0 +1,125 @@
|
|||||||
|
.supportPage {
|
||||||
|
min-height: 100vh;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.starryBackground {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
text-align: center;
|
||||||
|
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));
|
||||||
|
border-radius: 16px;
|
||||||
|
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 3rem;
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.comingSoon {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
color: #81e6d9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.backButton {
|
||||||
|
display: inline-block;
|
||||||
|
background: linear-gradient(45deg, rgba(129, 230, 217, 0.8), rgba(79, 209, 197, 0.8));
|
||||||
|
color: #2d3748;
|
||||||
|
padding: 0.75rem 1.5rem;
|
||||||
|
border-radius: 9999px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.backButton:hover {
|
||||||
|
transform: translateY(-3px);
|
||||||
|
box-shadow: 0 6px 12px rgba(0,0,0,0.15);
|
||||||
|
background: linear-gradient(45deg, rgba(129, 230, 217, 1), rgba(79, 209, 197, 1));
|
||||||
|
}
|
||||||
|
|
||||||
|
.floatingElement {
|
||||||
|
position: absolute;
|
||||||
|
background: linear-gradient(135deg, rgba(129, 230, 217, 0.2), rgba(79, 209, 197, 0.2));
|
||||||
|
border-radius: 50%;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 1;
|
||||||
|
box-shadow: 0 0 20px rgba(129, 230, 217, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.floatingElement1 {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
top: 10%;
|
||||||
|
left: 10%;
|
||||||
|
animation: float 12s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.floatingElement2 {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
top: 20%;
|
||||||
|
right: 20%;
|
||||||
|
animation: float 8s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.floatingElement3 {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
bottom: 15%;
|
||||||
|
left: 15%;
|
||||||
|
animation: float 10s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% { transform: translate(0, 0) rotate(0deg); }
|
||||||
|
25% { transform: translate(10px, -10px) rotate(5deg); }
|
||||||
|
50% { transform: translate(0, -20px) rotate(0deg); }
|
||||||
|
75% { transform: translate(-10px, -10px) rotate(-5deg); }
|
||||||
|
}
|
||||||
13
src/reportWebVitals.js
Normal file
13
src/reportWebVitals.js
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals';
|
||||||
|
|
||||||
|
const reportWebVitals = (onPerfEntry) => {
|
||||||
|
if (onPerfEntry && onPerfEntry instanceof Function) {
|
||||||
|
getCLS(onPerfEntry);
|
||||||
|
getFID(onPerfEntry);
|
||||||
|
getFCP(onPerfEntry);
|
||||||
|
getLCP(onPerfEntry);
|
||||||
|
getTTFB(onPerfEntry);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default reportWebVitals;
|
||||||
11
tailwind.config.js
Normal file
11
tailwind.config.js
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
module.exports = {
|
||||||
|
content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
|
||||||
|
darkMode: 'class',
|
||||||
|
theme: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
variants: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user