landing page v0.0

app/components/common/header.tsx

@@ -20,7 +20,7 @@ export default class Header extends React.Component<HeaderProps> {
     return (
       <div className='w-screen flex justify-between my-2'>
         {/* logo */}
-        <div className='ml-4'>
+        <div className='ml-4 text-2xl font-sans'>
           CareerSwipe
         </div>
 

app/components/common/landing.tsx

@@ -0,0 +1,27 @@
+"use client";
+import * as React from 'react';
+import { Card, CardContent } from '@/components/ui/card';
+import Rhetoricals from './rhetoricals_scrolling';
+import Header from './header';
+import { IoIosArrowDown } from "react-icons/io";
+
+export interface  LandingProps {
+}
+
+export default class Landing extends React.Component< LandingProps> {
+  public render() {
+    return (
+      <div className='h-full w-full flex flex-col items-center justify-center relative'>
+        <div className='flex flex-col items-center justify-center w-screen h-screen'>
+            <p className='font-heading text-2xl'>Tired of not finding the right career match?</p>
+            <p className="font-heading text-lg">Scroll down to find the solution</p>
+            <IoIosArrowDown className='text-2xl'/>
+        </div>
+        <div className='sticky top-0 z-10'>
+            <Header/>
+        </div>
+        <Rhetoricals/>
+      </div>
+    );
+  }
+}

app/components/common/rhetoricals_scrolling.tsx

@@ -0,0 +1,81 @@
+"use client";
+import { QuestionTitle } from '@/app/utils/questions';
+import { Card, CardContent, CardTitle } from '@/components/ui/card';
+import { cn } from '@/lib/utils';
+import * as React from 'react';
+
+export interface RhetoricalsProps {
+}
+
+const features = [
+    {
+        title: "What is this service?",
+        id: "what",
+        gradient: "from-[#f7f0ff] to-[#a78afe]",
+        cardTitle : "Revolutionizing Recruitment",
+        cardContent: <p>Dive into the future of hiring with our platform. At the heart of our service lies a sophisticated AI that transforms the way employers connect with potential talent. By seamlessly extracting and analyzing details from resumes, we offer a streamlined match-making process that prioritizes precision and efficiency. Ideal for students and recruiters alike, our platform ensures that every connection is a step towards a successful future</p>,
+    },
+    {
+        title : "Why should I use it?",
+        id : "why",
+        gradient: "from-[#f5fbff] to-[#addeff]",
+        cardTitle: "The Future of Hiring Today",
+        cardContent: 
+        <div>In a world where time is invaluable, we bring you a solution that saves it. Our platform stands out by offering:
+            <ul>
+                <li><b>1. Speed</b> - Say goodbye to lengthy screening processes. Our AI quickly identifies the best candidates</li>
+                <li><b>2. Accuracy</b> - Advanced machine learning tools ensure matches are based on precise criteria, from GPA to specific skill sets</li>
+                <li><b>3. Opportunity</b> - For students, we offer a gateway to being discovered based on your true potential. For employers, access a pool of candidates ready to excel in their roles.</li>
+            </ul>
+        </div>,
+
+    },
+    {
+        title : "How can it help me?",
+        id: "how",
+        gradient: "from-[#fff7f5] to-[#ffd8ad]",
+        cardTitle: "Your Path to Perfect Matches",
+        cardContent: 
+        <div>
+            Our platform simplifies recruitment to three easy steps:
+            <ol>
+                <li><b>1. For Students</b> - Sign up, upload your resume, and answer a few questions. Our AI does the rest, making your profile visible to top recruiters.</li>
+                <li><b>2. For Employers</b> - Define your ideal candidate criteria using our intuitive filters. Whether you seek specific skills, experiences, or academic achievements, we've got you covered.</li>
+                <li><b>3. Connect</b> - Our system curates a list of candidates that fit your criteria. Review their detailed profiles and connect with your future team members with just a click.</li>
+            </ol>
+        </div>,
+
+    }
+]
+
+const Rhetoricals = () => {
+    const [activeFeature, setActiveFeature] = React.useState(features[0].id);
+    return (
+      <div className='flex w-full gap-20 items-start'>
+        <div className='w-full py-[50vh]'>
+            <ul>
+                {features.map((feature) => (
+                    <li key={feature.id} className='flex justify-center p-3 font-heading'>
+                        <QuestionTitle id={feature.id} setActiveFeature={setActiveFeature}>
+                            {feature.title}
+                        </QuestionTitle>
+                    </li>
+                ))}
+            </ul>
+        </div>
+        <div className='w-full sticky top-0 h-screen flex items-center'>
+                <div className='w-1/2 min-w-[460px] relative aspect-square rounded-2xl bg-gray-100'>
+                    <Card className={cn('absolute inset-0 h-full w-full rounded-2xl bg-gradient-to-br', features.find(f => f.id === activeFeature)?.gradient)}>
+                        <CardTitle className='pt-5 text-black p-5 text-4xl'>
+                            {features.find(f => f.id === activeFeature)?.cardTitle}
+                        </CardTitle>
+                        <CardContent className=' text-neutral-800'>
+                            {features.find(f => f.id === activeFeature)?.cardContent}
+                        </CardContent>
+                    </Card>
+                </div>
+        </div>
+      </div>
+    );
+}
+export default Rhetoricals;

app/page.tsx

@@ -10,12 +10,14 @@ import { Result } from "postcss";
 import StudentDashboard from "./components/student-facing/student_dashboard";
 import RecruiterDashboard from "./components/recruiter-facing/recruiter_dashboard";
 import { Contacts } from "./components/common/contacts";
-import Chat from "./components/common/chat";
+import {Chat} from "./components/common/chat";
 import Messages from "./components/common/messages";
+import Landing from "./components/common/landing";
+import Rhetoricals from "./components/common/rhetoricals_scrolling";
 
 export default function Home() {
   return (
     //<Contacts items={results}/>
-    <Messages/>
+    <Landing/>
   );
 }

app/utils/questions.tsx

@@ -0,0 +1,30 @@
+// Assuming you've corrected the useInView hook usage
+import React, { useRef, useEffect } from 'react';
+import { useInView } from 'framer-motion';
+import { cn } from '@/lib/utils';
+
+type QuestionProps = {
+    children: React.ReactNode;
+    id: string; // Add an identifier for each title
+    setActiveFeature: (id: string) => void; // Method to update the active feature in the parent
+};
+
+export const QuestionTitle = ({ children, id, setActiveFeature }: QuestionProps) => {
+    const ref = useRef<HTMLParagraphElement>(null);
+    const isInView = useInView(ref, { margin: '-50% 0px -50% 0px' });
+
+    useEffect(() => {
+        if (isInView) {
+            setActiveFeature(id);
+        }
+    }, [isInView, id, setActiveFeature]);
+
+    return (
+        <p ref={ref} className={cn(
+            'py-16 font-heading text-5xl transition-colors duration-300 ease-in-out',
+            isInView ? 'text-neutral-600' : 'text-neutral-300'
+        )}>
+            {children}
+        </p>
+    );
+};

package.json

@@ -22,6 +22,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "cmdk": "^0.2.1",
+    "framer-motion": "^11.0.5",
     "jotai": "^2.6.4",
     "next": "14.1.0",
     "next-themes": "^0.2.1",

tailwind.config.ts

@@ -18,6 +18,10 @@ const config = {
       },
     },
     extend: {
+      fontFamily: {
+        heading : ["Inter", "sans-serif"],
+        body: ["system-ui", "apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "sans-serif"],
+      },
       colors: {
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",