diff --git a/CNAME b/CNAME new file mode 100644 index 000000000..5abb87e5a --- /dev/null +++ b/CNAME @@ -0,0 +1 @@ +waqfulkhairat.org \ No newline at end of file diff --git a/README.md b/README.md index f360b3fb1..6786265b2 100644 --- a/README.md +++ b/README.md @@ -68,3 +68,5 @@ This section has moved here: [https://vitejs.dev/guide/build.html](https://vitej ### Troubleshooting This section has moved here: [https://vitejs.dev/guide/troubleshooting.html](https://vitejs.dev/guide/troubleshooting.html) +# ChatUP +# ChatUP diff --git a/package-lock.json b/package-lock.json index 96da9005f..044a56ef7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1643,9 +1643,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001534", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001534.tgz", - "integrity": "sha512-vlPVrhsCS7XaSh2VvWluIQEzVhefrUQcEsQWSS5A5V+dM07uv1qHeQzAOTGIMy9i3e9bH15+muvI/UHojVgS/Q==", + "version": "1.0.30001686", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001686.tgz", + "integrity": "sha512-Y7deg0Aergpa24M3qLC5xjNklnKnhsmSyR/V89dLZ1n0ucJIFNs7PgR2Yfa/Zf6W79SbBicgtGxZr2juHkEUIA==", "dev": true, "funding": [ { @@ -1660,7 +1660,8 @@ "type": "github", "url": "https://github.com/sponsors/ai" } - ] + ], + "license": "CC-BY-4.0" }, "node_modules/chai": { "version": "4.3.10", @@ -4909,9 +4910,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001534", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001534.tgz", - "integrity": "sha512-vlPVrhsCS7XaSh2VvWluIQEzVhefrUQcEsQWSS5A5V+dM07uv1qHeQzAOTGIMy9i3e9bH15+muvI/UHojVgS/Q==", + "version": "1.0.30001686", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001686.tgz", + "integrity": "sha512-Y7deg0Aergpa24M3qLC5xjNklnKnhsmSyR/V89dLZ1n0ucJIFNs7PgR2Yfa/Zf6W79SbBicgtGxZr2juHkEUIA==", "dev": true }, "chai": { diff --git a/package.json b/package.json index 3f1f4b75d..af3d4cf5a 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "codespaces-react", + "name": "ChatUP", "version": "0.1.0", "private": true, "dependencies": { diff --git a/src/App.css b/src/App.css index fce9cc9d8..10bbc3728 100644 --- a/src/App.css +++ b/src/App.css @@ -1,3 +1,6 @@ +body{ + background-color#fff; +} .App { text-align: center; } @@ -8,14 +11,14 @@ } .App-header { - background-color: #282c34; + /* background-color: #282c34; */ min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: calc(10px + 2vmin); - color: white; + color: #282c34;; } .App-link { @@ -28,4 +31,5 @@ .small { font-size: 0.75rem; -} \ No newline at end of file +} +/* background: linear-gradient(135deg, #042d63, #00b3ff); Futuristic Blue Gradients */ diff --git a/src/App.jsx b/src/App.jsx index 8b32d0718..148f7a888 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,29 +1,12 @@ -import './App.css'; +import React from "react"; +import HeroSection from "./Components/HeroSection"; -function App() { +const App = () => { return ( -
-
- logo -

- GitHub Codespaces ♥️ React -

-

- Edit src/App.jsx and save to reload. -

-

- - Learn React - -

-
+
+
); -} +}; export default App; diff --git a/src/Components/HeroSection.css b/src/Components/HeroSection.css new file mode 100644 index 000000000..abe2d8009 --- /dev/null +++ b/src/Components/HeroSection.css @@ -0,0 +1,123 @@ +/* Root Variables for Colors */ +:root { + --primary-blue: #9191f5; /* Futuristic Blue */ + --secondary-blue: #000f14; /* Lighter Blue */ + --highlight-yellow: #fffb00; /* Accent Yellow */ + --background-dark: #121212; /* Dark Background */ + --white: #ffffff; /* White */ + --button-hover: #ffcc00; /* Button Hover */ + --text-light: rgba(255, 255, 255, 0.7); /* Light Text */ + } + + /* General Reset */ + * { + margin: 0; + padding: 0; + box-sizing: border-box; + } + + body { + font-family: system-ui, -apple-system, BlinkMacSystemFont, + 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', + 'Helvetica Neue', sans-serif; + background-color: var(--background-dark); /* Dark Background */ + color: var(--white); + } + + /* Hero Section Styling */ + .hero { + background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue)); /* Futuristic Blue Gradients */ + color: var(--white); + text-align: center; + padding: 80px 20px; + height: 100vh; /* Full-screen height */ + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + } + + .hero-content { + max-width: 1000px; + padding: 20px; + } + + .main-title { + font-size: 4rem; + font-weight: 700; + margin-bottom: 20px; + text-align: center; + } + + .main-title span { + color: var(--highlight-yellow); /* Accent Yellow */ + /* text-shadow: 0 0 20px var(--highlight-yellow); Glowing Effect */ + } + + .description { + font-size: 1.5rem; + line-height: 1.6; + max-width: 700px; + margin: 0 auto; + margin-bottom: 40px; + color: var(--text-light); + } + + .buttons { + display: flex; + justify-content: center; + gap: 20px; + } + + .cta-btn, + .secondary-btn { + background-color: var(--white); + color: var(--secondary-blue); + font-size: 1.1rem; + padding: 15px 30px; + border: none; + border-radius: 50px; + cursor: pointer; + font-weight: 700; + transition: all 0.3s ease; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); + text-transform: uppercase; + } + + .cta-btn:hover { + background-color: var(--primary-blue); + color: var(--white); + transform: scale(1.1); + } + + .secondary-btn { + background-color: rgba(255, 255, 255, 0.1); + color: var(--white); + transform: scale(1); + } + + .secondary-btn:hover { + background-color: rgba(255, 255, 255, 0.2); + color: var(--primary-blue); + transform: scale(1.05); + } + + /* Responsive Design for Mobile */ + @media (max-width: 768px) { + .hero { + padding: 50px 20px; + } + + .main-title { + font-size: 2.5rem; + } + + .description { + font-size: 1.2rem; + } + + .buttons { + flex-direction: column; + } + } + \ No newline at end of file diff --git a/src/Components/HeroSection.jsx b/src/Components/HeroSection.jsx new file mode 100644 index 000000000..bb7d01ca8 --- /dev/null +++ b/src/Components/HeroSection.jsx @@ -0,0 +1,23 @@ +import React from "react"; +import "./HeroSection.css"; + +const HeroSection = () => { + return ( +
+
+

+ Welcome to ChatUP +

+

+ The future of social interaction — faster, smarter, and better. +

+
+ + +
+
+
+ ); +}; + +export default HeroSection; diff --git a/src/index.css b/src/index.css index ec2585e8c..3433dfca5 100644 --- a/src/index.css +++ b/src/index.css @@ -1,4 +1,5 @@ body { + background-color:#fff; margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',