Manager

Back Back Up Advanced Editor

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="RoConnect is a social media platform designed for Roblox players to connect, share experiences, and engage in community-driven events and challenges.">
  <meta name="keywords" content="RoConnect, Roblox, Social Media, Community, Gamers, Online Platform, Events, Challenges">
  <meta name="robots" content="index, follow">
  <title>RoConnect</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://kit.fontawesome.com/845b8d45a5.js" crossorigin="anonymous"></script>  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
  <style>
    /* Glassmorphism effect */
    .glass-effect {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(50px); /* Increased blur to 50px */
      -webkit-backdrop-filter: blur(50px); /* For Safari compatibility */
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

/* Hero section background with blur effect */
    .hero-bg {
      position: relative;
      background-image: url('https://i.imgur.com/QhcKzfB.jpg');
      background-size: cover;
      background-position: center;
      height: 100vh;
    }
    .hero-bg::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: url('https://i.imgur.com/QhcKzfB.jpg');
      background-size: cover;
      background-position: center;
      filter: blur(50px); /* Apply blur to the background */
      z-index: -1; /* Place the blurred image behind content */
    }
    
    /* Style the scrollbar to match the website background */
    html, body {
      height: 100%;
      overflow: hidden; /* Disable scrolling on the root */
    }

main {
      height: 100vh; /* Ensure it fills the viewport */
      overflow-y: auto; /* Allow scrolling within the main content area */
    }

/* Customize the scrollbar for Webkit-based browsers (Chrome, Safari, etc.) */
    ::-webkit-scrollbar {
      width: 8px; /* Width of the scrollbar */
    }

::-webkit-scrollbar-track {
      background-color: rgba(255, 255, 255, 0.1); /* Light track that matches the background */
    }

::-webkit-scrollbar-thumb {
      background-color: rgba(255, 255, 255, 0.4); /* Semi-transparent thumb */
      border-radius: 10px; /* Rounded thumb for a smoother look */
    }

::-webkit-scrollbar-thumb:hover {
      background-color: rgba(255, 255, 255, 0.6); /* Hover effect */
    }

/* Firefox specific scrollbar styling */
    * {
      scrollbar-width: thin; /* Thin scrollbar */
      scrollbar-color: rgba(255, 255, 255, 0.4) rgba(255, 255, 255, 0.1); /* Thumb and track colors */
    }

body {
      overflow-y: scroll; /* Enable vertical scrolling */
      -ms-overflow-style: none; /* Hide scrollbar in Internet Explorer */
      scrollbar-width: none; /* Hide scrollbar in Firefox */
      overflow-x: hidden; /* Prevent horizontal scrolling */

}

section {
      scroll-snap-align: start; /* This will lock the section to the top when it’s in view */
      height: 100vh; /* Ensure each section takes full height */
    }

#container {
      display: flex;
      flex-direction: column;
      scroll-snap-type: y mandatory; /* Enable vertical snapping */
      height: 100vh;
      overflow-y: scroll;
    
  </style>
</head>
<body class="bg-gray-800 text-gray-100 font-sans">

<nav class="bg-gray-800 text-white shadow-lg">
    <div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
      
      <div class="flex items-center space-x-4">
        <img src="https://v1.roconnect.me/uploads/logo.png" alt="RoConnect Logo" class="h-10">
        <span class="text-2xl font-bold">RoConnect</span>
      </div>

<div class="hidden md:flex space-x-8">
        <a href="#home" class="hover:text-gray-400">Home</a>
        <a href="#about" class="hover:text-gray-400">About</a>
        <a href="#features" class="hover:text-gray-400">Features</a>
        <a href="#contact" class="hover:text-gray-400">Contact</a>
      </div>

<div class="md:hidden">
        <button class="text-gray-200 focus:outline-none" id="menu-toggle">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
          </svg>
        </button>
      </div>
    </div>

<div class="md:hidden bg-gray-800" id="mobile-menu">
      <div class="px-6 py-4 space-y-4">
        <a href="#home" class="block text-white hover:text-gray-400">Home</a>
        <a href="#about" class="block text-white hover:text-gray-400">About</a>
        <a href="#features" class="block text-white hover:text-gray-400">Features</a>
        <a href="#contact" class="block text-white hover:text-gray-400">Contact</a>
      </div>
    </div>
  </nav>

menuToggleButton.addEventListener("click", () => {
      mobileMenu.classList.toggle("hidden");
    });
  </script>

<div id="container">
    
    <section class="bg-gradient-to-br from-blue-500 to-orange-600 flex items-center justify-center text-white relative min-h-screen" id="hero">
      <div class="glass-effect p-8 rounded-lg max-w-3xl mx-auto text-center z-10">
        <img src="https://v1.roconnect.me/uploads/logo.png" alt="RoConnect Logo" class="h-20 mx-auto mb-6">
        <h1 class="text-5xl font-bold mb-4">RoConnect</h1>
        <p class="text-xl mb-6">Connecting Roblox enthusiasts worldwide.</p>
        <a href="#about" class="bg-blue-500 hover:bg-blue-600 px-6 py-3 rounded-md text-lg font-medium">Learn More</a>
      </div>
      <div class="absolute inset-0 bg-black bg-opacity-40"></div>
    </section>

<section id="about-company" class="py-20 bg-gray-800 text-white relative min-h-screen">
      <div class="container mx-auto px-6">
        <div class="text-center mb-12">
          <h2 class="text-4xl font-bold">About RoConnect</h2>
          <p class="mt-4 text-gray-400 max-w-2xl mx-auto">Discover who we are and what drives us to create a unique platform for Roblox enthusiasts worldwide.</p>
        </div>

<div>
            <h3 class="text-3xl font-bold mb-4">Who We Are</h3>
            <p class="text-gray-400 mb-6">RoConnect is a dedicated platform designed to bring Roblox enthusiasts together. Founded in 2024, our mission is to empower players to connect, share, and grow within the vibrant Roblox community.</p>
            <h3 class="text-3xl font-bold mb-4">Our Vision</h3>
            <p class="text-gray-400 mb-6">To become the ultimate social media destination for Roblox players, fostering creativity, collaboration, and a sense of belonging.</p>
            <h3 class="text-3xl font-bold mb-4">Our Core Values</h3>
            <ul class="list-disc list-inside text-gray-400">
              <li>Community First: Building a welcoming and supportive space for all.</li>
              <li>Innovation: Continuously improving and introducing exciting features.</li>
              <li>Inclusivity: Ensuring everyone feels valued and represented.</li>
            </ul>
          </div>
        </div>
      </div>
    </section>

<section id="features" class="py-20 relative min-h-screen bg-gray-800 text-gray-100">
      <div class="container mx-auto px-6">
        <h2 class="text-4xl font-bold text-center mb-12">Key Features of RoConnect</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

<div class="text-center bg-blue-600 p-6 rounded-lg shadow-lg transition transform hover:scale-105">
            <i class="fas fa-users text-white text-4xl mb-4"></i>
            <h3 class="text-2xl font-bold mb-2">Community Engagement</h3>
            <p class="text-white">Connect with like-minded Roblox players, join discussions, and grow your network.</p>
          </div>

<div class="text-center bg-blue-600 p-6 rounded-lg shadow-lg transition transform hover:scale-105">
            <i class="fas fa-upload text-white text-4xl mb-4"></i>
            <h3 class="text-2xl font-bold mb-2">Content Sharing</h3>
            <p class="text-white">Share your creations, gameplay, and ideas to inspire others in the community.</p>
          </div>

<div class="text-center bg-blue-600 p-6 rounded-lg shadow-lg transition transform hover:scale-105">
            <i class="fas fa-trophy text-white text-4xl mb-4"></i>
            <h3 class="text-2xl font-bold mb-2">Events & Challenges</h3>
            <p class="text-white">Participate in exclusive events and challenges designed for Roblox enthusiasts.</p>
          </div>

<div class="text-center bg-blue-600 p-6 rounded-lg shadow-lg transition transform hover:scale-105">
            <i class="fas fa-bullhorn text-white text-4xl mb-4"></i>
            <h3 class="text-2xl font-bold mb-2">Announcements</h3>
            <p class="text-white">Stay updated with the latest news, game features, and platform developments.</p>
          </div>

<div class="text-center bg-blue-600 p-6 rounded-lg shadow-lg transition transform hover:scale-105">
            <i class="fas fa-heart text-white text-4xl mb-4"></i>
            <h3 class="text-2xl font-bold mb-2">Inclusive Community</h3>
            <p class="text-white">Join a positive and welcoming space where everyone can thrive.</p>
          </div>

<div class="text-center bg-blue-600 p-6 rounded-lg shadow-lg transition transform hover:scale-105">
            <i class="fas fa-cogs text-white text-4xl mb-4"></i>
            <h3 class="text-2xl font-bold mb-2">Developer Tools</h3>
            <p class="text-white">Access tools and resources to collaborate with developers and creators.</p>
          </div>

</div>
      </div>
    </section>

<section id="status" class="py-20 bg-gray-800 relative min-h-screen">
      <div class="container mx-auto px-6">
        <h2 class="text-3xl font-bold mb-8 text-white text-center">System Status</h2>
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
          <iframe 
            src="https://status.roconnect.me/" 
            title="RoConnect System Status" 
            class="w-full h-96 border-none">
          </iframe>
        </div>
        <p class=" text-center mt-4">
          Check the latest system updates and service statuses.
        </p>
      </div>
    </section>

<section id="faq" class="py-20 bg-gray-800 text-white relative min-h-screen">
  <div class="container mx-auto px-6">
    <h2 class="text-4xl font-bold text-center mb-12">Frequently Asked Questions</h2>
    <div class="space-y-8">
      
      <details class="group bg-gray-800 rounded-lg p-6">
        <summary class="flex items-center justify-between cursor-pointer">
          <h3 class="font-semibold text-xl">What is RoConnect?</h3>
          <span class="transition-transform group-open:rotate-180">
            <i class="fas fa-chevron-down"></i>
          </span>
        </summary>
        <p class="mt-4 text-gray-300">
          RoConnect is a social media platform designed exclusively for Roblox enthusiasts, providing a space for players to connect, share, and grow together.
        </p>
      </details>

<details class="group bg-gray-800 rounded-lg p-6">
        <summary class="flex items-center justify-between cursor-pointer">
          <h3 class="font-semibold text-xl">Is RoConnect free to use?</h3>
          <span class="transition-transform group-open:rotate-180">
            <i class="fas fa-chevron-down"></i>
          </span>
        </summary>
        <p class="mt-4 text-gray-300">
          Yes, RoConnect is free to use. Some premium features may be available for subscription in the future.
        </p>
      </details>

<details class="group bg-gray-800 rounded-lg p-6">
        <summary class="flex items-center justify-between cursor-pointer">
          <h3 class="font-semibold text-xl">How do I join RoConnect?</h3>
          <span class="transition-transform group-open:rotate-180">
            <i class="fas fa-chevron-down"></i>
          </span>
        </summary>
        <p class="mt-4 text-gray-300">
          You can sign up using your email or connect your Roblox account directly on our platform.
        </p>
      </details>

<details class="group bg-gray-800 rounded-lg p-6">
        <summary class="flex items-center justify-between cursor-pointer">
          <h3 class="font-semibold text-xl">Is RoConnect affiliated with Roblox?</h3>
          <span class="transition-transform group-open:rotate-180">
            <i class="fas fa-chevron-down"></i>
          </span>
        </summary>
        <p class="mt-4 text-gray-300">
          No, RoConnect is an independent platform and is not officially affiliated with or endorsed by Roblox Corporation.
        </p>
      </details>
    </div>
  </div>
</section>

<div class="text-center bg-blue-600 p-6 rounded-lg shadow-lg">
            <img
              src="https://cdn.discordapp.com/avatars/981335447613632602/792a354162f528b93e32f6cf158a5149.png?size=4096"
              alt="Team Member Photo"
              class="w-32 h-32 mx-auto rounded-full mb-4"
            />
            <h3 class="text-xl font-bold">eisabanana</h3>
            <p class=" mb-4">Founder & CEO</p>
          </div>

<div class="text-center bg-blue-600 p-6 rounded-lg shadow-lg">
            <img
              src="https://cdn.discordapp.com/avatars/825978480378249247/74517430b466b59b3508c91e9d97ab20.png?size=4096"
              alt="Team Member Photo"
              class="w-32 h-32 mx-auto rounded-full mb-4"
            />
            <h3 class="text-xl font-bold">SirTism</h3>
            <p class=" mb-4">Chief Operations Officer</p>
          </div>

<div class="text-center bg-blue-600 p-6 rounded-lg shadow-lg">
              <img
                src="https://cdn.discordapp.com/avatars/1256422776210849878/a9d491dc41195e20ba82e29ac352e093.png?size=4096"
                alt="Team Member Photo"
                class="w-32 h-32 mx-auto rounded-full mb-4"
              />
              <h3 class="text-xl font-bold">ELLOMATE BHM</h3>
              <p class=" mb-4">Executive Director</p>
            </div>

</div>
        <div class="text-center bg-gray-800 p-6 rounded-lg shadow-lg">
            <img
              src="https://via.placeholder.com/150"
              alt="Team Member Photo"
              class="w-32 h-32 mx-auto rounded-full mb-4"
            />
            <h3 class="text-xl font-bold">This Could Be You</h3>
            <p class=" mb-4">Apply Now!</p>
          </div>

</div>
      </div>
    </section>

<section id="footer" class="py-20 bg-gray-800 min-h-screen">
      <footer class="footer-1 bg-gray-800 text-white py-8 sm:py-12">
        <div class="container mx-auto px-4">
          <div class="sm:flex sm:flex-wrap sm:-mx-4 md:py-4">
            <div class="px-4 sm:w-1/2 md:w-1/4 xl:w-1/6">
              <h5 class="text-xl font-bold mb-6">Features</h5>
              <ul class="list-none footer-links">
                <li class="mb-2">
                  <a href="#" class="border-b border-solid border-transparent hover:border-purple-800 ">Community Forums</a>
                </li>
                <li class="mb-2">
                  <a href="#" class="border-b border-solid border-transparent hover:border-purple-800 ">App Updates</a>
                </li>
                <li class="mb-2">
                  <a href="#" class="border-b border-solid border-transparent hover:border-purple-800 ">Events </a>
                </li>
                <li class="mb-2">
                  <a href="#" class="border-b border-solid border-transparent hover:border-purple-800 ">Stuff For Developers</a>
                </li>

</ul>
            </div>
            <div class="px-4 sm:w-1/2 md:w-1/4 xl:w-1/6 mt-8 sm:mt-0">
              <h5 class="text-xl font-bold mb-6">Resources</h5>
              <ul class="list-none footer-links">
                <li class="mb-2">
                  <a href="#" class="border-b border-solid border-transparent hover:border-purple-800 ">Blog</a>
                </li>
                <li class="mb-2">
                  <a href="#" class="border-b border-solid border-transparent hover:border-purple-800 ">FAQ</a>
                </li>
                <li class="mb-2">
                  <a href="#" class="border-b border-solid border-transparent hover:border-purple-800 ">DMCA</a>
                </li>
                <li class="mb-2">
                  <a href="#" class="border-b border-solid border-transparent hover:border-purple-800 ">Community Guidelines</a>
                </li>
              </ul>
            </div>
            <div class="px-4 sm:w-1/2 md:w-1/4 xl:w-1/6 mt-8 md:mt-0">
              <h5 class="text-xl font-bold mb-6">About</h5>
              <ul class="list-none footer-links">
                <li class="mb-2">
                  <a href="#" class="border-b border-solid border-transparent hover:border-purple-800 ">Our Mission</a>
                </li>
                <li class="mb-2">
                  <a href="#" class="border-b border-solid border-transparent hover:border-purple-800 ">The Team</a>
                </li>
                <li class="mb-2">
                  <a href="#" class="border-b border-solid border-transparent hover:border-purple-800 ">Privacy</a>
                </li>
                <li class="mb-2">
                  <a href="#" class="border-b border-solid border-transparent hover:border-purple-800 ">Terms</a>
                </li>
              </ul>
            </div>
            <div class="px-4 sm:w-1/2 md:w-1/4 xl:w-1/6 mt-8 md:mt-0">
              <h5 class="text-xl font-bold mb-6">Help</h5>
              <ul class="list-none footer-links">
                <li class="mb-2">
                  <a href="#" class="border-b border-solid border-transparent hover:border-purple-800 ">Support Center</a>
                </li>
                <li class="mb-2">
                  <a href="#" class="border-b border-solid border-transparent hover:border-purple-800 ">Help Center</a>
                </li>
                <li class="mb-2">
                  <a href="#" class="border-b border-solid border-transparent hover:border-purple-800 ">Feedback & Suggestions</a>
                </li>
              </ul>
            </div>
            <div class="px-4 mt-4 sm:w-1/3 xl:w-1/6 sm:mx-auto xl:mt-0 xl:ml-auto">
              <h5 class="text-xl font-bold mb-6 sm:text-center xl:text-left">Stay connected</h5>
              <div class="flex sm:justify-center xl:justify-start">
                <a href="https://discord.gg/dDmsrmJcEt" class="w-8 h-8 border border-2 border-gray-400 rounded-full text-center py-1 text-gray-600 hover:text-white hover:bg-blue-600 hover:border-blue-600">
                  <i class="fa-brands fa-discord" style="color: #ffffff;"></i>
                </a>
                <a href="https://x.com/Ro_Connect" class="w-8 h-8 border border-2 border-gray-400 rounded-full text-center py-1 ml-2 text-gray-600 hover:text-white hover:bg-blue-400 hover:border-blue-400">
                  <i class="fab fa-twitter" style="color: #ffffff;"></i>
                </a>
                <a href="https://www.roblox.com/communities/35225204/RoConnect-Connect-Share-Play#!/about" class="w-8 h-8 border border-2 border-gray-400 rounded-full text-center py-1 ml-2 text-gray-600 hover:text-white hover:bg-red-600 hover:border-red-600">
                <i class="fa-brands fa-readme" style="color: #ffffff;"></i>                </a>
              </div>
            </div>
          </div>

<div class="sm:flex sm:flex-wrap sm:-mx-4 mt-6 pt-6 sm:mt-12 sm:pt-12 border-t">
            <div class="sm:w-full px-4 md:w-1/6">
              <img src="https://v1.roconnect.me/uploads/logo.png" width="50"/>
<br>
              <strong>RoConnect, Inc.</strong>
            </div>
            <div class="px-4 sm:w-1/2 md:w-1/4 mt-4 md:mt-0">
              <h6 class="font-bold mb-2">Email</h6>
              <address class="not-italic mb-4 text-sm">
                support@roconnect.me
              </address>
            </div>
            <div class="px-4 sm:w-1/2 md:w-1/4 mt-4 md:mt-0">
              <h6 class="font-bold mb-2">DMCA Compliance</h6>
<a href="//www.dmca.com/Protection/Status.aspx?ID=7f5cfecd-f0d6-4f48-8726-d9fa2e274855" title="DMCA.com Protection Status" class="dmca-badge"> <img src ="https://images.dmca.com/Badges/DMCA_logo-grn-btn120w.png?ID=7f5cfecd-f0d6-4f48-8726-d9fa2e274855"  alt="DMCA.com Protection Status" /></a>  <script src="https://images.dmca.com/Badges/DMCABadgeHelper.min.js"> </script>                <em><a href="mailto:abuse@roconnect.me">Report Abuse</a></em></p>
            </div>
            <div class="px-4 md:w-1/4 md:ml-auto mt-6 sm:mt-4 md:mt-0">
              <button class="px-4 py-2 bg-purple-800 hover:bg-purple-900 rounded text-white">Get Started</button>
            </div>
          </div>
        </div>
      </footer>
      </section>

</body>
</html>

<script>
  // Intersection Observer Options
  const options = {
    root: null, // Relative to the viewport
    rootMargin: "0px",
    threshold: 0.5 // Trigger when 50% of the element is visible
  };

// Intersection Observer Callback
  const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add("animate__fadeIn"); // Add fadeIn animation
        entry.target.classList.remove("animate__fadeOut"); // Remove fadeOut if visible
      } else {
        entry.target.classList.add("animate__fadeOut"); // Add fadeOut animation
        entry.target.classList.remove("animate__fadeIn"); // Remove fadeIn if not visible
      }
    });
  }, options);

// Observing sections
  const sections = document.querySelectorAll(".animate__animated");
  sections.forEach(section => {
    observer.observe(section);
  });
  document.addEventListener('scroll', function () {
    const sections = document.querySelectorAll('section');
    const scrollPosition = window.scrollY;

sections.forEach((section) => {
      const sectionTop = section.offsetTop;
      const sectionHeight = section.offsetHeight;

if (scrollPosition >= sectionTop - 50 && scrollPosition < sectionTop + sectionHeight - 50) {
        section.classList.add('animate__fadeIn'); // Example of adding animation when section is in view
      } else {
        section.classList.remove('animate__fadeIn');
      }
    });
  });

</script>