Index: develop.php
===================================================================
--- develop.php
+++ develop.php
@@ -5,12 +5,13 @@
 		'title' => "KDE Developers Area",
 		'cssFile' => 'content/develop/portal.css',
 		'section' => 'develop',
-        'description' => 'KDE provides libraries for other KDE projects and third-parties. Learn how to use them here.',
+		'description' => 'KDE provides libraries for other KDE projects and third-parties. Learn how to use them here.',
 	]);
 
 	require('aether/header.php');
 
 ?>
+	
 <style>
 .bottomAlignRow section {
 	position: relative;
@@ -23,104 +24,243 @@
 	left: 15px;
 	right: 15px;
 }
+p{
+	font-size: 17px;
+}
+a{
+	font-size: 17px;
+}
+#contributing, #communication {
+	font-size: 2rem;
+	font-weight: 500;
+}
 </style>
+<div class="container" id="home">
+	<nav class="navbar navbar-expand-lg navbar-light bg-light" >
+		<div class="collapse navbar-collapse" id="navbarSupportedContent">
+			<ul class="navbar-nav mr-auto">
+				<li class="nav-item active">
+					<a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
+				</li>
+				<li class="nav-item">
+					<a class="nav-link" href="#frameworks">Frameworks</a>
+				</li>
+				<li class="nav-item">
+					<a class="nav-link" href="#devtools">Development Tools</a>
+				</li>
+				<li class="nav-item">
+					<a class="nav-link" href="#packaging">Packaging</a>
+				</li>
+				<li class="nav-item">
+					<a class="nav-link" href="#documentation">Documentation</a>
+				</li>
+			</ul>
+		</div>
+	</nav>
+</div>
 <div id="develop-hero" style="padding: 20px; height: auto;">
-
-
-    <div class="container" style="background-color: #333; padding: 40px; text-align: center;">
-        <h1 style="color: #EEE; font-size: 22px; font-weight: bold;">Develop Convergent Apps with Kirigami</h1>
-        <p style="color: #CCC; padding: 10px; max-width: 500px; margin: 0px auto;">Kirigami is a new, convergent, responsive, elegant, and open cross-platform toolkit using QML.</p>
-        <a href="https://www.kde.org/products/kirigami/">Learn more</a>
-    </div>
-
+	<div class="container" style="background-color: #333; padding: 40px; text-align: center;">
+		<h1 style="color: #c6c6c7; font-size: 22px; font-weight: bold;">Develop Convergent Apps with Kirigami</h1>
+		<p style="color: #CCC; padding: 10px; max-width: 500px; margin: 0px auto;">Kirigami is a new, convergent, responsive, elegant, and open cross-platform toolkit using QML.</p>
+		<a href="https://www.kde.org/products/kirigami/">Learn more</a>
+	</div>
 </div>
-
-	<main class="container" id="community-lists">
-		<!-- div class="row">
+<br/>
+<main class="container">
+	<div style="border-bottom: solid 1px #c6c6c7;" id="frameworks">
+		<h2 align="center" style="font-size: 2rem;">KDE Frameworks</h2>
+		<p><a href="https://kde.org/products/frameworks">KDE Frameworks</a> are add-on libraries which developers use for their applications with Qt. KDE Frameworks are cross-platform i.e. they can be used on Linux, Windows, MacOS and Android too.</p>
+		<div class="row bottomAlignRow" >
+			<section class="col-md">
+				<div class="d-block ">
+					<a href="https://community.kde.org/Get_KDE_Software_on_Your_Linux_Distro" >
+						<img  src="media/images/linux.svg" alt="linux.svg"  class="rounded mx-auto my-auto d-block mr-2 icon-dark-invert"/>
+					</a>
+				</div>
+			</section>
+			<section class="col-md">
+				<div class="d-block ">
+					<a href="https://community.kde.org/Guidelines_and_HOWTOs/Build_from_source/Windows" >
+						<img  src="media/images/windows.svg" alt="windows.svg" class="rounded mx-auto my-auto d-block mr-2 icon-dark-invert"/>
+					</a>
+				</div>
+			</section>
 			<section class="col-md">
-				<h3>Developer Archives</h3>
-				
-				<p>There is a large amount of KDE documentation for developers,
-				while migrating the website it may be easier for people familliar with
-				the KDE website to visit our older pages during this transition.</p>
-				
-				<a href="https://www.kde.org/developerplatform/" class="learn-more">View older Developer Portal</a>
-			</section>
-		</div -->
-		
-		<div class="row bottomAlignRow" style="border-bottom: solid 1px #EEE; padding-bottom: 20px;">
+				<div class="d-block ">
+					<a href="https://community.kde.org/Guidelines_and_HOWTOs/Build_from_source/Mac#Installation_using_Craft" >
+						<img  src="media/images/mac.svg" class="rounded mx-auto my-auto d-block mr-2 icon-dark-invert" alt="macos.svg" />
+					</a>
+				</div>
+			</section>
+			<section class="col-md">
+				<div class="d-block ">
+					<a href="https://community.kde.org/Android" >
+						<img  src="media/images/android.svg" alt="android.svg" class="rounded mx-auto my-auto d-block mr-2 icon-dark-invert"/>
+					</a>
+				</div>
+			</section>
+		</div>
+		<div class="row bottomAlignRow"  style="padding-bottom: 15px;">
+			<div class="col-md-6 col-lg-4 text-center">
+				<a href="https://kde.org/products/kirigami/"><h3 align="center">Kirigami</h3></a>
+				<p align="center">A responsive UI framework for QML. </p>
+			</div>
+			<div class="col-md-6 col-lg-4 mb-4 text-center">
+				<a href="https://api.kde.org/frameworks-api/frameworks-apidocs/frameworks/ki18n/html/klocalizedstring_8h.html"><h3 align="center">KI18n</h3></a>
+				<p align="center">Providing Gettext support to applications.</p>
+			</div>
+			<div class="col-md-6 col-lg-4 mb-4 text-center">
+				<a href="https://api.kde.org/frameworks/baloo/html/index.html"><h3 align="center">Baloo</h3></a>
+				<p align="center">A file indexing and searching framework.</p>
+			</div>
+		</div>
+		<div class="row bottomAlignRow"  style="padding-bottom: 15px;">
+			<div class="col-md-6 col-lg-4 mb-4 text-center">
+				<a href="https://api.kde.org/frameworks/kconfig/html/"><h3 align="center">KConfig</h3></a>
+				<p align="center">Providing persistent platform-independent application settings.</p>
+			</div>
+			<div class="col-md-6 col-lg-4 mb-4 text-center">
+				<a href="https://api.kde.org/frameworks/karchive/html/index.html"><h3 align="center">KArchive</h3></a>
+				<p align="center">Classes for reading, creation and manipulation of archive formats</p>
+			</div>
+			<div class="col-md-6 col-lg-4 mb-4 text-center">
+				<a href="https://api.kde.org/frameworks/kconfigwidgets/html/index.html"><h3 align="center">KConfigWidgets</h3></a>
+				<p align="center">Easy-to-use widgets for constructing config dialogs</p>
+			</div>
+		</div>
+		<div class="alert alert-primary" style="padding: 0px; border: 0px;">
+			<p align="center" style="font-size: 35px;">
+				See all <a href="https://api.kde.org/frameworks/index.html" style="font-size: 35px;" >Frameworks</a>
+			 </p>
+		</div>
+	</div>
+	<div  id="community-lists" style="border-bottom: solid 1px #c6c6c7;padding-bottom:8px;">
+		<h2 align="center" id="devtools" style="padding-top: 25px;font-size: 2rem;">KDE Development Tools</h2>
+		<!-- <p>Here are some tools which can help you:</p> -->
+		<br>
+		<div class="row bottomAlignRow" style=" padding-bottom: 0px;">
+			<div class="col-md-6 col-lg-3 mb-4 text-center">
+			<img src="media/images/kate.svg" alt="kate.svg" width="48" height="48"><br />
+				<a href="https://kate-editor.org/about/">
+					<h3 align="center">Kate</h3>
+				</a>
+				<p align="center">KDE Advanced Text Editor</p>
+			</div>
+			<div class="col-md-6 col-lg-3 mb-4 text-center">
+				<img src="media/images/KDevelop.png" alt="KDevelop.png" width="48" height="48">
+				<br />
+				<a href="https://www.kdevelop.org/">
+					<h3 align="center">KDevelop</h3>
+				</a>
+				<p align="center"> A cross-platform IDE by KDE</p>
+			</div>
+			<div class="col-md-6 col-lg-3 mb-4 text-center">
+				<img src="media/images/qc.svg" alt="qc.svg" width="52" height="50">
+				<br />
+				<a href="https://www.qt.io/download">
+					<h3 align="center">Qt Creator</h3>
+				</a>
+				<p align="center"> A cross-platform Qt IDE</p>
+			</div>
+			<div class="col-md-6 col-lg-3 mb-4 text-center">
+				<img src="media/images/kcachegrind.svg" alt="kcachegrind.svg" width="48" height="48">
+				<br />
+				<a href="https://kde.org/applications/development/org.kde.kcachegrind">
+					<h3 align="center">KCachegrind</h3>
+				</a>
+				<p align="center">A profile data visualization tool by KDE</p>
+			</div>
+		</div>
+		<!-- 
+		<div class="alert alert-info" >
+			<p> Pro-Tip : Use KDE's <a href="https://hig.kde.org/" class="alert-link"> KDE Human Interface Guideline</a> for a flexible and consistent user experience. </p>
+		</div>
+		 -->	
+	</div>
+	<div id="packaging">
+		<h2 align="center" style="font-size: 2rem;">Packaging</h2>
+		<p> Done with Development and interested in deploying your app? You can use any of the following ways to do so</p>
+		<div class="row bottomAlignRow" style="border-bottom: solid 1px #c6c6c7; padding-bottom: 20px;">
+			<div class="col-md-6 col-lg-3 mb-4 text-center">
+				<img src="media/images/flatpak.png" alt="flatpak.png" width="48" height="48">
+				<br />
+				<a href="https://community.kde.org/Guidelines_and_HOWTOs/Flatpak">
+					<h3 align="center">Flatpak</h3>
+				</a>
+				<p align="center"> Solutions for creating sandboxed software builds for GNU/Linux systems</p>
+			</div>
+			<div class="col-md-6 col-lg-3 mb-4 text-center">
+				<img src="media/images/snapcraft.png" alt="snapcraft.png" width="48" height="48">
+				<br />
+				<a href="https://snapcraft.io/publisher/kde#">
+					<h3 align="center">Snapcraft</h3>
+				</a>
+				<p align="center"> App packages that are easy to install, secure, cross-platform and dependency-free.</p>
+			</div>
+			<div class="col-md-6 col-lg-3 mb-4 text-center">
+				<img src="media/images/appimage.png" alt="appimage.png" width="48" height="48">
+				<br />
+				<a href="https://appimage.org/">
+					<h3 align="center">Appimage</h3>
+				</a>
+				<p align="center">Format for distributing portable software on Linuxs</p>
+			</div>
+			<div class="col-md-6 col-lg-3 mb-4 text-center">
+				<img src="media/images/linux.svg" alt="linux.svg" width="48" height="48">
+				<br />
+				<a href="https://github.com/appimage-packages">
+					<h3 align="center">Distro Packaging</h3>
+				</a>
+				<p align="center">KDE Software is available with almost every Linux distro and increasingly in cross-distro packages. </p>
+			</div>
+		</div>
+	</div>
+	<div id="community-lists" style="border-bottom: solid 1px #c6c6c7;padding-bottom:8px;">
+		<h2 style="font-size: 2rem;padding-top: 20px;" align="center" id="documentation">Documentation</h2>
+		<div class="row bottomAlignRow">
 			<section class="col-md">
 				<h3>TechBase Wiki</h3>
-				<p>The KDE TechBase is primarily aimed at external developers. 
-				You can find documentation to help to build or extend 
-				your own projects with KDE software.
+				<p>
+					Primarily aimed at external developers. 
+					You can find documentation to help to build or extend 
+					your own projects with KDE software.
 				</p>
 				<a href="https://techbase.kde.org/" class="learn-more button expand">Visit TechBase</a>
 			</section>
-			
 			<section class="col-md">
 				<h3>API Documentation</h3>
 				<p>
 					Documentation for various KDE frameworks and tools for developers,
 					great for both external 3rd-party developers and KDE contributors.
 				</p>
 				<a href="https://api.kde.org/" class="learn-more button expand">Visit API Docs</a>
 			</section>
-			
 			<section class="col-md">
-				<h3>Inqlude Documentation</h3>
+				<h3>Plasma and Theme Development</h3>
 				<p>
-					KDE isn't the only community developing with Qt, Inqlude is
-					an archive containing many Qt-based libraries, not just those
-					by the KDE community.
+					Plasma is made to be flexible; learn how to develop widgets, themes and other enhancements to your workspace.
 				</p>
-				<a href="https://inqlude.org/" class="learn-more button expand" target="_blank">Visit Inqlude</a>
-			</section>
-			
+				<a href="https://techbase.kde.org/Special:MyLanguage/Development/Tutorials/Plasma5" class="learn-more button">View Documentation</a>
+		</div>
+		<div class="row bottomAlignRow" style="padding-bottom: 20px;">
 			<section class="col-md">
 				<h3>Qt Documentation</h3>
 				<p>
 					KDE technology heavily depends on and contributes to Qt. If you
 					are not experienced in Qt you should first examine Qt documentaiton.
 				</p>
 				<a href="https://www.qt.io" class="learn-more button expand" target="_blank">View Qt Documentation</a>
 			</section>
-		</div>
-		
-		<h2 style="margin-bottom: -20px;">Contributors Zone</h2>
-		
-		<div class="row bottomAlignRow" style="border-bottom: solid 1px #EEE; padding-bottom: 20px;">
-
 			<section class="col-sm">
-				<h3>Plasma and Theme Development</h3>
-				<p>
-					Plasma is made to be flexible; learn how to develop widgets, themes and other enhancements to your workspace.
-				</p>
-				<a href="https://techbase.kde.org/Special:MyLanguage/Development/Tutorials/Plasma5" class="learn-more button">View Documentation</a>
-			</section>
-			
-			<section class="col-sm">
-				<h3>Contributor Accounts</h3>
-				<p>
-					How to get an account to contribute to the KDE.
-				</p>
-				<a href="https://community.kde.org/Infrastructure/Get_a_Developer_Account" class="learn-more button">Information on Contributor Accounts</a>
-			</section>
-			
-			<section class="col-sm">
-				<h3>Phabricator</h3>
+				<h3>Inqlude Documentation</h3>
 				<p>
-					Phabricator is the new way to review, manage, and work with
-					KDE projects.
+					This is a comprehensive list of many Qt-based libraries. 
 				</p>
-				<a href="https://phabricator.kde.org/" class="learn-more button">Visit Phabricator</a>
+				<a href="https://inqlude.org/" class="learn-more button expand" target="_blank">Visit Inqlude</a>
 			</section>
-			
 		</div>
-	</main>
+	</div>
+</main>
 <?php
-
-
 	require('aether/footer.php');
-
-?>
+?>
\ No newline at end of file