Submission for Team Krishna

krishna/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

krishna/.gitignore

@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

krishna/README.md

@@ -0,0 +1,94 @@
+# AntarikXplorer: <br/> <i>Venture Beyond The Stars</i>
+
+<div align="center">
+  <img src="https://github.com/user-attachments/assets/cf1cba18-4dff-46b8-a3b1-ebee44bd391a" alt="AntarikXplorer">
+</div>
+
+## [📝 Click to view Medium Blog](https://medium.com/@daspriyosmita2003/antarikxplorer-6dfa7ad0ff4b)
+
+(pronounced: “Antariksh Explorer”, where “Antariksh” is the sanskrit term for cosmos)<br/>
+
+## 🚀 Idea Brief
+Imagine being able to step foot on distant exoplanets, pilot spacecraft through star systems, and explore the wonders of our universe — all from the comfort of your own home. Welcome to AntarikXplorer, where the final frontier is no longer out of reach!🪐<br/>
+AntarikXplorer is a cutting-edge VR and Gyro simulation that turns this dream into reality, blending the thrill of space exploration with the power of immersive technology.
+<br/>
+With scientifically accurate environments powered by NASA’s real-time exoplanetary data and built in Unreal Engine 5 and Blender, we’re pushing the boundaries of what’s possible in education. Whether you’re using a VR headset or just your phone in gyro mode, AntarikXplorer offers an unforgettable journey into the cosmos — complete with quizzes, rewards, and a multi-user mode coming soon. Buckle up, because space is about to get a lot closer!
+
+## 🔥 AntarikXplore’s Celestial Singularity
+- <b>Extrasolar Exploration:</b> Immerse yourself in the exploration of distant exoplanets with scientifically accurate environments sourced from NASA data.
+- <b>Spacecraft Navigation:</b> Pilot spacecraft through deep space, experiencing realistic navigation and piloting challenges.
+- <b>Exoplanetary Environment Simulation:</b> Explore and interact with diverse exoplanetary landscapes, all based on real NASA data.
+- <b>Gyro Mode for Non-VR Users:</b> A gyro-based mode for those without VR equipment, ensuring accessibility without compromising the immersive experience.
+- <b>Extrasolar Insights:</b> Access real-time data and detailed information on exoplanets, directly pulled from NASA’s data API.
+- <b>Quizzes & Rewards:</b> Engage in educational quizzes where scores can be converted into redeemable rewards, creating an interactive learning experience.
+
+## 🛠 System Architecture
+<div align="center">
+  <img src="https://github.com/user-attachments/assets/37fb95d4-3d8a-42d4-af46-0cbe22b6f23d" alt="AntarikXplorer System Architecture">
+</div>
+
+## 🌟 AntarikXplore’s Uniqueness
+- <b>Immersive Experience with Universal Access:</b> Combining immersive VR with gyro controls for ensuring broader accessibility without losing depth, a feature rare in similar tools.
+- <b>Real-Time NASA Data:</b> Explore exoplanets using real-time, up-to-date NASA data for an authentic exoplanet exploration experience.
+- <b>Collaborative & Competetive Challenges:</b> While other such platforms focus on solo experiences, AntarikXplorer comes with multi-user support, promoting social learning and collaboration. A unique exoplanet colonization feature allows users to face real-world challenges in collaborative or competitive gameplay.
+- <b>Gamified Learning with Quizzes & Rewards:</b> Interactive quizzes and rewards make learning fun and competitive. Experience personalized learning paths with dynamic quizzes and redeemable in-game and real-life rewards that make science fun and motivating.
+- <b>Immersive Discovery:</b>Transforms complex exoplanet science into a thrilling adventure using immersive experiences, making learning feel like an exploration of the unknown.
+- <b>Personalized Learning:</b> Adaptive quizzes adjust to your knowledge and interests for a tailored learning experience.
+
+## 🌠 Process Flow Diagram
+- Users can experience and explore simulations of Exoplanetary Environments and Spacecraft Piloting and Navigation, built using Unreal Engine 5 and Blender, with full support for STEAM VR API integration.
+- Gain access to Extrasolar Insights, a user-friendly feature that retrieves real-time data from NASA’s API, offering detailed information on exoplanets.
+- Participate in Scored Quizzes, with quiz results securely stored in a database for tracking performance.
+- Quiz scores can be converted into Rewards, which users can Redeem. All reward data will be stored in a database for easy management and retrieval.
+<div align="center">
+  <img src="https://github.com/user-attachments/assets/3e8f6af9-4c37-4ce9-bd3e-6da66034fe3b" alt="AntarikXplorer Process Flow Diagram">
+</div>
+
+
+## ⚙️ Tech Stack
+- Frontend:<br/> <img src="https://www.datocms-assets.com/98835/1684410508-image-7.png" alt="nextjs" width="30" height="30"/> <img src="https://www.vectorlogo.zone/logos/tailwindcss/tailwindcss-icon.svg" alt="tailwind" width="30" height="30"/> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original-wordmark.svg" alt="html5" width="30" height="30"/> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original-wordmark.svg" alt="css3" width="30" height="30"/> <img src="https://cdn.worldvectorlogo.com/logos/javascript-1.svg" alt="javascript" width="30" height="30"/> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/react/react-original-wordmark.svg" alt="react" width="30" height="30"/> 
+- Backend:<br/> <img src="https://github.com/user-attachments/assets/6dfc1b6d-ca9c-4492-969d-0a8343aceb7d" alt="flask" width="70" height="50"/> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/nodejs/nodejs-original-wordmark.svg" alt="nodejs" width="50" height="50"/> <img src="https://user-images.githubusercontent.com/8939680/57233884-20344080-6fe5-11e9-8df3-0df1282e1574.png" alt="axios" width="80" height="32" />
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Socket-io.svg/1024px-Socket-io.svg.png" alt="socket.io" width="30" height="30"/> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/express/express-original-wordmark.svg" alt="express" width="70" height="70"/>
+- Database: <br/> <img src="https://cdn.worldvectorlogo.com/logos/mongodb-icon-1.svg" alt="mongodb" width="40" height="40"/> <img src="https://media.licdn.com/dms/image/D4D12AQEk8opKsyHhRQ/article-cover_image-shrink_720_1280/0/1693917399837?e=2147483647&v=beta&t=6LPN-E9p8k_59NMv17edpwj8ofRzcXd_vlmlFoc1fLw" alt="mongoose" width="50" height="50"/><img src="https://www.svgrepo.com/show/353566/cloudinary.svg" alt="cloudinary" width="30" height="30"/>
+- Cloud Compuuting and Storage:<br/> <img src="https://user-images.githubusercontent.com/2277182/75613896-f24f5800-5b32-11ea-966e-4ed4b41f873a.png" alt="s3" width="30" height="30" /> <img src="https://cdn.worldvectorlogo.com/logos/aws-lambda-1.svg" alt="s3" width="30" height="30" /> 
+- AI and Procedural Generation:<br/> <img src="https://hackr.io/tutorials/learn-tensorflow/og_image" alt="tensorflow" width="30" height="30"/> <img src="https://github.com/user-attachments/assets/8d38bc2f-3843-4aba-828c-2642c28645a9" alt="google colab" width="40" height="40"/> <img src="https://github.com/user-attachments/assets/6836b091-3beb-4e1c-b4c2-76944cb07d8f" alt="scikit-learn" width="40" height="40"/> 
+- Authentication: <br/> <img src="https://seeklogo.com/images/S/supabase-logo-DCC676FFE2-seeklogo.com.png" alt="clerk" width="30" height="30"/>
+- Deployment: <br/> <img src="https://download.logo.wine/logo/Amazon_Web_Services/Amazon_Web_Services-Logo.wine.png" alt="vercel" width="40" height="30"/> <img src="https://cdn.freebiesupply.com/images/large/2x/steam-logo-transparent.png" alt="vercel" width="30" height="30"/> <img src="https://cdn4.iconfinder.com/data/icons/logos-and-brands/512/97_Docker_logo_logos-512.png" alt="vercel" width="40" height="40"/>
+
+## 💸 Business Model
+- <b>Collaborations and Partnerships:</b> Partner with science and tech exhibitions, planetariums, and space-related events to feature AntarikXplorer as an interactive exhibit. Offer immersive booths with upsells to premium content and exclusive event challenges.
+- <b>Educational Licensing:</b> License AntarikXplorer to schools, universities, and STEM programs, providing custom space exploration modules and quizzes, generating revenue through educational partnerships.
+- <b>Premium Features and Gamification & Rewards:</b> Unlock exclusive content with premium access, featuring advanced spacecraft, personalized AI guides, and rare data. Buy custom items, earn quiz points to redeem for in-game upgrades or real-world rewards, and compete in community challenges to boost engagement.
+
+## 🛸 Mock Diagrams
+<div align="center">
+  <figure>
+    <img src="https://github.com/user-attachments/assets/c307130f-13d7-4dbe-9821-31495e1f4842" alt="AIkya ss">
+    <figcaption>(1) Landing Page</figcaption>
+  </figure>
+</div><br/>
+<div align="center">
+  <figure>
+    <img src="https://github.com/user-attachments/assets/7b33235d-ef02-4bd9-8c2d-f810f28653da">
+    <figcaption>(2) Simulations Page</figcaption>
+  </figure>
+</div><br/>
+<div align="center">
+  <figure>
+    <img src="https://github.com/user-attachments/assets/d78f1384-09cb-431d-a7d0-b25c2f246868">
+    <figcaption>(3) VR Simulation Page</figcaption>
+  </figure>
+</div><br/>
+<div align="center">
+  <figure>
+    <img src="https://github.com/user-attachments/assets/f39367e4-2316-41c0-a7e7-f0b6a8e7af27" alt="AIkya smart match">
+    <figcaption>(4) Quizzes Page</figcaption>
+  </figure>
+</div>
+
+## 💫 In a nutshell...
+As AntarikXplorer takes you from one exoplanet to another, this isn’t just a journey through space — it’s a glimpse into the future of exploration and education. By blending cutting-edge VR with real-time data from the farthest reaches of our galaxy, we’ve transformed learning into an adventure where curiosity knows no bounds. Whether you’re a seasoned space enthusiast or a curious mind, AntarikXplorer gives you the chance to pilot your way through the universe and dive into worlds that were once unimaginable.
+<br/>
+But we’re only scratching the surface. With multi-user interactions on the horizon, collaborative learning, and deeper insights into exoplanets, the future of AntarikXplorer is as vast and mysterious as the cosmos itself. This is more than just a simulation — it’s your ticket to the stars.
+<br/><br/>
+<h2>👩‍🚀<b><i>Buckle up, because the universe is waiting, and we’re just getting started!</b></i></h2>

krishna/app/components/blog/BlogCard.jsx

@@ -0,0 +1,50 @@
+import Link from "next/link";
+import Image from "next/image";
+import "@/app/components/global/global_components.css";
+
+const BlogCard = ({ image, title, MetaDescription, slug }) => {
+  return (
+    <div className="max-w-sm bg-gray-800 bg-opacity-40 rounded-lg shadow">
+      <Link href={`/insights/${slug}`}>
+        <Image
+          className="rounded-t-lg w-full h-40 object-cover"
+          src={image}
+          alt={title}
+          width={600}
+          height={400}
+        />
+      </Link>
+      <div className="p-5">
+        <Link href={`/insights/${slug}`}>
+          <h5 className="mb-2 text-2xl font-bold tracking-tight text-white">
+            {title}
+          </h5>
+        </Link>
+        <p className="mb-3 font-normal text-gray-200">{MetaDescription}</p>
+        <Link
+          href={`/insights/${slug}`}
+          className="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white rounded-full button_gradient"
+        >
+          Read more
+          <svg
+            className="rtl:rotate-180 w-3.5 h-3.5 ms-2"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 14 10"
+          >
+            <path
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="M1 5h12m0 0L9 1m4 4L9 9"
+            />
+          </svg>
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default BlogCard;

krishna/app/components/blog/blogs.css

@@ -0,0 +1,12 @@
+.scrollbar-thin::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  .scrollbar-thin::-webkit-scrollbar-thumb {
+    background-color: #8b5cf6; /* Thumb color (violet-500) */
+    border-radius: 9999px; /* Fully rounded thumb */
+  }
+  .scrollbar-thin::-webkit-scrollbar-track {
+    background-color: #d1d5db; /* Track color (gray-300) */
+    border-radius: 9999px; /* Fully rounded track */
+  }

krishna/app/components/global/button_gradient.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import "./global_components.css";
+
+const Button = ({ children, onClick, className, ...props }) => {
+  return (
+    <button
+      className={`button_gradient text-white text-lg py-2 px-6 rounded-full ${className}`}
+      onClick={onClick}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default Button;

krishna/app/components/global/footer.jsx

@@ -0,0 +1,60 @@
+import Image from "next/image";
+import "./global_components.css";
+
+const Footer = () => {
+  return (
+    <footer className="relative z-10 footer_gradient shadow">
+      <div className=" w-full max-w-screen-xl mx-auto p-2 md:py-8">
+        <div className="sm:flex sm:items-center sm:justify-between">
+          <a
+            href="/"
+            className="flex items-center -space-x-8 mb-4 sm:mb-0 rtl:space-x-reverse"
+          >
+            <Image
+              src="/global-assets/logo.png"
+              className="h-10 object-contain"
+              alt="AntarikXplorer"
+              width={200}
+              height={100}
+            />
+            <span className="text-xl whitespace-nowrap dark:text-white">
+              AntarikXplorer
+            </span>
+          </a>
+          <ul className="flex flex-wrap items-center mb-6 text-sm font-medium text-gray-500 sm:mb-0 dark:text-gray-400">
+            <li>
+              <a href="#" className="hover:text-gray-700 me-4 md:me-6">
+                About
+              </a>
+            </li>
+            <li>
+              <a href="#" className="hover:text-gray-700 me-4 md:me-6">
+                Privacy Policy
+              </a>
+            </li>
+            <li>
+              <a href="#" className="hover:text-gray-700 me-4 md:me-6">
+                Licensing
+              </a>
+            </li>
+            <li>
+              <a href="#" className="hover:text-gray-700">
+                Contact
+              </a>
+            </li>
+          </ul>
+        </div>
+        {/* <hr className="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" /> */}
+        <span className="block text-sm text-gray-500 sm:text-center dark:text-gray-400">
+          © 2024{" "}
+          <a href="/" className="hover:underline">
+            AntarikXplorer
+          </a>
+          . All Rights Reserved.
+        </span>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

krishna/app/components/global/global_components.css

@@ -0,0 +1,14 @@
+.button_gradient {
+    background: linear-gradient(63deg, rgba(126, 90, 203, 1) 0%, rgba(63, 45, 101, 1) 100%);
+    transition: transform 0.3s ease, background 0.5s ease;  /* Smooth scaling and background transition */
+  }
+
+  .button_gradient:hover {
+    transform: scale(1.05);  
+    background: linear-gradient(-63deg, rgba(63, 45, 101, 1) 0%, rgba(126, 90, 203, 1) 100%);
+  }
+  .footer_gradient {
+    background: rgb(45,48,101);
+background: radial-gradient(circle, rgba(45,48,101,1) 12%, rgba(23,6,60,1) 100%);
+  }
+

krishna/app/components/global/header.jsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import "../landing/landing.css";
+import Link from "next/link";
+
+const Header = ({ logo, name, catchPhrase, options, accountIcon }) => {
+  const [isVisible, setIsVisible] = useState(true);
+
+  useEffect(() => {
+    let lastScrollY = 0;
+
+    const handleScroll = () => {
+      if (window.scrollY > lastScrollY) {
+        setIsVisible(false);
+      } else {
+        setIsVisible(true);
+      }
+      lastScrollY = window.scrollY;
+    };
+
+    window.addEventListener("scroll", handleScroll);
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
+  return (
+    <header
+      className={`fixed w-full top-0 left-0 transition-transform duration-500 ease-in-out ${
+        isVisible ? "translate-y-0" : "-translate-y-full"
+      } bg-transparent z-50`}
+    >
+      <div className="flex justify-between items-center p-4 mt-4">
+        {/* Logo and text on the left */}
+        <div className="flex items-center -space-x-8">
+          {/* Logo */}
+          <div className="logo object-contain">{logo}</div>
+
+          {/* Name and catchphrase */}
+          <div className="flex flex-col">
+            <span className="text-white text-md viga-regular tracking-widest font-thin opacity-85">
+              {name}
+            </span>
+            <span className="text-white text-xs viga-regular tracking-wider opacity-75">
+              {catchPhrase}
+            </span>
+          </div>
+        </div>
+
+        {/* Options in the center */}
+        <nav className="flex justify-center flex-grow space-x-8">
+          {options &&
+            options.map((option, index) => (
+              <Link
+                key={index}
+                href={option.link}
+                className="text-white text-md hover:text-indigo-300 transition-colors duration-300 opacity-90"
+              >
+                {option.label}
+              </Link>
+            ))}
+        </nav>
+
+        {/* Account Icon on the right */}
+        <Link href="/login" className="account-icon">
+          {accountIcon}
+        </Link>
+      </div>
+    </header>
+  );
+};
+
+export default Header;