From 7fa3c8a6c817ea0cfc654710ba943f51bd2ba13d Mon Sep 17 00:00:00 2001 From: Bhumika Mohanty <163668485+Bhumikamohanty@users.noreply.github.com> Date: Mon, 8 Dec 2025 23:46:13 +0530 Subject: [PATCH 1/5] this is the sign up page for verifier --- verifier_signup.html | 2321 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 2321 insertions(+) create mode 100644 verifier_signup.html diff --git a/verifier_signup.html b/verifier_signup.html new file mode 100644 index 0000000..3d829ab --- /dev/null +++ b/verifier_signup.html @@ -0,0 +1,2321 @@ + + + + + + CertiTrust — Verifier Registration + + + + + + +
+
+ +

Certificate Verification Portal

+

For employers, recruiters, and third parties to verify the authenticity of academic certificates and credentials.

+
+
+ + Secure Certificate Verification +
+
+ + Batch Verification Support +
+
+ + Complete Audit Trail +
+
+
+ +
+

Welcome to CertiTrust Verifier Portal

+

Choose an option to get started with certificate verification

+ +
+ + + +
+ + +
+
+ + + + + + + + + + + +
+ +
+ + + + + + + From cadff6a2488f63992783360c1b5be53f554d25ca Mon Sep 17 00:00:00 2001 From: Bhumika Mohanty <163668485+Bhumikamohanty@users.noreply.github.com> Date: Mon, 8 Dec 2025 23:51:06 +0530 Subject: [PATCH 2/5] this the combine page for student and verifier portal --- verifier&studentportal.html | 2534 +++++++++++++++++++++++++++++++++++ 1 file changed, 2534 insertions(+) create mode 100644 verifier&studentportal.html diff --git a/verifier&studentportal.html b/verifier&studentportal.html new file mode 100644 index 0000000..51af18a --- /dev/null +++ b/verifier&studentportal.html @@ -0,0 +1,2534 @@ + + + + + + CertiTrust — Certificate Management System + + + + + + + +
+
+ + +

Welcome to CertiTrust

+

Select your role to continue

+ +
+ + +
+ + +
+
+ + +
+
+ +

Certificate Management Portal

+

For students to securely upload, manage, and share their academic certificates with verified digital watermarks.

+
+
+ + Secure Certificate Upload +
+
+ + Digital Watermark Protection +
+
+ + Easy Sharing with Verifiers +
+
+
+ +
+

Student Login

+

Enter your credentials to access your certificate portfolio

+ +
+
+ + +
Please enter a valid email address
+
+ +
+ + +
Please enter your password
+
+ + + + +
+
+
+ + +
+
+ +

Create Your Portfolio

+

Register to start building your verified certificate portfolio with digital watermark protection.

+
+
+ + Secure Account Protection +
+
+ + Unlimited Certificate Uploads +
+
+ + Track Certificate Verifications +
+
+
+ +
+

Student Registration

+

Fill in your details to create your account

+ +
+
+ + +
Please enter your full name
+
+ +
+ + +
Please enter a valid email address
+
+ +
+ + +
Password must be at least 8 characters
+
+ +
+ + +
Passwords do not match
+
+ +
+ + +
Please enter your institution
+
+ + + + +
+
+
+ + +
+
+ +

Certificate Verification Portal

+

For employers, recruiters, and third parties to verify the authenticity of academic certificates and credentials.

+
+
+ + Instant Certificate Verification +
+
+ + Search Student Profiles +
+
+ + Comprehensive Analytics Dashboard +
+
+
+ +
+

Verifier Login

+

Enter your credentials to access the certificate verification system

+ +
+
+ + +
Please select your organization type
+
+ +
+ + +
Please enter your organization name
+
+ +
+ + +
Please enter a valid email address
+
+ + + + +
+
+
+ + +
+ +
+ + +
+ +
+ + +
+
+
+

Certificate Preview

+ +
+
+ +
+
+
+ + + + From 25f2a2b69f1a5ace7efeee9e78b784442a7d449d Mon Sep 17 00:00:00 2001 From: Bhumika Mohanty <163668485+Bhumikamohanty@users.noreply.github.com> Date: Mon, 8 Dec 2025 23:52:54 +0530 Subject: [PATCH 3/5] this the uploader signup page --- UploaderPortal.html | 2641 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 2641 insertions(+) create mode 100644 UploaderPortal.html diff --git a/UploaderPortal.html b/UploaderPortal.html new file mode 100644 index 0000000..4cfe218 --- /dev/null +++ b/UploaderPortal.html @@ -0,0 +1,2641 @@ + + + + + + CertiTrust — Uploader Registration + + + + + + +
+
+ +

Certificate Upload Portal

+

For educational institutions and certification bodies to securely upload and manage academic certificates and credentials.

+
+
+ + Secure Certificate Upload +
+
+ + Bulk Upload Support +
+
+ + Comprehensive Analytics +
+
+
+ +
+

Welcome to CertiTrust Uploader Portal

+

Choose an option to get started with certificate management

+ +
+ + + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + From d9aadfeed11f0a3cd4462019e95cd8f8e9f92315 Mon Sep 17 00:00:00 2001 From: Bhumika Mohanty <163668485+Bhumikamohanty@users.noreply.github.com> Date: Tue, 9 Dec 2025 00:12:35 +0530 Subject: [PATCH 4/5] this the Welcome to CertiTrust Uploader Portal --- uploader-s_signup_portal.htlm | 2641 +++++++++++++++++++++++++++++++++ 1 file changed, 2641 insertions(+) create mode 100644 uploader-s_signup_portal.htlm diff --git a/uploader-s_signup_portal.htlm b/uploader-s_signup_portal.htlm new file mode 100644 index 0000000..4cfe218 --- /dev/null +++ b/uploader-s_signup_portal.htlm @@ -0,0 +1,2641 @@ + + + + + + CertiTrust — Uploader Registration + + + + + + +
+
+ +

Certificate Upload Portal

+

For educational institutions and certification bodies to securely upload and manage academic certificates and credentials.

+
+
+ + Secure Certificate Upload +
+
+ + Bulk Upload Support +
+
+ + Comprehensive Analytics +
+
+
+ +
+

Welcome to CertiTrust Uploader Portal

+

Choose an option to get started with certificate management

+ +
+ + + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + From be0f8d28cfa97f9e495a59a29ecdbba677ffa936 Mon Sep 17 00:00:00 2001 From: Bhumika Mohanty <163668485+Bhumikamohanty@users.noreply.github.com> Date: Tue, 9 Dec 2025 08:50:32 +0530 Subject: [PATCH 5/5] try this one if it works then cool --- pageone/App.js | 67 +++++++ pageone/Header.css | 304 ++++++++++++++++++++++++++++++++ pageone/Header.js | 127 ++++++++++++++ pageone/HomePage.css | 409 +++++++++++++++++++++++++++++++++++++++++++ pageone/HomePage.js | 124 +++++++++++++ pageone/pageone | 0 pageone/src | 0 7 files changed, 1031 insertions(+) create mode 100644 pageone/App.js create mode 100644 pageone/Header.css create mode 100644 pageone/Header.js create mode 100644 pageone/HomePage.css create mode 100644 pageone/HomePage.js create mode 100644 pageone/pageone create mode 100644 pageone/src diff --git a/pageone/App.js b/pageone/App.js new file mode 100644 index 0000000..6bac554 --- /dev/null +++ b/pageone/App.js @@ -0,0 +1,67 @@ +import React from 'react'; +import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; +import HomePage from './pages/HomePage'; +import About from './pages/About'; +import Services from './pages/Services'; +import Portfolio from './pages/Portfolio'; +import Contact from './pages/Contact'; +import './App.css'; + +function App() { + return ( + +
+ + } /> + } /> + } /> + } /> + } /> + +
+
+ ); +} + +export default App; +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + 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; + overflow-x: hidden; +} + +.App { + min-height: 100vh; +} + +/* Smooth Scrolling */ +html { + scroll-behavior: smooth; +} + +/* Custom Scrollbar */ +::-webkit-scrollbar { + width: 10px; +} + +::-webkit-scrollbar-track { + background: #f1f1f1; +} + +::-webkit-scrollbar-thumb { + background: linear-gradient(to bottom, #FF6B00, #FF8C42); + border-radius: 5px; +} + +::-webkit-scrollbar-thumb:hover { + background: linear-gradient(to bottom, #FF8C42, #FF6B00); +} \ No newline at end of file diff --git a/pageone/Header.css b/pageone/Header.css new file mode 100644 index 0000000..b5cd3e4 --- /dev/null +++ b/pageone/Header.css @@ -0,0 +1,304 @@ +/* Header Container */ +.header { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 1000; + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(10px); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + padding: 1rem 0; + box-shadow: 0 2px 20px rgba(255, 107, 0, 0.1); +} + +.header.scrolled { + padding: 0.5rem 0; + background: rgba(255, 255, 255, 0.98); + box-shadow: 0 4px 30px rgba(255, 107, 0, 0.15); +} + +.header-container { + max-width: 1200px; + margin: 0 auto; + padding: 0 2rem; + display: flex; + justify-content: space-between; + align-items: center; +} + +/* Logo */ +.logo { + display: flex; + align-items: center; + gap: 12px; + text-decoration: none; + transition: transform 0.3s ease; +} + +.logo:hover { + transform: scale(1.05); +} + +.logo-icon { + position: relative; + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; +} + +.logo-circle { + width: 32px; + height: 32px; + background: linear-gradient(135deg, #FF6B00, #FF8C42); + border-radius: 50%; + animation: pulse 2s infinite; + box-shadow: 0 0 20px rgba(255, 107, 0, 0.3); +} + +.logo-text { + position: absolute; + font-weight: 800; + font-size: 12px; + color: white; + text-shadow: 1px 1px 2px rgba(0,0,0,0.2); +} + +.logo-name { + font-size: 1.5rem; + font-weight: 700; + background: linear-gradient(135deg, #FF6B00, #FF8C42); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + letter-spacing: -0.5px; +} + +/* Desktop Navigation */ +.nav-desktop { + display: flex; +} + +@media (max-width: 768px) { + .nav-desktop { + display: none; + } +} + +.nav-list { + display: flex; + gap: 2rem; + list-style: none; + margin: 0; + padding: 0; +} + +.nav-link { + position: relative; + text-decoration: none; + color: #333; + font-weight: 500; + font-size: 1rem; + padding: 0.5rem 0; + transition: all 0.3s ease; + display: flex; + flex-direction: column; + align-items: center; +} + +.link-text { + transition: transform 0.3s ease; +} + +.link-dot { + width: 6px; + height: 6px; + background: linear-gradient(135deg, #FF6B00, #FF8C42); + border-radius: 50%; + opacity: 0; + transform: scale(0); + transition: all 0.3s ease; + margin-top: 4px; +} + +.nav-link:hover .link-text { + transform: translateY(-2px); + color: #FF6B00; +} + +.nav-link:hover .link-dot { + opacity: 1; + transform: scale(1); +} + +.nav-link.active .link-text { + color: #FF6B00; + font-weight: 600; +} + +.nav-link.active .link-dot { + opacity: 1; + transform: scale(1); +} + +/* CTA Button */ +.cta-button { + background: linear-gradient(135deg, #FF6B00, #FF8C42); + color: white; + border: none; + padding: 0.8rem 1.5rem; + border-radius: 25px; + font-weight: 600; + font-size: 0.9rem; + cursor: pointer; + display: flex; + align-items: center; + gap: 8px; + transition: all 0.3s ease; + box-shadow: 0 4px 15px rgba(255, 107, 0, 0.2); +} + +.cta-button:hover { + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(255, 107, 0, 0.3); + background: linear-gradient(135deg, #FF8C42, #FF6B00); +} + +.cta-button:active { + transform: translateY(0); +} + +.cta-arrow { + transition: transform 0.3s ease; +} + +.cta-button:hover .cta-arrow { + transform: translateX(3px); +} + +/* Mobile Menu Toggle */ +.menu-toggle { + display: none; + flex-direction: column; + gap: 4px; + background: none; + border: none; + cursor: pointer; + padding: 8px; + z-index: 1001; +} + +@media (max-width: 768px) { + .menu-toggle { + display: flex; + } +} + +.menu-toggle .bar { + width: 25px; + height: 3px; + background: linear-gradient(135deg, #FF6B00, #FF8C42); + border-radius: 2px; + transition: all 0.3s ease; +} + +.menu-toggle.open .bar:nth-child(1) { + transform: rotate(45deg) translate(6px, 6px); + background: #FF6B00; +} + +.menu-toggle.open .bar:nth-child(2) { + opacity: 0; +} + +.menu-toggle.open .bar:nth-child(3) { + transform: rotate(-45deg) translate(6px, -6px); + background: #FF6B00; +} + +/* Mobile Navigation */ +.mobile-nav { + position: fixed; + top: 0; + right: -100%; + width: 80%; + max-width: 300px; + height: 100vh; + background: white; + box-shadow: -5px 0 30px rgba(0, 0, 0, 0.1); + transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1); + z-index: 999; +} + +.mobile-nav.open { + right: 0; +} + +.mobile-nav-content { + padding: 5rem 2rem 2rem; + height: 100%; +} + +.mobile-nav-list { + list-style: none; + padding: 0; + margin: 0; +} + +.mobile-nav-link { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 0; + text-decoration: none; + color: #333; + font-size: 1.2rem; + font-weight: 500; + border-bottom: 1px solid rgba(255, 107, 0, 0.1); + transition: all 0.3s ease; +} + +.mobile-nav-link:hover { + color: #FF6B00; + transform: translateX(10px); +} + +.mobile-nav-link.active { + color: #FF6B00; + font-weight: 600; +} + +.mobile-link-arrow { + color: #FF6B00; + transition: transform 0.3s ease; +} + +.mobile-nav-link:hover .mobile-link-arrow { + transform: translateX(5px); +} + +/* Animations */ +@keyframes pulse { + 0% { + box-shadow: 0 0 0 0 rgba(255, 107, 0, 0.4); + } + 70% { + box-shadow: 0 0 0 10px rgba(255, 107, 0, 0); + } + 100% { + box-shadow: 0 0 0 0 rgba(255, 107, 0, 0); + } +} + +/* Responsive Design */ +@media (max-width: 768px) { + .header-container { + padding: 0 1rem; + } + + .cta-button { + display: none; + } +} \ No newline at end of file diff --git a/pageone/Header.js b/pageone/Header.js new file mode 100644 index 0000000..ee53803 --- /dev/null +++ b/pageone/Header.js @@ -0,0 +1,127 @@ +import React, { useState, useEffect } from 'react'; +import { Link, NavLink } from 'react-router-dom'; +import './Header.css'; + +const Header = () => { + const [isScrolled, setIsScrolled] = useState(false); + const [isMenuOpen, setIsMenuOpen] = useState(false); + + useEffect(() => { + const handleScroll = () => { + setIsScrolled(window.scrollY > 50); + }; + window.addEventListener('scroll', handleScroll); + return () => window.removeEventListener('scroll', handleScroll); + }, []); + + return ( +
+
+ {/* Logo */} + +
+
+
ORANGE
+
+ OrangeSphere + + + {/* Desktop Navigation */} + + + {/* CTA Button */} + + + {/* Mobile Menu Button */} + +
+ + {/* Mobile Navigation */} +
+
+
    + {['Home', 'About', 'Services', 'Portfolio', 'Contact'].map((item) => ( +
  • + + isActive ? 'mobile-nav-link active' : 'mobile-nav-link' + } + onClick={() => setIsMenuOpen(false)} + > + {item} + + +
  • + ))} +
+
+
+
+ ); +}; + +export default Header; \ No newline at end of file diff --git a/pageone/HomePage.css b/pageone/HomePage.css new file mode 100644 index 0000000..f29dd1d --- /dev/null +++ b/pageone/HomePage.css @@ -0,0 +1,409 @@ +/* Global Styles */ +.home-page { + min-height: 100vh; + background: linear-gradient(135deg, #fff5f0 0%, #fff 100%); + overflow-x: hidden; +} + +/* Hero Section */ +.hero-section { + min-height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + position: relative; + padding: 0 1rem; +} + +.hero-background { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: -1; + overflow: hidden; +} + +.orange-gradient { + position: absolute; + top: -50%; + left: -25%; + width: 150%; + height: 150%; + background: radial-gradient(circle, rgba(255,107,0,0.1) 0%, rgba(255,107,0,0) 70%); + animation: rotate 20s linear infinite; +} + +.floating-orbs { + position: absolute; + width: 100%; + height: 100%; +} + +.orb { + position: absolute; + border-radius: 50%; + filter: blur(40px); + opacity: 0.5; +} + +.orb-1 { + width: 300px; + height: 300px; + background: rgba(255, 107, 0, 0.2); + top: 10%; + right: 10%; + animation: float 15s ease-in-out infinite; +} + +.orb-2 { + width: 200px; + height: 200px; + background: rgba(255, 140, 66, 0.2); + bottom: 20%; + left: 15%; + animation: float 20s ease-in-out infinite reverse; +} + +.orb-3 { + width: 150px; + height: 150px; + background: rgba(255, 165, 0, 0.2); + top: 50%; + left: 50%; + animation: float 25s ease-in-out infinite; +} + +.hero-content { + text-align: center; + max-width: 800px; + z-index: 1; +} + +.hero-title { + font-size: 3.5rem; + font-weight: 800; + margin-bottom: 1.5rem; + line-height: 1.2; + opacity: 0; + transform: translateY(30px); + transition: all 0.8s ease; +} + +@media (max-width: 768px) { + .hero-title { + font-size: 2.5rem; + } +} + +.gradient-text { + background: linear-gradient(135deg, #FF6B00, #FF8C42, #FFA500); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + display: block; +} + +.hero-subtitle { + font-size: 1.25rem; + color: #666; + margin-bottom: 2.5rem; + opacity: 0; + transform: translateY(30px); + transition: all 0.8s ease 0.2s; +} + +.hero-buttons { + display: flex; + gap: 1rem; + justify-content: center; + opacity: 0; + transform: translateY(30px); + transition: all 0.8s ease 0.4s; +} + +.hero-btn { + padding: 1rem 2rem; + border-radius: 50px; + font-size: 1rem; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + position: relative; + overflow: hidden; + border: none; +} + +.hero-btn.primary { + background: linear-gradient(135deg, #FF6B00, #FF8C42); + color: white; + box-shadow: 0 10px 30px rgba(255, 107, 0, 0.3); +} + +.hero-btn.secondary { + background: transparent; + color: #FF6B00; + border: 2px solid #FF8C42; +} + +.hero-btn:hover { + transform: translateY(-3px); + box-shadow: 0 15px 40px rgba(255, 107, 0, 0.4); +} + +.hero-btn.secondary:hover { + background: rgba(255, 107, 0, 0.1); +} + +.btn-sparkle { + position: absolute; + top: 50%; + left: 50%; + width: 0; + height: 0; + border-radius: 50%; + background: rgba(255, 255, 255, 0.5); + transform: translate(-50%, -50%); + transition: all 0.5s ease; +} + +.hero-btn.primary:hover .btn-sparkle { + width: 200px; + height: 200px; +} + +.scroll-indicator { + position: absolute; + bottom: 2rem; + display: flex; + flex-direction: column; + align-items: center; + gap: 0.5rem; + color: #FF6B00; + opacity: 0.8; + animation: bounce 2s infinite; +} + +.mouse { + width: 30px; + height: 50px; + border: 2px solid #FF6B00; + border-radius: 15px; + position: relative; +} + +.wheel { + width: 4px; + height: 8px; + background: #FF6B00; + border-radius: 2px; + position: absolute; + top: 8px; + left: 50%; + transform: translateX(-50%); + animation: scroll 2s infinite; +} + +/* Features Section */ +.features-section { + padding: 6rem 1rem; + max-width: 1200px; + margin: 0 auto; +} + +.section-header { + text-align: center; + margin-bottom: 4rem; +} + +.section-header h2 { + font-size: 2.5rem; + margin-bottom: 1rem; + color: #333; +} + +.section-header p { + color: #666; + font-size: 1.1rem; +} + +.features-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; +} + +.feature-card { + background: white; + border-radius: 20px; + padding: 2rem; + position: relative; + overflow: hidden; + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05); + transition: all 0.3s ease; + opacity: 0; + transform: translateY(30px); +} + +.feature-card.animate-in { + opacity: 1; + transform: translateY(0); +} + +.feature-card:hover { + transform: translateY(-10px); + box-shadow: 0 20px 60px rgba(255, 107, 0, 0.15); +} + +.card-icon { + font-size: 3rem; + margin-bottom: 1rem; +} + +.feature-card h3 { + font-size: 1.5rem; + margin-bottom: 1rem; + color: #333; +} + +.feature-card p { + color: #666; + line-height: 1.6; +} + +.card-hover-effect { + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 107, 0, 0.1), transparent); + transition: left 0.6s ease; +} + +.feature-card:hover .card-hover-effect { + left: 100%; +} + +/* Stats Section */ +.stats-section { + padding: 4rem 1rem; + background: linear-gradient(135deg, #FF6B00, #FF8C42); + color: white; +} + +.stats-container { + max-width: 1200px; + margin: 0 auto; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 3rem; + text-align: center; +} + +.stat-item { + opacity: 0; + transform: scale(0.9); +} + +.stat-item.animate-in { + opacity: 1; + transform: scale(1); +} + +.stat-value { + font-size: 3rem; + font-weight: 800; + margin-bottom: 0.5rem; +} + +.stat-value span { + font-size: 2rem; +} + +.stat-label { + font-size: 1.1rem; + opacity: 0.9; +} + +/* Animations */ +@keyframes float { + 0%, 100% { + transform: translateY(0) rotate(0deg); + } + 50% { + transform: translateY(-20px) rotate(180deg); + } +} + +@keyframes rotate { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +@keyframes bounce { + 0%, 20%, 50%, 80%, 100% { + transform: translateY(0); + } + 40% { + transform: translateY(-10px); + } + 60% { + transform: translateY(-5px); + } +} + +@keyframes scroll { + 0% { + transform: translateX(-50%) translateY(0); + opacity: 1; + } + 100% { + transform: translateX(-50%) translateY(20px); + opacity: 0; + } +} + +/* Animation Classes */ +.animate-on-scroll { + opacity: 0; + transform: translateY(30px); + transition: all 0.8s ease; +} + +.animate-on-scroll.animate-in { + opacity: 1; + transform: translateY(0); +} + +/* Responsive Design */ +@media (max-width: 768px) { + .hero-buttons { + flex-direction: column; + align-items: center; + } + + .hero-btn { + width: 100%; + max-width: 300px; + } + + .features-grid { + grid-template-columns: 1fr; + } + + .stats-container { + grid-template-columns: repeat(2, 1fr); + gap: 2rem; + } + + .stat-value { + font-size: 2.5rem; + } +} \ No newline at end of file diff --git a/pageone/HomePage.js b/pageone/HomePage.js new file mode 100644 index 0000000..d0f9569 --- /dev/null +++ b/pageone/HomePage.js @@ -0,0 +1,124 @@ +import React, { useEffect, useRef } from 'react'; +import Header from '../components/Header'; +import './HomePage.css'; + +const HomePage = () => { + const heroRef = useRef(null); + const cardsRef = useRef(null); + + useEffect(() => { + // Add scroll animations + const observerOptions = { + threshold: 0.1, + rootMargin: '0px 0px -50px 0px' + }; + + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('animate-in'); + } + }); + }, observerOptions); + + const elements = document.querySelectorAll('.animate-on-scroll'); + elements.forEach(el => observer.observe(el)); + + return () => observer.disconnect(); + }, []); + + return ( +
+
+ + {/* Hero Section */} +
+
+
+
+
+
+
+
+
+ +
+

+ Welcome to + OrangeSphere +

+

+ Where innovation meets creativity in perfect harmony +

+
+ + +
+
+ +
+
+
+
+ Scroll down +
+
+ + {/* Features Section */} +
+
+

Amazing Features

+

Experience the power of our platform

+
+ +
+ {[ + { title: 'Interactive Design', icon: '🎨', desc: 'Beautiful and engaging user interfaces' }, + { title: 'Fast Performance', icon: '⚡', desc: 'Lightning fast loading times' }, + { title: 'Customizable', icon: '🔧', desc: 'Tailor to your specific needs' }, + { title: '24/7 Support', icon: '🛡️', desc: 'Round the clock assistance' }, + { title: 'Secure', icon: '🔒', desc: 'Enterprise level security' }, + { title: 'Analytics', icon: '📊', desc: 'Detailed insights and reports' } + ].map((feature, index) => ( +
+
{feature.icon}
+

{feature.title}

+

{feature.desc}

+
+
+ ))} +
+
+ + {/* Stats Section */} +
+
+ {[ + { value: '10K+', label: 'Active Users', suffix: '' }, + { value: '99.9', label: 'Uptime', suffix: '%' }, + { value: '24/7', label: 'Support', suffix: '' }, + { value: '50+', label: 'Countries', suffix: '' } + ].map((stat, index) => ( +
+
+ {stat.value}{stat.suffix} +
+
{stat.label}
+
+ ))} +
+
+
+ ); +}; + +export default HomePage; \ No newline at end of file diff --git a/pageone/pageone b/pageone/pageone new file mode 100644 index 0000000..e69de29 diff --git a/pageone/src b/pageone/src new file mode 100644 index 0000000..e69de29