WELCOME TO THE GRAPH-TRAVERSAL
-Register and Login to Explore the graph traversal
-
-
+
+
+
+ GraphExplorer Pro
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
\ No newline at end of file
diff --git a/src/app/components/header/style.css b/src/app/components/header/style.css
new file mode 100644
index 0000000..737f336
--- /dev/null
+++ b/src/app/components/header/style.css
@@ -0,0 +1,335 @@
+/* Global Styles */
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: "Inter", sans-serif;
+ background-color: #f0f2f5;
+ color: #333;
+ line-height: 1.6;
+ overflow-x: hidden;
+}
+
+.container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 2rem;
+}
+
+/* Header Styling */
+header {
+ background-color: rgba(0, 0, 0, 0.8);
+ backdrop-filter: blur(10px);
+ position: fixed;
+ width: 100%;
+ z-index: 1000;
+ transition: all 0.3s ease;
+}
+
+nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem 0;
+}
+
+.logo {
+ font-size: 1.5rem;
+ font-weight: 700;
+ color: #ffffff;
+}
+
+.nav-links {
+ display: flex;
+ gap: 2rem;
+}
+
+.nav-links a {
+ color: #ffffff;
+ text-decoration: none;
+ font-weight: 500;
+ transition: color 0.3s ease;
+}
+
+.nav-links a:hover {
+ color: #6c63ff;
+}
+
+/* Hero Section Styling */
+.hero {
+ background: linear-gradient(135deg, #6c63ff 0%, #ff6584 100%);
+ color: #fff;
+ min-height: 100vh;
+ display: flex;
+ align-items: center;
+ position: relative;
+ overflow: hidden;
+ padding: 2rem 5%;
+ text-align: center;
+}
+
+.hero-content {
+ max-width: 600px;
+ z-index: 1;
+}
+
+.hero h1 {
+ font-size: 3.5rem;
+ margin-bottom: 1rem;
+ line-height: 1.2;
+ color: #fff;
+}
+
+.hero p {
+ font-size: 1.2rem;
+ margin-bottom: 2rem;
+ color: #fff;
+}
+
+.cta-button {
+ display: inline-block;
+ background-color: #fff;
+ color: #6c63ff;
+ padding: 0.8rem 2rem;
+ border-radius: 30px;
+ text-decoration: none;
+ font-weight: 600;
+ transition: all 0.3s ease;
+}
+
+.cta-button:hover {
+ transform: translateY(-3px);
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+}
+
+/* Graph Visual Styling */
+.graph-visual {
+ position: absolute;
+ right: 5%;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 40%;
+ height: 60%;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.node {
+ width: 60px;
+ height: 60px;
+ border-radius: 50%;
+ background-color: rgba(255, 255, 255, 0.2);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-weight: bold;
+ position: absolute;
+ transition: all 0.5s ease;
+ color: #fff;
+}
+
+.edge {
+ position: absolute;
+ background-color: rgba(255, 255, 255, 0.2);
+ height: 2px;
+ transform-origin: left center;
+}
+
+/* Features Section Styling */
+.features {
+ padding: 5rem 0;
+}
+
+.feature-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+}
+
+.feature-card {
+ background: white;
+ border-radius: 15px;
+ padding: 2rem;
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+ transition: all 0.3s ease;
+}
+
+.feature-card:hover {
+ transform: translateY(-10px);
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+}
+
+.feature-icon {
+ font-size: 2.5rem;
+ margin-bottom: 1rem;
+ color: #6c63ff;
+}
+
+/* Graph Types Section Styling */
+.graph-types {
+ background-color: #1a202c;
+ color: #fff;
+ padding: 5rem 0;
+}
+
+.graph-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 2rem;
+ margin-top: 3rem;
+}
+
+.graph-item {
+ background: rgba(255, 255, 255, 0.1);
+ border-radius: 10px;
+ padding: 1.5rem;
+ text-align: center;
+ transition: all 0.3s ease;
+}
+
+.graph-item:hover {
+ background: rgba(255, 255, 255, 0.2);
+ transform: scale(1.05);
+}
+
+.graph-icon {
+ font-size: 3rem;
+ margin-bottom: 1rem;
+}
+
+/* Algorithms Section Styling */
+.algorithms {
+ padding: 5rem 0;
+}
+
+.algorithm-tabs {
+ display: flex;
+ justify-content: center;
+ margin-bottom: 2rem;
+}
+
+.tab-button {
+ background: none;
+ border: none;
+ padding: 0.5rem 1rem;
+ margin: 0 0.5rem;
+ font-size: 1rem;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ border-bottom: 2px solid transparent;
+ color: #333;
+}
+
+.tab-button.active {
+ border-bottom: 2px solid #6c63ff;
+ color: #6c63ff;
+}
+
+.tab-content {
+ background: white;
+ border-radius: 15px;
+ padding: 2rem;
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+}
+
+/* Visualizer Section Styling */
+.visualizer {
+ background-color: #1a202c;
+ color: #fff;
+ padding: 5rem 0;
+ text-align: center;
+}
+
+.graph-container {
+ width: 100%;
+ max-width: 800px;
+ height: 500px;
+ margin: 2rem auto 0;
+ background-color: rgba(255, 255, 255, 0.1);
+ border-radius: 15px;
+ position: relative;
+ overflow: hidden;
+}
+
+.graph-node {
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ background-color: #6c63ff;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: absolute;
+ font-weight: bold;
+ color: #fff;
+}
+
+.graph-edge {
+ position: absolute;
+ background-color: #ff6584;
+ height: 2px;
+ transform-origin: left center;
+}
+
+/* Footer Styling */
+.footer {
+ background: #333;
+ color: #fff;
+ padding: 2rem 0;
+ text-align: center;
+}
+
+.footer-content {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-wrap: wrap;
+}
+
+.footer-content p {
+ margin-bottom: 1rem;
+}
+
+.social-links a {
+ color: #fff;
+ text-decoration: none;
+ margin: 0 1rem;
+ transition: color 0.3s ease;
+}
+
+.social-links a:hover {
+ color: #6c63ff;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+ header {
+ padding: 1rem;
+ }
+
+ .logo {
+ font-size: 1.2rem;
+ }
+
+ .nav-links {
+ gap: 1rem;
+ }
+
+ .hero h1 {
+ font-size: 2.5rem;
+ }
+
+ .hero p {
+ font-size: 1rem;
+ }
+
+ .cta-button {
+ font-size: 0.9rem;
+ padding: 0.6rem 1.2rem;
+ }
+}
+
+
+
+ Unlock the Power of Graph Algorithms
+Dive into the fascinating world of graph theory and master advanced traversal techniques with GraphExplorer + Pro.
+ Start Exploring +
+
+ A
+ B
+ C
+ D
+
+
+
+
+
+ Why Choose GraphExplorer Pro?
+
+
+
+
+ 📊
+ Interactive Visualizations
+Experience graph algorithms in action with our cutting-edge visualization tools.
+
+
+ 🧠
+ In-Depth Learning
+Gain a deep understanding of graph theory and its practical applications.
+
+
+ 🚀
+ Performance Optimization
+Learn how to implement and optimize graph algorithms for real-world scenarios.
+
+
+ 🌐
+ Real-World Applications
+Discover how graph algorithms power social networks, GPS systems, and more.
+
+
+ Explore Various Graph Types
+
+
+
+
+ →
+ Directed Graphs
+
+
+ ⇔
+ Undirected Graphs
+
+
+ ⚖️
+ Weighted Graphs
+
+
+ 🌳
+ Trees
+
+
+ ⇉
+ Directed Acyclic Graphs
+
+
+ Master Key Graph Algorithms
+
+
+
+
+
+
+
+
+
+ Depth-First Search (DFS)
+DFS is a graph traversal algorithm that explores as far as possible along each branch before backtracking. + It's excellent for:
+-
+
- Detecting cycles in graphs +
- Pathfinding in mazes +
- Topological sorting +
+
+ Interactive Graph Visualizer
+See graph algorithms in action! Experiment with different graph structures and watch as the algorithms traverse + them step by step.
+
+
+ 1
+ 2
+ 3
+ 4
+
+
+
+
+
+