Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 657044a

Browse files
rccyxrccyx
committed
feat: looksmaxx the home page
1 parent 8b367b7 commit 657044a

File tree

9 files changed

+15998
-315
lines changed

9 files changed

+15998
-315
lines changed

‎package-lock.json‎

Lines changed: 15773 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,7 @@
7777
"sharp": "^0.33.2",
7878
"sonner": "^1.3.1",
7979
"tailwind-merge": "^2.2.0",
80-
"tailwindcss-animate": "^1.0.7"
80+
"tailwindcss-animate": "^1.0.7",
81+
"typed.js": "^2.1.0"
8182
}
8283
}

‎src/app/(pages)/services/page.tsx‎

Lines changed: 116 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,120 @@
11
'use client';
2-
import { useEffect } from 'react';
3-
import LoadingScreen from '../blog/loading';
42

5-
export default function Redirect() {
6-
useEffect(() => {
7-
window.location.href = '/services/all';
8-
}, []);
3+
import Footer from '@/app/components/footer/footer';
4+
import Link from 'next/link';
5+
import { Code, Computer, ScanEye } from 'lucide-react';
6+
import { motion } from 'framer-motion';
97

10-
return <LoadingScreen></LoadingScreen>;
8+
// TODO: setup SEO
9+
10+
export default function Component() {
11+
const TRANSITION_DURATION: number = 0.3; // secs
12+
const TRANSITION_DELAY: number = 0.4;
13+
const transition = {
14+
duration: TRANSITION_DURATION,
15+
delay: TRANSITION_DELAY,
16+
};
17+
return (
18+
<>
19+
<section className="w-full pt-12 md:pt-24 lg:pt-32">
20+
<div className="px-4 md:px-6">
21+
<div className="space-y-6 text-center">
22+
<div className="space-y-2 mx-auto max-w-2xl">
23+
<div className="space-y-2">
24+
<motion.h2
25+
initial={{
26+
opacity: 0,
27+
x: 50,
28+
}}
29+
animate={{
30+
opacity: 1,
31+
x: 0,
32+
}}
33+
transition={transition}
34+
className="dimmed-4 text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl"
35+
>
36+
Expert Consulting. Custom Solutions.
37+
</motion.h2>
38+
<motion.p
39+
initial={{
40+
opacity: 0,
41+
x: -50,
42+
}}
43+
animate={{
44+
opacity: 1,
45+
x: 0,
46+
}}
47+
transition={transition}
48+
className="dimmed-1 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed"
49+
>
50+
Our team of experts is here to help you succeed. From
51+
architecting scalable APIs to designing beautiful user
52+
interfaces, we have the skills and experience to bring your
53+
ideas to life.
54+
</motion.p>
55+
</div>
56+
</div>
57+
</div>
58+
<motion.div
59+
initial={{
60+
opacity: 0,
61+
scale: 0.8,
62+
}}
63+
animate={{
64+
opacity: 1,
65+
scale: 1,
66+
}}
67+
transition={{
68+
duration: 0.4,
69+
delay: 1,
70+
}}
71+
className="grid max-w-5xl grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-10 mx-auto items-start justify-center py-8 md:py-12 lg:py-16 px-4 md:px-6"
72+
>
73+
<Link
74+
href="#"
75+
className="border order-white/10b p-4 rounded-[2rem] glowsup-dimmed slower-transition hover:slower-translate hover:scale-110 slower-transition shadow hover:shadow-[0px_4px_88px_0px_var(--deeper-purple)]"
76+
>
77+
<div className="flex flex-col gap-2 m-1 items-center">
78+
<ScanEye className="w-10 h-10 mx-auto" />
79+
<h3 className="dimmed-4 text-2xl font-bold">Consulting</h3>
80+
<p className="text-center md:text-base/relaxed dimmed-1">
81+
Migrate to the cloud with confidence. Our team can help you
82+
design and deploy a scalable, secure architecture.
83+
</p>
84+
</div>
85+
</Link>
86+
<Link
87+
href="/"
88+
className="border order-white/10b p-4 rounded-[2rem] glowsup-dimmed slower-transition hover:slower-translate hover:scale-110 slower-transition shadow hover:shadow-[0px_4px_88px_0px_var(--deeper-purple)]"
89+
>
90+
<div className="flex flex-col gap-2 m-1 items-center">
91+
<Code className="w-10 h-10 mx-auto" />
92+
<h3 className="dimmed-4 text-2xl font-bold">Code Audits</h3>
93+
<p className="text-center md:text-base/relaxed dimmed-1">
94+
Migrate to the cloud with confidence. Our team can help you
95+
design and deploy a scalable, secure architecture.
96+
</p>
97+
</div>
98+
</Link>
99+
<Link
100+
href="/"
101+
className="border order-white/10b p-4 rounded-[2rem] glowsup-dimmed slower-transition hover:slower-translate hover:scale-110 slower-transition shadow hover:shadow-[0px_4px_88px_0px_var(--deeper-purple)]"
102+
>
103+
<div className="flex flex-col gap-2 m-1 items-center">
104+
<Computer className="w-10 h-10 mx-auto" />
105+
<h3 className="text-2xl font-bold dimmed-4">
106+
Software Solutions
107+
</h3>
108+
<p className="text-center md:text-base/relaxed dimmed-1">
109+
Migrate to the cloud with confidence. Our team can help you
110+
design and deploy a scalable, secure architecture.
111+
</p>
112+
</div>
113+
</Link>
114+
</motion.div>
115+
</div>
116+
</section>
117+
<Footer />
118+
</>
119+
);
11120
}

‎src/app/(pages)/t/page.tsx‎

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎src/app/components/footer/copyright.tsx‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,21 @@
1+
'use client';
2+
import { motion } from 'framer-motion';
13
import Link from 'next/link';
24
export default function CopyRight() {
35
return (
4-
<>
6+
<motion.div
7+
viewport={{ once: true }} // only run once per load
8+
whileInView={{
9+
opacity: 1,
10+
}}
11+
initial={{
12+
opacity: 0,
13+
}}
14+
transition={{
15+
duration: 1,
16+
ease: 'easeInOut',
17+
}}
18+
>
519
<p className="flex items-center justify-center text-secondary-center dimmed-3 text-sm">
620
&copy; {new Date().getFullYear()} Ashref Gwader. All rights reserved
721
</p>
@@ -19,6 +33,6 @@ export default function CopyRight() {
1933
Privacy
2034
</Link>
2135
</div>
22-
</>
36+
</motion.div>
2337
);
2438
}

‎src/app/components/nav/nav.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,12 @@ export function LeftNav() {
5656
return (
5757
<div className="hidden sm:ml-6 sm:block">
5858
<div className="flex space-x-12">
59+
<Link
60+
className="nav-link-shadow dimmed-3 font-semibold average-transition hover:average-translate hover:text-white"
61+
href="/"
62+
>
63+
Home
64+
</Link>
5965
<Link
6066
className="nav-link-shadow dimmed-3 font-semibold average-transition hover:average-translate hover:text-white"
6167
href="/services"

‎src/app/components/protos/hero-section.tsx‎

Lines changed: 85 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,41 @@
22
'use client';
33
import { Button } from '../ui/button';
44
import { motion } from 'framer-motion';
5+
import Typed from 'typed.js';
6+
import { useEffect, useRef } from 'react';
7+
8+
function TypingAnimation() {
9+
const el = useRef(null);
10+
11+
useEffect(() => {
12+
const typed = new Typed(el.current, {
13+
strings: [
14+
'I <solid class="gradient-text-purple">do</solid> software',
15+
'I <solid class="gradient-text-purple">solve</solid> software',
16+
],
17+
typeSpeed: 50,
18+
loop: true,
19+
});
20+
21+
return () => {
22+
typed.destroy();
23+
};
24+
}, []);
25+
26+
return (
27+
<div className="">
28+
<span ref={el} />
29+
</div>
30+
);
31+
}
532

633
export default function HeroSection() {
34+
const TRANSITION_DURATION: number = 0.3; // secs
35+
const TRANSITION_DELAY: number = 0.4;
36+
const transition = {
37+
duration: TRANSITION_DURATION,
38+
delay: TRANSITION_DELAY,
39+
};
740
return (
841
<motion.section
942
initial={{
@@ -21,18 +54,60 @@ export default function HeroSection() {
2154
<div className="container px-4 md:px-6">
2255
<div className="flex flex-col items-center space-y-4 text-center">
2356
<div className="space-y-2">
24-
<h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl/none">
25-
Hey, I'm Ashref
26-
</h1>
27-
<TextContent>
28-
Welcome to my corner of the internet where I share my thoughts and
29-
conduct business.
30-
</TextContent>
57+
<motion.div
58+
initial={{
59+
opacity: 0,
60+
x: 50,
61+
}}
62+
animate={{
63+
opacity: 1,
64+
x: 0,
65+
}}
66+
transition={transition}
67+
>
68+
<h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl/none">
69+
Hey, I'm Ashref
70+
</h1>
71+
<h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl/none">
72+
<TypingAnimation></TypingAnimation>
73+
</h1>
74+
</motion.div>
75+
<motion.div
76+
initial={{
77+
opacity: 0,
78+
x: -50,
79+
}}
80+
animate={{
81+
opacity: 1,
82+
x: 0,
83+
}}
84+
transition={transition}
85+
>
86+
<TextContent>
87+
Welcome to my corner of the internet where I share my thoughts
88+
and conduct business. You can read my blogs or checkout my
89+
services, or learn more about me
90+
</TextContent>
91+
</motion.div>
3192
</div>
3293
<div className="w-full max-w-sm space-y-2">
33-
<form className="grid gap-2">
34-
<Button type="submit">Let's work together</Button>
35-
</form>
94+
<motion.div
95+
className="grid gap-2"
96+
initial={{
97+
opacity: 0,
98+
scale: 0.8,
99+
}}
100+
animate={{
101+
opacity: 1,
102+
scale: 1,
103+
}}
104+
transition={{
105+
duration: 0.4,
106+
delay: 3,
107+
}}
108+
>
109+
<Button type="submit">Let's build something great</Button>
110+
</motion.div>
36111
</div>
37112
</div>
38113
</div>

0 commit comments

Comments
 (0)