https://socialsphere.getenjoyment.net/

ID da verificação: fbe3fd36-8dea-46bb-8341-0d42c3f585d2Concluído
URL enviado:: https://socialsphere.getenjoyment.net/
Relatório concluído:: 29 de nov. de 2024, 14:20:19
Links · 0 encontrado(s)

Os links de saída identificados na página
Variáveis JavaScript · 24 encontrada(s)

Variáveis JavaScript globais carregadas no objeto janela de uma página são variáveis declaradas fora das funções e acessíveis de qualquer lugar no código dentro do escopo atual
Nome	Tipo
onbeforetoggle	object
documentPictureInPicture	object
onscrollend	object
gtag	function
dataLayer	object
THREE	object
__THREE__	string
gapi	object
___jsl	object
default_gsi	object
Mensagens de registro do console · 1 encontrada(s)

Mensagens registradas no console web
Tipo	Categoria	Log
error	other	URL https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js Texto THREE.WebGLRenderer: Error creating WebGL context.
HTML

O corpo HTML bruto da página
<!DOCTYPE html><html lang="en"><head>
  <script src="https://apis.google.com/js/platform.js" async="" defer="" gapi_processed="true"></script>
  <script src="https://accounts.google.com/gsi/client" async=""></script>
  <script async="" src="https://www.googletagmanager.com/gtag/js?id=G-2H5KR50ZLJ"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-2H5KR50ZLJ');
  </script>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> 
  <meta name="description" content="Introducing SocialSphere: Redefining Social Media!">
  <meta name="keywords" content="Social, Sphere, Socialsphere, SocialSphere, socialsphere, spheres, media, Media, SocialMedia, Socialmedia, socialmedia, twitter, facebook, meta">
  <meta name="author" content="ItsDaBoSs">  

  <link rel="icon" type="image/x-icon" href="./favicon.ico">
  <title>Socialsphere 2.0</title>

  <!-- Bootstrap CSS -->
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
  
  <!-- Font Awesome for Icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

  <!-- AOS Animation CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css">

  <!-- Custom Styles -->
  <style>
    body { overflow-x: hidden; }
    
    /* Hero 3D Background */
    #3d-background, #features-3d, #footer-3d { position: absolute; width: 100%; height: 100%; z-index: -1; top: 0; left: 0; }

    /* Background Colors for Sections */
    #features { background-color: #1a2a3f; color: white; position: relative; }
    #why-us { background-color: #2b2b2b; color: white; }
    #community-highlights { background-color: #f1f3f5; color: #333; }
    #getting-started { background-color: rgba(21, 21, 33); color: #333; }
    #faqs { background-color: #ffffff; color: #333; }
    #footer-3d { bottom: 0; }

    /* Micro-Animations */
    .icon { transition: transform 0.3s ease; }
    .icon:hover { transform: scale(1.15); }
    .icon-spin:hover { animation: spin 1s infinite linear; }
    .icon-bounce:hover { animation: bounce 0.5s ease-in-out infinite alternate; }
    .icon-pulse { animation: pulse 2s infinite; }

    /* Keyframes */
    @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
    @keyframes bounce { from { transform: translateY(0); } to { transform: translateY(-8px); } }
    @keyframes pulse { 0%, 100% { color: #007bff; } 50% { color: #ff6b6b; } }

    
    /* Section Spacing */
    section { padding: 4rem 0; }

    .header {
      transition: all 0.3s ease;
      background-color: rgba(30, 30, 47);
    }
    .header.shrink {
      background-color: rgba(21, 21, 33);
      padding: 0.5em 1em;
    }
    .header .navbar-brand img {
      max-width: 200px;
      transition: max-width 0.3s ease;
    }
    .header.shrink .navbar-brand img {
      max-width: 150px;
    }
    .navbar-toggler {
      border: none;
    }
    .footer {
        background-color: #1e1e2f;
        padding: 2em 0;
    }

    .footer .footer-links a {
        color: #cccccc;
        margin: 0 0.5em;
        text-decoration: none;
    }

    .footer .footer-links a:hover {
        color: #ffffff;
    }

    .highlight-img {
      height: 250px;
      object-fit: cover;
      width: 100%;
    }
  </style>

  <!-- Three.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<style id="googleidentityservice_button_styles">.qJTHM{-moz-user-select:none;color:#202124;direction:ltr;font-family:"Roboto-Regular",arial,sans-serif;font-weight:400;margin:0;overflow:hidden}.ynRLnc{left:-9999px;position:absolute;top:-9999px}.L6cTce{display:none}.bltWBb{word-break:break-all}.hSRGPd{color:#1a73e8;cursor:pointer;font-weight:500;text-decoration:none}.Bz112c-W3lGp{height:16px;width:16px}.Bz112c-E3DyYd{height:20px;width:20px}.Bz112c-r9oPif{height:24px;width:24px}.Bz112c-uaxL4e{-moz-border-radius:10px;border-radius:10px}.LgbsSe-Bz112c{display:block}.S9gUrf-YoZ4jf,.S9gUrf-YoZ4jf *{border:none;margin:0;padding:0}.fFW7wc-ibnC6b>.aZ2wEe>div{border-color:#4285f4}.P1ekSe-ZMv3u>div:nth-child(1){background-color:#1a73e8!important}.P1ekSe-ZMv3u>div:nth-child(2),.P1ekSe-ZMv3u>div:nth-child(3){background-image:linear-gradient(to right,rgba(255,255,255,.7),rgba(255,255,255,.7)),linear-gradient(to right,#1a73e8,#1a73e8)!important}.haAclf{display:inline-block}.nsm7Bb-HzV7m-LgbsSe{border-radius:4px;box-sizing:border-box;transition:background-color .218s,border-color .218s;-moz-user-select:none;background-color:#fff;background-image:none;border:1px solid #dadce0;color:#3c4043;cursor:pointer;font-family:"Google Sans",arial,sans-serif;font-size:14px;height:40px;letter-spacing:0.25px;outline:none;overflow:hidden;padding:0 12px;position:relative;text-align:center;vertical-align:middle;white-space:nowrap;width:auto}@media screen and (-ms-high-contrast:active){.nsm7Bb-HzV7m-LgbsSe{border:2px solid windowText;color:windowText}}.nsm7Bb-HzV7m-LgbsSe.pSzOP-SxQuSe{font-size:14px;height:32px;letter-spacing:0.25px;padding:0 10px}.nsm7Bb-HzV7m-LgbsSe.purZT-SxQuSe{font-size:11px;height:20px;letter-spacing:0.3px;padding:0 8px}.nsm7Bb-HzV7m-LgbsSe.Bz112c-LgbsSe{padding:0;width:40px}.nsm7Bb-HzV7m-LgbsSe.Bz112c-LgbsSe.pSzOP-SxQuSe{width:32px}.nsm7Bb-HzV7m-LgbsSe.Bz112c-LgbsSe.purZT-SxQuSe{width:20px}.nsm7Bb-HzV7m-LgbsSe.JGcpL-RbRzK{border-radius:20px}.nsm7Bb-HzV7m-LgbsSe.JGcpL-RbRzK.pSzOP-SxQuSe{border-radius:16px}.nsm7Bb-HzV7m-LgbsSe.JGcpL-RbRzK.purZT-SxQuSe{border-radius:10px}.nsm7Bb-HzV7m-LgbsSe.MFS4be-Ia7Qfc{border:none;color:#fff}.nsm7Bb-HzV7m-LgbsSe.MFS4be-v3pZbf-Ia7Qfc{background-color:#1a73e8}.nsm7Bb-HzV7m-LgbsSe.MFS4be-JaPV2b-Ia7Qfc{background-color:#202124;color:#e8eaed}.nsm7Bb-HzV7m-LgbsSe .nsm7Bb-HzV7m-LgbsSe-Bz112c{height:18px;margin-right:8px;min-width:18px;width:18px}.nsm7Bb-HzV7m-LgbsSe.pSzOP-SxQuSe .nsm7Bb-HzV7m-LgbsSe-Bz112c{height:14px;min-width:14px;width:14px}.nsm7Bb-HzV7m-LgbsSe.purZT-SxQuSe .nsm7Bb-HzV7m-LgbsSe-Bz112c{height:10px;min-width:10px;width:10px}.nsm7Bb-HzV7m-LgbsSe.jVeSEe .nsm7Bb-HzV7m-LgbsSe-Bz112c{margin-left:8px;margin-right:-4px}.nsm7Bb-HzV7m-LgbsSe.Bz112c-LgbsSe .nsm7Bb-HzV7m-LgbsSe-Bz112c{margin:0;padding:10px}.nsm7Bb-HzV7m-LgbsSe.Bz112c-LgbsSe.pSzOP-SxQuSe .nsm7Bb-HzV7m-LgbsSe-Bz112c{padding:8px}.nsm7Bb-HzV7m-LgbsSe.Bz112c-LgbsSe.purZT-SxQuSe .nsm7Bb-HzV7m-LgbsSe-Bz112c{padding:4px}.nsm7Bb-HzV7m-LgbsSe .nsm7Bb-HzV7m-LgbsSe-Bz112c-haAclf{border-top-left-radius:3px;border-bottom-left-radius:3px;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;justify-content:center;align-items:center;background-color:#fff;height:36px;margin-left:-10px;margin-right:12px;min-width:36px;width:36px}.nsm7Bb-HzV7m-LgbsSe .nsm7Bb-HzV7m-LgbsSe-Bz112c-haAclf .nsm7Bb-HzV7m-LgbsSe-Bz112c,.nsm7Bb-HzV7m-LgbsSe.Bz112c-LgbsSe .nsm7Bb-HzV7m-LgbsSe-Bz112c-haAclf .nsm7Bb-HzV7m-LgbsSe-Bz112c{margin:0;padding:0}.nsm7Bb-HzV7m-LgbsSe.pSzOP-SxQuSe .nsm7Bb-HzV7m-LgbsSe-Bz112c-haAclf{height:28px;margin-left:-8px;margin-right:10px;min-width:28px;width:28px}.nsm7Bb-HzV7m-LgbsSe.purZT-SxQuSe .nsm7Bb-HzV7m-LgbsSe-Bz112c-haAclf{height:16px;margin-left:-6px;margin-right:8px;min-width:16px;width:16px}.nsm7Bb-HzV7m-LgbsSe.Bz112c-LgbsSe .nsm7Bb-HzV7m-LgbsSe-Bz112c-haAclf{border-radius:3px;margin-left:2px;margin-right:0;padding:0}.nsm7Bb-HzV7m-LgbsSe.JGcpL-RbRzK .nsm7Bb-HzV7m-LgbsSe-Bz112c-haAclf{border-radius:18px}.nsm7Bb-HzV7m-LgbsSe.pSzOP-SxQuSe.JGcpL-RbRzK .nsm7Bb-HzV7m-LgbsSe-Bz112c-haAclf{border-radius:14px}.nsm7Bb-HzV7m-LgbsSe.purZT-SxQuSe.JGcpL-RbRzK .nsm7Bb-HzV7m-LgbsSe-Bz112c-haAclf{border-radius:8px}.nsm7Bb-HzV7m-LgbsSe .nsm7Bb-HzV7m-LgbsSe-bN97Pc-sM5MNb{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;align-items:center;flex-direction:row;justify-content:space-between;flex-wrap:nowrap;height:100%;position:relative;width:100%}.nsm7Bb-HzV7m-LgbsSe .oXtfBe-l4eHX{justify-content:center}.nsm7Bb-HzV7m-LgbsSe .nsm7Bb-HzV7m-LgbsSe-BPrWId{flex-grow:1;font-family:"Google Sans",arial,sans-serif;font-weight:500;overflow:hidden;text-overflow:ellipsis;vertical-align:top}.nsm7Bb-HzV7m-LgbsSe.purZT-SxQuSe .nsm7Bb-HzV7m-LgbsSe-BPrWId{font-weight:300}.nsm7Bb-HzV7m-LgbsSe .oXtfBe-l4eHX .nsm7Bb-HzV7m-LgbsSe-BPrWId{flex-grow:0}.nsm7Bb-HzV7m-LgbsSe .nsm7Bb-HzV7m-LgbsSe-MJoBVe{transition:background-color .218s;bottom:0;left:0;position:absolute;right:0;top:0}.nsm7Bb-HzV7m-LgbsSe:hover,.nsm7Bb-HzV7m-LgbsSe:focus{box-shadow:none;border-color:#d2e3fc;outline:none}.nsm7Bb-HzV7m-LgbsSe:hover .nsm7Bb-HzV7m-LgbsSe-MJoBVe,.nsm7Bb-HzV7m-LgbsSe:focus .nsm7Bb-HzV7m-LgbsSe-MJoBVe{background:rgba(66,133,244,.04)}.nsm7Bb-HzV7m-LgbsSe:active .nsm7Bb-HzV7m-LgbsSe-MJoBVe{background:rgba(66,133,244,.1)}.nsm7Bb-HzV7m-LgbsSe.MFS4be-Ia7Qfc:hover .nsm7Bb-HzV7m-LgbsSe-MJoBVe,.nsm7Bb-HzV7m-LgbsSe.MFS4be-Ia7Qfc:focus .nsm7Bb-HzV7m-LgbsSe-MJoBVe{background:rgba(255,255,255,.24)}.nsm7Bb-HzV7m-LgbsSe.MFS4be-Ia7Qfc:active .nsm7Bb-HzV7m-LgbsSe-MJoBVe{background:rgba(255,255,255,.32)}.nsm7Bb-HzV7m-LgbsSe .n1UuX-DkfjY{border-radius:50%;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;height:20px;margin-left:-4px;margin-right:8px;min-width:20px;width:20px}.nsm7Bb-HzV7m-LgbsSe.jVeSEe .nsm7Bb-HzV7m-LgbsSe-BPrWId{font-family:"Roboto";font-size:12px;text-align:left}.nsm7Bb-HzV7m-LgbsSe.jVeSEe .nsm7Bb-HzV7m-LgbsSe-BPrWId .ssJRIf,.nsm7Bb-HzV7m-LgbsSe.jVeSEe .nsm7Bb-HzV7m-LgbsSe-BPrWId .K4efff .fmcmS{overflow:hidden;text-overflow:ellipsis}.nsm7Bb-HzV7m-LgbsSe.jVeSEe .nsm7Bb-HzV7m-LgbsSe-BPrWId .K4efff{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;align-items:center;color:#5f6368;fill:#5f6368;font-size:11px;font-weight:400}.nsm7Bb-HzV7m-LgbsSe.jVeSEe.MFS4be-Ia7Qfc .nsm7Bb-HzV7m-LgbsSe-BPrWId .K4efff{color:#e8eaed;fill:#e8eaed}.nsm7Bb-HzV7m-LgbsSe.jVeSEe .nsm7Bb-HzV7m-LgbsSe-BPrWId .K4efff .Bz112c{height:18px;margin:-3px -3px -3px 2px;min-width:18px;width:18px}.nsm7Bb-HzV7m-LgbsSe.jVeSEe .nsm7Bb-HzV7m-LgbsSe-Bz112c-haAclf{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px;margin-left:12px;margin-right:-10px}.nsm7Bb-HzV7m-LgbsSe.jVeSEe.JGcpL-RbRzK .nsm7Bb-HzV7m-LgbsSe-Bz112c-haAclf{border-radius:18px}.L5Fo6c-sM5MNb{border:0;display:block;left:0;position:relative;top:0}.L5Fo6c-bF1uUb{-moz-border-radius:4px;border-radius:4px;bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0}.L5Fo6c-bF1uUb:focus{border:none;outline:none}sentinel{}</style></head>
<body class="bg-dark text-light" data-aos-easing="ease" data-aos-duration="1000" data-aos-delay="0">

  <header class="header fixed-top text-white">
    <div class="container">
      <nav class="navbar navbar-expand-lg navbar-dark">
        <a class="navbar-brand" href="https://socialsphere.getenjoyment.net/dashboard/">
          <img src="https://socialsphere.getenjoyment.net/applogo.png" alt="Socialsphere Logo">
        </a>
        <!-- Toggler for mobile and scroll-collapsed menu -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <!-- Collapsible Menu -->
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav ml-auto align-items-center">
            <li class="nav-item">
              <a class="nav-link text-light mx-2" href="#features">Features</a>
            </li>
            <li class="nav-item">
              <a class="nav-link text-light mx-2" href="#why-us">Why Choose Us</a>
            </li>
            <li class="nav-item">
              <a class="nav-link text-light mx-2" href="#community-highlights">Highlights</a>
            </li>
            
            <li class="nav-item">
              <a class="nav-link text-light mx-2" href="#getting-started">Getting Started</a>
            </li>
            <li class="nav-item">
              <a class="nav-link text-light mx-2" href="#faqs">FAQ</a>
            </li>

            <li class="nav-item">
              <a class="nav-link text-light mx-2" href="#testimonials">Testimonials</a>
            </li>
            <li class="nav-item d-none d-lg-block">
              <a href="https://socialsphere.getenjoyment.net/login/" class="btn btn-outline-light mr-2">Sign In</a>
            </li>
            <li class="nav-item d-none d-lg-block">
              <a href="https://socialsphere.getenjoyment.net/signup/" class="btn btn-light">Sign Up</a>
            </li>
          </ul>
          <div class="d-lg-none mt-3">
            <a href="https://socialsphere.getenjoyment.net/login/" class="btn btn-outline-light btn-block mb-2">Sign In</a>
            <a href="https://socialsphere.getenjoyment.net/signup/" class="btn btn-light btn-block">Sign Up</a>
          </div>
        </div>
      </nav>
    </div>
  </header>



  <!-- Hero Section -->
  <section class="hero position-relative d-flex align-items-center text-center" style="height: 100vh;">
    <div id="3d-background"></div>
    <div class="hero-content position-absolute w-100 aos-init aos-animate" data-aos="fade-up">
      <h1 class="display-4 text-white">Welcome to Socialsphere 2.0</h1>
      <p class="lead text-light">Experience a new level of connection and discovery.</p>
      <div class="mt-4">
        <a href="https://socialsphere.getenjoyment.net/signup/" class="btn btn-primary btn-lg mx-2">Sign Up</a>
        <a href="#features" class="btn btn-outline-light btn-lg mx-2">Learn More</a>
      </div>
    </div>
  </section>


  <!-- Features Section -->
  <section id="features" class="container-fluid py-5">
    <h2 class="text-center text-white mb-5 aos-init" data-aos="fade-right">New &amp; Improved Features</h2>
    <div class="row text-center">
      <div class="col-md-4 mb-4 aos-init" data-aos="fade-up" data-aos-delay="100">
        <i class="fas fa-user-shield fa-3x text-primary mb-3 icon icon-bounce"></i>
        <h4>Enhanced Privacy</h4>
        <p>Keep your data secure with advanced encryption.</p>
      </div>
      <div class="col-md-4 mb-4 aos-init" data-aos="fade-up" data-aos-delay="200">
        <i class="fas fa-bolt fa-3x text-primary mb-3 icon icon-spin"></i>
        <h4>Faster Messaging</h4>
        <p>Real-time chats with zero delays for a seamless experience.</p>
      </div>
      <div class="col-md-4 mb-4 aos-init" data-aos="fade-up" data-aos-delay="300">
        <i class="fas fa-palette fa-3x text-primary mb-3 icon icon-bounce"></i>
        <h4>Customizable Profiles</h4>
        <p>Personalize profiles.</p>
      </div>
      <div class="col-md-4 mb-4 aos-init" data-aos="fade-up" data-aos-delay="400">
        <i class="fas fa-chart-line fa-3x text-primary mb-3 icon icon-pulse"></i>
        <h4>Data Analytics</h4>
        <p>Track your reach and engagement with insights.</p>
      </div>
      <div class="col-md-4 mb-4 aos-init" data-aos="fade-up" data-aos-delay="500">
        <i class="fas fa-lock fa-3x text-primary mb-3 icon icon-bounce"></i>
        <h4>End-to-End Encryption</h4>
        <p>Your conversations remain private and secure.</p>
      </div>
      <div class="col-md-4 mb-4 aos-init" data-aos="fade-up" data-aos-delay="600">
        <i class="fas fa-comments fa-3x text-primary mb-3 icon icon-pulse"></i>
        <h4>Enhanced Group Chats</h4>
        <p>Advanced group chat features for seamless interaction.</p>
      </div>
    </div>
  </section>

  <!-- Why Choose Us Section -->
  <section id="why-us" class="container-fluid py-5 bg-dark text-light">
    <div class="container text-center">
      <h2 data-aos="fade-left" class="aos-init">Why Socialsphere 2.0?</h2>
      <p class="lead mt-3">Discover what sets us apart.</p>
      <div class="row mt-4">
        <div class="col-md-3 aos-init" data-aos="fade-right" data-aos-delay="100">
          <i class="fas fa-ad fa-3x text-primary mb-3 icon icon-spin"></i>
          <p>No Ads – Purely User-Focused</p>
        </div>
        <div class="col-md-3 aos-init" data-aos="fade-right" data-aos-delay="200">
          <i class="fas fa-lightbulb fa-3x text-primary mb-3 icon icon-pulse"></i>
          <p>AI-Driven Personalization</p>
        </div>
        <div class="col-md-3 aos-init" data-aos="fade-right" data-aos-delay="300">
          <i class="fas fa-headset fa-3x text-primary mb-3 icon icon-bounce"></i>
          <p>24/7 Customer Support</p>
        </div>
        <div class="col-md-3 aos-init" data-aos="fade-right" data-aos-delay="400">
          <i class="fas fa-tree fa-3x text-primary mb-3 icon icon-pulse"></i>
          <p>Eco-Friendly Infrastructure</p>
        </div>
        <div class="col-md-3 aos-init" data-aos="fade-right" data-aos-delay="500">
          <i class="fas fa-shield-alt fa-3x text-primary mb-3 icon icon-bounce"></i>
          <p>Built with Security in Mind</p>
        </div>
        <div class="col-md-3 aos-init" data-aos="fade-right" data-aos-delay="600">
          <i class="fas fa-globe-americas fa-3x text-primary mb-3 icon icon-pulse"></i>
          <p>Global Community &amp; Inclusivity</p>
        </div>
        <div class="col-md-3 aos-init" data-aos="fade-right" data-aos-delay="700">
          <i class="fas fa-rocket fa-3x text-primary mb-3 icon icon-spin"></i>
          <p>Blazing Fast Messaging</p>
        </div>
        <div class="col-md-3 aos-init" data-aos="fade-right" data-aos-delay="800">
          <i class="fas fa-user-lock fa-3x text-primary mb-3 icon icon-bounce"></i>
          <p>Unmatched Privacy Controls</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Community Highlights Section -->
  <section id="community-highlights" class="container-fluid py-5">
    <h2 class="text-center text-dark mb-5 aos-init" data-aos="fade-up">Community Highlights</h2>
    <div class="row text-center">
      <div class="col-md-4 aos-init" data-aos="zoom-in" data-aos-delay="100">
        <img src="https://plus.unsplash.com/premium_photo-1677939082123-414edc6aaf25?q=80&amp;w=1632&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Trending Topics" class="img-fluid mb-3 rounded highlight-img">
        <h5>Trending Topics</h5>
        <p>See what’s buzzing in the Socialsphere community.</p>
      </div>
      <div class="col-md-4 aos-init" data-aos="zoom-in" data-aos-delay="200">
        <img src="https://plus.unsplash.com/premium_photo-1683977922495-3ab3ce7ba4e6?q=80&amp;w=1400&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Popular Profiles" class="img-fluid mb-3 rounded highlight-img">
        <h5>Popular Profiles</h5>
        <p>Follow the most influential users and brands.</p>
      </div>
      <div class="col-md-4 aos-init" data-aos="zoom-in" data-aos-delay="300">
        <img src="https://plus.unsplash.com/premium_photo-1677252438426-595a3a9d5e11?q=80&amp;w=1480&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="User-Generated Content" class="img-fluid mb-3 rounded highlight-img">
        <h5>User-Generated Content</h5>
        <p>Discover amazing content created by our users.</p>
      </div>
    </div>
  </section>

  <!-- Getting Started Section -->
  <section id="getting-started" class="container-fluid py-5 text-light">
    <h2 class="text-center mb-5 aos-init" data-aos="fade-up">Getting Started is Easy</h2>
    <div class="row text-center">
      <div class="col-md-4 aos-init" data-aos="fade-up" data-aos-delay="100">
        <i class="fas fa-user-plus fa-3x text-primary mb-3 icon"></i>
        <h5>1. Sign Up</h5>
        <p>Create your free account in just a few clicks.</p>
      </div>
      <div class="col-md-4 aos-init" data-aos="fade-up" data-aos-delay="200">
        <i class="fas fa-sliders-h fa-3x text-primary mb-3 icon"></i>
        <h5>2. Customize</h5>
        <p>Personalize your profile to fit your style.</p>
      </div>
      <div class="col-md-4 aos-init" data-aos="fade-up" data-aos-delay="300">
        <i class="fas fa-users fa-3x text-primary mb-3 icon"></i>
        <h5>3. Connect</h5>
        <p>Start connecting with friends and communities.</p>
      </div>
    </div>
  </section>


  <!-- FAQs Sectio -->
  <section id="faqs" class="bg-info text-light container-fluid py-5 px-5">
  <h2 class="text-center mb-5 aos-init" data-aos="fade-down">Frequently Asked Questions</h2>
    <div class="accordion" id="faqAccordion">
      <div class="card bg-light text-dark aos-init" data-aos="fade-up" data-aos-delay="100">
        <div class="card-header" id="faqOne">
          <h5 class="mb-0">
            <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
              What is Socialsphere 2.0?
            </button>
          </h5>
        </div>
        <div id="collapseOne" class="collapse" aria-labelledby="faqOne" data-parent="#faqAccordion">
          <div class="card-body">
            Socialsphere 2.0 is a revolutionary social media platform focused on user privacy, innovation, and a high-quality user experience.
          </div>
        </div>
      </div>
      <div class="card bg-light text-dark aos-init" data-aos="fade-up" data-aos-delay="200">
        <div class="card-header" id="faqTwo">
          <h5 class="mb-0">
            <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
              Can I delete my account?
            </button>
          </h5>
        </div>
        <div id="collapseTwo" class="collapse" aria-labelledby="faqTwo" data-parent="#faqAccordion">
          <div class="card-body">
            Yes, Socialsphere allows you to delete your account whenever you’re ready.
          </div>
        </div>
      </div>
      <div class="card bg-light text-dark aos-init" data-aos="fade-up" data-aos-delay="300">
        <div class="card-header" id="faqThree">
          <h5 class="mb-0">
            <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
              Are there any subscription fees?
            </button>
          </h5>
        </div>
        <div id="collapseThree" class="collapse" aria-labelledby="faqThree" data-parent="#faqAccordion">
          <div class="card-body">
            No, Socialsphere 2.0 is free to use, with no hidden fees or subscription costs.
          </div>
        </div>
      </div>
      <div class="card bg-light text-dark aos-init" data-aos="fade-up" data-aos-delay="400">
        <div class="card-header" id="faqFour">
          <h5 class="mb-0">
            <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
              How is my data protected?
            </button>
          </h5>
        </div>
        <div id="collapseFour" class="collapse" aria-labelledby="faqFour" data-parent="#faqAccordion">
          <div class="card-body">
            Socialsphere uses advanced encryption and privacy controls to protect your data. Additionally, we adhere to strict data protection laws.
          </div>
        </div>
      </div>
      <div class="card bg-light text-dark aos-init" data-aos="fade-up" data-aos-delay="200">
        <div class="card-header" id="faqFive">
          <h5 class="mb-0">
            <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
              Is there a mobile app available?
            </button>
          </h5>
        </div>
        <div id="collapseFive" class="collapse" aria-labelledby="faqFive" data-parent="#faqAccordion">
          <div class="card-body">
            Yes, Socialsphere 2.0 is available on both iOS and Android devices.
          </div>
        </div>
      </div>
      <div class="card bg-light text-dark aos-init" data-aos="fade-up" data-aos-delay="300">
        <div class="card-header" id="faqSix">
          <h5 class="mb-0">
            <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
              How can I secure my account?
            </button>
          </h5>
        </div>
        <div id="collapseSix" class="collapse" aria-labelledby="faqSix" data-parent="#faqAccordion">
          <div class="card-body">
            You can secure your account by using a strong, unique password.
          </div>
        </div>
      </div>
      <div class="card bg-light text-dark aos-init" data-aos="fade-up" data-aos-delay="400">
        <div class="card-header" id="faqSeven">
          <h5 class="mb-0">
            <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseSeven" aria-expanded="false" aria-controls="collapseSeven">
              What privacy features are available?
            </button>
          </h5>
        </div>
        <div id="collapseSeven" class="collapse" aria-labelledby="faqSeven" data-parent="#faqAccordion">
          <div class="card-body">
            Socialsphere 2.0 offers enhanced privacy settings, allowing you to control who sees your content and enabling encryption for private messages.
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Testimonials Section -->
  <section id="testimonials" class="container py-5 text-center">
    <h2 class="text-white aos-init" data-aos="zoom-in">What Our Users Say</h2>
    <div class="row mt-4">
      <div class="col-md-6 aos-init" data-aos="flip-left" data-aos-delay="100">
        <blockquote class="blockquote">
          <p class="mb-3">"Socialsphere 2.0 has transformed the way I connect with my friends and family."</p>
          <footer class="blockquote-footer text-light">Alex J.</footer>
        </blockquote>
      </div>
      <div class="col-md-6 aos-init" data-aos="flip-right" data-aos-delay="200">
        <blockquote class="blockquote">
          <p class="mb-3">"The new features are amazing and make it easy to stay updated."</p>
          <footer class="blockquote-footer text-light">Casey M.</footer>
        </blockquote>
      </div>
    </div>
  </section>

  <!-- Call to Action Section -->
  <section id="signup" class="cta text-center py-5 bg-primary aos-init" data-aos="zoom-in">
    <h2 class="text-white">Ready to Connect Smarter?</h2>
    <a href="#" class="btn btn-light btn-lg mt-3">Get Started</a>
  </section>

  <!-- Footer Section -->
  <footer class="footer text-light mt-5 position-relative">
    <div id="footer-3d"></div>
    <div class="container">
      <div class="row">

        <div class="col-md-6 d-flex justify-content-center justify-content-md-start align-items-center mb-3 mb-md-0">
          <a href="https://socialsphere.getenjoyment.net/dashboard/">
            <img src="https://socialsphere.getenjoyment.net/applogo.png" style="max-width: 200px;" alt="Socialsphere Logo">
          </a>
        </div>

        <!-- Links, Buttons, and Socials Column -->
        <div class="col-md-6 text-center text-md-left">
          <div class="mb-3">
            <a href="https://socialsphere.getenjoyment.net/login/" class="btn btn-outline-light mr-2">Sign In</a>
            <a href="https://socialsphere.getenjoyment.net/signup/" class="btn btn-light">Sign Up</a>
          </div>
          
          <!-- Privacy Policy, Terms, and Social Links -->
          <div class="footer-links mb-3">
            <a href="./pp/" class="text-light mx-2">Privacy Policy</a>
            <a href="./tos/" class="text-light mx-2">Terms of Service</a>
            <a href="#facebook" class="text-light mx-2"><i class="fab fa-facebook-f"></i></a>
            <a href="#twitter" class="text-light mx-2"><i class="fab fa-twitter"></i></a>
            <a href="#instagram" class="text-light mx-2"><i class="fab fa-instagram"></i></a>
          </div>

          <!-- Copyright -->
          <div class="text-muted mt-2">
            © 2024 Socialsphere. All Rights Reserved.
          </div>
        </div>
      </div>
    </div>
  </footer>

  <!-- Bootstrap and AOS JS, and Smooth Scroll -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/smooth-scroll/16.1.3/smooth-scroll.polyfills.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>

  <!-- Initialize Smooth Scroll and AOS -->
  <script>
    
    // Smooth Scroll for Anchor Links
    const scroll = new SmoothScroll('a[href*="#"]', {
      speed: 800,
      offset: 60, // Offset for the fixed header height
    });

    // Initialize AOS
    AOS.init({
      duration: 1000,
      once: false,
    });

    // 3D Scene for Hero Section
    const heroScene = new THREE.Scene();
    heroScene.background = new THREE.Color(0x000000);

    const heroCamera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const heroRenderer = new THREE.WebGLRenderer({ alpha: true });
    heroRenderer.setSize(window.innerWidth, window.innerHeight);
    heroRenderer.setClearColor(0x000000, 1);
    document.getElementById("3d-background").appendChild(heroRenderer.domElement);
    const torusGeometry = new THREE.TorusKnotGeometry(10, 3, 100, 16);
    const torusMaterial = new THREE.MeshStandardMaterial({ color: 0x0077ff, emissive: 0x004488, wireframe: true });
    const torus = new THREE.Mesh(torusGeometry, torusMaterial);
    heroScene.add(torus);
    heroCamera.position.z = 30;
    const ambientLight = new THREE.AmbientLight(0x555555);
    heroScene.add(ambientLight);
    function animateHero() {
      requestAnimationFrame(animateHero);
      torus.rotation.x += 0.01;
      torus.rotation.y += 0.01;
      heroRenderer.render(heroScene, heroCamera);
    }
    animateHero();

    // // 3D Background for Footer Section
    // const footerScene = new THREE.Scene();
    // const footerCamera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    // const footerRenderer = new THREE.WebGLRenderer({ alpha: true });
    // footerRenderer.setSize(window.innerWidth, window.innerHeight);
    // document.getElementById("footer-3d").appendChild(footerRenderer.domElement);
    // const starGeometry = new THREE.BufferGeometry();
    // const starMaterial = new THREE.PointsMaterial({ color: 0xffffff });
    // for (let i = 0; i < 1000; i++) {
    //   const star = new THREE.Vector3(
    //     Math.random() * 600 - 300,
    //     Math.random() * 600 - 300,
    //     Math.random() * 600 - 300
    //   );
    //   starGeometry.vertices.push(star);
    // }
    // const starField = new THREE.Points(starGeometry, starMaterial);
    // footerScene.add(starField);
    // footerCamera.position.z = 300;
    // function animateFooter() {
    //   requestAnimationFrame(animateFooter);
    //   starField.rotation.y += 0.001;
    //   footerRenderer.render(footerScene, footerCamera);
    // }
    // animateFooter();

    // Adjust canvas size on window resize
    window.addEventListener('resize', () => {
      heroRenderer.setSize(window.innerWidth, window.innerHeight);
      heroCamera.aspect = window.innerWidth / window.innerHeight;
      heroCamera.updateProjectionMatrix();
    });

    // Header shrink and hide links on scroll
    window.addEventListener("scroll", function() {
      const header = document.querySelector(".header");
      const navbarNav = document.getElementById("navbarNav");
      if (window.scrollY > 50) {
        header.classList.add("shrink");
        navbarNav.classList.remove("show"); // Collapse menu on scroll
      } else {
        header.classList.remove("shrink");
      }
    });
  </script>

</body></html>