[fix] quick fix
This commit is contained in:
Generated
+997
-256
File diff suppressed because it is too large
Load Diff
@@ -1,41 +0,0 @@
|
||||
import { Button } from "./ui/button";
|
||||
import { Input } from "./ui/input";
|
||||
|
||||
export const Newsletter = () => {
|
||||
const handleSubmit = (e: any) => {
|
||||
e.preventDefault();
|
||||
console.log("Subscribed!");
|
||||
};
|
||||
|
||||
return (
|
||||
<section id="newsletter">
|
||||
<hr className="w-11/12 mx-auto" />
|
||||
|
||||
<div className="container py-24 sm:py-32">
|
||||
<h3 className="text-center text-4xl md:text-5xl font-bold">
|
||||
Join Our Daily{" "}
|
||||
<span className="bg-gradient-to-b from-primary/60 to-primary text-transparent bg-clip-text">
|
||||
Newsletter
|
||||
</span>
|
||||
</h3>
|
||||
<p className="text-xl text-muted-foreground text-center mt-4 mb-8">
|
||||
Lorem ipsum dolor sit amet consectetur.
|
||||
</p>
|
||||
|
||||
<form
|
||||
className="flex flex-col w-full md:flex-row md:w-6/12 lg:w-4/12 mx-auto gap-4 md:gap-2"
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
<Input
|
||||
placeholder="leomirandadev@gmail.com"
|
||||
className="bg-muted/50 dark:bg-muted/80 "
|
||||
aria-label="email"
|
||||
/>
|
||||
<Button>Subscribe</Button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<hr className="w-11/12 mx-auto" />
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@@ -1,147 +0,0 @@
|
||||
import { Badge } from "../components/ui/badge";
|
||||
import { Button } from "../components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "../components/ui/card";
|
||||
import { Check } from "lucide-react";
|
||||
|
||||
enum PopularPlanType {
|
||||
NO = 0,
|
||||
YES = 1,
|
||||
}
|
||||
|
||||
interface PricingProps {
|
||||
title: string;
|
||||
popular: PopularPlanType;
|
||||
price: number;
|
||||
description: string;
|
||||
buttonText: string;
|
||||
benefitList: string[];
|
||||
}
|
||||
|
||||
const pricingList: PricingProps[] = [
|
||||
{
|
||||
title: "Free",
|
||||
popular: 0,
|
||||
price: 0,
|
||||
description:
|
||||
"Lorem ipsum dolor sit, amet ipsum consectetur adipisicing elit.",
|
||||
buttonText: "Get Started",
|
||||
benefitList: [
|
||||
"1 Team member",
|
||||
"2 GB Storage",
|
||||
"Upto 4 pages",
|
||||
"Community support",
|
||||
"lorem ipsum dolor",
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Premium",
|
||||
popular: 1,
|
||||
price: 5,
|
||||
description:
|
||||
"Lorem ipsum dolor sit, amet ipsum consectetur adipisicing elit.",
|
||||
buttonText: "Start Free Trial",
|
||||
benefitList: [
|
||||
"4 Team member",
|
||||
"4 GB Storage",
|
||||
"Upto 6 pages",
|
||||
"Priority support",
|
||||
"lorem ipsum dolor",
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Enterprise",
|
||||
popular: 0,
|
||||
price: 40,
|
||||
description:
|
||||
"Lorem ipsum dolor sit, amet ipsum consectetur adipisicing elit.",
|
||||
buttonText: "Contact US",
|
||||
benefitList: [
|
||||
"10 Team member",
|
||||
"8 GB Storage",
|
||||
"Upto 10 pages",
|
||||
"Priority support",
|
||||
"lorem ipsum dolor",
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export const Pricing = () => {
|
||||
return (
|
||||
<section
|
||||
id="pricing"
|
||||
className="container py-24 sm:py-32"
|
||||
>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-center">
|
||||
Get
|
||||
<span className="bg-gradient-to-b from-primary/60 to-primary text-transparent bg-clip-text">
|
||||
{" "}
|
||||
Unlimited{" "}
|
||||
</span>
|
||||
Access
|
||||
</h2>
|
||||
<h3 className="text-xl text-center text-muted-foreground pt-4 pb-8">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias
|
||||
reiciendis.
|
||||
</h3>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{pricingList.map((pricing: PricingProps) => (
|
||||
<Card
|
||||
key={pricing.title}
|
||||
className={
|
||||
pricing.popular === PopularPlanType.YES
|
||||
? "drop-shadow-xl shadow-black/10 dark:shadow-white/10"
|
||||
: ""
|
||||
}
|
||||
>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex item-center justify-between">
|
||||
{pricing.title}
|
||||
{pricing.popular === PopularPlanType.YES ? (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="text-sm text-primary"
|
||||
>
|
||||
Most popular
|
||||
</Badge>
|
||||
) : null}
|
||||
</CardTitle>
|
||||
<div>
|
||||
<span className="text-3xl font-bold">${pricing.price}</span>
|
||||
<span className="text-muted-foreground"> /month</span>
|
||||
</div>
|
||||
|
||||
<CardDescription>{pricing.description}</CardDescription>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent>
|
||||
<Button className="w-full">{pricing.buttonText}</Button>
|
||||
</CardContent>
|
||||
|
||||
<hr className="w-4/5 m-auto mb-4" />
|
||||
|
||||
<CardFooter className="flex">
|
||||
<div className="space-y-4">
|
||||
{pricing.benefitList.map((benefit: string) => (
|
||||
<span
|
||||
key={benefit}
|
||||
className="flex"
|
||||
>
|
||||
<Check className="text-green-500" />{" "}
|
||||
<h3 className="ml-2">{benefit}</h3>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@@ -1,58 +0,0 @@
|
||||
import { Radar } from "lucide-react";
|
||||
|
||||
interface SponsorProps {
|
||||
icon: JSX.Element;
|
||||
name: string;
|
||||
}
|
||||
|
||||
const sponsors: SponsorProps[] = [
|
||||
{
|
||||
icon: <Radar size={34} />,
|
||||
name: "Sponsor 1",
|
||||
},
|
||||
{
|
||||
icon: <Radar size={34} />,
|
||||
name: "Sponsor 2",
|
||||
},
|
||||
{
|
||||
icon: <Radar size={34} />,
|
||||
name: "Sponsor 3",
|
||||
},
|
||||
{
|
||||
icon: <Radar size={34} />,
|
||||
name: "Sponsor 4",
|
||||
},
|
||||
{
|
||||
icon: <Radar size={34} />,
|
||||
name: "Sponsor 5",
|
||||
},
|
||||
{
|
||||
icon: <Radar size={34} />,
|
||||
name: "Sponsor 6",
|
||||
},
|
||||
];
|
||||
|
||||
export const Sponsors = () => {
|
||||
return (
|
||||
<section
|
||||
id="sponsors"
|
||||
className="container pt-24 sm:py-32"
|
||||
>
|
||||
<h2 className="text-center text-md lg:text-xl font-bold mb-8 text-primary">
|
||||
Investors and founders
|
||||
</h2>
|
||||
|
||||
<div className="flex flex-wrap justify-center items-center gap-4 md:gap-8">
|
||||
{sponsors.map(({ icon, name }: SponsorProps) => (
|
||||
<div
|
||||
key={name}
|
||||
className="flex items-center gap-1 text-muted-foreground/60"
|
||||
>
|
||||
<span>{icon}</span>
|
||||
<h3 className="text-xl font-bold">{name}</h3>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@@ -1,111 +0,0 @@
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "../components/ui/card";
|
||||
|
||||
interface TestimonialProps {
|
||||
image: string;
|
||||
name: string;
|
||||
userName: string;
|
||||
comment: string;
|
||||
}
|
||||
|
||||
const testimonials: TestimonialProps[] = [
|
||||
{
|
||||
image: "https://github.com/shadcn.png",
|
||||
name: "John Doe React",
|
||||
userName: "@john_Doe",
|
||||
comment: "This landing page is awesome!",
|
||||
},
|
||||
{
|
||||
image: "https://github.com/shadcn.png",
|
||||
name: "John Doe React",
|
||||
userName: "@john_Doe1",
|
||||
comment:
|
||||
"Lorem ipsum dolor sit amet,empor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.",
|
||||
},
|
||||
|
||||
{
|
||||
image: "https://github.com/shadcn.png",
|
||||
name: "John Doe React",
|
||||
userName: "@john_Doe2",
|
||||
comment:
|
||||
"Lorem ipsum dolor sit amet,exercitation. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.",
|
||||
},
|
||||
{
|
||||
image: "https://github.com/shadcn.png",
|
||||
name: "John Doe React",
|
||||
userName: "@john_Doe3",
|
||||
comment:
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.",
|
||||
},
|
||||
{
|
||||
image: "https://github.com/shadcn.png",
|
||||
name: "John Doe React",
|
||||
userName: "@john_Doe4",
|
||||
comment:
|
||||
"Lorem ipsum dolor sit amet, tempor incididunt aliqua. Ut enim ad minim veniam, quis nostrud.",
|
||||
},
|
||||
{
|
||||
image: "https://github.com/shadcn.png",
|
||||
name: "John Doe React",
|
||||
userName: "@john_Doe5",
|
||||
comment:
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
|
||||
},
|
||||
];
|
||||
|
||||
export const Testimonials = () => {
|
||||
return (
|
||||
<section
|
||||
id="testimonials"
|
||||
className="container py-24 sm:py-32"
|
||||
>
|
||||
<h2 className="text-3xl md:text-4xl font-bold">
|
||||
Discover Why
|
||||
<span className="bg-gradient-to-b from-primary/60 to-primary text-transparent bg-clip-text">
|
||||
{" "}
|
||||
People Love{" "}
|
||||
</span>
|
||||
This Landing Page
|
||||
</h2>
|
||||
|
||||
<p className="text-xl text-muted-foreground pt-4 pb-8">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non unde error
|
||||
facere hic reiciendis illo
|
||||
</p>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 sm:block columns-2 lg:columns-3 lg:gap-6 mx-auto space-y-4 lg:space-y-6">
|
||||
{testimonials.map(
|
||||
({ image, name, userName, comment }: TestimonialProps) => (
|
||||
<Card
|
||||
key={userName}
|
||||
className="max-w-md md:break-inside-avoid overflow-hidden"
|
||||
>
|
||||
<CardHeader className="flex flex-row items-center gap-4 pb-2">
|
||||
<Avatar>
|
||||
<AvatarImage
|
||||
alt=""
|
||||
src={image}
|
||||
/>
|
||||
<AvatarFallback>OM</AvatarFallback>
|
||||
</Avatar>
|
||||
|
||||
<div className="flex flex-col">
|
||||
<CardTitle className="text-lg">{name}</CardTitle>
|
||||
<CardDescription>{userName}</CardDescription>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent>{comment}</CardContent>
|
||||
</Card>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@@ -21,16 +21,12 @@ function Landing() {
|
||||
<ThemeProvider>
|
||||
<Navbar />
|
||||
<Hero />
|
||||
<Sponsors />
|
||||
<About />
|
||||
<HowItWorks />
|
||||
<Features />
|
||||
<Services />
|
||||
<Cta />
|
||||
<Testimonials />
|
||||
<Team />
|
||||
<Pricing />
|
||||
<Newsletter />
|
||||
<FAQ />
|
||||
<Footer />
|
||||
<ScrollToTop />
|
||||
|
||||
Reference in New Issue
Block a user