development/bbfdfae7-f753-4dd5-b080-ce683a1792ba
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
kudindmitriy
2026-01-29 00:47:09 +02:00
commit a49a80a767
563 changed files with 72123 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
src/app/blog/page.tsx Normal file
View File

@@ -0,0 +1,167 @@
"use client";
import { useEffect, useState } from "react";
import ReactLenis from "lenis/react";
import BlogCardOne from "@/components/sections/blog/BlogCardOne";
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
type BlogPost = {
id: string;
category: string;
title: string;
excerpt: string;
imageSrc: string;
imageAlt?: string;
authorName: string;
authorAvatar: string;
date: string;
onBlogClick?: () => void;
};
const defaultPosts: BlogPost[] = [
{
id: "1", category: "Design", title: "UX review presentations", excerpt: "How do you create compelling presentations that wow your colleagues and impress your managers?", imageSrc: "/placeholders/placeholder3.avif", imageAlt: "Abstract design with purple and silver tones", authorName: "Olivia Rhye", authorAvatar: "/placeholders/placeholder3.avif", date: "20 Jan 2025", onBlogClick: () => console.log("Blog 1 clicked"),
},
{
id: "2", category: "Development", title: "Building scalable applications", excerpt: "Learn the best practices for building applications that can handle millions of users.", imageSrc: "/placeholders/placeholder4.webp", imageAlt: "Development workspace", authorName: "John Smith", authorAvatar: "/placeholders/placeholder4.webp", date: "18 Jan 2025", onBlogClick: () => console.log("Blog 2 clicked"),
},
{
id: "3", category: "Marketing", title: "Content strategy essentials", excerpt: "Discover how to create a content strategy that drives engagement and conversions.", imageSrc: "/placeholders/placeholder3.avif", imageAlt: "Marketing strategy board", authorName: "Sarah Johnson", authorAvatar: "/placeholders/placeholder3.avif", date: "15 Jan 2025", onBlogClick: () => console.log("Blog 3 clicked"),
},
{
id: "4", category: "Product", title: "Product management 101", excerpt: "Everything you need to know to become an effective product manager in 2025.", imageSrc: "/placeholders/placeholder4.webp", imageAlt: "Product planning session", authorName: "Mike Davis", authorAvatar: "/placeholders/placeholder4.webp", date: "12 Jan 2025", onBlogClick: () => console.log("Blog 4 clicked"),
},
];
export default function BlogPage() {
const [posts, setPosts] = useState<BlogPost[]>(defaultPosts);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
const fetchPosts = async () => {
try {
const apiUrl = process.env.NEXT_PUBLIC_API_URL;
const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;
if (!apiUrl || !projectId) {
console.warn("NEXT_PUBLIC_API_URL or NEXT_PUBLIC_PROJECT_ID not configured, using default posts");
setIsLoading(false);
return;
}
const url = `${apiUrl}/posts/${projectId}?status=published`;
const response = await fetch(url, {
method: "GET", headers: {
"Content-Type": "application/json"},
});
if (response.ok) {
const resp = await response.json();
const data = resp.data;
if (Array.isArray(data) && data.length > 0) {
const mappedPosts = data.map((post: any) => ({
id: post.id || String(Math.random()),
category: post.category || "General", title: post.title || "Untitled", excerpt: post.excerpt || post.content.slice(0, 30) || "", imageSrc: post.imageUrl || "/placeholders/placeholder3.avif", imageAlt: post.imageAlt || post.title || "", authorName: post.author?.name || "Anonymous", authorAvatar: post.author?.avatar || "/placeholders/placeholder3.avif", date: post.date || post.createdAt || new Date().toLocaleDateString("en-GB", { day: "numeric", month: "short", year: "numeric" }),
onBlogClick: () => console.log(`Blog ${post.id} clicked`),
}));
setPosts(mappedPosts);
}
} else {
console.warn(`API request failed with status ${response.status}, using default posts`);
}
} catch (error) {
console.error("Error fetching posts:", error);
} finally {
setIsLoading(false);
}
};
fetchPosts();
}, []);
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="reveal-blur"
borderRadius="sharp"
contentWidth="small"
sizing="mediumLargeSizeLargeTitles"
background="floatingGradient"
cardStyle="solid"
primaryButtonStyle="flat"
secondaryButtonStyle="radial-glow"
headingFontWeight="medium"
>
<ReactLenis root>
<div className="min-h-screen bg-background">
<NavbarLayoutFloatingInline
brandName="IT Academy"
navItems={[
{ name: "Home", id: "/" },
{ name: "Courses", id: "features" },
{ name: "Team", id: "team" },
{ name: "FAQ", id: "faq" }
]}
button={{
text: "Enroll Now", href: "contact"
}}
/>
{isLoading ? (
<div className="w-content-width mx-auto py-20 text-center">
<p className="text-foreground">Loading posts...</p>
</div>
) : (
<BlogCardOne
blogs={posts}
title="Latest Articles"
description="Stay updated with insights and knowledge from the tech industry"
textboxLayout="default"
useInvertedBackground="noInvert"
carouselMode="buttons"
animationType="slide-up"
tag="Blog"
/>
)}
<FooterBaseCard
logoText="IT Academy"
columns={[
{
title: "Courses", items: [
{ label: "Web Development", href: "#features" },
{ label: "Data Science", href: "#features" },
{ label: "Cybersecurity", href: "#features" }
]
},
{
title: "Company", items: [
{ label: "About Us", href: "#about" },
{ label: "Meet Our Instructors", href: "#team" },
{ label: "Success Stories", href: "#metrics" }
]
},
{
title: "Resources", items: [
{ label: "FAQ", href: "#faq" },
{ label: "Blog", href: "#" },
{ label: "Student Portal", href: "#" }
]
},
{
title: "Legal", items: [
{ label: "Terms of Service", href: "#" },
{ label: "Privacy Policy", href: "#" },
{ label: "Cookie Policy", href: "#" }
]
}
]}
copyrightText="© 2025 IT Academy. All rights reserved. Empowering the next generation of tech professionals."
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}

BIN
src/app/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

595
src/app/globals.css Normal file
View File

@@ -0,0 +1,595 @@
@import "tailwindcss";
:root {
/* Base units */
/* --vw is set by ThemeProvider */
/* --background: #f5f5f5;;
--card: #ffffff;;
--foreground: #1c1c1c;;
--primary-cta: #511f1f;;
--secondary-cta: #ffffff;;
--accent: #e63946;;
--background-accent: #e8bea8;; */
--background: #f5f5f5;;
--card: #ffffff;;
--foreground: #1c1c1c;;
--primary-cta: #511f1f;;
--secondary-cta: #ffffff;;
--accent: #e63946;;
--background-accent: #e8bea8;;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
--text-xs: clamp(0.54rem, 0.72vw, 0.72rem);
--text-sm: clamp(0.615rem, 0.82vw, 0.82rem);
--text-base: clamp(0.69rem, 0.92vw, 0.92rem);
--text-lg: clamp(0.75rem, 1vw, 1rem);
--text-xl: clamp(0.825rem, 1.1vw, 1.1rem);
--text-2xl: clamp(0.975rem, 1.3vw, 1.3rem);
--text-3xl: clamp(1.2rem, 1.6vw, 1.6rem);
--text-4xl: clamp(1.5rem, 2vw, 2rem);
--text-5xl: clamp(2.025rem, 2.75vw, 2.75rem);
--text-6xl: clamp(2.475rem, 3.3vw, 3.3rem);
--text-7xl: clamp(3rem, 4vw, 4rem);
--text-8xl: clamp(3.5rem, 4.5vw, 4.5rem);
--text-9xl: clamp(5.25rem, 7vw, 7rem); */
/* Base spacing units */
--vw-0_25: calc(var(--vw) * 0.25);
--vw-0_5: calc(var(--vw) * 0.5);
--vw-0_625: calc(var(--vw) * 0.625);
--vw-0_75: calc(var(--vw) * 0.75);
--vw-1: calc(var(--vw) * 1);
--vw-1_25: calc(var(--vw) * 1.25);
--vw-1_5: calc(var(--vw) * 1.5);
--vw-1_75: calc(var(--vw) * 1.75);
--vw-2: calc(var(--vw) * 2);
--vw-2_25: calc(var(--vw) * 2.25);
--vw-2_5: calc(var(--vw) * 2.5);
--vw-2_75: calc(var(--vw) * 2.75);
--vw-3: calc(var(--vw) * 3);
/* width */
--width-5: clamp(4rem, 5vw, 6rem);
--width-7_5: clamp(5.625rem, 7.5vw, 7.5rem);
--width-10: clamp(7.5rem, 10vw, 10rem);
--width-12_5: clamp(9.375rem, 12.5vw, 12.5rem);
--width-15: clamp(11.25rem, 15vw, 15rem);
--width-17: clamp(12.75rem, 17vw, 17rem);
--width-17_5: clamp(13.125rem, 17.5vw, 17.5rem);
--width-20: clamp(15rem, 20vw, 20rem);
--width-21: clamp(15.75rem, 21vw, 21rem);
--width-22_5: clamp(16.875rem, 22.5vw, 22.5rem);
--width-25: clamp(18.75rem, 25vw, 25rem);
--width-26: clamp(19.5rem, 26vw, 26rem);
--width-27_5: clamp(20.625rem, 27.5vw, 27.5rem);
--width-30: clamp(22.5rem, 30vw, 30rem);
--width-32_5: clamp(24.375rem, 32.5vw, 32.5rem);
--width-35: clamp(26.25rem, 35vw, 35rem);
--width-37_5: clamp(28.125rem, 37.5vw, 37.5rem);
--width-40: clamp(30rem, 40vw, 40rem);
--width-42_5: clamp(31.875rem, 42.5vw, 42.5rem);
--width-45: clamp(33.75rem, 45vw, 45rem);
--width-47_5: clamp(35.625rem, 47.5vw, 47.5rem);
--width-50: clamp(37.5rem, 50vw, 50rem);
--width-52_5: clamp(39.375rem, 52.5vw, 52.5rem);
--width-55: clamp(41.25rem, 55vw, 55rem);
--width-57_5: clamp(43.125rem, 57.5vw, 57.5rem);
--width-60: clamp(45rem, 60vw, 60rem);
--width-62_5: clamp(46.875rem, 62.5vw, 62.5rem);
--width-65: clamp(48.75rem, 65vw, 65rem);
--width-67_5: clamp(50.625rem, 67.5vw, 67.5rem);
--width-70: clamp(52.5rem, 70vw, 70rem);
--width-72_5: clamp(54.375rem, 72.5vw, 72.5rem);
--width-75: clamp(56.25rem, 75vw, 75rem);
--width-77_5: clamp(58.125rem, 77.5vw, 77.5rem);
--width-80: clamp(60rem, 80vw, 80rem);
--width-82_5: clamp(61.875rem, 82.5vw, 82.5rem);
--width-85: clamp(63.75rem, 85vw, 85rem);
--width-87_5: clamp(65.625rem, 87.5vw, 87.5rem);
--width-90: clamp(67.5rem, 90vw, 90rem);
--width-92_5: clamp(69.375rem, 92.5vw, 92.5rem);
--width-95: clamp(71.25rem, 95vw, 95rem);
--width-97_5: clamp(73.125rem, 97.5vw, 97.5rem);
--width-100: clamp(75rem, 100vw, 100rem);
/* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-padding-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-3: calc(var(--width-content-width) / 3 - var(--vw-1_5) / 3 * 2);
--width-carousel-item-4: calc(var(--width-content-width) / 4 - var(--vw-1_5) / 4 * 3);
--width-x-padding-mask-fade: clamp(1.5rem, 4vw, 4rem);
--height-4: 1rem;
--height-5: 1.25rem;
--height-6: 1.5rem;
--height-7: 1.75rem;
--height-8: 2rem;
--height-9: 2.25rem;
--height-10: 2.5rem;
--height-11: 2.75rem;
--height-12: 3rem;
--height-30: 7.5rem;
--height-90: 22.5rem;
--height-100: 25rem;
--height-110: 27.5rem;
--height-120: 30rem;
--height-130: 32.5rem;
--height-140: 35rem;
--height-150: 37.5rem;
/* hero page padding */
--padding-hero-page-padding-half: calc((var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)) / 2);
--padding-hero-page-padding: calc(var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10));
--padding-hero-page-padding-1_5: calc(1.5 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
--padding-hero-page-padding-double: calc(2 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
}
@media (max-width: 767px) {
:root {
/* --vw and text sizing are set by ThemeProvider */
/* --vw: 3vw;
--text-2xs: 2.5vw;
--text-xs: 2.75vw;
--text-sm: 3vw;
--text-base: 3.25vw;
--text-lg: 3.5vw;
--text-xl: 4.25vw;
--text-2xl: 5vw;
--text-3xl: 6vw;
--text-4xl: 7vw;
--text-5xl: 7.5vw;
--text-6xl: 8.5vw;
--text-7xl: 10vw;
--text-8xl: 12vw;
--text-9xl: 14vw; */
--width-5: 5vw;
--width-7_5: 7.5vw;
--width-10: 10vw;
--width-12_5: 12.5vw;
--width-15: 15vw;
--width-17_5: 17.5vw;
--width-20: 20vw;
--width-22_5: 22.5vw;
--width-25: 25vw;
--width-27_5: 27.5vw;
--width-30: 30vw;
--width-32_5: 32.5vw;
--width-35: 35vw;
--width-37_5: 37.5vw;
--width-40: 40vw;
--width-42_5: 42.5vw;
--width-45: 45vw;
--width-47_5: 47.5vw;
--width-50: 50vw;
--width-52_5: 52.5vw;
--width-55: 55vw;
--width-57_5: 57.5vw;
--width-60: 60vw;
--width-62_5: 62.5vw;
--width-65: 65vw;
--width-67_5: 67.5vw;
--width-70: 70vw;
--width-72_5: 72.5vw;
--width-75: 75vw;
--width-77_5: 77.5vw;
--width-80: 80vw;
--width-82_5: 82.5vw;
--width-85: 85vw;
--width-87_5: 87.5vw;
--width-90: 90vw;
--width-92_5: 92.5vw;
--width-95: 95vw;
--width-97_5: 97.5vw;
--width-100: 100vw;
/* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-padding-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-3: var(--width-content-width);
--width-carousel-item-4: var(--width-content-width);
--width-x-padding-mask-fade: 10vw;
--height-4: 3.5vw;
--height-5: 4.5vw;
--height-6: 5.5vw;
--height-7: 6.5vw;
--height-8: 7.5vw;
--height-9: 8.5vw;
--height-10: 9vw;
--height-11: 10vw;
--height-12: 11vw;
--height-30: 25vw;
--height-90: 81vw;
--height-100: 90vw;
--height-110: 99vw;
--height-120: 108vw;
--height-130: 117vw;
--height-140: 126vw;
--height-150: 135vw;
}
}
@theme inline {
--color-background: var(--background);
--color-card: var(--card);
--color-foreground: var(--foreground);
--color-primary-cta: var(--primary-cta);
--color-secondary-cta: var(--secondary-cta);
--color-accent: var(--accent);
--color-background-accent: var(--background-accent);
/* theme border radius */
--radius-theme: var(--theme-border-radius);
--radius-theme-capped: var(--theme-border-radius-capped);
/* text */
--text-2xs: var(--text-2xs);
--text-xs: var(--text-xs);
--text-sm: var(--text-sm);
--text-base: var(--text-base);
--text-lg: var(--text-lg);
--text-xl: var(--text-xl);
--text-2xl: var(--text-2xl);
--text-3xl: var(--text-3xl);
--text-4xl: var(--text-4xl);
--text-5xl: var(--text-5xl);
--text-6xl: var(--text-6xl);
--text-7xl: var(--text-7xl);
--text-8xl: var(--text-8xl);
--text-9xl: var(--text-9xl);
/* height */
--height-4: var(--height-4);
--height-5: var(--height-5);
--height-6: var(--height-6);
--height-7: var(--height-7);
--height-8: var(--height-8);
--height-9: var(--height-9);
--height-11: var(--height-11);
--height-12: var(--height-12);
--height-10: var(--height-10);
--height-30: var(--height-30);
--height-90: var(--height-90);
--height-100: var(--height-100);
--height-110: var(--height-110);
--height-120: var(--height-120);
--height-130: var(--height-130);
--height-140: var(--height-140);
--height-150: var(--height-150);
--height-page-padding: calc(2.25rem+var(--vw-1_5)+var(--vw-1_5));
/* width */
--width-5: var(--width-5);
--width-7_5: var(--width-7_5);
--width-10: var(--width-10);
--width-12_5: var(--width-12_5);
--width-15: var(--width-15);
--width-17: var(--width-17);
--width-17_5: var(--width-17_5);
--width-20: var(--width-20);
--width-21: var(--width-21);
--width-22_5: var(--width-22_5);
--width-25: var(--width-25);
--width-26: var(--width-26);
--width-27_5: var(--width-27_5);
--width-30: var(--width-30);
--width-32_5: var(--width-32_5);
--width-35: var(--width-35);
--width-37_5: var(--width-37_5);
--width-40: var(--width-40);
--width-42_5: var(--width-42_5);
--width-45: var(--width-45);
--width-47_5: var(--width-47_5);
--width-50: var(--width-50);
--width-52_5: var(--width-52_5);
--width-55: var(--width-55);
--width-57_5: var(--width-57_5);
--width-60: var(--width-60);
--width-62_5: var(--width-62_5);
--width-65: var(--width-65);
--width-67_5: var(--width-67_5);
--width-70: var(--width-70);
--width-72_5: var(--width-72_5);
--width-75: var(--width-75);
--width-77_5: var(--width-77_5);
--width-80: var(--width-80);
--width-82_5: var(--width-82_5);
--width-85: var(--width-85);
--width-87_5: var(--width-87_5);
--width-90: var(--width-90);
--width-92_5: var(--width-92_5);
--width-95: var(--width-95);
--width-97_5: var(--width-97_5);
--width-100: var(--width-100);
--width-content-width: var(--width-content-width);
--width-carousel-padding: var(--width-carousel-padding);
--width-carousel-padding-controls: var(--width-carousel-padding-controls);
--width-carousel-padding-expanded: var(--width-carousel-padding-expanded);
--width-carousel-padding-controls-expanded: var(--width-carousel-padding-controls-expanded);
--width-carousel-item-3: var(--width-carousel-item-3);
--width-carousel-item-4: var(--width-carousel-item-4);
--width-x-padding-mask-fade: var(--width-x-padding-mask-fade);
--width-content-width-expanded: var(--width-content-width-expanded);
/* gap */
--spacing-1: var(--vw-0_25);
--spacing-2: var(--vw-0_5);
--spacing-3: var(--vw-0_75);
--spacing-4: var(--vw-1);
--spacing-5: var(--vw-1_25);
--spacing-6: var(--vw-1_5);
--spacing-7: var(--vw-1_75);
--spacing-8: var(--vw-2);
--spacing-x-1: var(--vw-0_25);
--spacing-x-2: var(--vw-0_5);
--spacing-x-3: var(--vw-0_75);
--spacing-x-4: var(--vw-1);
--spacing-x-5: var(--vw-1_25);
--spacing-x-6: var(--vw-1_5);
/* border radius */
--radius-none: 0;
--radius-sm: var(--vw-0_5);
--radius: var(--vw-0_75);
--radius-md: var(--vw-1);
--radius-lg: var(--vw-1_25);
--radius-xl: var(--vw-1_75);
--radius-full: 999px;
/* padding */
--padding-1: var(--vw-0_25);
--padding-2: var(--vw-0_5);
--padding-2.5: var(--vw-0_625);
--padding-3: var(--vw-0_75);
--padding-4: var(--vw-1);
--padding-5: var(--vw-1_25);
--padding-6: var(--vw-1_5);
--padding-7: var(--vw-1_75);
--padding-8: var(--vw-2);
--padding-x-1: var(--vw-0_25);
--padding-x-2: var(--vw-0_5);
--padding-x-3: var(--vw-0_75);
--padding-x-4: var(--vw-1);
--padding-x-5: var(--vw-1_25);
--padding-x-6: var(--vw-1_5);
--padding-x-7: var(--vw-1_75);
--padding-x-8: var(--vw-2);
--padding-hero-page-padding-half: var(--padding-hero-page-padding-half);
--padding-hero-page-padding: var(--padding-hero-page-padding);
--padding-hero-page-padding-1_5: var(--padding-hero-page-padding-1_5);
--padding-hero-page-padding-double: var(--padding-hero-page-padding-double);
/* margin */
--margin-1: var(--vw-0_25);
--margin-2: var(--vw-0_5);
--margin-3: var(--vw-0_75);
--margin-4: var(--vw-1);
--margin-5: var(--vw-1_25);
--margin-6: var(--vw-1_5);
--margin-7: var(--vw-1_75);
--margin-8: var(--vw-2);
--margin-x-1: var(--vw-0_25);
--margin-x-2: var(--vw-0_5);
--margin-x-3: var(--vw-0_75);
--margin-x-4: var(--vw-1);
--margin-x-5: var(--vw-1_25);
--margin-x-6: var(--vw-1_5);
--margin-x-7: var(--vw-1_75);
--margin-x-8: var(--vw-2);
}
@layer components {}
@layer utilities {
/* Card, primary-button, and secondary-button styles are now dynamically injected via ThemeProvider */
/* .card {
@apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
}
.primary-button {
@apply bg-gradient-to-b from-primary-cta/83 to-primary-cta;
box-shadow:
color-mix(in srgb, var(--color-background) 25%, transparent) 0px 1px 1px 0px inset,
color-mix(in srgb, var(--color-primary-cta) 15%, transparent) 3px 3px 3px 0px;
}
.secondary-button {
@apply backdrop-blur-sm bg-gradient-to-br from-secondary-cta/80 to-secondary-cta shadow-sm border border-secondary-cta;
} */
.tag-card {
@apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
}
.mask-padding-x {
-webkit-mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
}
.mask-fade-bottom {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
}
.mask-fade-y {
mask-image: linear-gradient(to bottom,
transparent 0%,
black var(--vw-1_5),
black calc(100% - var(--vw-1_5)),
transparent 100%);
}
.mask-fade-bottom-large {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
}
.mask-fade-bottom-long {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
}
.mask-fade-top-long {
-webkit-mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
}
.mask-fade-xy {
-webkit-mask-image:
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
mask-image:
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
/* ANIMATION */
.animation-container {
animation:
fadeInOpacity 0.8s ease-in-out forwards,
fadeInTranslate 0.6s forwards;
}
.animation-container-fade {
animation: fadeInOpacity 0.8s ease-in-out forwards;
}
@keyframes fadeInOpacity {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeInTranslate {
from {
transform: translateY(0.75vh);
}
to {
transform: translateY(0vh);
}
}
@keyframes aurora {
from {
background-position: 50% 50%, 50% 50%;
}
to {
background-position: 350% 50%, 350% 50%;
}
}
@keyframes spin-slow {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes spin-reverse {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
.animate-spin-slow {
animation: spin-slow 15s linear infinite;
}
.animate-spin-reverse {
animation: spin-reverse 10s linear infinite;
}
@keyframes marquee-vertical {
from {
transform: translateY(0);
}
to {
transform: translateY(-50%);
}
}
.animate-marquee-vertical {
animation: marquee-vertical 20s linear infinite;
}
@keyframes orbit {
from {
transform: rotate(var(--initial-position, 0deg)) translateX(var(--translate-position, 120px)) rotate(calc(-1 * var(--initial-position, 0deg)));
}
to {
transform: rotate(calc(var(--initial-position, 0deg) + 360deg)) translateX(var(--translate-position, 120px)) rotate(calc(-1 * (var(--initial-position, 0deg) + 360deg)));
}
}
@keyframes map-dot-pulse {
0%, 100% {
transform: scale(0.4);
opacity: 0.6;
}
50% {
transform: scale(1.4);
opacity: 1;
}
}
}
* {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 0);
}
html {
overscroll-behavior: none;
overscroll-behavior-y: none;
}
body {
background-color: var(--background);
color: var(--foreground);
font-family: var(--font-dm-sans), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-manrope), sans-serif;
}

1273
src/app/layout.tsx Normal file
View File

File diff suppressed because it is too large Load Diff

293
src/app/page.tsx Normal file
View File

@@ -0,0 +1,293 @@
"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import FaqBase from '@/components/sections/faq/FaqBase';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Linkedin, Globe, Github } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="reveal-blur"
borderRadius="sharp"
contentWidth="small"
sizing="mediumLargeSizeLargeTitles"
background="floatingGradient"
cardStyle="solid"
primaryButtonStyle="flat"
secondaryButtonStyle="radial-glow"
headingFontWeight="medium"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="IT Academy"
navItems={[
{ name: "Home", id: "hero" },
{ name: "Courses", id: "features" },
{ name: "Team", id: "team" },
{ name: "FAQ", id: "faq" }
]}
button={{
text: "Enroll Now", href: "contact"
}}
/>
</div>
<div id="hero" data-section="hero">
<HeroLogoBillboardSplit
logoText="IT ACADEMY"
description="Master in-demand tech skills with industry experts. Learn web development, data science, cybersecurity, and more. Start your coding journey today."
background={{ variant: "radial-gradient" }}
buttons={[
{ text: "Enroll Now", href: "#contact" },
{ text: "View Courses", href: "#features" }
]}
layoutOrder="default"
imageSrc="https://img.b2bpic.net/free-photo/person-computing-software-code-laptop_482257-85707.jpg"
imageAlt="Student coding on laptop"
frameStyle="browser"
/>
</div>
<div id="about" data-section="about">
<InlineImageSplitTextAbout
heading={[
{ type: "text", content: "Transforming careers through" },
{ type: "text", content: "quality tech education" }
]}
buttons={[
{ text: "Learn More", href: "#features" }
]}
useInvertedBackground="noInvert"
/>
</div>
<div id="features" data-section="features">
<FeatureCardMedia
title="Our Courses & Curriculum"
description="Comprehensive programs designed to prepare you for real-world tech careers"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground="invertDefault"
features={[
{
id: "1", title: "Web Development", description: "Learn HTML, CSS, JavaScript, React, and modern web frameworks. Build responsive, dynamic web applications from scratch.", tag: "Popular", imageSrc: "https://img.b2bpic.net/free-photo/computer-program-coding-screen_53876-138060.jpg", buttons: [{ text: "Explore Course", href: "#" }]
},
{
id: "2", title: "Data Science & Analytics", description: "Master Python, SQL, machine learning, and data visualization. Turn data into actionable insights for business.", tag: "In-Demand", imageSrc: "https://img.b2bpic.net/free-photo/programming-background-with-html-text_23-2150040420.jpg", buttons: [{ text: "Explore Course", href: "#" }]
},
{
id: "3", title: "Cybersecurity Essentials", description: "Understand security protocols, threat analysis, and ethical hacking. Protect systems and networks from vulnerabilities.", tag: "Essential", imageSrc: "https://img.b2bpic.net/free-photo/side-shot-code-editor-using-react-js_181624-61842.jpg", buttons: [{ text: "Explore Course", href: "#" }]
}
]}
/>
</div>
<div id="team" data-section="team">
<TeamCardTwo
title="Meet Our Instructors"
description="Learn from experienced professionals with years of industry expertise"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground="noInvert"
gridVariant="uniform-all-items-equal"
members={[
{
id: "1", name: "Sarah Chen", role: "Lead Web Dev Instructor", description: "10+ years in full-stack development. Former tech lead at major startups.", imageSrc: "https://img.b2bpic.net/free-photo/dark-blonde-bearded-man-crosses-his-hands-chest-posing-black-shirt_8353-1116.jpg", socialLinks: [
{ icon: Linkedin, url: "https://linkedin.com" },
{ icon: Globe, url: "https://example.com" }
]
},
{
id: "2", name: "Marcus Johnson", role: "Data Science Expert", description: "PhD in Computer Science. Published researcher in machine learning applications.", imageSrc: "https://img.b2bpic.net/free-photo/low-angle-businessman_23-2148825893.jpg", socialLinks: [
{ icon: Linkedin, url: "https://linkedin.com" },
{ icon: Github, url: "https://github.com" }
]
},
{
id: "3", name: "Emily Rodriguez", role: "Cybersecurity Specialist", description: "Certified ethical hacker. 8+ years securing enterprise infrastructure.", imageSrc: "https://img.b2bpic.net/free-photo/portrait-happy-confident-young-businessman-with-arm-crossed-holding-mobile-phone-hand_23-2148096508.jpg", socialLinks: [
{ icon: Linkedin, url: "https://linkedin.com" },
{ icon: Globe, url: "https://example.com" }
]
},
{
id: "4", name: "David Kim", role: "Curriculum Director", description: "Former engineering manager. Designs cutting-edge tech education programs.", imageSrc: "https://img.b2bpic.net/free-photo/caucasian-brunette-male-portrait_158595-7921.jpg", socialLinks: [
{ icon: Linkedin, url: "https://linkedin.com" },
{ icon: Github, url: "https://github.com" }
]
}
]}
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardTwo
title="Student Success Stories"
description="Real results from our comprehensive training programs"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground="invertDefault"
gridVariant="uniform-all-items-equal"
metrics={[
{
id: "1", value: "95%", description: "Job Placement Rate"
},
{
id: "2", value: "2500+", description: "Graduates Employed"
},
{
id: "3", value: "4.8/5", description: "Student Satisfaction"
},
{
id: "4", value: "50K+", description: "Average Starting Salary"
}
]}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardOne
title="What Our Graduates Say"
description="Real feedback from students who transformed their careers"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground="noInvert"
gridVariant="uniform-all-items-equal"
testimonials={[
{
id: "1", name: "Alex Martinez", role: "Junior Developer", company: "TechCorp Solutions", rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/man-portrait_1296-491.jpg"
},
{
id: "2", name: "Jessica Lee", role: "Data Analyst", company: "DataInsights Inc", rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/business-man-working-late-office_23-2148991382.jpg"
},
{
id: "3", name: "Robert Chang", role: "Security Engineer", company: "CloudSecure", rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/business-concept-portrait-handsome-serious-business-man-suit-looking-work-laptop-white-background_1258-103931.jpg"
},
{
id: "4", name: "Maria Santos", role: "Full Stack Developer", company: "StartupXYZ", rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/portrait-handsome-bearded-male-wearing-stylish-suit-listeni_613910-1578.jpg"
},
{
id: "5", name: "James Wilson", role: "Frontend Specialist", company: "DesignStudio Pro", rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/man-portrait-posing-loft-modern-space_158595-5365.jpg"
},
{
id: "6", name: "Nina Patel", role: "ML Engineer", company: "AI Innovations", rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/businessman-wearing-coat_1098-3778.jpg"
}
]}
/>
</div>
<div id="faq" data-section="faq">
<FaqBase
title="Frequently Asked Questions"
description="Find answers to common questions about our courses and enrollment"
textboxLayout="default"
useInvertedBackground="invertDefault"
animationType="smooth"
showCard={true}
faqs={[
{
id: "1", title: "What prior experience do I need?", content: "Our courses are designed for beginners through intermediate learners. While basic computer literacy is helpful, most courses start from fundamentals and progress gradually. We provide comprehensive support for all skill levels."
},
{
id: "2", title: "How long are the courses?", content: "Course duration varies: Web Development (12 weeks), Data Science (14 weeks), Cybersecurity (10 weeks). All courses are full-time, Monday through Friday, 9 AM to 5 PM. Flexible evening and weekend options are also available."
},
{
id: "3", title: "Is job placement assistance provided?", content: "Yes! We provide dedicated career support including resume review, interview coaching, LinkedIn optimization, and direct connections with our network of hiring partners. Our 95% job placement rate speaks to the quality of this support."
},
{
id: "4", title: "What is your refund policy?", content: "We offer a 14-day money-back guarantee if you're not satisfied with the course. If you withdraw within two weeks of starting, you'll receive a full refund. After two weeks, refunds are prorated based on completion."
},
{
id: "5", title: "Do you offer payment plans?", content: "Absolutely! We offer flexible payment plans to make education accessible. Options include monthly installments, corporate sponsorships, and income-share agreements where you pay a percentage of your salary after employment."
},
{
id: "6", title: "Will I get a certificate?", content: "Yes, upon completion you'll receive an industry-recognized certificate. You'll also build a portfolio of real projects that demonstrates your skills to potential employers."
}
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
title="Ready to Start Your Tech Career?"
description="Join hundreds of students who have transformed their careers with our comprehensive tech education. Fill out the form below and our enrollment team will contact you within 24 hours."
inputs={[
{
name: "fullName", type: "text", placeholder: "Full Name", required: true
},
{
name: "email", type: "email", placeholder: "Email Address", required: true
},
{
name: "phone", type: "tel", placeholder: "Phone Number", required: true
},
{
name: "course", type: "text", placeholder: "Preferred Course (Web Dev, Data Science, Cybersecurity)", required: true
}
]}
textarea={{
name: "message", placeholder: "Tell us about your background and career goals...", rows: 5,
required: false
}}
useInvertedBackground="noInvert"
imageSrc="https://img.b2bpic.net/free-photo/young-businesswoman-talking-cellphone-office_23-2147843628.jpg"
imageAlt="IT Academy team collaboration"
mediaPosition="right"
buttonText="Request Information"
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="IT Academy"
columns={[
{
title: "Courses", items: [
{ label: "Web Development", href: "#features" },
{ label: "Data Science", href: "#features" },
{ label: "Cybersecurity", href: "#features" }
]
},
{
title: "Company", items: [
{ label: "About Us", href: "#about" },
{ label: "Meet Our Instructors", href: "#team" },
{ label: "Success Stories", href: "#metrics" }
]
},
{
title: "Resources", items: [
{ label: "FAQ", href: "#faq" },
{ label: "Blog", href: "#" },
{ label: "Student Portal", href: "#" }
]
},
{
title: "Legal", items: [
{ label: "Terms of Service", href: "#" },
{ label: "Privacy Policy", href: "#" },
{ label: "Cookie Policy", href: "#" }
]
}
]}
copyrightText="© 2025 IT Academy. All rights reserved. Empowering the next generation of tech professionals."
/>
</div>
</ThemeProvider>
);
}