Skip to content

Commit a27d687

Browse files
Ammar7077Ammar7077
committed
v0.0.1
Implements landing page redesign with new sections Redesigns the landing page with a new hero section, animated grid background, data table, timeline, and developer testimonials to improve the user experience. Adds gsap for advanced scroll-based animations and includes other dependencies for enhanced UI components such as Swiper, React Icons. Removes the old home page content and associated components and includes associated assets like icons and images. Updates layout to incorporate Mozilla Text font and improves styling. Redesigns landing page with new sections Implements a redesigned landing page with a new hero section, animated grid, data table, timeline, and developer testimonials to enhance user experience. Adds gsap for scroll-based animations and other UI dependencies. Removes old home page content and updates layout styling.
1 parent c3077ff commit a27d687

24 files changed

+4847
-76
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,3 +45,4 @@ package-lock.json
4545
yarn.lock
4646
pnpm-lock.yaml
4747
bun.lockb
48+
bun.lock

‎bun.lockb‎

-415 KB
Binary file not shown.

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
"cmdk": "^1.1.1",
2626
"embla-carousel-react": "^8.6.0",
2727
"framer-motion": "^12.23.3",
28+
"gsap": "^3.13.0",
2829
"jszip": "^3.10.1",
2930
"lucide-react": "^0.474.0",
3031
"motion": "^12.23.6",
@@ -36,6 +37,8 @@
3637
"react-day-picker": "^9.8.0",
3738
"react-dom": "^19.0.0",
3839
"react-dropzone": "^14.3.8",
40+
"react-icons": "^5.5.0",
41+
"swiper": "^12.0.2",
3942
"tailwind-merge": "^3.0.1",
4043
"tailwind-scrollbar-hide": "^2.0.0",
4144
"tailwindcss-animate": "^1.0.7"

‎public/1753286370096.ico‎

149 KB
Binary file not shown.

‎public/1753286370096.png‎

114 KB
Loading

‎public/thmnail.PNG‎

170 KB
Loading

‎src/app/(site)/page.tsx‎

Lines changed: 34 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,40 @@
1-
"use client";
2-
import AnimatedNetworkNodes from "@/shared/components/AnimatedNetworkNodes";
3-
import Image from "next/image";
4-
import logo from "@/assets/images/logo/logo.png";
5-
import Link from "next/link";
1+
import "../../shared/css/landing/landing-globals.css";
2+
import HeroSection from "@/shared/components/landing/HeroSection";
3+
import Cards from "@/shared/components/landing/Cards";
4+
import TimelineCards from "@/shared/components/landing/Timeline";
5+
import DeveloperTestimonials from "@/shared/components/landing/DeveloperTestimonials";
6+
import DataTable from "@/shared/components/landing/Table";
7+
import { Source_Code_Pro } from "next/font/google";
8+
import AnimatedGrid from "@/shared/components/landing/AnimatedGrid";
9+
import Footer from "@/shared/components/landing/Footer";
610

7-
const Home = () => {
8-
return (
9-
<div className="relative flex flex-col items-center min-h-screen px-4 gap-32 overflow-hidden py-10">
10-
{/* Background Animation */}
11-
<div className="absolute flex flex-col inset-0 w-full h-full z-[-1] pointer-events-none">
12-
<div className="absolute inset-0 bg-black/60 z-[1]" />
13-
<Image
14-
alt="logo"
15-
src={logo}
16-
className="absolute top-[15%] left-[40%] w-[120px] h-[120px] lg:xl:w-[200px] lg:xl:h-[200px]"
17-
/>
18-
<AnimatedNetworkNodes />
19-
</div>
20-
21-
<div className="flex flex-wrap bg-white/10 w-full rounded-lg p-10 justify-between items-center">
22-
<div>
23-
<h1 className="text-xl md:text-3xl font-bold mb-6 bg-gradient-to-r from-white via-slate-400 to-blue-300 bg-clip-text text-transparent leading-tight">
24-
Build Your Backend
25-
<br />
26-
from SQL Instantly
27-
</h1>
28-
<p className="text-xl md:text-2xl text-slate-400 max-w-3xl mx-auto leading-relaxed">
29-
Upload your schema
30-
<br />
31-
Select features
32-
<br />
33-
Get a full backend in seconds
34-
<br />
35-
<span className="text-blue-800 font-bold">
36-
No more manual setup
37-
<br />
38-
No more boilerplate hell
39-
</span>
40-
</p>
41-
</div>
42-
43-
<div className="px-10 w-[250px] h-[200px] md:lg:w-[350px] rounded-lg">
44-
<iframe
45-
className="w-full h-full object-cover scale-[1.5] rounded-lg"
46-
src="https://www.youtube.com/embed/WCwD_1Qm218?autoplay=0&mute=0&loop=1&playlist=WCwD_1Qm218"
47-
title="YouTube Short"
48-
frameBorder="0"
49-
allow="autoplay; encrypted-media"
50-
allowFullScreen
51-
/>
52-
</div>
53-
</div>
54-
<Link href="/develop">
55-
<div className="w-[300px] h-[60px] bg-gradient-to-r from-blue-700 via-slate-400 to-blue-500 rounded-lg text-lg font-bold shadow-xl items-center justify-center flex">
56-
{"Develop now!"}
57-
</div>
58-
</Link>
11+
const sourceCodePro = Source_Code_Pro({
12+
subsets: ["latin"],
13+
variable: "--font-source-code-pro",
14+
display: "swap",
15+
});
5916

60-
{/* <div className="slide-br w-full flex justify-center md:lg:justify-start lg:pl-[10%]">
61-
<Shape />
62-
</div>
63-
64-
<div className="slide-br w-full flex justify-center">
65-
<Shape />
66-
</div>
17+
export const metadata = {
18+
title: "DEV GIT",
19+
description: "Welcome to the first full backend generator.",
20+
icons: {
21+
icon: "/1753286370096.ico",
22+
},
23+
};
6724

68-
<div className="slide-br w-full flex justify-center md:lg:justify-end lg:pr-[10%]">
69-
<Shape />
70-
</div> */}
25+
const Home = () => {
26+
return (
27+
<div
28+
className={`landing-main ${sourceCodePro.variable} bg-black text-white relative min-h-screen overflow-x-hidden`}
29+
>
30+
<AnimatedGrid>
31+
<HeroSection />
32+
<Cards />
33+
<DataTable />
34+
<TimelineCards />
35+
<DeveloperTestimonials />
36+
</AnimatedGrid>
37+
<Footer />
7138
</div>
7239
);
7340
};

‎src/app/layout.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,16 @@ export default function RootLayout({
1717
}>) {
1818
return (
1919
<html lang="en" className="dark" style={{ colorScheme: "dark" }}>
20+
<head>
21+
<link rel="preconnect" href="https://fonts.googleapis.com" />
22+
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
23+
<link
24+
href="https://fonts.googleapis.com/css2?family=Mozilla+Text:wght@200..700&display=swap"
25+
rel="stylesheet"
26+
/>
27+
</head>
2028
<body
21-
className={`${geistSans.variable} ${geistMono.variable} antialiased pt-10 h-screen`}
29+
className={`${geistSans.variable} ${geistMono.variable} antialiased h-screen`}
2230
>
2331
{children}
2432
</body>

‎src/shared/components/DrawerWrapper.component.tsx‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,7 @@
33
import { useState, useEffect } from "react";
44
import { EnumLocalStorage } from "@/shared/constants/LocalStorage.constants";
55
import { MiniDrawer } from "./MiniDrawer.component";
6-
import logo from "../../assets/images/logo/logo.png";
7-
import Image from "next/image";
6+
import { Menu } from "lucide-react";
87

98
export const DrawerWrapper = ({ children }: { children: React.ReactNode }) => {
109
const [isDrawerOpen, setIsDrawerOpen] = useState(false);
@@ -41,7 +40,7 @@ export const DrawerWrapper = ({ children }: { children: React.ReactNode }) => {
4140
return (
4241
<main
4342
className={`${
44-
isDrawerOpen && !isTablet ? "ml-72" : isMobile ? "ml-0" : "ml-24"
43+
isDrawerOpen && !isTablet ? "ml-[256px]" : isMobile ? "ml-0" : "ml-20"
4544
} duration-300`}
4645
>
4746
{isMobile && !isDrawerOpen ? (
@@ -53,11 +52,7 @@ export const DrawerWrapper = ({ children }: { children: React.ReactNode }) => {
5352
setIsDrawerOpen(!isDrawerOpen);
5453
}}
5554
>
56-
<Image
57-
alt="logo"
58-
src={logo}
59-
className="self-center justify-center w-14 h-w-14"
60-
/>
55+
<Menu />
6156
{isDrawerOpen && (
6257
<span className="inline-flex">
6358
<p className="text-blue-400">Dev</p>-

‎src/shared/components/landing/AnimatedGrid.tsx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
'use client'
2+
import { useState, useEffect, ReactNode } from 'react'
3+
import styles from '../../css/landing/AnimatedGrid.module.css'
4+
5+
interface AnimatedGridProps {
6+
children: ReactNode
7+
className?: string
8+
}
9+
10+
export default function AnimatedGrid({ children, className = "" }: AnimatedGridProps) {
11+
const [scrollLevel, setScrollLevel] = useState<number>(0)
12+
13+
useEffect(() => {
14+
const handleScroll = () => {
15+
const scrollY = window.scrollY
16+
const windowHeight = window.innerHeight
17+
const documentHeight = document.documentElement.scrollHeight - windowHeight
18+
19+
const scrollPercentage = Math.min(scrollY / documentHeight, 1)
20+
21+
let newLevel = 0
22+
if (scrollPercentage > 0.15) newLevel = 1
23+
if (scrollPercentage > 0.35) newLevel = 2
24+
if (scrollPercentage > 0.55) newLevel = 3
25+
if (scrollPercentage > 0.75) newLevel = 4
26+
if (scrollPercentage > 0.9) newLevel = 5
27+
28+
setScrollLevel(newLevel)
29+
}
30+
31+
handleScroll()
32+
33+
window.addEventListener('scroll', handleScroll, { passive: true })
34+
window.addEventListener('resize', handleScroll, { passive: true })
35+
return () => {
36+
window.removeEventListener('scroll', handleScroll)
37+
window.removeEventListener('resize', handleScroll)
38+
}
39+
}, [])
40+
41+
const getScrollClass = () => {
42+
switch (scrollLevel) {
43+
case 1: return styles.scrollLevel1
44+
case 2: return styles.scrollLevel2
45+
case 3: return styles.scrollLevel3
46+
case 4: return styles.scrollLevel4
47+
case 5: return styles.scrollLevel5
48+
default: return ''
49+
}
50+
}
51+
52+
return (
53+
<div className={`${styles.backgroundContainer} ${className}`}>
54+
<div className={`${styles.animatedLines} ${getScrollClass()}`}>
55+
<div className={`${styles.gridLine} ${styles.gridLineHorizontal} ${styles.horizontal1}`}></div>
56+
<div className={`${styles.gridLine} ${styles.gridLineHorizontal} ${styles.horizontal2}`}></div>
57+
<div className={`${styles.gridLine} ${styles.gridLineHorizontal} ${styles.horizontal3}`}></div>
58+
<div className={`${styles.gridLine} ${styles.gridLineHorizontal} ${styles.horizontal4}`}></div>
59+
<div className={`${styles.gridLine} ${styles.gridLineHorizontal} ${styles.horizontal5}`}></div>
60+
<div className={`${styles.gridLine} ${styles.gridLineHorizontal} ${styles.horizontal6}`}></div>
61+
<div className={`${styles.gridLine} ${styles.gridLineHorizontal} ${styles.horizontal7}`}></div>
62+
63+
<div className={`${styles.gridLine} ${styles.gridLineVertical} ${styles.vertical1}`}></div>
64+
<div className={`${styles.gridLine} ${styles.gridLineVertical} ${styles.vertical2}`}></div>
65+
<div className={`${styles.gridLine} ${styles.gridLineVertical} ${styles.vertical3}`}></div>
66+
67+
<div className={`${styles.gridLine} ${styles.gridLineDiagonal} ${styles.diagonal1}`}></div>
68+
<div className={`${styles.gridLine} ${styles.gridLineDiagonal} ${styles.diagonal2}`}></div>
69+
70+
<div className={`${styles.gridLine} ${styles.newHorizontalLine}`}></div>
71+
<div className={`${styles.gridLine} ${styles.newVerticalLine}`}></div>
72+
</div>
73+
74+
<div className={styles.content}>
75+
{children}
76+
</div>
77+
</div>
78+
)
79+
}

0 commit comments

Comments
 (0)