Skip to content

Commit

Permalink
feat(sections): add two more sections
Browse files Browse the repository at this point in the history
  • Loading branch information
@OgaDavid
OgaDavid committed Oct 8, 2023
1 parent 5394bb2 commit fed60f6
Show file tree
Hide file tree
Showing 16 changed files with 198 additions and 56 deletions.
9 changes: 7 additions & 2 deletions app/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@
}

.container {
@apply max-w-[1300px] mx-auto py-0 px-[20px] min-[950px]:px-[40px];
@apply max-w-[1300px] mx-auto py-0 px-[20px] md-920:px-[40px];
}

.header {
Expand All @@ -92,7 +92,7 @@
}

.navlink {
@apply font-semibold text-sm min-[1150px]:text-base hover:text-brand-blue-100 transition-all duration-300;
@apply font-semibold text-sm lg-1150:text-base hover:text-brand-blue-100 transition-all duration-300;
}

.gradient {
Expand All @@ -113,6 +113,11 @@
grid-row: 1;
}

.explainer_grid {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
}

@media screen and (max-width: 920px) {
.grid_row_1 {
grid-row: auto;
Expand Down
139 changes: 95 additions & 44 deletions app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,63 +5,114 @@ import Link from "next/link";
import { motion } from "framer-motion";
import { Icons } from "@/components/icons";
import Stats from "@/components/stats";
import { ExplainerData } from "@/data/data";

export default function HomePage() {
return (
<main>
<section className="gradient">
<div className="container">
<div className="grid md-920:grid-cols-2 mb-[120px] gap-[80px] md-920:gap-[10px] max-md:pt-[190px] pt-[210px] pb-[120px] md-920:pb-[35px]">
<div className="max-w-[599px] grid_row_1 md-800:justify-self-start md-800:col-span-full">
<motion.h1
transition={{ duration: 0.5 }}
initial={{ y: 50 }}
animate={{ y: 0 }}
className="font-bold max-md:text-[42px] max-md:leading-[48px] max-md:mb-4 mb-10 leading-[68px] text-[64px] text-white"
<div className="container">
<div className="grid md-920:grid-cols-2 mb-[120px] gap-[80px] md-920:gap-[10px] max-md:pt-[190px] pt-[210px] pb-[120px] md-920:pb-[35px]">
<div className="max-w-[599px] grid_row_1 md-800:justify-self-start md-800:col-span-full">
<motion.h1
transition={{ duration: 0.5 }}
initial={{ y: 50 }}
animate={{ y: 0 }}
className="font-bold max-md:text-[42px] max-md:leading-[48px] max-md:mb-4 mb-10 leading-[68px] text-[64px] text-white"
>
Anyone, anywhere can teach online
</motion.h1>
<motion.p
transition={{ duration: 0.7 }}
initial={{ y: 50 }}
animate={{ y: 0 }}
className="text-2xl max-md:text-[18px] max-md:leading-[28px] mb-[40px] leading-8 text-[hsla(0,0%,100%,.8)]"
>
Create & sell your ebooks, courses, and live classes- all on
Klas
</motion.p>
<motion.div
transition={{ duration: 0.9 }}
initial={{ y: 50 }}
animate={{ y: 0 }}
className="flex items-center gap-6"
>
<Link
href="/login"
className="bg-white rounded-[8px] text-base font-bold py-[14px] px-[30px] text-brand-blue-100"
>
Anyone, anywhere can teach online
</motion.h1>
<motion.p
transition={{ duration: 0.7 }}
initial={{ y: 50 }}
animate={{ y: 0 }}
className="text-2xl max-md:text-[18px] max-md:leading-[28px] mb-[40px] leading-8 text-[hsla(0,0%,100%,.8)]"
Sign up free
</Link>
<Link
className="text-white flex gap-[5px] hover:gap-[10px] duration-300 transition-all justify-center items-center text-base font-bold"
href="https://calendly.com/nathanstark101/chat"
>
Create & sell your ebooks, courses, and live classes- all on Klas
</motion.p>
Request demo
<Icons.chevron_right />
</Link>
</motion.div>
</div>
<motion.div
transition={{ duration: 0.7 }}
initial={{ x: 50 }}
animate={{ x: 0 }}
className="md-920:justify-self-end grid_row_1 md-800:col-span-full"
>
<Image
className="w-full md-920:w-[400px] min-[1110px]:w-[640px] object-cover"
alt="hero-image"
src="/images/hero.png"
width={640}
height={563.95}
/>
</motion.div>
</div>
</div>
</section>
<Stats />
<section className="container">
<div className="mb-[160px]">
<div>
<span className="flex flex-col items-center gap-4 text-center">
<h2 className="text-5xl leading-[62px] max-md:text-[32px] max-md:leading-[42px] text-black text-center font-bold">
Three ways to teach
</h2>
<p className="text-2xl leading-[31px] font-normal max-md:text-lg max-md:leading-[23px] text-[rgba(0,0,0,.5)]">
The ultimate solution to help you launch your online academy
</p>
</span>
<div className="mt-10 pt-10 grid gap-6 explainer_grid">
{ExplainerData.map((item, index) => (
<motion.div
transition={{ duration: 0.9 }}
key={index}
transition={{ duration: 0.7 }}
initial={{ y: 50 }}
animate={{ y: 0 }}
className="flex items-center gap-6"
className="flex flex-col rounded-[8px] items-start bg-white shadow-lg"
>
<Link
href="/login"
className="bg-white rounded-[8px] text-base font-bold py-[14px] px-[30px] text-brand-blue-100"
>
Sign up free
</Link>
<Link
className="text-white flex gap-[5px] hover:gap-[10px] duration-300 transition-all justify-center items-center text-base font-bold"
href="https://calendly.com/nathanstark101/chat"
>
Request demo
<Icons.chevron_right />
</Link>
<div>
<Image
className="w-full"
src={item.image}
width={500}
height={254.33}
alt={item.title}
/>
</div>
<div className="px-6 py-10 flex flex-col gap-4">
<h3 className="text-2xl leading-[31px] font-medium">
{item.title}
</h3>
<p className="text-lg leading-[23px] font-normal">
{item.description}
</p>
</div>
</motion.div>
</div>
<motion.div
transition={{ duration: 0.7 }}
initial={{ x: 50 }}
animate={{ x: 0 }}
className="md-920:justify-self-end grid_row_1 md-800:col-span-full"
>
<Image className="w-full md-920:w-[400px] min-[1110px]:w-[640px] object-cover" alt="hero-image" src="/images/hero.png" width={640} height={563.95} />
</motion.div>
))}
</div>
</div>
</section>
<Stats />
</div>
</section>
</main>
)
);
}
6 changes: 3 additions & 3 deletions components/header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,15 +25,15 @@ const Header = () => {
<span className="sr-only">Klas</span>
</span>
<MainNav />
<div className="flex max-md-800:hidden gap-[10px] transition-all duration-300 min-[1150px]:gap-8 items-center">
<div className="flex max-md-800:hidden gap-[10px] transition-all duration-300 lg-1150:gap-8 items-center">
<Link
className="text-sm min-[1150px]:text-base text-brand-blue-100 font-medium"
className="text-sm lg-1150:text-base text-brand-blue-100 font-semibold"
href="/login"
>
Login
</Link>
<Link
className="text-sm min-[1150px]:text-base font-medium text-white bg-brand-blue-200 py-4 px-8 rounded-[8px]"
className="text-sm lg-1150:text-base font-medium text-white bg-brand-blue-200 py-4 px-8 rounded-[8px]"
href="/signup"
>
Sign up free
Expand Down
2 changes: 1 addition & 1 deletion components/main-nav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export default function MainNav() {
const pathname = usePathname();
return (
<nav className="max-md-800:hidden">
<ul className="flex transition-all duration-300 gap-[10px] min-[1150px]:gap-[30px]">
<ul className="flex transition-all duration-300 gap-[10px] lg-1150:gap-[30px]">
{docsConfig.mainNav.map(({ title, href }) => (
<li key={title}>
<Link
Expand Down
13 changes: 7 additions & 6 deletions components/stats.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from "react";
import CountUp from "react-countup";
import { CompaniesImages as images } from "@/data/data";

export default function Stats() {
return (
Expand All @@ -22,7 +23,7 @@ export default function Stats() {
<CountUp end={2200} duration={2} enableScrollSpy={true} />+
</h3>
<p className="text-[20px] leading-[26px] text-[rgba(0,0,0,.8)] max-md:text-base">
Virtual academies
Online academies
</p>
</div>
<div className="flex flex-col h-[100px] pl-[20px] justify-center relative">
Expand All @@ -35,11 +36,11 @@ export default function Stats() {
</p>
</div>
</div>
{/* <div className="flex items-center justify-center lg-1150:justify-between gap-[40px] flex-wrap">
{images.map(({ name, url }) => (
<img key={name} alt={name} src={url} />
))}
</div> */}
<div className="flex items-center justify-center min-[1150]:justify-between gap-[40px] flex-wrap">
{images.map(({ name, url }) => (
<img key={name} alt={name} src={url} />
))}
</div>
</div>
</div>
</section>
Expand Down
62 changes: 62 additions & 0 deletions data/data.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
export const CompaniesImages = [
{
name: "alida-school",
url: "images/alida-school.svg",
height: 60,
width: 60,
},
{
name: "univelcity",
url: "images/univelcity.svg",
height: 41,
width: 196,
},
{
name: "ai-school",
url: "images/ai-school.svg",
height: 44,
width: 158,
},
{
name: "mdena",
url: "images/mdena.svg",
height: 39,
width: 145,
},
{
name: "design-pal",
url: "images/design-pal.svg",
height: 39,
width: 124,
},
{
name: "dev-careers",
url: "images/dev-careers.svg",
height: 42,
width: 132,
},
];

export const ExplainerData = [
{
id: 1,
image: "/images/explainer-1.png",
title: "Live classes",
description:
"Our immersive class venue gives you the power to share your knowledge.",
},
{
id: 2,
image: "/images/explainer-2.png",
title: "Online Courses",
description:
"Run your knowledge business with online courses for your students.",
},
{
id: 3,
image: "/images/explainer-3.png",
title: "Ebook",
description:
"Reach your students in faster ways. Sell unlimited PDFs & files on Klas",
},
];
13 changes: 13 additions & 0 deletions public/images/ai-school.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions public/images/alida-school.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit fed60f6

Please sign in to comment.