[feat] Landing update

This commit is contained in:
ITQ
2024-04-02 19:26:14 +03:00
parent 196044bdac
commit 4c6a5ff723
14 changed files with 194 additions and 667 deletions
+2 -9
View File
@@ -1,4 +1,3 @@
import { Statistics } from "./Statistics";
import pilot from "../assets/pilot.png"; import pilot from "../assets/pilot.png";
export const About = () => { 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"> <span className="bg-gradient-to-b from-primary/60 to-primary text-transparent bg-clip-text">
About{" "} About{" "}
</span> </span>
Company SkillHub
</h2> </h2>
<p className="text-xl text-muted-foreground mt-4"> <p className="text-xl text-muted-foreground mt-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 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.
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.
</p> </p>
</div> </div>
<Statistics />
</div> </div>
</div> </div>
</div> </div>
-38
View File
@@ -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>
);
};
+5 -24
View File
@@ -13,35 +13,16 @@ interface FAQProps {
const FAQList: FAQProps[] = [ const FAQList: FAQProps[] = [
{ {
question: "Is this template free?", question: "Is this service free?",
answer: "Yes. It is a free ChadcnUI template.", answer: "Yes. It is a free to use service.",
value: "item-1", value: "item-1",
}, },
{ {
question: "Lorem ipsum dolor sit amet consectetur adipisicing elit?", question: "How it works?",
answer: 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", 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 = () => { export const FAQ = () => {
+10 -101
View File
@@ -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"> <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"> <div className="col-span-full xl:col-span-2">
<a <a
href="/" href="#"
className="font-bold text-xl flex" className="font-bold text-xl flex"
> >
<LogoIcon /> <LogoIcon />
ShadcnUI/React SkillHub
</a> </a>
</div> </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"> <div className="flex flex-col gap-2">
<h3 className="font-bold text-lg">About</h3> <h3 className="font-bold text-lg">About</h3>
<div> <div>
<a <a
href="#" href="#howItWorks"
className="opacity-60 hover:opacity-100" className="opacity-60 hover:opacity-100"
> >
Features How it works
</a> </a>
</div> </div>
<div> <div>
<a <a
href="#" href="#team"
className="opacity-60 hover:opacity-100" className="opacity-60 hover:opacity-100"
> >
Pricing Team
</a> </a>
</div> </div>
<div> <div>
<a <a
href="#" href="#faq"
className="opacity-60 hover:opacity-100" className="opacity-60 hover:opacity-100"
> >
FAQ FAQ
</a> </a>
</div> </div>
</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>
<section className="container pb-14 text-center"> <section className="container pb-14 text-center">
<h3> <h3>
&copy; 2024 Landing page made by{" "} &copy; 2024{" "}
<a <a
target="_blank" href="#"
href="https://github.com/leoMirandaa"
className="text-primary transition-all border-primary hover:border-b-2" className="text-primary transition-all border-primary hover:border-b-2"
> >
Leo Miranda Animulichki
</a> </a>
</h3> </h3>
</section> </section>
+12 -23
View File
@@ -1,7 +1,7 @@
import { Button } from "./ui/button"; import { Button } from "./ui/button";
import { buttonVariants } 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 = () => { export const Hero = () => {
return ( return (
@@ -10,45 +10,34 @@ export const Hero = () => {
<main className="text-5xl md:text-6xl font-bold"> <main className="text-5xl md:text-6xl font-bold">
<h1 className="inline"> <h1 className="inline">
<span className="inline bg-gradient-to-r from-[#F596D3] to-[#D247BF] text-transparent bg-clip-text"> <span className="inline bg-gradient-to-r from-[#F596D3] to-[#D247BF] text-transparent bg-clip-text">
Shadcn SkillHub
</span>{" "} </span>{" "}
landing page
</h1>{" "} </h1>{" "}
for{" "} for{" "}
<h2 className="inline"> <h2 className="inline">
<span className="inline bg-gradient-to-r from-[#61DAFB] via-[#1fc0f1] to-[#03a3d7] text-transparent bg-clip-text"> <span className="inline bg-gradient-to-r from-[#61DAFB] via-[#1fc0f1] to-[#03a3d7] text-transparent bg-clip-text">
React Organizations
</span>{" "} </span>{" "}
developers
</h2> </h2>
</main> </main>
<p className="text-xl text-muted-foreground md:w-10/12 mx-auto lg:mx-0"> <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 Build dream teams for hackatons depends on your needs from scratch
to your project. with SkillHub.
</p> </p>
<div className="space-y-4 md:space-y-0 md:space-x-4"> <div className="space-y-4 md:space-y-0 md:space-x-4">
<Button className="w-full md:w-1/3">Get Started</Button> <Link
to={"login"}
<a className={`w-full md:w-1/3 border ${buttonVariants({
href="https://github.com/leoMirandaa/shadcn-landing-page.git" variant: "default",
target="_blank"
className={`w-full md:w-1/3 ${buttonVariants({
variant: "outline",
})}`} })}`}
> >
Github Repository Get started
<GitHubLogoIcon className="ml-2 w-5 h-5" /> </Link>
</a>
</div> </div>
</div> </div>
{/* Hero cards sections */}
<div className="z-10">
<HeroCards />
</div>
{/* Shadow effect */} {/* Shadow effect */}
<div className="shadow"></div> <div className="shadow"></div>
</section> </section>
-170
View File
@@ -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>
);
};
+17 -18
View File
@@ -8,29 +8,29 @@ interface FeatureProps {
} }
const features: FeatureProps[] = [ const features: FeatureProps[] = [
{
icon: <MedalIcon />,
title: "Accesibility",
description:
"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum quas provident cum",
},
{ {
icon: <MapIcon />, icon: <MapIcon />,
title: "Community", title: "Events",
description: description:
"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum quas provident cum", "Organizator creates an event where participants can join.",
},
{
icon: <PlaneIcon />,
title: "Scalability",
description:
"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum quas provident cum",
}, },
{ {
icon: <GiftIcon />, icon: <GiftIcon />,
title: "Gamification", title: "Data",
description: 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 Step-by-Step Guide
</h2> </h2>
<p className="md:w-3/4 mx-auto mt-4 mb-8 text-xl text-muted-foreground"> <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 Our service is easy-to-use and intuitive to use.
dolor pariatur sit!
</p> </p>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+22 -34
View File
@@ -1,4 +1,5 @@
import { useState } from "react"; import { useState } from "react";
import { Link } from "react-router-dom";
import { import {
NavigationMenu, NavigationMenu,
NavigationMenuItem, NavigationMenuItem,
@@ -12,7 +13,6 @@ import {
SheetTrigger, SheetTrigger,
} from "../components/ui/sheet"; } from "../components/ui/sheet";
import { GitHubLogoIcon } from "@radix-ui/react-icons";
import { buttonVariants } from "./ui/button"; import { buttonVariants } from "./ui/button";
import { Menu } from "lucide-react"; import { Menu } from "lucide-react";
import { ModeToggle } from "./mode-toggle"; import { ModeToggle } from "./mode-toggle";
@@ -25,16 +25,16 @@ interface RouteProps {
const routeList: RouteProps[] = [ const routeList: RouteProps[] = [
{ {
href: "#features", href: "#about",
label: "Features", label: "About",
}, },
{ {
href: "#testimonials", href: "#howItWorks",
label: "Testimonials", label: "How it works",
}, },
{ {
href: "#pricing", href: "#team",
label: "Pricing", label: "Team",
}, },
{ {
href: "#faq", href: "#faq",
@@ -45,16 +45,13 @@ const routeList: RouteProps[] = [
export const Navbar = () => { export const Navbar = () => {
const [isOpen, setIsOpen] = useState<boolean>(false); const [isOpen, setIsOpen] = useState<boolean>(false);
return ( 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"> <NavigationMenu className="mx-auto">
<NavigationMenuList className="container h-14 px-4 w-screen flex justify-between "> <NavigationMenuList className="container h-14 px-4 w-screen flex justify-between ">
<NavigationMenuItem className="font-bold flex"> <NavigationMenuItem className="font-bold flex">
<a <a href="#" className="ml-2 font-bold text-xl flex">
href="/"
className="ml-2 font-bold text-xl flex"
>
<LogoIcon /> <LogoIcon />
ShadcnUI/React SkillHub
</a> </a>
</NavigationMenuItem> </NavigationMenuItem>
@@ -62,10 +59,7 @@ export const Navbar = () => {
<span className="flex md:hidden"> <span className="flex md:hidden">
<ModeToggle /> <ModeToggle />
<Sheet <Sheet open={isOpen} onOpenChange={setIsOpen}>
open={isOpen}
onOpenChange={setIsOpen}
>
<SheetTrigger className="px-2"> <SheetTrigger className="px-2">
<Menu <Menu
className="flex md:hidden h-5 w-5" className="flex md:hidden h-5 w-5"
@@ -78,7 +72,7 @@ export const Navbar = () => {
<SheetContent side={"left"}> <SheetContent side={"left"}>
<SheetHeader> <SheetHeader>
<SheetTitle className="font-bold text-xl"> <SheetTitle className="font-bold text-xl">
Shadcn/React SkillHub
</SheetTitle> </SheetTitle>
</SheetHeader> </SheetHeader>
<nav className="flex flex-col justify-center items-center gap-2 mt-4"> <nav className="flex flex-col justify-center items-center gap-2 mt-4">
@@ -92,16 +86,14 @@ export const Navbar = () => {
{label} {label}
</a> </a>
))} ))}
<a <Link
href="https://github.com/leoMirandaa/shadcn-landing-page.git" to={"login"}
target="_blank"
className={`w-[110px] border ${buttonVariants({ className={`w-[110px] border ${buttonVariants({
variant: "secondary", variant: "default",
})}`} })}`}
> >
<GitHubLogoIcon className="mr-2 w-5 h-5" /> Login
Github </Link>
</a>
</nav> </nav>
</SheetContent> </SheetContent>
</Sheet> </Sheet>
@@ -123,16 +115,12 @@ export const Navbar = () => {
</nav> </nav>
<div className="hidden md:flex gap-2"> <div className="hidden md:flex gap-2">
<a <Link
href="https://github.com/leoMirandaa/shadcn-landing-page.git" to={"login"}
target="_blank" className={`border ${buttonVariants({ variant: "default" })}`}
className={`border ${buttonVariants({ variant: "secondary" })}`}
> >
<GitHubLogoIcon className="mr-2 w-5 h-5" /> Login
Github </Link>
</a>
<ModeToggle />
</div> </div>
</NavigationMenuList> </NavigationMenuList>
</NavigationMenu> </NavigationMenu>
-41
View File
@@ -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>
);
};
+29 -61
View File
@@ -7,7 +7,7 @@ import {
CardHeader, CardHeader,
CardTitle, CardTitle,
} from "../components/ui/card"; } from "../components/ui/card";
import { Facebook, Instagram, Linkedin } from "lucide-react"; import { Facebook, Instagram, Linkedin, Github } from "lucide-react";
interface TeamProps { interface TeamProps {
imageUrl: string; imageUrl: string;
@@ -23,75 +23,44 @@ interface SociaNetworkslProps {
const teamList: TeamProps[] = [ const teamList: TeamProps[] = [
{ {
imageUrl: "https://i.pravatar.cc/150?img=35", imageUrl: "https://raw.githubusercontent.com/devitq/devitq/main/logo.png",
name: "Emma Smith", name: "ITQ",
position: "Product Manager", position: "Backend & Frontend Developer",
socialNetworks: [ socialNetworks: [
{ name: "Linkedin", url: "http://linkedin.com" }, { name: "GitHub", url: "https://github.com/devitq" },
{
name: "Facebook",
url: "https://www.facebook.com/",
},
{
name: "Instagram",
url: "https://www.instagram.com/",
},
], ],
}, },
{ {
imageUrl: "https://i.pravatar.cc/150?img=60", imageUrl: "https://cdn.discordapp.com/avatars/745800190413373472/db4cd19e6d80f9cfa29e09a43ddbcb28",
name: "John Doe", name: "Pigeon",
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",
position: "Backend Developer", position: "Backend Developer",
socialNetworks: [ socialNetworks: [],
{ name: "Linkedin", url: "http://linkedin.com" },
{
name: "Facebook",
url: "https://www.facebook.com/",
}, },
], {
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 = () => { export const Team = () => {
const socialIcon = (iconName: string) => { const socialIcon = (iconName: string) => {
switch (iconName) { switch (iconName) {
case "Linkedin": case "GitHub":
return <Linkedin size="20" />; return <Github size="20" />;
case "Facebook":
return <Facebook size="20" />;
case "Instagram":
return <Instagram size="20" />;
} }
}; };
@@ -108,8 +77,7 @@ export const Team = () => {
</h2> </h2>
<p className="mt-4 mb-10 text-xl text-muted-foreground"> <p className="mt-4 mb-10 text-xl text-muted-foreground">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veritatis Our team Animulichki contains 5 dedicated web developers
dolor pariatur sit!
</p> </p>
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8 gap-y-10"> <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8 gap-y-10">
@@ -132,7 +100,7 @@ export const Team = () => {
</CardHeader> </CardHeader>
<CardContent className="text-center pb-2"> <CardContent className="text-center pb-2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <p></p>
</CardContent> </CardContent>
<CardFooter> <CardFooter>
@@ -1,18 +1,13 @@
import { About } from "../../About"; import { About } from "../../About";
import { Cta } from "../../Cta";
import { FAQ } from "../../FAQ"; import { FAQ } from "../../FAQ";
import { Features } from "../../Features"; import { Features } from "../../Features";
import { Footer } from "../../Footer"; import { Footer } from "../../Footer";
import { Hero } from "../../Hero"; import { Hero } from "../../Hero";
import { HowItWorks } from "../../HowItWorks"; import { HowItWorks } from "../../HowItWorks";
import { Navbar } from "../../Navbar"; import { Navbar } from "../../Navbar";
import { Newsletter } from "../../Newsletter";
import { Pricing } from "../../Pricing";
import { ScrollToTop } from "../../ScrollToTop"; import { ScrollToTop } from "../../ScrollToTop";
import { Services } from "../../Services"; import { Services } from "../../Services";
import { Sponsors } from "../../Sponsors";
import { Team } from "../../Team"; import { Team } from "../../Team";
import { Testimonials } from "../../Testimonials";
import "../../../App.css"; import "../../../App.css";
import { ThemeProvider } from "../../theme-provider.tsx"; import { ThemeProvider } from "../../theme-provider.tsx";
@@ -23,9 +18,8 @@ function Landing() {
<Hero /> <Hero />
<About /> <About />
<HowItWorks /> <HowItWorks />
<Features /> {/* <Features />
<Services /> <Services /> */}
<Cta />
<Team /> <Team />
<FAQ /> <FAQ />
<Footer /> <Footer />
+2 -2
View File
@@ -17,7 +17,7 @@ const Main = () => {
<div className={less["general-left"]}> <div className={less["general-left"]}>
<form className={less["input-form"]} onSubmit={(event) => submitRegister(event, navigate)}> <form className={less["input-form"]} onSubmit={(event) => submitRegister(event, navigate)}>
<h1 className={less["title-form"]}>{t("entrance")}</h1> <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="text" name="last_name" placeholder="Last name" />
<Input type="date" name="birth_date" placeholder="Date" /> <Input type="date" name="birth_date" placeholder="Date" />
<Input type="email" name="email" placeholder="Email" /> <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> <Button variant="link" asChild><Link to={"/dash/admin"}>{t("iorganizer")}</Link></Button>
</div> </div>
<div className={less["general-right"]}> <div className={less["general-right"] + " shadow"}>
</div> </div>
</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 less from "./Header.module.less"
import { ResetIcon } from "@radix-ui/react-icons";
import { Separator } from "../../shared/ui/separator";
import { ModeToggle } from "../../mode-toggle"; import { ModeToggle } from "../../mode-toggle";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
const Header = () => { const Header = () => {
const { t, i18n } = useTranslation();
const handleTrans = (code: string) => {
i18n.changeLanguage(code);
};
return ( return (
<header className={less.header}> <header className={less.header}>
<Link to={"/"}><img className={less.logo} src='/logo.svg'></img></Link> <Link to={"/"}><img className={less.logo} src='/logo.svg'></img></Link>
<div className={less["line-block"]}> <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 /> <ModeToggle />
</Menubar>
</div> </div>
</header> </header>
) )
} }
+23 -24
View File
@@ -1,11 +1,9 @@
import i18n from 'i18next'; import i18n from "i18next";
import { initReactI18next } from 'react-i18next'; import { initReactI18next } from "react-i18next";
i18n i18n.use(initReactI18next).init({
.use(initReactI18next) debug: false,
.init({ fallbackLng: "en",
debug: true,
fallbackLng: 'ru',
interpolation: { interpolation: {
escapeValue: false, escapeValue: false,
}, },
@@ -25,17 +23,19 @@ i18n
login: "Авторизация", login: "Авторизация",
registration: "Регистрация", registration: "Регистрация",
loginHeader: "Введите адрес электронной почты и пароль, чтобы начать.", loginHeader: "Введите адрес электронной почты и пароль, чтобы начать.",
regHeader: "Введите юзернейм, почту и пароль, чтобы зарегистрироваться.", regHeader:
"Введите юзернейм, почту и пароль, чтобы зарегистрироваться.",
buttonLoginInSystem: "Войти в систему", buttonLoginInSystem: "Войти в систему",
buttonRegInSystemStep1: "Продолжить", buttonRegInSystemStep1: "Продолжить",
buttonGoTOReg: "Приступить к регистрации!", buttonGoTOReg: "Приступить к регистрации!",
landingLogo: "Упростим подбор!", landingLogo: "Упростим подбор!",
landingDesc: "Сделаем вашу жизнь проще! Забудьте о долгом переборе как о нудной рутине!", landingDesc:
"Сделаем вашу жизнь проще! Забудьте о долгом переборе как о нудной рутине!",
respondRequest: "Откликнуться на заявку", respondRequest: "Откликнуться на заявку",
vacancy: "Вакансии", vacancy: "Вакансии",
iorganizer: "Я организатор", iorganizer: "Я организатор",
viewingProfile: "Просмотр профиля", viewingProfile: "Просмотр профиля",
skills:"Скиллы", skills: "Скиллы",
age: "Возраст", age: "Возраст",
EditTree: "Редактировать дерево", EditTree: "Редактировать дерево",
DistTeams: "Распределение команд", DistTeams: "Распределение команд",
@@ -44,9 +44,7 @@ i18n
descDownload: "Скачать XLS таблицу", descDownload: "Скачать XLS таблицу",
open: "Открыть", open: "Открыть",
createEvent: "Создать ивент", createEvent: "Создать ивент",
},
}
}, },
en: { en: {
translation: { translation: {
@@ -64,16 +62,17 @@ i18n
login: "Log in", login: "Log in",
registration: "Sign up", registration: "Sign up",
loginHeader: " Enter your email address and password to get started.", loginHeader: " Enter your email address and password to get started.",
buttonLoginInSystem: "log in", buttonLoginInSystem: "Log in",
buttonRegInSystemStep1: "Continue", buttonRegInSystemStep1: "Continue",
buttonGoTOReg: "Proceed with registration!", buttonGoTOReg: "Proceed with registration!",
landingLogo: "Let's simplify the selection!", 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", respondRequest: "respond to the request",
vacancy: "vacancy", vacancy: "Vacancy",
iorganizer: "I'm the organizer", iorganizer: "I'm the organizer",
viewingProfile: "Viewing a profile", viewingProfile: "Viewing a profile",
skills:"Skills", skills: "Skills",
age: "Age", age: "Age",
EditTree: "Edit the tree", EditTree: "Edit the tree",
DistTeams: "Distribution of teams", DistTeams: "Distribution of teams",
@@ -82,7 +81,7 @@ i18n
descDownload: "Download the XLS table", descDownload: "Download the XLS table",
open: "Open", open: "Open",
createEvent: "Сreate Event", createEvent: "Сreate Event",
} },
}, },
zh: { zh: {
translation: { translation: {
@@ -103,12 +102,13 @@ i18n
buttonRegInSystemStep1: "继续", buttonRegInSystemStep1: "继续",
buttonGoTOReg: "继续登记!", buttonGoTOReg: "继续登记!",
landingLogo: "让我们简化选择!", landingLogo: "让我们简化选择!",
landingDesc: "让我们让你的生活更轻松! 忘记长时间的搜索作为一个繁琐的例程!", landingDesc:
"让我们让你的生活更轻松! 忘记长时间的搜索作为一个繁琐的例程!",
respondRequest: "响应请求", respondRequest: "响应请求",
vacancy: "职位空缺", vacancy: "职位空缺",
iorganizer: "我是组织者", iorganizer: "我是组织者",
viewingProfile: "查看个人资料", viewingProfile: "查看个人资料",
skills:"技能", skills: "技能",
age: "年龄", age: "年龄",
EditTree: "编辑树", EditTree: "编辑树",
DistTeams: "团队分布", DistTeams: "团队分布",
@@ -117,10 +117,9 @@ i18n
descDownload: "下载XLS表", descDownload: "下载XLS表",
open: "打开", open: "打开",
createEvent: "创建一个事件", createEvent: "创建一个事件",
}
}, },
} },
}); },
});
export default i18n; export default i18n;