[feat] Landing update
This commit is contained in:
@@ -1,4 +1,3 @@
|
||||
import { Statistics } from "./Statistics";
|
||||
import pilot from "../assets/pilot.png";
|
||||
|
||||
export const About = () => {
|
||||
@@ -20,18 +19,12 @@ export const About = () => {
|
||||
<span className="bg-gradient-to-b from-primary/60 to-primary text-transparent bg-clip-text">
|
||||
About{" "}
|
||||
</span>
|
||||
Company
|
||||
SkillHub
|
||||
</h2>
|
||||
<p className="text-xl text-muted-foreground mt-4">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit
|
||||
amet, consectetur adipiscing elit.
|
||||
SkillHub is a free to use service to easily craete balanced and dedicated teams for hackatons. Our clever algorithms will help you find and create the best team for you.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Statistics />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,38 +0,0 @@
|
||||
import { Button } from "./ui/button";
|
||||
|
||||
export const Cta = () => {
|
||||
return (
|
||||
<section
|
||||
id="cta"
|
||||
className="bg-muted/50 py-16 my-24 sm:my-32"
|
||||
>
|
||||
<div className="container lg:grid lg:grid-cols-2 place-items-center">
|
||||
<div className="lg:col-start-1">
|
||||
<h2 className="text-3xl md:text-4xl font-bold ">
|
||||
All Your
|
||||
<span className="bg-gradient-to-b from-primary/60 to-primary text-transparent bg-clip-text">
|
||||
{" "}
|
||||
Ideas & Concepts{" "}
|
||||
</span>
|
||||
In One Interface
|
||||
</h2>
|
||||
<p className="text-muted-foreground text-xl mt-4 mb-8 lg:mb-0">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque,
|
||||
beatae. Ipsa tempore ipsum iste quibusdam illum ducimus eos. Quasi,
|
||||
sed!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 lg:col-start-2">
|
||||
<Button className="w-full md:mr-4 md:w-auto">Request a Demo</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full md:w-auto"
|
||||
>
|
||||
View all features
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@@ -13,35 +13,16 @@ interface FAQProps {
|
||||
|
||||
const FAQList: FAQProps[] = [
|
||||
{
|
||||
question: "Is this template free?",
|
||||
answer: "Yes. It is a free ChadcnUI template.",
|
||||
question: "Is this service free?",
|
||||
answer: "Yes. It is a free to use service.",
|
||||
value: "item-1",
|
||||
},
|
||||
{
|
||||
question: "Lorem ipsum dolor sit amet consectetur adipisicing elit?",
|
||||
question: "How it works?",
|
||||
answer:
|
||||
"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint labore quidem quam? Consectetur sapiente iste rerum reiciendis animi nihil nostrum sit quo, modi quod.",
|
||||
"It finds the best matches for you and requirements of event to cover all skills needed for the event.",
|
||||
value: "item-2",
|
||||
},
|
||||
{
|
||||
question:
|
||||
"Lorem ipsum dolor sit amet Consectetur natus dolores minus quibusdam?",
|
||||
answer:
|
||||
"Lorem ipsum dolor sit amet consectetur, adipisicing elit. Labore qui nostrum reiciendis veritatis necessitatibus maxime quis ipsa vitae cumque quo?",
|
||||
value: "item-3",
|
||||
},
|
||||
{
|
||||
question: "Lorem ipsum dolor sit amet, consectetur adipisicing elit?",
|
||||
answer: "Lorem ipsum dolor sit amet consectetur, adipisicing elit.",
|
||||
value: "item-4",
|
||||
},
|
||||
{
|
||||
question:
|
||||
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur natus?",
|
||||
answer:
|
||||
"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint labore quidem quam? Consectetur sapiente iste rerum reiciendis animi nihil nostrum sit quo, modi quod.",
|
||||
value: "item-5",
|
||||
},
|
||||
}
|
||||
];
|
||||
|
||||
export const FAQ = () => {
|
||||
|
||||
@@ -8,144 +8,53 @@ export const Footer = () => {
|
||||
<section className="container py-20 grid grid-cols-2 md:grid-cols-4 xl:grid-cols-6 gap-x-12 gap-y-8">
|
||||
<div className="col-span-full xl:col-span-2">
|
||||
<a
|
||||
href="/"
|
||||
href="#"
|
||||
className="font-bold text-xl flex"
|
||||
>
|
||||
<LogoIcon />
|
||||
ShadcnUI/React
|
||||
SkillHub
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<h3 className="font-bold text-lg">Follow US</h3>
|
||||
<div>
|
||||
<a
|
||||
href="#"
|
||||
className="opacity-60 hover:opacity-100"
|
||||
>
|
||||
Github
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<a
|
||||
href="#"
|
||||
className="opacity-60 hover:opacity-100"
|
||||
>
|
||||
Twitter
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<a
|
||||
href="#"
|
||||
className="opacity-60 hover:opacity-100"
|
||||
>
|
||||
Dribbble
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<h3 className="font-bold text-lg">Platforms</h3>
|
||||
<div>
|
||||
<a
|
||||
href="#"
|
||||
className="opacity-60 hover:opacity-100"
|
||||
>
|
||||
Web
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<a
|
||||
href="#"
|
||||
className="opacity-60 hover:opacity-100"
|
||||
>
|
||||
Mobile
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<a
|
||||
href="#"
|
||||
className="opacity-60 hover:opacity-100"
|
||||
>
|
||||
Desktop
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<h3 className="font-bold text-lg">About</h3>
|
||||
<div>
|
||||
<a
|
||||
href="#"
|
||||
href="#howItWorks"
|
||||
className="opacity-60 hover:opacity-100"
|
||||
>
|
||||
Features
|
||||
How it works
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<a
|
||||
href="#"
|
||||
href="#team"
|
||||
className="opacity-60 hover:opacity-100"
|
||||
>
|
||||
Pricing
|
||||
Team
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<a
|
||||
href="#"
|
||||
href="#faq"
|
||||
className="opacity-60 hover:opacity-100"
|
||||
>
|
||||
FAQ
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<h3 className="font-bold text-lg">Community</h3>
|
||||
<div>
|
||||
<a
|
||||
href="#"
|
||||
className="opacity-60 hover:opacity-100"
|
||||
>
|
||||
Youtube
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<a
|
||||
href="#"
|
||||
className="opacity-60 hover:opacity-100"
|
||||
>
|
||||
Discord
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<a
|
||||
href="#"
|
||||
className="opacity-60 hover:opacity-100"
|
||||
>
|
||||
Twitch
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="container pb-14 text-center">
|
||||
<h3>
|
||||
© 2024 Landing page made by{" "}
|
||||
© 2024{" "}
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://github.com/leoMirandaa"
|
||||
href="#"
|
||||
className="text-primary transition-all border-primary hover:border-b-2"
|
||||
>
|
||||
Leo Miranda
|
||||
Animulichki
|
||||
</a>
|
||||
</h3>
|
||||
</section>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Button } from "./ui/button";
|
||||
import { buttonVariants } from "./ui/button";
|
||||
import { HeroCards } from "./HeroCards";
|
||||
import { GitHubLogoIcon } from "@radix-ui/react-icons";
|
||||
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
export const Hero = () => {
|
||||
return (
|
||||
@@ -10,45 +10,34 @@ export const Hero = () => {
|
||||
<main className="text-5xl md:text-6xl font-bold">
|
||||
<h1 className="inline">
|
||||
<span className="inline bg-gradient-to-r from-[#F596D3] to-[#D247BF] text-transparent bg-clip-text">
|
||||
Shadcn
|
||||
SkillHub
|
||||
</span>{" "}
|
||||
landing page
|
||||
</h1>{" "}
|
||||
for{" "}
|
||||
<h2 className="inline">
|
||||
<span className="inline bg-gradient-to-r from-[#61DAFB] via-[#1fc0f1] to-[#03a3d7] text-transparent bg-clip-text">
|
||||
React
|
||||
Organizations
|
||||
</span>{" "}
|
||||
developers
|
||||
</h2>
|
||||
</main>
|
||||
|
||||
<p className="text-xl text-muted-foreground md:w-10/12 mx-auto lg:mx-0">
|
||||
Build your React landing page effortlessly with the required sections
|
||||
to your project.
|
||||
Build dream teams for hackatons depends on your needs from scratch
|
||||
with SkillHub.
|
||||
</p>
|
||||
|
||||
<div className="space-y-4 md:space-y-0 md:space-x-4">
|
||||
<Button className="w-full md:w-1/3">Get Started</Button>
|
||||
|
||||
<a
|
||||
href="https://github.com/leoMirandaa/shadcn-landing-page.git"
|
||||
target="_blank"
|
||||
className={`w-full md:w-1/3 ${buttonVariants({
|
||||
variant: "outline",
|
||||
<Link
|
||||
to={"login"}
|
||||
className={`w-full md:w-1/3 border ${buttonVariants({
|
||||
variant: "default",
|
||||
})}`}
|
||||
>
|
||||
Github Repository
|
||||
<GitHubLogoIcon className="ml-2 w-5 h-5" />
|
||||
</a>
|
||||
Get started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Hero cards sections */}
|
||||
<div className="z-10">
|
||||
<HeroCards />
|
||||
</div>
|
||||
|
||||
{/* Shadow effect */}
|
||||
<div className="shadow"></div>
|
||||
</section>
|
||||
|
||||
@@ -1,170 +0,0 @@
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
|
||||
import { Badge } from "./ui/badge";
|
||||
import { Button, buttonVariants } from "../components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
CardFooter,
|
||||
} from "../components/ui/card";
|
||||
import { Check, Linkedin } from "lucide-react";
|
||||
import { LightBulbIcon } from "./Icons";
|
||||
import { GitHubLogoIcon } from "@radix-ui/react-icons";
|
||||
|
||||
export const HeroCards = () => {
|
||||
return (
|
||||
<div className="hidden lg:flex flex-row flex-wrap gap-8 relative w-[700px] h-[500px]">
|
||||
{/* Testimonial */}
|
||||
<Card className="absolute w-[340px] -top-[15px] drop-shadow-xl shadow-black/10 dark:shadow-white/10">
|
||||
<CardHeader className="flex flex-row items-center gap-4 pb-2">
|
||||
<Avatar>
|
||||
<AvatarImage
|
||||
alt=""
|
||||
src="https://github.com/shadcn.png"
|
||||
/>
|
||||
<AvatarFallback>SH</AvatarFallback>
|
||||
</Avatar>
|
||||
|
||||
<div className="flex flex-col">
|
||||
<CardTitle className="text-lg">John Doe React</CardTitle>
|
||||
<CardDescription>@john_doe</CardDescription>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent>This landig page is awesome!</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Team */}
|
||||
<Card className="absolute right-[20px] top-4 w-80 flex flex-col justify-center items-center drop-shadow-xl shadow-black/10 dark:shadow-white/10">
|
||||
<CardHeader className="mt-8 flex justify-center items-center pb-2">
|
||||
<img
|
||||
src="https://i.pravatar.cc/150?img=58"
|
||||
alt="user avatar"
|
||||
className="absolute grayscale-[0%] -top-12 rounded-full w-24 h-24 aspect-square object-cover"
|
||||
/>
|
||||
<CardTitle className="text-center">Leo Miranda</CardTitle>
|
||||
<CardDescription className="font-normal text-primary">
|
||||
Frontend Developer
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="text-center pb-2">
|
||||
<p>
|
||||
I really enjoy transforming ideas into functional software that
|
||||
exceeds expectations
|
||||
</p>
|
||||
</CardContent>
|
||||
|
||||
<CardFooter>
|
||||
<div>
|
||||
<a
|
||||
href="https://github.com/leoMirandaa"
|
||||
target="_blank"
|
||||
className={buttonVariants({
|
||||
variant: "ghost",
|
||||
size: "sm",
|
||||
})}
|
||||
>
|
||||
<span className="sr-only">Github icon</span>
|
||||
<GitHubLogoIcon className="w-5 h-5" />
|
||||
</a>
|
||||
<a
|
||||
href="https://twitter.com/leo_mirand4"
|
||||
target="_blank"
|
||||
className={buttonVariants({
|
||||
variant: "ghost",
|
||||
size: "sm",
|
||||
})}
|
||||
>
|
||||
<span className="sr-only">X icon</span>
|
||||
<svg
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="fill-foreground w-5 h-5"
|
||||
>
|
||||
<title>X</title>
|
||||
<path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z" />
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://www.linkedin.com/"
|
||||
target="_blank"
|
||||
className={buttonVariants({
|
||||
variant: "ghost",
|
||||
size: "sm",
|
||||
})}
|
||||
>
|
||||
<span className="sr-only">Linkedin icon</span>
|
||||
<Linkedin size="20" />
|
||||
</a>
|
||||
</div>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
|
||||
{/* Pricing */}
|
||||
<Card className="absolute top-[150px] left-[50px] w-72 drop-shadow-xl shadow-black/10 dark:shadow-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex item-center justify-between">
|
||||
Free
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="text-sm text-primary"
|
||||
>
|
||||
Most popular
|
||||
</Badge>
|
||||
</CardTitle>
|
||||
<div>
|
||||
<span className="text-3xl font-bold">$0</span>
|
||||
<span className="text-muted-foreground"> /month</span>
|
||||
</div>
|
||||
|
||||
<CardDescription>
|
||||
Lorem ipsum dolor sit, amet ipsum consectetur adipisicing elit.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent>
|
||||
<Button className="w-full">Start Free Trial</Button>
|
||||
</CardContent>
|
||||
|
||||
<hr className="w-4/5 m-auto mb-4" />
|
||||
|
||||
<CardFooter className="flex">
|
||||
<div className="space-y-4">
|
||||
{["4 Team member", "4 GB Storage", "Upto 6 pages"].map(
|
||||
(benefit: string) => (
|
||||
<span
|
||||
key={benefit}
|
||||
className="flex"
|
||||
>
|
||||
<Check className="text-green-500" />{" "}
|
||||
<h3 className="ml-2">{benefit}</h3>
|
||||
</span>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
|
||||
{/* Service */}
|
||||
<Card className="absolute w-[350px] -right-[10px] bottom-[35px] drop-shadow-xl shadow-black/10 dark:shadow-white/10">
|
||||
<CardHeader className="space-y-1 flex md:flex-row justify-start items-start gap-4">
|
||||
<div className="mt-1 bg-primary/20 p-1 rounded-2xl">
|
||||
<LightBulbIcon />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle>Light & dark mode</CardTitle>
|
||||
<CardDescription className="text-md mt-2">
|
||||
Lorem ipsum dolor sit amet consect adipisicing elit. Consectetur
|
||||
natusm.
|
||||
</CardDescription>
|
||||
</div>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -8,29 +8,29 @@ interface FeatureProps {
|
||||
}
|
||||
|
||||
const features: FeatureProps[] = [
|
||||
{
|
||||
icon: <MedalIcon />,
|
||||
title: "Accesibility",
|
||||
description:
|
||||
"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum quas provident cum",
|
||||
},
|
||||
{
|
||||
icon: <MapIcon />,
|
||||
title: "Community",
|
||||
title: "Events",
|
||||
description:
|
||||
"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum quas provident cum",
|
||||
},
|
||||
{
|
||||
icon: <PlaneIcon />,
|
||||
title: "Scalability",
|
||||
description:
|
||||
"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum quas provident cum",
|
||||
"Organizator creates an event where participants can join.",
|
||||
},
|
||||
{
|
||||
icon: <GiftIcon />,
|
||||
title: "Gamification",
|
||||
title: "Data",
|
||||
description:
|
||||
"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum quas provident cum",
|
||||
"Organizator can import users data from excel or participants can register via form.",
|
||||
},
|
||||
{
|
||||
icon: <PlaneIcon />,
|
||||
title: "Algorythm",
|
||||
description:
|
||||
"Organizator runs algorythm on users data and algrorythm creates dream teams.",
|
||||
},
|
||||
{
|
||||
icon: <MedalIcon />,
|
||||
title: "Results",
|
||||
description:
|
||||
"Organizator can view teams and it's strength and participants get email with results.",
|
||||
},
|
||||
];
|
||||
|
||||
@@ -48,8 +48,7 @@ export const HowItWorks = () => {
|
||||
Step-by-Step Guide
|
||||
</h2>
|
||||
<p className="md:w-3/4 mx-auto mt-4 mb-8 text-xl text-muted-foreground">
|
||||
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veritatis
|
||||
dolor pariatur sit!
|
||||
Our service is easy-to-use and intuitive to use.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import {
|
||||
NavigationMenu,
|
||||
NavigationMenuItem,
|
||||
@@ -12,7 +13,6 @@ import {
|
||||
SheetTrigger,
|
||||
} from "../components/ui/sheet";
|
||||
|
||||
import { GitHubLogoIcon } from "@radix-ui/react-icons";
|
||||
import { buttonVariants } from "./ui/button";
|
||||
import { Menu } from "lucide-react";
|
||||
import { ModeToggle } from "./mode-toggle";
|
||||
@@ -25,16 +25,16 @@ interface RouteProps {
|
||||
|
||||
const routeList: RouteProps[] = [
|
||||
{
|
||||
href: "#features",
|
||||
label: "Features",
|
||||
href: "#about",
|
||||
label: "About",
|
||||
},
|
||||
{
|
||||
href: "#testimonials",
|
||||
label: "Testimonials",
|
||||
href: "#howItWorks",
|
||||
label: "How it works",
|
||||
},
|
||||
{
|
||||
href: "#pricing",
|
||||
label: "Pricing",
|
||||
href: "#team",
|
||||
label: "Team",
|
||||
},
|
||||
{
|
||||
href: "#faq",
|
||||
@@ -45,16 +45,13 @@ const routeList: RouteProps[] = [
|
||||
export const Navbar = () => {
|
||||
const [isOpen, setIsOpen] = useState<boolean>(false);
|
||||
return (
|
||||
<header className="sticky border-b-[1px] top-0 z-40 w-full bg-white dark:border-b-slate-700 dark:bg-background">
|
||||
<header className="sticky border-b-[1px] top-0 z-40 w-full bg-white dark:border-b-slate-700 dark:bg-background" style={{overflow: "hidden"}}>
|
||||
<NavigationMenu className="mx-auto">
|
||||
<NavigationMenuList className="container h-14 px-4 w-screen flex justify-between ">
|
||||
<NavigationMenuItem className="font-bold flex">
|
||||
<a
|
||||
href="/"
|
||||
className="ml-2 font-bold text-xl flex"
|
||||
>
|
||||
<a href="#" className="ml-2 font-bold text-xl flex">
|
||||
<LogoIcon />
|
||||
ShadcnUI/React
|
||||
SkillHub
|
||||
</a>
|
||||
</NavigationMenuItem>
|
||||
|
||||
@@ -62,10 +59,7 @@ export const Navbar = () => {
|
||||
<span className="flex md:hidden">
|
||||
<ModeToggle />
|
||||
|
||||
<Sheet
|
||||
open={isOpen}
|
||||
onOpenChange={setIsOpen}
|
||||
>
|
||||
<Sheet open={isOpen} onOpenChange={setIsOpen}>
|
||||
<SheetTrigger className="px-2">
|
||||
<Menu
|
||||
className="flex md:hidden h-5 w-5"
|
||||
@@ -78,7 +72,7 @@ export const Navbar = () => {
|
||||
<SheetContent side={"left"}>
|
||||
<SheetHeader>
|
||||
<SheetTitle className="font-bold text-xl">
|
||||
Shadcn/React
|
||||
SkillHub
|
||||
</SheetTitle>
|
||||
</SheetHeader>
|
||||
<nav className="flex flex-col justify-center items-center gap-2 mt-4">
|
||||
@@ -92,16 +86,14 @@ export const Navbar = () => {
|
||||
{label}
|
||||
</a>
|
||||
))}
|
||||
<a
|
||||
href="https://github.com/leoMirandaa/shadcn-landing-page.git"
|
||||
target="_blank"
|
||||
<Link
|
||||
to={"login"}
|
||||
className={`w-[110px] border ${buttonVariants({
|
||||
variant: "secondary",
|
||||
variant: "default",
|
||||
})}`}
|
||||
>
|
||||
<GitHubLogoIcon className="mr-2 w-5 h-5" />
|
||||
Github
|
||||
</a>
|
||||
Login
|
||||
</Link>
|
||||
</nav>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
@@ -123,16 +115,12 @@ export const Navbar = () => {
|
||||
</nav>
|
||||
|
||||
<div className="hidden md:flex gap-2">
|
||||
<a
|
||||
href="https://github.com/leoMirandaa/shadcn-landing-page.git"
|
||||
target="_blank"
|
||||
className={`border ${buttonVariants({ variant: "secondary" })}`}
|
||||
<Link
|
||||
to={"login"}
|
||||
className={`border ${buttonVariants({ variant: "default" })}`}
|
||||
>
|
||||
<GitHubLogoIcon className="mr-2 w-5 h-5" />
|
||||
Github
|
||||
</a>
|
||||
|
||||
<ModeToggle />
|
||||
Login
|
||||
</Link>
|
||||
</div>
|
||||
</NavigationMenuList>
|
||||
</NavigationMenu>
|
||||
|
||||
@@ -1,41 +0,0 @@
|
||||
export const Statistics = () => {
|
||||
interface statsProps {
|
||||
quantity: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
const stats: statsProps[] = [
|
||||
{
|
||||
quantity: "2.7K+",
|
||||
description: "Users",
|
||||
},
|
||||
{
|
||||
quantity: "1.8K+",
|
||||
description: "Subscribers",
|
||||
},
|
||||
{
|
||||
quantity: "112",
|
||||
description: "Downloads",
|
||||
},
|
||||
{
|
||||
quantity: "4",
|
||||
description: "Products",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section id="statistics">
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{stats.map(({ quantity, description }: statsProps) => (
|
||||
<div
|
||||
key={description}
|
||||
className="space-y-2 text-center"
|
||||
>
|
||||
<h2 className="text-3xl sm:text-4xl font-bold ">{quantity}</h2>
|
||||
<p className="text-xl text-muted-foreground">{description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@@ -7,7 +7,7 @@ import {
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "../components/ui/card";
|
||||
import { Facebook, Instagram, Linkedin } from "lucide-react";
|
||||
import { Facebook, Instagram, Linkedin, Github } from "lucide-react";
|
||||
|
||||
interface TeamProps {
|
||||
imageUrl: string;
|
||||
@@ -23,75 +23,44 @@ interface SociaNetworkslProps {
|
||||
|
||||
const teamList: TeamProps[] = [
|
||||
{
|
||||
imageUrl: "https://i.pravatar.cc/150?img=35",
|
||||
name: "Emma Smith",
|
||||
position: "Product Manager",
|
||||
imageUrl: "https://raw.githubusercontent.com/devitq/devitq/main/logo.png",
|
||||
name: "ITQ",
|
||||
position: "Backend & Frontend Developer",
|
||||
socialNetworks: [
|
||||
{ name: "Linkedin", url: "http://linkedin.com" },
|
||||
{
|
||||
name: "Facebook",
|
||||
url: "https://www.facebook.com/",
|
||||
},
|
||||
{
|
||||
name: "Instagram",
|
||||
url: "https://www.instagram.com/",
|
||||
},
|
||||
{ name: "GitHub", url: "https://github.com/devitq" },
|
||||
],
|
||||
},
|
||||
{
|
||||
imageUrl: "https://i.pravatar.cc/150?img=60",
|
||||
name: "John Doe",
|
||||
position: "Tech Lead",
|
||||
socialNetworks: [
|
||||
{ name: "Linkedin", url: "http://linkedin.com" },
|
||||
{
|
||||
name: "Facebook",
|
||||
url: "https://www.facebook.com/",
|
||||
},
|
||||
{
|
||||
name: "Instagram",
|
||||
url: "https://www.instagram.com/",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
imageUrl: "https://i.pravatar.cc/150?img=36",
|
||||
name: "Ashley Ross",
|
||||
position: "Frontend Developer",
|
||||
socialNetworks: [
|
||||
{ name: "Linkedin", url: "http://linkedin.com" },
|
||||
|
||||
{
|
||||
name: "Instagram",
|
||||
url: "https://www.instagram.com/",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
imageUrl: "https://i.pravatar.cc/150?img=17",
|
||||
name: "Bruce Rogers",
|
||||
imageUrl: "https://cdn.discordapp.com/avatars/745800190413373472/db4cd19e6d80f9cfa29e09a43ddbcb28",
|
||||
name: "Pigeon",
|
||||
position: "Backend Developer",
|
||||
socialNetworks: [
|
||||
{ name: "Linkedin", url: "http://linkedin.com" },
|
||||
{
|
||||
name: "Facebook",
|
||||
url: "https://www.facebook.com/",
|
||||
socialNetworks: [],
|
||||
},
|
||||
],
|
||||
{
|
||||
imageUrl: "https://cdn.discordapp.com/avatars/875043365815717888/2a6ddca40c178c5e91a55c52889f8a98",
|
||||
name: "Timkaoch",
|
||||
position: "Backend Developer",
|
||||
socialNetworks: [],
|
||||
},
|
||||
{
|
||||
imageUrl: "https://cdn.discordapp.com/avatars/743444918197944400/6dcfc04c3931fa5c89e9580eb5f7c655",
|
||||
name: "Data Name ID",
|
||||
position: "Backend Developer",
|
||||
socialNetworks: [],
|
||||
},
|
||||
{
|
||||
imageUrl: "https://cdn.discordapp.com/avatars/545655609005965345/78d2c594eb858d3bb393928a67ef8731",
|
||||
name: "OMGKawaiiQueli!",
|
||||
position: "Frontend Developer",
|
||||
socialNetworks: [],
|
||||
},
|
||||
];
|
||||
|
||||
export const Team = () => {
|
||||
const socialIcon = (iconName: string) => {
|
||||
switch (iconName) {
|
||||
case "Linkedin":
|
||||
return <Linkedin size="20" />;
|
||||
|
||||
case "Facebook":
|
||||
return <Facebook size="20" />;
|
||||
|
||||
case "Instagram":
|
||||
return <Instagram size="20" />;
|
||||
case "GitHub":
|
||||
return <Github size="20" />;
|
||||
}
|
||||
};
|
||||
|
||||
@@ -108,8 +77,7 @@ export const Team = () => {
|
||||
</h2>
|
||||
|
||||
<p className="mt-4 mb-10 text-xl text-muted-foreground">
|
||||
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veritatis
|
||||
dolor pariatur sit!
|
||||
Our team Animulichki contains 5 dedicated web developers
|
||||
</p>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8 gap-y-10">
|
||||
@@ -132,7 +100,7 @@ export const Team = () => {
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="text-center pb-2">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
|
||||
<p></p>
|
||||
</CardContent>
|
||||
|
||||
<CardFooter>
|
||||
|
||||
@@ -1,18 +1,13 @@
|
||||
import { About } from "../../About";
|
||||
import { Cta } from "../../Cta";
|
||||
import { FAQ } from "../../FAQ";
|
||||
import { Features } from "../../Features";
|
||||
import { Footer } from "../../Footer";
|
||||
import { Hero } from "../../Hero";
|
||||
import { HowItWorks } from "../../HowItWorks";
|
||||
import { Navbar } from "../../Navbar";
|
||||
import { Newsletter } from "../../Newsletter";
|
||||
import { Pricing } from "../../Pricing";
|
||||
import { ScrollToTop } from "../../ScrollToTop";
|
||||
import { Services } from "../../Services";
|
||||
import { Sponsors } from "../../Sponsors";
|
||||
import { Team } from "../../Team";
|
||||
import { Testimonials } from "../../Testimonials";
|
||||
import "../../../App.css";
|
||||
import { ThemeProvider } from "../../theme-provider.tsx";
|
||||
|
||||
@@ -23,9 +18,8 @@ function Landing() {
|
||||
<Hero />
|
||||
<About />
|
||||
<HowItWorks />
|
||||
<Features />
|
||||
<Services />
|
||||
<Cta />
|
||||
{/* <Features />
|
||||
<Services /> */}
|
||||
<Team />
|
||||
<FAQ />
|
||||
<Footer />
|
||||
|
||||
@@ -17,7 +17,7 @@ const Main = () => {
|
||||
<div className={less["general-left"]}>
|
||||
<form className={less["input-form"]} onSubmit={(event) => submitRegister(event, navigate)}>
|
||||
<h1 className={less["title-form"]}>{t("entrance")}</h1>
|
||||
<Input type="text" name="first_name" placeholder="Name" />
|
||||
<Input type="text" name="first_name" placeholder="First name" />
|
||||
<Input type="text" name="last_name" placeholder="Last name" />
|
||||
<Input type="date" name="birth_date" placeholder="Date" />
|
||||
<Input type="email" name="email" placeholder="Email" />
|
||||
@@ -29,7 +29,7 @@ const Main = () => {
|
||||
<Button variant="link" asChild><Link to={"/dash/admin"}>{t("iorganizer")}</Link></Button>
|
||||
|
||||
</div>
|
||||
<div className={less["general-right"]}>
|
||||
<div className={less["general-right"] + " shadow"}>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,61 +1,17 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
Menubar,
|
||||
MenubarContent,
|
||||
MenubarItem,
|
||||
MenubarMenu,
|
||||
MenubarSeparator,
|
||||
MenubarShortcut,
|
||||
|
||||
MenubarTrigger,
|
||||
} from "../../shared/ui/menubar"
|
||||
import {
|
||||
Dialog,
|
||||
DialogTrigger,
|
||||
} from "../../shared/ui/dialog"
|
||||
|
||||
import less from "./Header.module.less"
|
||||
import { ResetIcon } from "@radix-ui/react-icons";
|
||||
|
||||
import { Separator } from "../../shared/ui/separator";
|
||||
import { ModeToggle } from "../../mode-toggle";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
|
||||
const Header = () => {
|
||||
const { t, i18n } = useTranslation();
|
||||
const handleTrans = (code: string) => {
|
||||
i18n.changeLanguage(code);
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<header className={less.header}>
|
||||
<Link to={"/"}><img className={less.logo} src='/logo.svg'></img></Link>
|
||||
<div className={less["line-block"]}>
|
||||
<Menubar>
|
||||
<MenubarMenu>
|
||||
<MenubarTrigger >{t("flag")} {t("langCode").toUpperCase()}</MenubarTrigger>
|
||||
<MenubarContent>
|
||||
<MenubarItem onClick={() => handleTrans("ru")}>
|
||||
🇷🇺 RU<MenubarShortcut>⌘R</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarItem onClick={() => handleTrans("en")}>
|
||||
🇬🇧 EN <MenubarShortcut>⌘E</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarItem onClick={() => handleTrans("zh")}>
|
||||
🇨🇳 ZH <MenubarShortcut>⌘Z</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarSeparator />
|
||||
<MenubarItem onClick={() => handleTrans(navigator.language)}>System language<MenubarShortcut><ResetIcon /></MenubarShortcut></MenubarItem>
|
||||
</MenubarContent>
|
||||
</MenubarMenu>
|
||||
<ModeToggle />
|
||||
|
||||
</Menubar>
|
||||
</div>
|
||||
|
||||
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
+23
-24
@@ -1,11 +1,9 @@
|
||||
import i18n from 'i18next';
|
||||
import { initReactI18next } from 'react-i18next';
|
||||
import i18n from "i18next";
|
||||
import { initReactI18next } from "react-i18next";
|
||||
|
||||
i18n
|
||||
.use(initReactI18next)
|
||||
.init({
|
||||
debug: true,
|
||||
fallbackLng: 'ru',
|
||||
i18n.use(initReactI18next).init({
|
||||
debug: false,
|
||||
fallbackLng: "en",
|
||||
interpolation: {
|
||||
escapeValue: false,
|
||||
},
|
||||
@@ -25,17 +23,19 @@ i18n
|
||||
login: "Авторизация",
|
||||
registration: "Регистрация",
|
||||
loginHeader: "Введите адрес электронной почты и пароль, чтобы начать.",
|
||||
regHeader: "Введите юзернейм, почту и пароль, чтобы зарегистрироваться.",
|
||||
regHeader:
|
||||
"Введите юзернейм, почту и пароль, чтобы зарегистрироваться.",
|
||||
buttonLoginInSystem: "Войти в систему",
|
||||
buttonRegInSystemStep1: "Продолжить",
|
||||
buttonGoTOReg: "Приступить к регистрации!",
|
||||
landingLogo: "Упростим подбор!",
|
||||
landingDesc: "Сделаем вашу жизнь проще! Забудьте о долгом переборе как о нудной рутине!",
|
||||
landingDesc:
|
||||
"Сделаем вашу жизнь проще! Забудьте о долгом переборе как о нудной рутине!",
|
||||
respondRequest: "Откликнуться на заявку",
|
||||
vacancy: "Вакансии",
|
||||
iorganizer: "Я организатор",
|
||||
viewingProfile: "Просмотр профиля",
|
||||
skills:"Скиллы",
|
||||
skills: "Скиллы",
|
||||
age: "Возраст",
|
||||
EditTree: "Редактировать дерево",
|
||||
DistTeams: "Распределение команд",
|
||||
@@ -44,9 +44,7 @@ i18n
|
||||
descDownload: "Скачать XLS таблицу",
|
||||
open: "Открыть",
|
||||
createEvent: "Создать ивент",
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
},
|
||||
en: {
|
||||
translation: {
|
||||
@@ -64,16 +62,17 @@ i18n
|
||||
login: "Log in",
|
||||
registration: "Sign up",
|
||||
loginHeader: " Enter your email address and password to get started.",
|
||||
buttonLoginInSystem: "log in",
|
||||
buttonLoginInSystem: "Log in",
|
||||
buttonRegInSystemStep1: "Continue",
|
||||
buttonGoTOReg: "Proceed with registration!",
|
||||
landingLogo: "Let's simplify the selection!",
|
||||
landingDesc:"Let's make your life easier! Forget about the long search as a tedious routine!",
|
||||
landingDesc:
|
||||
"Let's make your life easier! Forget about the long search as a tedious routine!",
|
||||
respondRequest: "respond to the request",
|
||||
vacancy: "vacancy",
|
||||
vacancy: "Vacancy",
|
||||
iorganizer: "I'm the organizer",
|
||||
viewingProfile: "Viewing a profile",
|
||||
skills:"Skills",
|
||||
skills: "Skills",
|
||||
age: "Age",
|
||||
EditTree: "Edit the tree",
|
||||
DistTeams: "Distribution of teams",
|
||||
@@ -82,7 +81,7 @@ i18n
|
||||
descDownload: "Download the XLS table",
|
||||
open: "Open",
|
||||
createEvent: "Сreate Event",
|
||||
}
|
||||
},
|
||||
},
|
||||
zh: {
|
||||
translation: {
|
||||
@@ -103,12 +102,13 @@ i18n
|
||||
buttonRegInSystemStep1: "继续",
|
||||
buttonGoTOReg: "继续登记！",
|
||||
landingLogo: "让我们简化选择！",
|
||||
landingDesc: "让我们让你的生活更轻松！ 忘记长时间的搜索作为一个繁琐的例程！",
|
||||
landingDesc:
|
||||
"让我们让你的生活更轻松！ 忘记长时间的搜索作为一个繁琐的例程！",
|
||||
respondRequest: "响应请求",
|
||||
vacancy: "职位空缺",
|
||||
iorganizer: "我是组织者",
|
||||
viewingProfile: "查看个人资料",
|
||||
skills:"技能",
|
||||
skills: "技能",
|
||||
age: "年龄",
|
||||
EditTree: "编辑树",
|
||||
DistTeams: "团队分布",
|
||||
@@ -117,10 +117,9 @@ i18n
|
||||
descDownload: "下载XLS表",
|
||||
open: "打开",
|
||||
createEvent: "创建一个事件",
|
||||
|
||||
}
|
||||
},
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export default i18n;
|
||||
|
||||
Reference in New Issue
Block a user