From 4c6a5ff7236863c52d49e40112fbb00d25ef352d Mon Sep 17 00:00:00 2001 From: ITQ Date: Tue, 2 Apr 2024 19:26:14 +0300 Subject: [PATCH] [feat] Landing update --- frontend/src/components/About.tsx | 11 +- frontend/src/components/Cta.tsx | 38 ---- frontend/src/components/FAQ.tsx | 29 +-- frontend/src/components/Footer.tsx | 111 +---------- frontend/src/components/Hero.tsx | 35 ++-- frontend/src/components/HeroCards.tsx | 170 ---------------- frontend/src/components/HowItWorks.tsx | 35 ++-- frontend/src/components/Navbar.tsx | 56 +++--- frontend/src/components/Statistics.tsx | 41 ---- frontend/src/components/Team.tsx | 92 +++------ .../src/components/pages/Landing/Landing.tsx | 10 +- frontend/src/components/pages/Main/Main.tsx | 6 +- .../src/components/widgets/Header/Header.tsx | 46 +---- frontend/src/i18n.ts | 181 +++++++++--------- 14 files changed, 194 insertions(+), 667 deletions(-) delete mode 100644 frontend/src/components/Cta.tsx delete mode 100644 frontend/src/components/HeroCards.tsx delete mode 100644 frontend/src/components/Statistics.tsx diff --git a/frontend/src/components/About.tsx b/frontend/src/components/About.tsx index b56821c..2ffabcd 100644 --- a/frontend/src/components/About.tsx +++ b/frontend/src/components/About.tsx @@ -1,4 +1,3 @@ -import { Statistics } from "./Statistics"; import pilot from "../assets/pilot.png"; export const About = () => { @@ -20,18 +19,12 @@ export const About = () => { About{" "} - Company + SkillHub

- 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.

- - diff --git a/frontend/src/components/Cta.tsx b/frontend/src/components/Cta.tsx deleted file mode 100644 index 305274f..0000000 --- a/frontend/src/components/Cta.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { Button } from "./ui/button"; - -export const Cta = () => { - return ( -
-
-
-

- All Your - - {" "} - Ideas & Concepts{" "} - - In One Interface -

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, - beatae. Ipsa tempore ipsum iste quibusdam illum ducimus eos. Quasi, - sed! -

-
- -
- - -
-
-
- ); -}; diff --git a/frontend/src/components/FAQ.tsx b/frontend/src/components/FAQ.tsx index 67bf025..bdafb30 100644 --- a/frontend/src/components/FAQ.tsx +++ b/frontend/src/components/FAQ.tsx @@ -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 = () => { diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx index 0fcad37..09bb79b 100644 --- a/frontend/src/components/Footer.tsx +++ b/frontend/src/components/Footer.tsx @@ -8,144 +8,53 @@ export const Footer = () => {
- ShadcnUI/React + SkillHub
-
-

Follow US

-
- - Github - -
- -
- - Twitter - -
- -
- - Dribbble - -
-
- -
-

Platforms

-
- - Web - -
- -
- - Mobile - -
- -
- - Desktop - -
-
-

About

- Features + How it works
- Pricing + Team
FAQ
- -
-

Community

-
- - Youtube - -
- -
- - Discord - -
- -
- - Twitch - -
-

- © 2024 Landing page made by{" "} + © 2024{" "} - Leo Miranda + Animulichki

diff --git a/frontend/src/components/Hero.tsx b/frontend/src/components/Hero.tsx index cd08dc4..7a97312 100644 --- a/frontend/src/components/Hero.tsx +++ b/frontend/src/components/Hero.tsx @@ -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 = () => {

- Shadcn + SkillHub {" "} - landing page

{" "} for{" "}

- React + Organizations {" "} - developers

- 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.

- - - - Github Repository - - + Get started +
- {/* Hero cards sections */} -
- -
- {/* Shadow effect */}
diff --git a/frontend/src/components/HeroCards.tsx b/frontend/src/components/HeroCards.tsx deleted file mode 100644 index 53da696..0000000 --- a/frontend/src/components/HeroCards.tsx +++ /dev/null @@ -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 ( -
- {/* Testimonial */} - - - - - SH - - -
- John Doe React - @john_doe -
-
- - This landig page is awesome! -
- - {/* Team */} - - - user avatar - Leo Miranda - - Frontend Developer - - - - -

- I really enjoy transforming ideas into functional software that - exceeds expectations -

-
- - - - -
- - {/* Pricing */} - - - - Free - - Most popular - - -
- $0 - /month -
- - - Lorem ipsum dolor sit, amet ipsum consectetur adipisicing elit. - -
- - - - - -
- - -
- {["4 Team member", "4 GB Storage", "Upto 6 pages"].map( - (benefit: string) => ( - - {" "} -

{benefit}

-
- ) - )} -
-
-
- - {/* Service */} - - -
- -
-
- Light & dark mode - - Lorem ipsum dolor sit amet consect adipisicing elit. Consectetur - natusm. - -
-
-
-
- ); -}; diff --git a/frontend/src/components/HowItWorks.tsx b/frontend/src/components/HowItWorks.tsx index 3c4cd27..12ab00a 100644 --- a/frontend/src/components/HowItWorks.tsx +++ b/frontend/src/components/HowItWorks.tsx @@ -8,29 +8,29 @@ interface FeatureProps { } const features: FeatureProps[] = [ - { - icon: , - title: "Accesibility", - description: - "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum quas provident cum", - }, { icon: , - title: "Community", + title: "Events", description: - "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum quas provident cum", - }, - { - icon: , - title: "Scalability", - description: - "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum quas provident cum", + "Organizator creates an event where participants can join.", }, { icon: , - 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: , + title: "Algorythm", + description: + "Organizator runs algorythm on users data and algrorythm creates dream teams.", + }, + { + icon: , + 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

- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veritatis - dolor pariatur sit! + Our service is easy-to-use and intuitive to use.

diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx index 0185315..1805278 100644 --- a/frontend/src/components/Navbar.tsx +++ b/frontend/src/components/Navbar.tsx @@ -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(false); return ( -
+
- + - ShadcnUI/React + SkillHub @@ -62,10 +59,7 @@ export const Navbar = () => { - + { - Shadcn/React + SkillHub @@ -123,16 +115,12 @@ export const Navbar = () => {
- - - Github - - - + Login +
diff --git a/frontend/src/components/Statistics.tsx b/frontend/src/components/Statistics.tsx deleted file mode 100644 index a8b252d..0000000 --- a/frontend/src/components/Statistics.tsx +++ /dev/null @@ -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 ( -
-
- {stats.map(({ quantity, description }: statsProps) => ( -
-

{quantity}

-

{description}

-
- ))} -
-
- ); -}; diff --git a/frontend/src/components/Team.tsx b/frontend/src/components/Team.tsx index d7b1d51..2ade3a5 100644 --- a/frontend/src/components/Team.tsx +++ b/frontend/src/components/Team.tsx @@ -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 ; - - case "Facebook": - return ; - - case "Instagram": - return ; + case "GitHub": + return ; } }; @@ -108,8 +77,7 @@ export const Team = () => {

- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veritatis - dolor pariatur sit! + Our team Animulichki contains 5 dedicated web developers

@@ -132,7 +100,7 @@ export const Team = () => { -

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+

diff --git a/frontend/src/components/pages/Landing/Landing.tsx b/frontend/src/components/pages/Landing/Landing.tsx index af5dc84..4dc4f09 100644 --- a/frontend/src/components/pages/Landing/Landing.tsx +++ b/frontend/src/components/pages/Landing/Landing.tsx @@ -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() { - - - + {/* + */}