98%

Levironexe · Nov 5, 2024 · 42f8670 · 42f8670
1 parent f9f3bcc
commit 42f8670
Show file tree

Hide file tree

Showing 24 changed files with 454 additions and 118 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,14 +1,14 @@
 "use client";
 
-import {Hero, Video, YTRefSection, RiliabilitySection, FAQ } from '@/components/index';
+import {Hero, Video, YTRefSection, RiliabilitySection, FAQ, OnScrollTutorial, MeetTheTeam } from '@/components/index';
 
 export default function Page() {
     return (
-        <main className="bg-cover overflow-x-hidden" >         
+        <main className="bg-cover" >         
             <Hero/>
-            <Video/>
-            <RiliabilitySection/>
+            <OnScrollTutorial/>
             <FAQ/>
+            <MeetTheTeam/>
             <YTRefSection/>
         </main>
     )

diff --git a/components/chart/RadarChart.js b/components/chart/RadarChart.js
@@ -33,6 +33,8 @@ const RadarChart = ({ labels, scores }) => {
         ticks: {
           stepSize: 20,
           color: '#000',
+
+
         },
         angleLines: {
           display: true,
@@ -70,7 +72,7 @@ const RadarChart = ({ labels, scores }) => {
         <h2 className="bg-gradient-to-r from-primary-red via-pink-500 to-purple-600 text-transparent bg-clip-text text-2xl font-bold" style={{ fontFamily: "Outfit" }}>
           Score Breakdown
         </h2>
-        <p className="text-lg font-bold text-subtitle__grey">
+        <p className="text-lg font-bold text-subtitle__gray">
           Total Score: <span className='bg-gradient-to-r from-primary-red via-pink-500 to-purple-600 text-transparent bg-clip-text'>93/100</span>
         </p>
       </div>

diff --git a/components/index.js b/components/index.js
@@ -25,6 +25,8 @@ import { Overview } from './section/overview';
 import VulnerabilityList from './section/vulnerability-list'
 import NoContractFound from './section/no-contract-found';
 import AllProjects from './section/all-projects';
+import OnScrollTutorial from './section/on-scroll-tutorial';
+import MeetTheTeam from './section/meet-the-team';
 export {
     Hero,
     Navbar,
@@ -49,5 +51,7 @@ export {
     VulnerabilityList,
     Overview,
     NoContractFound,
-    AllProjects
+    AllProjects,
+    OnScrollTutorial,
+    MeetTheTeam
 }
diff --git a/components/section/all-projects.tsx b/components/section/all-projects.tsx
@@ -53,6 +53,7 @@ const AllProjects = () => {
   const [error, setError] = useState<string | null>(null);
   const [searchTerm, setSearchTerm] = useState('');
   const [filteredProjects, setFilteredProjects] = useState<AnalysisMetrics[]>([]);
+  const [isHover, setIsHover] = useState(false);
 
   const supabase = createClient(
     process.env.NEXT_PUBLIC_SUPABASE_URL!,
@@ -133,7 +134,7 @@ const AllProjects = () => {
 
 
   return (
-    <div className="min-h-screen bg-gray-50 py-8 px-4 sm:px-6 lg:px-8">
+    <div className="min-h-screen bg-gray-50 py-8 px-4 sm:px-6 lg:px-8 pt-24">
       <div className="max-w-7xl mx-auto py-4 sm:py-6 lg:py-8 px-4 sm:px-6 lg:px-8">
         <div className="flex justify-between items-center mb-12">
           <h1 className="items-center flex gap-2 text-2xl font-bold bg-gradient-to-r from-primary-red to-pink-600 text-transparent bg-clip-text">PROJECTS</h1>
@@ -144,11 +145,14 @@ const AllProjects = () => {
               <input
                 type="text"
                 placeholder="Search by Project name"
-                className="pl-10 pr-4 py-2 border border-gray-300 rounded-xl w-[300px]"
+                className={`pl-10 pr-4 py-2 border rounded-xl w-[300px] placeholder-gray-400 focus:ring-0 focus:outline-2 transition-colors
+                duration-200 ${isHover ? 'border-black':'border-gray-300'}`}
                 value={searchTerm}
+                onFocus={() => setIsHover(true)}
+                onBlur={() => setIsHover(false)}
                 onChange={(e) => setSearchTerm(e.target.value)}
               />
-              <Search className="absolute left-3 top-2.5 h-5 w-5 text-gray-400" />
+              <Search className={`absolute left-3 top-2.5 h-5 w-5  duration-100 transition-colors  ${isHover ? 'text-black': 'text-gray-400'}`} />
             </div>
 
             <UploadForm style='py-2 px-3 justify-center text-white/80 rounded-xl text-base sm:text-[14px] xl:text-[18px] font-normal w-full sm:w-auto hover:bg-white hover:text-white
@@ -186,27 +190,27 @@ const AllProjects = () => {
                   <div>
                     <div className="font-medium">{project.high_issues}</div>
                     <div className="text-pri">High</div>
-                    <div className='border-b-[3px] w-1/2 mx-auto mt-2 border-red-600'></div>
+                    <div className='border-b-[4px] w-1/2 mx-auto mt-2 border-red-600'></div>
                   </div>
                   <div>
                     <div className="font-medium">{project.medium_issues}</div>
                     <div className="text-gray-500">Med</div>
-                    <div className='border-b-[3px] w-1/2 mx-auto mt-2 border-yellow-400'></div>
+                    <div className='border-b-[4px] w-1/2 mx-auto mt-2 border-yellow-400'></div>
                   </div>
                   <div>
                     <div className="font-medium">{project.low_issues}</div>
                     <div className="text-gray-500">Low</div>
-                    <div className='border-b-[3px] w-1/2 mx-auto mt-2 border-green-500'></div>
+                    <div className='border-b-[4px] w-1/2 mx-auto mt-2 border-green-500'></div>
                   </div>
                   <div>
                     <div className="font-medium">{project.informational_issues}</div>
                     <div className="text-gray-500">Info</div>
-                    <div className='border-b-[3px] w-1/2 mx-auto mt-2 border-gray-500'></div>
+                    <div className='border-b-[4px] w-1/2 mx-auto mt-2 border-gray-500'></div>
                   </div>
                   <div>
                     <div className="font-medium">{project.optimization_issues}</div>
                     <div className="text-gray-500">Opti</div>
-                    <div className='border-b-[3px] w-1/2 mx-auto mt-2 border-blue-500'></div>
+                    <div className='border-b-[4px] w-1/2 mx-auto mt-2 border-blue-500'></div>
                   </div>
                 </div>
               </div>

diff --git a/components/section/footer-section.tsx b/components/section/footer-section.tsx
@@ -4,7 +4,7 @@ import { Github, Twitter, Facebook, Mail, Phone, MapPin } from 'lucide-react';
 //An appealing footer section
 export default function Footer() {
   return (
-    <footer className="bg-footer text-white border-t border-subsection__grey w-full relative">
+    <footer className="bg-footer text-white border-t border-subsection__gray w-full relative">
       <div className="max-w-full mx-auto px-4 sm:px-6 lg:px-12 py-12"> 
         {/* Grid with 4 columns */}
         <div className="grid grid-cols-1 md:grid-cols-4 gap-8 w-full justify-items-center">

diff --git a/components/section/frequently-asked-question-section.tsx b/components/section/frequently-asked-question-section.tsx
@@ -39,7 +39,7 @@ export default function FAQ() {
 
   return (
     // Container for the FAQ section with styling.
-    <div className="text-white h-[900px] flex items-center justify-center pb-[150px] bg-black">
+    <div className="text-black h-[900px] flex items-center justify-center pb-[150px] bg-gradient-to-t from-black to-white">
       <div className="max-w-7xl w-full  px-4 sm:px-6 lg:px-8 relative">
         {/* Heading for the FAQ section */}
         <h2 className="text-3xl sm:text-4xl lg:text-5xl xl:text-6xl font-bold mb-16 text-center" style={{filter: 'drop-shadow(0 0 10px rgba(255, 255, 255, 0.5))'}}>
@@ -59,14 +59,14 @@ export default function FAQ() {
                 <span className="text-[18px] sm:text-[22px] lg:text-[24px] xl:text-[26px] font-semibold pr-4">{item.question}</span>
                 {/* Toggle the chevron icon based on whether the question is open */}
                 {openIndex === index ? (
-                  <ChevronUp className="flex-shrink-0 h-8 w-8 white" />
+                  <ChevronUp className="flex-shrink-0 h-8 w-8 text-black" />
                 ) : (
-                  <ChevronDown className="flex-shrink-0 h-8 w-8 white" />
+                  <ChevronDown className="flex-shrink-0 h-8 w-8 text-black" />
                 )}
               </button>
               {/* Display the answer if the question is open */}
               {openIndex === index && (
-                <div className="p-6 text-[20px] text-subtitle__grey bg-transparent rounded-b-xl">
+                <div className="p-6 text-[20px] text-white bg-transparent rounded-b-xl">
                   <p>{item.answer}</p>
                 </div>
               )}

diff --git a/components/section/hero-section.tsx b/components/section/hero-section.tsx
@@ -25,7 +25,7 @@ const Hero = () => {
 
 
     return (
-        <div className="flex flex-col xl:flex-row max-w-7xl mx-auto gap-8 mb-16 xl:mb-28 min-h-[600px] xl:h-[800px] items-center px-4 sm:px-6 xl:px-0">
+        <div className="flex flex-col xl:flex-row max-w-7xl mx-auto gap-8 min-h-screen items-center px-4 sm:px-6 xl:px-0">
         <ParticlesComponent id='particles'/>
             {/* Text content */}
             <div className="flex-1 xl:flex-[2] flex items-center justify-center ">

diff --git a/components/section/meet-the-team.tsx b/components/section/meet-the-team.tsx
@@ -0,0 +1,51 @@
+import React from 'react'
+import {Facebook, Github} from 'lucide-react'
+const MeetTheTeam = () => {
+  return (
+    <main className='bg-black min-h-[70vh] text-white'>
+    <div className='text-center py-14'>
+        <h2 className='white font-bold text-4xl'>Meet the <span className='text-primary-red'>Team</span></h2>
+        <p className='text-2xl'>We're always willing to listen to everyone.</p>
+    </div>
+    <div className='max-w-7xl py-20 flex justify-between mx-auto'>
+        <div className='flex justify-center text-center gap-12 items-start'>
+            <img src='/images/member_1.jpg' className='h-[200px] w-[200px] rounded-full mb-12 shadow-weak-ass-glow'/>
+            <div className='text-left'>
+                <p className='text-2xl font-semibold'>Nguyen Thien Phuoc</p>
+                <p className='text-xl text-subtitle__gray pb-4'>Founder & CEO</p>
+                <div className='flex gap-4 h-5'>
+                <a href='https://www.facebook.com/profile.php?id=61566144360040' target='_blank'>
+                <Facebook className='text-subtitle__gray w-7 h-7'/>
+                </a>
+                <a href='https://github.com/Levironexe' target='_blank'>
+                <Github className='text-subtitle__gray w-7 h-7'/>
+                </a>
+                </div>
+
+            </div>
+
+        </div>
+        <div className='flex justify-center text-center gap-12 items-start'>
+            <img src='/images/member_2.jpg' className='h-[200px] w-[200px] rounded-full mb-12 shadow-weak-ass-glow'/>
+            <div className='text-left'>
+                <p className='text-2xl font-semibold'>Viet Nguyen</p>
+                <p className='text-xl text-subtitle__gray pb-4'>Co-Founder</p>
+                <div className='flex gap-4 h-5'>
+                <a href='https://www.facebook.com/vxtduckie' target='_blank'>
+                <Facebook className='text-subtitle__gray w-7 h-7'/>
+                </a>
+                <a href='https://github.com/VxTDuckie' target='_blank'>
+                <Github className='text-subtitle__gray w-7 h-7'/>
+                </a>
+                </div>
+
+            </div>
+
+        </div>
+
+    </div>
+    </main>
+  )
+}
+
+export default MeetTheTeam