sciverratech / index.html
muhamedabbas's picture
build a home page for SciVerraTech - Follow Up Deployment
f4bf35b verified
Raw
History Blame Contribute Delete
22.7 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SciVerraTech - Innovating Science and Technology</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.hero-gradient {
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 50%, #7c3aed 100%);
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0px); }
}
.nav-link::after {
content: '';
display: block;
width: 0;
height: 2px;
background: #3b82f6;
transition: width .3s;
}
.nav-link:hover::after {
width: 100%;
}
</style>
</head>
<body class="font-sans antialiased text-gray-800">
<!-- Navigation -->
<nav class="bg-white shadow-lg sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0 flex items-center">
<i class="fas fa-atom text-blue-500 text-2xl mr-2"></i>
<span class="text-xl font-bold text-gray-900">SciVerra<span class="text-blue-500">Tech</span></span>
</div>
</div>
<div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
<a href="#" class="nav-link px-3 py-2 text-sm font-medium text-gray-900 hover:text-blue-600">Home</a>
<a href="#" class="nav-link px-3 py-2 text-sm font-medium text-gray-500 hover:text-blue-600">Solutions</a>
<a href="#" class="nav-link px-3 py-2 text-sm font-medium text-gray-500 hover:text-blue-600">Research</a>
<a href="#" class="nav-link px-3 py-2 text-sm font-medium text-gray-500 hover:text-blue-600">About</a>
<a href="#" class="nav-link px-3 py-2 text-sm font-medium text-gray-500 hover:text-blue-600">Contact</a>
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">
Get Started
</button>
</div>
<div class="-mr-2 flex items-center md:hidden">
<button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none">
<span class="sr-only">Open main menu</span>
<i class="fas fa-bars text-xl"></i>
</button>
</div>
</div>
</div>
<!-- Mobile menu -->
<div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-blue-600 hover:bg-gray-50">Home</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 hover:text-blue-600 hover:bg-gray-50">Solutions</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 hover:text-blue-600 hover:bg-gray-50">Research</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 hover:text-blue-600 hover:bg-gray-50">About</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 hover:text-blue-600 hover:bg-gray-50">Contact</a>
<button class="w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-base font-medium mt-2 transition duration-300">
Get Started
</button>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="hero-gradient text-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-10 md:mb-0">
<h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">
Pioneering <span class="text-blue-200">Scientific</span> Innovation
</h1>
<p class="text-xl md:text-2xl mb-8 text-blue-100">
Bridging the gap between cutting-edge research and practical technological solutions.
</p>
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
<button class="bg-white text-blue-600 hover:bg-blue-50 px-6 py-3 rounded-md text-lg font-semibold transition duration-300">
Explore Our Work
</button>
<button class="border-2 border-white text-white hover:bg-white hover:text-blue-600 px-6 py-3 rounded-md text-lg font-semibold transition duration-300">
<i class="fas fa-play mr-2"></i> Watch Demo
</button>
</div>
</div>
<div class="md:w-1/2 flex justify-center">
<img src="https://images.unsplash.com/photo-1629904853893-c2c8981a1dc5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
alt="Scientific Innovation"
class="rounded-lg shadow-2xl w-full max-w-md animate-float">
</div>
</div>
</div>
</section>
<!-- Trusted By Section -->
<section class="bg-gray-50 py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<p class="text-center text-gray-500 mb-8">Trusted by leading organizations worldwide</p>
<div class="grid grid-cols-2 md:grid-cols-5 gap-8 items-center justify-center">
<img src="https://via.placeholder.com/150x60?text=NASA" alt="NASA" class="h-12 opacity-70 hover:opacity-100 transition duration-300">
<img src="https://via.placeholder.com/150x60?text=MIT" alt="MIT" class="h-12 opacity-70 hover:opacity-100 transition duration-300">
<img src="https://via.placeholder.com/150x60?text=CERN" alt="CERN" class="h-12 opacity-70 hover:opacity-100 transition duration-300">
<img src="https://via.placeholder.com/150x60?text=Stanford" alt="Stanford" class="h-12 opacity-70 hover:opacity-100 transition duration-300">
<img src="https://via.placeholder.com/150x60?text=IBM" alt="IBM" class="h-12 opacity-70 hover:opacity-100 transition duration-300">
</div>
</div>
</section>
<!-- Solutions Section -->
<section class="py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Our Innovative Solutions</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
We develop groundbreaking technologies that solve complex problems across multiple scientific disciplines.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white p-8 rounded-xl shadow-lg card-hover transition duration-500">
<div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-dna text-blue-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-3">Genomic Analytics</h3>
<p class="text-gray-600 mb-4">
Advanced algorithms for genomic sequencing and analysis, accelerating discoveries in personalized medicine.
</p>
<a href="#" class="text-blue-600 font-medium inline-flex items-center">
Learn more <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
<div class="bg-white p-8 rounded-xl shadow-lg card-hover transition duration-500">
<div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-brain text-purple-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-3">AI Research Tools</h3>
<p class="text-gray-600 mb-4">
Cutting-edge artificial intelligence platforms designed specifically for scientific research applications.
</p>
<a href="#" class="text-purple-600 font-medium inline-flex items-center">
Learn more <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
<div class="bg-white p-8 rounded-xl shadow-lg card-hover transition duration-500">
<div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-flask text-green-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-3">Lab Automation</h3>
<p class="text-gray-600 mb-4">
Smart laboratory systems that automate repetitive tasks, increasing efficiency and reducing human error.
</p>
<a href="#" class="text-green-600 font-medium inline-flex items-center">
Learn more <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
</div>
</section>
<!-- Stats Section -->
<section class="bg-gray-900 text-white py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center">
<div class="p-6">
<div class="text-4xl font-bold text-blue-400 mb-2">150+</div>
<div class="text-gray-300">Research Papers</div>
</div>
<div class="p-6">
<div class="text-4xl font-bold text-purple-400 mb-2">40+</div>
<div class="text-gray-300">Patents Filed</div>
</div>
<div class="p-6">
<div class="text-4xl font-bold text-green-400 mb-2">25+</div>
<div class="text-gray-300">Countries Served</div>
</div>
<div class="p-6">
<div class="text-4xl font-bold text-yellow-400 mb-2">98%</div>
<div class="text-gray-300">Client Satisfaction</div>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="py-20 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">What Our Partners Say</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
Hear from the scientific community about their experiences with our solutions.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="bg-white p-8 rounded-xl shadow-lg">
<div class="flex items-center mb-6">
<img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Dr. Sarah Chen" class="w-16 h-16 rounded-full object-cover mr-4">
<div>
<h4 class="font-bold text-lg">Dr. Sarah Chen</h4>
<p class="text-gray-600">Director, MIT Genomics Lab</p>
</div>
</div>
<p class="text-gray-700 italic mb-4">
"SciVerraTech's genomic analytics platform reduced our processing time by 70% while improving accuracy. Their team understands the unique challenges of scientific research."
</p>
<div class="flex text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
<div class="bg-white p-8 rounded-xl shadow-lg">
<div class="flex items-center mb-6">
<img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Prof. James Wilson" class="w-16 h-16 rounded-full object-cover mr-4">
<div>
<h4 class="font-bold text-lg">Prof. James Wilson</h4>
<p class="text-gray-600">Head of Research, Stanford AI Lab</p>
</div>
</div>
<p class="text-gray-700 italic mb-4">
"The AI tools provided by SciVerraTech have transformed our research capabilities. Their commitment to scientific excellence is evident in every product they deliver."
</p>
<div class="flex text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-20 bg-blue-600 text-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Transform Your Research?</h2>
<p class="text-xl text-blue-100 max-w-3xl mx-auto mb-8">
Join hundreds of research institutions leveraging our technology to accelerate discovery.
</p>
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
<button class="bg-white text-blue-600 hover:bg-blue-50 px-8 py-4 rounded-md text-lg font-semibold transition duration-300">
Schedule a Demo
</button>
<button class="border-2 border-white text-white hover:bg-white hover:text-blue-600 px-8 py-4 rounded-md text-lg font-semibold transition duration-300">
Contact Our Team
</button>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white pt-16 pb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-12 mb-12">
<div>
<div class="flex items-center mb-4">
<i class="fas fa-atom text-blue-500 text-2xl mr-2"></i>
<span class="text-xl font-bold">SciVerra<span class="text-blue-500">Tech</span></span>
</div>
<p class="text-gray-400 mb-4">
Advancing scientific discovery through innovative technology solutions.
</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition duration-300">
<i class="fab fa-twitter text-xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition duration-300">
<i class="fab fa-linkedin text-xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition duration-300">
<i class="fab fa-github text-xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition duration-300">
<i class="fab fa-youtube text-xl"></i>
</a>
</div>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">Solutions</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Genomic Analytics</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">AI Research Tools</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Lab Automation</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Quantum Computing</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Data Visualization</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">Company</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">About Us</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Careers</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Blog</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Press</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Partners</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">Contact</h3>
<ul class="space-y-2">
<li class="text-gray-400">123 Science Park Drive</li>
<li class="text-gray-400">Boston, MA 02134</li>
<li class="text-gray-400">United States</li>
<li class="text-gray-400 mt-4">Email: info@sciverratech.com</li>
<li class="text-gray-400">Phone: (617) 555-0199</li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-400 mb-4 md:mb-0">
&copy; 2023 SciVerraTech. All rights reserved.
</p>
<div class="flex space-x-6">
<a href="#" class="text-gray-400 hover:text-white transition duration-300">Privacy Policy</a>
<a href="#" class="text-gray-400 hover:text-white transition duration-300">Terms of Service</a>
<a href="#" class="text-gray-400 hover:text-white transition duration-300">Cookie Policy</a>
</div>
</div>
</div>
</footer>
<!-- Back to Top Button -->
<button id="back-to-top" class="fixed bottom-8 right-8 bg-blue-600 text-white w-12 h-12 rounded-full shadow-lg flex items-center justify-center transition duration-300 opacity-0 invisible hover:bg-blue-700">
<i class="fas fa-arrow-up"></i>
</button>
<script>
// Mobile menu toggle
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// Back to top button
const backToTopButton = document.getElementById('back-to-top');
window.addEventListener('scroll', () => {
if (window.pageYOffset > 300) {
backToTopButton.classList.remove('opacity-0', 'invisible');
backToTopButton.classList.add('opacity-100', 'visible');
} else {
backToTopButton.classList.remove('opacity-100', 'visible');
backToTopButton.classList.add('opacity-0', 'invisible');
}
});
backToTopButton.addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth'
});
}
});
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=muhamedabbas/sciverratech" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>