Modify landing page (#50)

* Changed main text font, modified top navbar and implemented animations when scrolling to relevent sections.

* Again changed little bit of appearence of main text and image.

* Added some comments

* Main text font made tight and Changed some comments

* Changed scroll bar showing in comparison of Jac and Traditional programming.

* changed bit of appearance of in that compairing jac and traditional programming.

* Byllm blog images restored

Author: SupulHeshan

jaseci-org/layouts/components/landing/VerticalTabs.js

@@ -50,14 +50,18 @@ const VerticalTabs = () => {
     setActiveVerticalTab(index);
     setActiveLanguage("jac"); 
   };
-
+  
   const currentJacCode = jacTabsData[activeVerticalTab].code;
   const currentPythonCode = pythonTabsData[activeVerticalTab].code;
 
   const ANIMATION_DURATION = '0.8s'; 
   const BASE_DELAY = 0.80; 
   const STAGGER_DELAY = 0.6; // Additional delay between staggered elements
 
+  // Calculate line counts for both code snippets
+  const lineCountJac = currentJacCode.trim().split('\n').length;
+  const lineCountPython = currentPythonCode.trim().split('\n').length;
+
   // Helper function to get the appropriate animation class
   const getTabAnimationName = (index) => {
     switch (index) {
@@ -188,13 +192,13 @@ const VerticalTabs = () => {
               <div className="flex-1 bg-gradient-to-br from-[#0d1117] to-[#161b22] overflow-hidden">
                 <div 
                   style={getChildAnimationStyle(1)} 
-                  className="h-[420px] overflow-auto custom-scrollbar-orange"
+                  className={`h-[420px] ${lineCountJac > 21 ? 'overflow-auto custom-scrollbar-orange' : ''}`}
                 >
                   <div className="flex min-w-full">
                     {/* Line Numbers - Fixed positioning */}
                     <div className="bg-[#161b22]/80 border-r border-gray-700/50 flex-shrink-0 select-none sticky left-0 z-10">
                       <div className="px-3 py-4 font-mono leading-[1.4] text-gray-500" style={{ fontSize: '0.8rem' }}>
-                        {Array.from({ length: Math.max(25, currentJacCode.trim().split('\n').length) }, (_, index) => (
+                        {Array.from({ length: Math.max(21, currentJacCode.trim().split('\n').length) }, (_, index) => (
                           <div key={index} className="text-right min-h-[1.4em] flex items-center justify-end">
                             {index + 1}
                           </div>
@@ -226,7 +230,7 @@ const VerticalTabs = () => {
               <div className="flex-1 bg-gradient-to-br from-[#0d1117] to-[#161b22] overflow-hidden">
                 <div 
                   style={getChildAnimationStyle(1)} 
-                  className="h-[420px] overflow-auto custom-scrollbar-blue"
+                  className={`h-[420px] ${lineCountPython > 21 ? 'overflow-auto custom-scrollbar-blue' : ''}`}
                 >
                   <div className="flex min-w-full">
                     {/* Line Numbers - Fixed positioning */}

jaseci-org/layouts/components/landing/WhyWeBuilt.js

@@ -106,10 +106,11 @@ const WhyWeBuilt = () => {
 
       <div className="max-w-7xl mx-auto px-2 sm:px-4 lg:px-8 relative z-10">
         {/* Header */}
-        <div
+    <div
           ref={headerRef} // Attach ref for observation
-          className={`text-center mb-8 sm:mb-12 transition-all duration-700 ease-out ${headerInView ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
-            }`}
+          className={`text-center mb-8 sm:mb-12 transition-all duration-700 ease-out ${
+            headerInView ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
+          }`}
         >
           <h2 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-white mb-3 bg-gradient-to-r from-white via-blue-400 to-primary-orange bg-clip-text text-transparent">
             Why We Built Jaseci
@@ -166,7 +167,6 @@ const WhyWeBuilt = () => {
         </div>
       </div>
 
-
     </section>
   );
 };