Skip to content

Commit da58885

Browse files
chigozzdevvchigozzdevv
committed
feat: landing page
1 parent 5e4a62b commit da58885

14 files changed

Lines changed: 1776 additions & 90 deletions

‎app/page.tsx‎

Lines changed: 26 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,30 @@
11
"use client";
22

3-
import { Button } from "@/components/ui/button";
4-
import { useRouter } from "next/navigation";
53
import React from "react";
4+
import Navbar from "@/components/shared/navbar";
5+
import Footer from "@/components/shared/footer";
6+
import Hero from "@/components/landing/sections/hero";
7+
import ExploreProjects from "@/components/landing/sections/explore-projects";
8+
import HowItWorks from "@/components/landing/sections/how-it-works";
9+
import AboutUs from "@/components/landing/sections/about-us";
10+
import Testimonials from "@/components/landing/sections/testimonials";
11+
import UsAndStellar from "@/components/landing/sections/us-and-stellar";
12+
import CTA from "@/components/landing/sections/cta"
613

7-
const Page = () => {
8-
const router = useRouter();
9-
10-
return (
11-
<div className="h-screen grid place-content-center">
12-
<Button
13-
onClick={() => router.push("/dashboard")}
14-
className="py-4 px-10 text-white"
15-
>
16-
Visit Dashboard
17-
</Button>
18-
</div>
19-
);
20-
};
21-
22-
export default Page;
14+
export default function LandingPage() {
15+
return (
16+
<div className="min-h-screen">
17+
<Navbar />
18+
<main>
19+
<Hero />
20+
<AboutUs />
21+
<HowItWorks />
22+
<ExploreProjects/>
23+
<UsAndStellar/>
24+
<Testimonials/>
25+
<CTA/>
26+
</main>
27+
<Footer/>
28+
</div>
29+
);
30+
}

‎components/landing/components/AnimatedUnderline.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
"use client";
2+
3+
import { motion } from "framer-motion";
4+
5+
type AnimatedUnderlineProps = {
6+
isInView: boolean;
7+
};
8+
9+
export default function AnimatedUnderline({ isInView }: AnimatedUnderlineProps) {
10+
return (
11+
<motion.div
12+
className="absolute -bottom-2 left-0 right-0 h-1 bg-primary"
13+
initial={{ width: 0 }}
14+
animate={isInView ? { width: "100%" } : { width: 0 }}
15+
transition={{ duration: 0.8, ease: "easeOut" }}
16+
/>
17+
);
18+
}

‎components/landing/components/PageTransition.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
"use client";
2+
3+
import { motion } from "framer-motion";
4+
5+
type PageTransitionProps = {
6+
children: React.ReactNode;
7+
};
8+
9+
export default function PageTransition({ children }: PageTransitionProps) {
10+
return (
11+
<motion.div
12+
initial={{ opacity: 0, y: 20 }}
13+
animate={{ opacity: 1, y: 0 }}
14+
exit={{ opacity: 0, y: -20 }}
15+
transition={{ duration: 0.5, ease: "easeOut" }}
16+
>
17+
{children}
18+
</motion.div>
19+
);
20+
}

‎components/landing/sections/about-us.tsx‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
"use client";
2+
3+
import React, { useRef } from "react";
4+
import { motion, useInView } from "framer-motion";
5+
import { Shield, Globe, Handshake, Lightbulb, LucideIcon } from "lucide-react";
6+
import PageTransition from "../components/PageTransition";
7+
import AnimatedUnderline from "../components/AnimatedUnderline";
8+
9+
type ValueItem = {
10+
icon: LucideIcon;
11+
title: string;
12+
description: string;
13+
};
14+
15+
type MetricItem = {
16+
value: string;
17+
label: string;
18+
};
19+
20+
const VALUES: ValueItem[] = [
21+
{
22+
icon: Shield,
23+
title: "Trust & Transparency",
24+
description: "See exactly where your money goes. We release funds as projects hit their goals.",
25+
},
26+
{
27+
icon: Globe,
28+
title: "Open to Everyone",
29+
description: "Low fees and fast payments help creators from anywhere join our platform.",
30+
},
31+
{
32+
icon: Handshake,
33+
title: "Community Input",
34+
description: "Backers get to vote on important project decisions. Your voice matters here.",
35+
},
36+
{
37+
icon: Lightbulb,
38+
title: "Bold Ideas Welcome",
39+
description: "We support projects that push boundaries and help communities grow.",
40+
},
41+
];
42+
43+
const IMPACT_METRICS: MetricItem[] = [
44+
{ value: "2.5M+", label: "XLM Raised" },
45+
{ value: "150+", label: "Funded Projects" },
46+
{ value: "12K+", label: "Active Backers" },
47+
{ value: "35+", label: "Countries" },
48+
];
49+
50+
export default function WhoWeAre() {
51+
const ref = useRef<HTMLDivElement>(null);
52+
const isInView = useInView(ref, { margin: "-100px" });
53+
54+
return (
55+
<PageTransition>
56+
<section className="py-16 md:py-24 bg-muted/30" ref={ref}>
57+
<div className="container max-w-6xl mx-auto px-4 md:px-6">
58+
<div className="text-center mb-10">
59+
<div className="relative inline-block">
60+
<h2 className="text-3xl md:text-4xl font-bold tracking-tighter">Who We Are</h2>
61+
<AnimatedUnderline isInView={isInView} />
62+
</div>
63+
</div>
64+
65+
<div className="grid gap-8 lg:grid-cols-12">
66+
<div className="lg:col-span-8 space-y-8">
67+
<motion.div
68+
initial={{ opacity: 0, y: 20 }}
69+
whileInView={{ opacity: 1, y: 0 }}
70+
transition={{ duration: 0.5 }}
71+
className="max-w-2xl"
72+
>
73+
<p className="text-lg mb-4">
74+
Boundless connects creators with backers to bring innovative projects to life.
75+
</p>
76+
<p className="text-muted-foreground">
77+
We believe in community-driven funding where backers have a voice, creators get
78+
fair support, and bold ideas find the resources they need to succeed.
79+
</p>
80+
</motion.div>
81+
82+
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
83+
{VALUES.map((value, index) => (
84+
<motion.div
85+
key={value.title}
86+
initial={{ opacity: 0, y: 20 }}
87+
whileInView={{ opacity: 1, y: 0 }}
88+
transition={{ duration: 0.5, delay: index * 0.1 }}
89+
className="bg-card border border-border p-4 rounded-lg flex items-start space-x-3"
90+
>
91+
<div className="mt-1 bg-primary/10 p-2 rounded-full">
92+
<value.icon className="h-5 w-5 text-primary" />
93+
</div>
94+
<div>
95+
<h3 className="font-medium">{value.title}</h3>
96+
<p className="text-sm text-muted-foreground mt-1">{value.description}</p>
97+
</div>
98+
</motion.div>
99+
))}
100+
</div>
101+
</div>
102+
103+
<motion.div
104+
initial={{ opacity: 0, y: 20 }}
105+
whileInView={{ opacity: 1, y: 0 }}
106+
transition={{ duration: 0.5 }}
107+
className="lg:col-span-4 flex h-full"
108+
>
109+
<div className="bg-card border border-border rounded-lg overflow-hidden shadow-sm w-full p-6 flex flex-col justify-center">
110+
<h3 className="text-lg font-medium mb-6 text-center">Our Impact</h3>
111+
<div className="grid grid-cols-2 gap-y-8 gap-x-4">
112+
{IMPACT_METRICS.map((metric) => (
113+
<div key={metric.label} className="text-center">
114+
<p className="text-3xl font-bold text-primary">{metric.value}</p>
115+
<p className="text-sm text-muted-foreground">{metric.label}</p>
116+
</div>
117+
))}
118+
</div>
119+
<div className="mt-8 pt-6 border-t border-border">
120+
<p className="text-sm text-muted-foreground text-center">
121+
Empowering creators across the globe since 2022
122+
</p>
123+
</div>
124+
</div>
125+
</motion.div>
126+
</div>
127+
</div>
128+
</section>
129+
</PageTransition>
130+
);
131+
}

‎components/landing/sections/cta.tsx‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
"use client";
2+
3+
import React, { useRef } from "react";
4+
import { motion, useInView } from "framer-motion";
5+
import { ArrowRight, Rocket } from "lucide-react";
6+
import { Button } from "@/components/ui/button";
7+
import PageTransition from "../components/PageTransition";
8+
import AnimatedUnderline from "../components/AnimatedUnderline";
9+
import Link from "next/link";
10+
11+
export default function BoundlessCTA() {
12+
const ref = useRef<HTMLDivElement>(null);
13+
const isInView = useInView(ref, { margin: "-100px" });
14+
15+
return (
16+
<PageTransition>
17+
<section
18+
className="py-16 md:py-24 bg-gradient-to-b from-background to-background/90"
19+
ref={ref}
20+
>
21+
<div className="container max-w-6xl mx-auto px-4 md:px-6">
22+
<div className="rounded-2xl border border-primary/20 bg-primary/5 overflow-hidden">
23+
<div className="grid grid-cols-1 lg:grid-cols-2 gap-0">
24+
{/* Left side content */}
25+
<motion.div
26+
className="p-8 md:p-12"
27+
initial={{ opacity: 0, y: 20 }}
28+
whileInView={{ opacity: 1, y: 0 }}
29+
viewport={{ once: true }}
30+
transition={{ duration: 0.6 }}
31+
>
32+
<div className="inline-block bg-primary/10 p-2 rounded-full mb-6">
33+
<Rocket className="h-6 w-6 text-primary" />
34+
</div>
35+
36+
<div className="relative mb-6">
37+
<h2 className="text-3xl md:text-4xl font-bold tracking-tighter mb-8">
38+
Ready to Launch Your Vision?
39+
</h2>
40+
<AnimatedUnderline isInView={isInView} />
41+
</div>
42+
43+
<p className="text-lg text-muted-foreground mb-8">
44+
Join Boundless today and connect with a community of backers eager to
45+
support innovative projects built on Stellar technology.
46+
</p>
47+
48+
<div className="flex flex-col sm:flex-row gap-4">
49+
<Button className="group" size="lg">
50+
<Link href="/create-project" className="flex items-center">
51+
Start a project
52+
<ArrowRight className="ml-2 h-4 w-4 transition-transform duration-300 group-hover:translate-x-1" />
53+
</Link>
54+
</Button>
55+
56+
<Button variant="outline" size="lg" className="group">
57+
<Link href="/explore" className="flex items-center">
58+
Explore projects
59+
<ArrowRight className="ml-2 h-4 w-4 transition-transform duration-300 group-hover:translate-x-1" />
60+
</Link>
61+
</Button>
62+
</div>
63+
</motion.div>
64+
65+
{/* Right side stats */}
66+
<motion.div
67+
className="bg-primary/10 p-8 md:p-12 flex flex-col justify-center"
68+
initial={{ opacity: 0 }}
69+
whileInView={{ opacity: 1 }}
70+
viewport={{ once: true }}
71+
transition={{ duration: 0.6, delay: 0.2 }}
72+
>
73+
<div className="grid grid-cols-2 gap-6">
74+
<div className="text-center">
75+
<motion.div
76+
className="text-4xl md:text-5xl font-bold text-primary mb-2"
77+
initial={{ opacity: 0, y: 10 }}
78+
whileInView={{ opacity: 1, y: 0 }}
79+
viewport={{ once: true }}
80+
transition={{ duration: 0.4, delay: 0.3 }}
81+
>
82+
200+
83+
</motion.div>
84+
<p className="text-sm text-muted-foreground">Projects funded</p>
85+
</div>
86+
87+
<div className="text-center">
88+
<motion.div
89+
className="text-4xl md:text-5xl font-bold text-primary mb-2"
90+
initial={{ opacity: 0, y: 10 }}
91+
whileInView={{ opacity: 1, y: 0 }}
92+
viewport={{ once: true }}
93+
transition={{ duration: 0.4, delay: 0.4 }}
94+
>
95+
15K+
96+
</motion.div>
97+
<p className="text-sm text-muted-foreground">Active backers</p>
98+
</div>
99+
100+
<div className="text-center">
101+
<motion.div
102+
className="text-4xl md:text-5xl font-bold text-primary mb-2"
103+
initial={{ opacity: 0, y: 10 }}
104+
whileInView={{ opacity: 1, y: 0 }}
105+
viewport={{ once: true }}
106+
transition={{ duration: 0.4, delay: 0.5 }}
107+
>
108+
$2.5M
109+
</motion.div>
110+
<p className="text-sm text-muted-foreground">Total funded</p>
111+
</div>
112+
113+
<div className="text-center">
114+
<motion.div
115+
className="text-4xl md:text-5xl font-bold text-primary mb-2"
116+
initial={{ opacity: 0, y: 10 }}
117+
whileInView={{ opacity: 1, y: 0 }}
118+
viewport={{ once: true }}
119+
transition={{ duration: 0.4, delay: 0.6 }}
120+
>
121+
92%
122+
</motion.div>
123+
<p className="text-sm text-muted-foreground">Success rate</p>
124+
</div>
125+
</div>
126+
</motion.div>
127+
</div>
128+
</div>
129+
</div>
130+
</section>
131+
</PageTransition>
132+
);
133+
}

0 commit comments

Comments
 (0)