Miscellany/cse-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Initial CSE website content integration

Browse source
This commit is contained in:
Neeldhara Misra 2026-06-01 16:31:25 +05:30
commit dfe66b9002
260 changed files with 83153 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

204
src/components/sections/why-we-began.tsx Normal file
View file

@ -0,0 +1,204 @@
'use client';
import { MailIcon } from 'lucide-react';
import Noise from '@/components/elements/noise';
import { Button } from '@/components/ui/button';
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from '@/components/ui/card';
const stats = [
{
value: '2024',
label: 'Launched',
},
{
value: '$2.2M',
label: 'Pre-Seed Round',
},
];
const performanceStats = [
{
value: '42%',
description:
'Teams using Lumen report a 42% increase in overall project efficiency and communication clarity within the first month.',
},
{
value: '3200+',
description:
'Projects successfully managed through Lumen across product, marketing, operations, and creative teams worldwide.',
},
{
value: '97%',
description:
'Our customer satisfaction score stands at 97%, reflecting the trust teams place in Lumen for critical workflows.',
},
];
export default function WhyWeBegan() {
return (
<section className="section-padding relative">
<Noise />
<div className="bigger-container">
<div className="flex flex-col-reverse items-center gap-8 md:flex-row lg:gap-12">
<div className="relative h-full w-full md:w-[453px]">
{/* Background gradient circles */}
<div className="bg-chart-2 absolute top-0 left-0 size-60 -translate-x-1/6 rounded-full opacity-30 blur-[80px] will-change-transform md:opacity-70" />
<div className="bg-chart-3 absolute right-0 bottom-0 size-60 -translate-x-1/4 translate-y-1/6 rounded-full opacity-50 blur-[80px] will-change-transform md:opacity-70" />
<div className="relative aspect-square size-full overflow-hidden rounded-xl">
<img
src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=800&h=1066&fit=crop"
alt="Team collaboration"
className="size-full rounded-xl object-cover"
/>
</div>
</div>
{/* Content Section */}
<div className="flex-1 space-y-6 lg:space-y-8">
<div className="space-y-8 lg:space-y-12">
<h2 className="text-3xl leading-none font-medium tracking-tight lg:text-4xl">
Why We Began
</h2>
<div>
<p>
We built Lumen after experiencing the headaches of managing
multiple tools and scattered communication. Instead of
switching tabs and losing focus, we imagined one space where
everything connects.
</p>
<br />
<p>
Today, Lumen is used by thousands of teams who value
structure, speed, and a more intuitive way to manage their
projects.
</p>
</div>
</div>
{/* Stats Cards */}
<div className="flex flex-1 flex-wrap gap-4">
{stats.map((stat, index) => (
<Card
key={index}
className="min-w-[200px] flex-1 gap-0 text-center"
>
<CardHeader>
<CardTitle className="text-4xl font-medium">
{stat.value}
</CardTitle>
</CardHeader>
<CardContent className="text-base">{stat.label}</CardContent>
</Card>
))}
</div>
</div>
</div>
{/* Pro Access Section */}
<div className="mt-16 grid items-center gap-8 lg:mt-24 lg:grid-cols-2 lg:gap-12">
{/* Content Section */}
<div className="flex-1 space-y-6 lg:space-y-8">
<div className="space-y-8 lg:space-y-12">
<h2 className="text-3xl leading-none font-medium tracking-tight lg:text-4xl">
Power your progress with Pro Access
</h2>
<div className="">
<p>
At Lumen, our mission is to help modern teams eliminate chaos
and regain clarity by offering beautifully simple task and
project management tools. We believe great work doesn&apos;t
need to be complicated — it needs to be intentional.
</p>
<br />
<p>
With years of experience building tools for creatives,
developers, and teams of all sizes, we&apos;ve shaped Lumen to
be the silent partner for you.
</p>
</div>
</div>
{/* CTA Buttons */}
<div className="flex flex-col gap-3 sm:flex-row sm:gap-4">
<Button className="!text-sm shadow-none" size="lg" asChild>
<a href="#">Explore Lumen</a>
</Button>
<Button
variant="outline"
className="border-input !text-sm shadow-none"
size="lg"
asChild
>
<a href="/contact">
Contact Us
<MailIcon className="size-4" />
</a>
</Button>
</div>
</div>
{/* Images Grid */}
<div className="grid gap-4">
{/* First row - 2 images */}
<div className="grid grid-cols-2 gap-4">
<div className="relative h-48 overflow-hidden rounded-lg">
<img
src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=800&h=800&fit=crop"
alt="Team collaboration workspace"
width={300}
height={200}
className="h-full w-full object-cover"
/>
</div>
<div className="relative h-48 overflow-hidden rounded-lg">
<img
src="https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=800&fit=crop"
alt="Developer workspace"
width={300}
height={200}
className="h-full w-full object-cover"
/>
</div>
</div>
<div className="relative h-72 overflow-hidden rounded-lg">
{/* Second row - 1 full width image */}
<img
src="https://images.unsplash.com/photo-1587825140708-dfaf72ae4b04?w=1600&h=800&fit=crop"
alt="Modern office workspace"
width={600}
height={256}
className="h-full w-full rounded-lg object-cover"
/>
</div>
</div>
</div>
{/* Performance Statistics Cards */}
<div className="section-padding grid gap-4 !pb-0 md:grid-cols-3">
{performanceStats.map((stat, index) => (
<Card key={index} className="bg-border md:gap-10">
<CardHeader>
<CardTitle className="text-3xl font-semibold">
{stat.value}
</CardTitle>
</CardHeader>
<CardContent>
<CardDescription className="">
{stat.description}
</CardDescription>
</CardContent>
</Card>
))}
</div>
</div>
</section>
);
}