https://socialsphere.getenjoyment.net/

ID de l'analyse :: fbe3fd36-8dea-46bb-8341-0d42c3f585d2Terminée
URL soumise :: https://socialsphere.getenjoyment.net/
Fin du rapport :: 29 nov. 2024, 14:20:19
Liens : 0 trouvé(s)

Liens sortants identifiés à partir de la page
Variables JavaScript : 24 trouvée(s)

Les variables JavaScript globales chargées dans l'objet fenêtre d'une page sont des variables déclarées en dehors des fonctions et accessibles depuis n'importe quel endroit du code au sein du champ d'application actuel
Nom	Type
onbeforetoggle	object
documentPictureInPicture	object
onscrollend	object
gtag	function
dataLayer	object
THREE	object
__THREE__	string
gapi	object
___jsl	object
default_gsi	object
Messages de journal de console : 1 trouvé(s)

Messages consignés dans la console web
Type	Catégorie	Enregistrement
error	other	URL https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js texte THREE.WebGLRenderer: Error creating WebGL context.
HTML

Le corps HTML de la page en données brutes
<!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>