Spaces:
Running
Running
Pulastya B
feat: Initial commit - Data Science Agent with React frontend and FastAPI backend
226ac39 | import React from 'react'; | |
| import { motion } from 'framer-motion'; | |
| const steps = [ | |
| { | |
| number: "01", | |
| title: "Ingest Data", | |
| description: "Upload your raw CSV, JSON, or Parquet files directly to the secure environment." | |
| }, | |
| { | |
| number: "02", | |
| title: "Define Objective", | |
| description: "Describe what you want to achieve in natural language. 'Predict churn' or 'Find outliers'." | |
| }, | |
| { | |
| number: "03", | |
| title: "Agent Execution", | |
| description: "The agent orchestrates tools to clean, transform, and model your data autonomously." | |
| }, | |
| { | |
| number: "04", | |
| title: "Receive Assets", | |
| description: "Get fully trained models, performance metrics, and interactive explainable reports." | |
| } | |
| ]; | |
| const Process = () => { | |
| return ( | |
| <section id="process" className="py-24 bg-[#030303] border-y border-white/5"> | |
| <div className="max-w-7xl mx-auto px-6"> | |
| <div className="text-center mb-20"> | |
| <h2 className="text-4xl md:text-5xl font-extrabold text-white mb-4 tracking-tight">How it Works</h2> | |
| <p className="text-white/40 text-xl font-medium">From raw data to actionable intelligence in 4 steps.</p> | |
| </div> | |
| <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12"> | |
| {steps.map((step, i) => ( | |
| <motion.div | |
| key={i} | |
| initial={{ opacity: 0, scale: 0.95 }} | |
| whileInView={{ opacity: 1, scale: 1 }} | |
| viewport={{ once: true }} | |
| transition={{ delay: i * 0.1 }} | |
| className="relative" | |
| > | |
| <span className="text-7xl font-extrabold text-white/5 absolute -top-10 -left-4 select-none italic"> | |
| {step.number} | |
| </span> | |
| <div className="relative z-10"> | |
| <h3 className="text-xl font-bold text-white mb-4 flex items-center gap-2 tracking-tight"> | |
| <span className="w-1.5 h-1.5 rounded-full bg-indigo-500" /> | |
| {step.title} | |
| </h3> | |
| <p className="text-white/40 leading-relaxed font-medium"> | |
| {step.description} | |
| </p> | |
| </div> | |
| {i < steps.length - 1 && ( | |
| <div className="hidden lg:block absolute top-1/2 -right-6 w-12 h-[1px] bg-gradient-to-r from-white/10 to-transparent" /> | |
| )} | |
| </motion.div> | |
| ))} | |
| </div> | |
| </div> | |
| </section> | |
| ); | |
| }; | |
| export default Process; | |