Hugging Face's logo

Spaces:
Service-xv
/
block.vs
Paused

App Files Community
block.vs / block-help.html
Service-xv's picture
Service-xv
Update block-help.html
d9a19f0 verified
Raw
History Blame Contribute Delete
29.7 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Blockchain Help Center</title>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
 <style>
 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 }
body {
 font-family: 'Inter', sans-serif;
 background: #f8fafc;
 color: #334155;
 line-height: 1.6;
 }
.container {
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 20px;
 }
/* Header */
 header {
 background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
 color: white;
 padding: 20px 0;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
.header-content {
 display: flex;
 justify-content: space-between;
 align-items: center;
 }
.logo {
 display: flex;
 align-items: center;
 gap: 12px;
 font-family: 'Poppins', sans-serif;
 }
.logo-icon {
 width: 40px;
 height: 40px;
 background: linear-gradient(135deg, #3b82f6, #8b5cf6);
 border-radius: 10px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 20px;
 }
.logo-text {
 font-size: 24px;
 font-weight: 700;
 }
.logo-text span {
 color: #60a5fa;
 }
nav ul {
 display: flex;
 list-style: none;
 gap: 30px;
 }
nav a {
 color: #cbd5e1;
 text-decoration: none;
 font-weight: 500;
 transition: color 0.3s;
 font-size: 16px;
 }
nav a:hover, nav a.active {
 color: #60a5fa;
 }
.header-actions {
 display: flex;
 gap: 15px;
 }
.btn {
 padding: 10px 20px;
 border-radius: 8px;
 font-weight: 600;
 cursor: pointer;
 border: none;
 transition: all 0.3s;
 font-size: 15px;
 }
.btn-login {
 background: transparent;
 color: #cbd5e1;
 border: 1px solid #475569;
 }
.btn-login:hover {
 background: rgba(255, 255, 255, 0.05);
 }
.btn-signup {
 background: linear-gradient(135deg, #3b82f6, #8b5cf6);
 color: white;
 }
.btn-signup:hover {
 transform: translateY(-2px);
 box-shadow: 0 6px 12px rgba(59, 130, 246, 0.3);
 }
/* Hero Section */
 .hero {
 padding: 80px 0;
 background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
 text-align: center;
 }
.hero h1 {
 font-size: 48px;
 font-weight: 700;
 color: #0f172a;
 margin-bottom: 20px;
 font-family: 'Poppins', sans-serif;
 }
.hero p {
 font-size: 18px;
 color: #475569;
 max-width: 700px;
 margin: 0 auto 40px;
 }
.search-box {
 max-width: 600px;
 margin: 0 auto;
 position: relative;
 }
.search-box input {
 width: 100%;
 padding: 18px 20px 18px 50px;
 border-radius: 12px;
 border: 2px solid #cbd5e1;
 font-size: 16px;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 }
.search-box i {
 position: absolute;
 left: 20px;
 top: 50%;
 transform: translateY(-50%);
 color: #94a3b8;
 font-size: 18px;
 }
/* Help Categories */
 .help-categories {
 padding: 80px 0;
 }
.section-title {
 text-align: center;
 margin-bottom: 50px;
 }
.section-title h2 {
 font-size: 36px;
 font-weight: 700;
 color: #0f172a;
 margin-bottom: 15px;
 font-family: 'Poppins', sans-serif;
 }
.section-title p {
 color: #64748b;
 max-width: 600px;
 margin: 0 auto;
 }
.categories-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
 gap: 30px;
 }
.category-card {
 background: white;
 border-radius: 12px;
 padding: 30px;
 box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
 transition: all 0.3s;
 border: 1px solid #e2e8f0;
 text-align: center;
 }
.category-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
 }
.category-icon {
 width: 70px;
 height: 70px;
 background: linear-gradient(135deg, #3b82f6, #8b5cf6);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 margin: 0 auto 20px;
 color: white;
 font-size: 24px;
 }
.category-card h3 {
 font-size: 20px;
 font-weight: 600;
 margin-bottom: 10px;
 color: #0f172a;
 }
.category-card p {
 color: #64748b;
 margin-bottom: 20px;
 }
.category-link {
 color: #3b82f6;
 text-decoration: none;
 font-weight: 500;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 5px;
 }
.category-link:hover {
 text-decoration: underline;
 }
/* Testimonials */
 .testimonials {
 padding: 80px 0;
 background: #f1f5f9;
 }
.testimonials-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
 gap: 30px;
 }
.testimonial-card {
 background: white;
 border-radius: 12px;
 padding: 30px;
 box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
 }
.testimonial-header {
 display: flex;
 align-items: center;
 margin-bottom: 20px;
 }
.testimonial-img {
 width: 70px;
 height: 70px;
 border-radius: 50%;
 object-fit: cover;
 margin-right: 20px;
 border: 3px solid #e2e8f0;
 }
.testimonial-info h4 {
 font-size: 18px;
 font-weight: 600;
 margin-bottom: 5px;
 color: #0f172a;
 }
.testimonial-info p {
 color: #64748b;
 font-size: 14px;
 }
.testimonial-text {
 color: #475569;
 font-style: italic;
 margin-bottom: 20px;
 line-height: 1.7;
 }
.testimonial-rating {
 color: #f59e0b;
 font-size: 16px;
 }
/* Support Team */
 .support-team {
 padding: 80px 0;
 }
.team-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
 gap: 30px;
 }
.team-member {
 background: white;
 border-radius: 12px;
 overflow: hidden;
 box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
 text-align: center;
 transition: all 0.3s;
 }
.team-member:hover {
 transform: translateY(-5px);
 box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
 }
.member-img {
 width: 100%;
 height: 200px;
 object-fit: cover;
 }
.member-info {
 padding: 25px 20px;
 }
.member-info h4 {
 font-size: 18px;
 font-weight: 600;
 margin-bottom: 5px;
 color: #0f172a;
 }
.member-info p {
 color: #64748b;
 font-size: 15px;
 margin-bottom: 15px;
 }
.member-specialty {
 display: inline-block;
 background: #dbeafe;
 color: #1d4ed8;
 padding: 5px 12px;
 border-radius: 20px;
 font-size: 13px;
 font-weight: 500;
 }
/* Footer */
 footer {
 background: #0f172a;
 color: #cbd5e1;
 padding: 70px 0 30px;
 }
.footer-content {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 gap: 40px;
 margin-bottom: 50px;
 }
.footer-column h3 {
 color: white;
 font-size: 18px;
 font-weight: 600;
 margin-bottom: 25px;
 font-family: 'Poppins', sans-serif;
 }
.footer-column ul {
 list-style: none;
 }
.footer-column ul li {
 margin-bottom: 12px;
 }
.footer-column ul li a {
 color: #94a3b8;
 text-decoration: none;
 transition: color 0.3s;
 }
.footer-column ul li a:hover {
 color: #60a5fa;
 }
.social-links {
 display: flex;
 gap: 15px;
 margin-top: 20px;
 }
.social-links a {
 width: 40px;
 height: 40px;
 border-radius: 50%;
 background: #1e293b;
 color: #cbd5e1;
 display: flex;
 align-items: center;
 justify-content: center;
 text-decoration: none;
 transition: all 0.3s;
 }
.social-links a:hover {
 background: #3b82f6;
 color: white;
 transform: translateY(-3px);
 }
.copyright {
 text-align: center;
 padding-top: 30px;
 border-top: 1px solid #334155;
 color: #94a3b8;
 font-size: 14px;
 }
/* Mobile Menu */
 .mobile-menu-btn {
 display: none;
 background: none;
 border: none;
 color: white;
 font-size: 24px;
 cursor: pointer;
 }
/* Responsive Design */
 @media (max-width: 992px) {
 .hero h1 {
 font-size: 40px;
 }
nav ul {
 gap: 20px;
 }
 }
@media (max-width: 768px) {
 .header-content {
 flex-wrap: wrap;
 }
.mobile-menu-btn {
 display: block;
 }
nav {
 width: 100%;
 order: 3;
 margin-top: 20px;
 display: none;
 }
nav.active {
 display: block;
 }
nav ul {
 flex-direction: column;
 gap: 15px;
 }
.hero {
 padding: 60px 0;
 }
.hero h1 {
 font-size: 32px;
 }
.section-title h2 {
 font-size: 28px;
 }
.testimonials-grid,
 .team-grid {
 grid-template-columns: 1fr;
 }
 }
@media (max-width: 480px) {
 .header-actions {
 flex-direction: column;
 width: 100%;
 margin-top: 15px;
 }
.btn {
 width: 100%;
 }
.hero h1 {
 font-size: 28px;
 }
.hero p {
 font-size: 16px;
 }
.search-box input {
 padding: 15px 15px 15px 45px;
 }
 }
 </style>
</head>
<body>
 <!-- Header -->
 <header>
 <div class="container">
 <div class="header-content">
 <div class="logo">
 <div class="logo-icon">
 <i class="fas fa-question-circle"></i>
 </div>
 <div class="logo-text">BlockChain<span>Help</span></div>
 </div>
<button class="mobile-menu-btn" id="mobileMenuBtn">
 <i class="fas fa-bars"></i>
 </button>
<nav id="mainNav">
 <ul>
 <li><a href="#" class="active">Home</a></li>
 <li><a href="#">Help Topics</a></li>
 <li><a href="#">Community</a></li>
 <li><a href="#">Contact</a></li>
 <li><a href="#">Blog</a></li>
 </ul>
 </nav>
<div class="header-actions">
 <button class="btn btn-login">Log In</button>
 <button class="btn btn-signup">Sign Up</button>
 </div>
 </div>
 </div>
 </header>
<!-- Hero Section -->
 <section class="hero">
 <div class="container">
 <h1>Blockchain Help Center</h1>
 <p>Get expert assistance with blockchain technology, cryptocurrencies, smart contracts, and decentralized applications. Our support team is here to help you 24/7.</p>
<div class="search-box">
 <i class="fas fa-search"></i>
 <input type="text" placeholder="Search for help articles, guides, or ask a question...">
 </div>
 </div>
 </section>
<!-- Help Categories -->
 <section class="help-categories">
 <div class="container">
 <div class="section-title">
 <h2>How Can We Help You?</h2>
 <p>Browse our most popular help categories to find solutions quickly</p>
 </div>
<div class="categories-grid">
 <div class="category-card">
 <div class="category-icon">
 <i class="fas fa-wallet"></i>
 </div>
 <h3>Wallet Support</h3>
 <p>Setup, recovery, and troubleshooting for crypto wallets</p>
 <a href="#" class="category-link">
 View Articles <i class="fas fa-arrow-right"></i>
 </a>
 </div>
<div class="category-card">
 <div class="category-icon">
 <i class="fas fa-exchange-alt"></i>
 </div>
 <h3>Transactions</h3>
 <p>Send, receive, track and troubleshoot blockchain transactions</p>
 <a href="#" class="category-link">
 View Articles <i class="fas fa-arrow-right"></i>
 </a>
 </div>
<div class="category-card">
 <div class="category-icon">
 <i class="fas fa-shield-alt"></i>
 </div>
 <h3>Security</h3>
 <p>Protect your assets and secure your blockchain accounts</p>
 <a href="#" class="category-link">
 View Articles <i class="fas fa-arrow-right"></i>
 </a>
 </div>
<div class="category-card">
 <div class="category-icon">
 <i class="fas fa-code"></i>
 </div>
 <h3>Smart Contracts</h3>
 <p>Development, deployment and interaction with smart contracts</p>
 <a href="#" class="category-link">
 View Articles <i class="fas fa-arrow-right"></i>
 </a>
 </div>
 </div>
 </div>
 </section>
<!-- Testimonials -->
 <section class="testimonials">
 <div class="container">
 <div class="section-title">
 <h2>What Our Users Say</h2>
 <p>Read testimonials from blockchain enthusiasts we've helped</p>
 </div>
<div class="testimonials-grid">
 <div class="testimonial-card">
 <div class="testimonial-header">
 <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80" alt="Alex Johnson" class="testimonial-img">
 <div class="testimonial-info">
 <h4>Alex Johnson</h4>
 <p>Blockchain Developer</p>
 </div>
 </div>
 <p class="testimonial-text">
 "The smart contract debugging guide saved me hours of work. The step-by-step approach made complex concepts easy to understand. Highly recommended for developers!"
 </p>
 <div class="testimonial-rating">
 <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="testimonial-card">
 <div class="testimonial-header">
 <img src="https://images.unsplash.com/photo-1494790108755-2616b612b786?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80" alt="Sarah Chen" class="testimonial-img">
 <div class="testimonial-info">
 <h4>Sarah Chen</h4>
 <p>Crypto Investor</p>
 </div>
 </div>
 <p class="testimonial-text">
 "I lost access to my wallet and thought all was lost. The recovery support team guided me through the process and helped me regain access to my funds. Lifesavers!"
 </p>
 <div class="testimonial-rating">
 <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 class="testimonial-card">
 <div class="testimonial-header">
 <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80" alt="Marcus Rivera" class="testimonial-img">
 <div class="testimonial-info">
 <h4>Marcus Rivera</h4>
 <p>DeFi Enthusiast</p>
 </div>
 </div>
 <p class="testimonial-text">
 "The yield farming tutorial was exactly what I needed to get started in DeFi. Clear explanations and practical examples made complex protocols accessible."
 </p>
 <div class="testimonial-rating">
 <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>
 </div>
 </section>
<!-- Support Team -->
 <section class="support-team">
 <div class="container">
 <div class="section-title">
 <h2>Meet Our Support Team</h2>
 <p>Our experts are ready to help you with any blockchain-related questions</p>
 </div>
<div class="team-grid">
 <div class="team-member">
 <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80" alt="David Kim" class="member-img">
 <div class="member-info">
 <h4>David Kim</h4>
 <p>Senior Blockchain Specialist</p>
 <span class="member-specialty">Smart Contracts</span>
 </div>
 </div>
<div class="team-member">
 <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80" alt="Elena Rodriguez" class="member-img">
 <div class="member-info">
 <h4>Elena Rodriguez</h4>
 <p>Crypto Security Expert</p>
 <span class="member-specialty">Wallet Security</span>
 </div>
 </div>
<div class="team-member">
 <img src="https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80" alt="James Wilson" class="member-img">
 <div class="member-info">
 <h4>James Wilson</h4>
 <p>DeFi Support Lead</p>
 <span class="member-specialty">DeFi Protocols</span>
 </div>
 </div>
<div class="team-member">
 <img src="https://images.unsplash.com/photo-1551836026-d5c2c5af78e4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80" alt="Priya Patel" class="member-img">
 <div class="member-info">
 <h4>Priya Patel</h4>
 <p>NFT Support Specialist</p>
 <span class="member-specialty">NFTs & Marketplaces</span>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Footer -->
 <footer>
 <div class="container">
 <div class="footer-content">
 <div class="footer-column">
 <h3>BlockHelp</h3>
 <p>Your trusted blockchain support center. We provide expert assistance for all your blockchain and cryptocurrency needs.</p>
 <div class="social-links">
 <a href="#"><i class="fab fa-twitter"></i></a>
 <a href="#"><i class="fab fa-discord"></i></a>
 <a href="#"><i class="fab fa-telegram"></i></a>
 <a href="#"><i class="fab fa-github"></i></a>
 </div>
 </div>
<div class="footer-column">
 <h3>Help Categories</h3>
 <ul>
 <li><a href="#">Getting Started</a></li>
 <li><a href="#">Wallet Setup</a></li>
 <li><a href="#">Transaction Help</a></li>
 <li><a href="#">Security & Privacy</a></li>
 <li><a href="#">Smart Contracts</a></li>
 </ul>
 </div>
<div class="footer-column">
 <h3>Resources</h3>
 <ul>
 <li><a href="#">Documentation</a></li>
 <li><a href="#">Tutorial Videos</a></li>
 <li><a href="#">Blog & News</a></li>
 <li><a href="#">Community Forum</a></li>
 <li><a href="#">API Reference</a></li>
 </ul>
 </div>
<div class="footer-column">
 <h3>Contact Us</h3>
 <ul>
 <li><i class="fas fa-envelope"></i> support@blockhelp.com</li>
 <li><i class="fas fa-phone"></i> +1 (555) 123-4567</li>
 <li><i class="fas fa-comments"></i> Live Chat 24/7</li>
 <li><i class="fas fa-map-marker-alt"></i> San Francisco, CA</li>
 </ul>
 </div>
 </div>
<div class="copyright">
 <p>&copy; 2023 BlockHelp Center. All rights reserved. | <a href="#" style="color: #60a5fa;">Privacy Policy</a> | <a href="#" style="color: #60a5fa;">Terms of Service</a></p>
 <p style="margin-top: 10px; font-size: 13px;">Bitcoin, Ethereum, and other cryptocurrency logos are trademarks of their respective owners.</p>
 </div>
 </div>
 </footer>
 <!-- Begin of Chaport Live Chat code -->
<script type="text/javascript">
(function(w,d,v3){
w.chaportConfig = {
appId : '696a2173a0eebf5c1ddbb16e',
};
if(w.chaport)return;v3=w.chaport={};v3._q=[];v3._l={};v3.q=function(){v3._q.push(arguments)};v3.on=function(e,fn){if(!v3._l[e])v3._l[e]=[];v3._l[e].push(fn)};var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://app.chaport.com/javascripts/insert.js';var ss=d.getElementsByTagName('script')[0];ss.parentNode.insertBefore(s,ss)})(window, document);
</script>
<!-- End of Chaport Live Chat code -->
<script>
 // Mobile menu toggle
 const mobileMenuBtn = document.getElementById('mobileMenuBtn');
 const mainNav = document.getElementById('mainNav');
mobileMenuBtn.addEventListener('click', function() {
 mainNav.classList.toggle('active');
// Change icon
 const icon = mobileMenuBtn.querySelector('i');
 if (mainNav.classList.contains('active')) {
 icon.className = 'fas fa-times';
 } else {
 icon.className = 'fas fa-bars';
 }
 });
// Search functionality
 const searchInput = document.querySelector('.search-box input');
searchInput.addEventListener('keypress', function(e) {
 if (e.key === 'Enter') {
 const query = searchInput.value.trim();
 if (query) {
 alert(`Searching for: "${query}"\nThis would normally redirect to search results.`);
 // In a real implementation, this would submit the search form
 }
 }
 });
// Button interactions
 const loginBtn = document.querySelector('.btn-login');
 const signupBtn = document.querySelector('.btn-signup');
loginBtn.addEventListener('click', function() {
 alert('how may we help you?');
 });
signupBtn.addEventListener('click', function() {
 alert('how may we help you?');
 });
// Category card interactions
 const categoryLinks = document.querySelectorAll('.category-link');
categoryLinks.forEach(link => {
 link.addEventListener('click', function(e) {
 e.preventDefault();
 const category = this.closest('.category-card').querySelector('h3').textContent;
 alert(`Loading articles for: ${category}`);
 });
 });
// Team member hover effect enhancement
 const teamMembers = document.querySelectorAll('.team-member');
teamMembers.forEach(member => {
 member.addEventListener('mouseenter', function() {
 this.style.transform = 'translateY(-8px)';
 });
member.addEventListener('mouseleave', function() {
 this.style.transform = 'translateY(0)';
 });
 });
 </script>
</body>
</html>