Skip to content

Commit a727e6b

Browse files
mehdibhamehdibha
committed
fix: make home page responsive
1 parent b591110 commit a727e6b

File tree

10 files changed

+77
-84
lines changed

10 files changed

+77
-84
lines changed

‎src/app/layout.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -67,9 +67,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
6767
<div className="relative">
6868
<Background />
6969
<Header />
70-
<div className="container min-h-[calc(100vh-64px)] max-w-6xl pt-10">
71-
{children}
72-
</div>
70+
<div className="container min-h-[calc(100vh-64px)] pt-10">{children}</div>
7371
<Footer />
7472
</div>
7573
</Providers>

‎src/components/footer.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ const socialLinks = [
6666
export const Footer = () => {
6767
return (
6868
<div className="container mt-36 pb-8">
69-
<div className="flex items-start justify-between">
69+
<div className="flex flex-col items-start justify-between gap-10 lg:flex-row">
7070
<div className="max-w-sm">
7171
<NavLink
7272
href="/"
@@ -98,7 +98,7 @@ export const Footer = () => {
9898
</div>
9999
<ThemeToggle className="mt-8" />
100100
</div>
101-
<div className="grid grid-cols-3 gap-16">
101+
<div className="grid grid-cols-3 gap-4 sm:gap-16">
102102
{links.map((group, index) => (
103103
<div key={index}>
104104
<h4 className="font-bold">{group.label}</h4>

‎src/components/marketing/brands.tsx

+16-20
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from "react";
2+
import { cn } from "@/utils/classes";
23
import { FramerLogo } from "@/assets/images/brands/framer";
34
import { NextjsLogo } from "@/assets/images/brands/nextjs";
45
import { ShadcnLogo } from "@/assets/images/brands/shadcn";
@@ -7,27 +8,22 @@ import { UseHooksLogo } from "@/assets/images/brands/usehooks";
78

89
export const Brands = ({ className }: { className?: string }) => {
910
return (
10-
<div className={className}>
11-
{/* <h2 className="text-center text-lg font-semibold text-muted-foreground/70">
12-
We use the latest technologies.
13-
</h2> */}
14-
<div className="mt-4 flex items-center justify-center space-x-8">
15-
<TailwindLogo height={30} className="fill-muted-foreground" />
16-
<NextjsLogo height={25} className="fill-muted-foreground" />
17-
<div className="flex items-center space-x-3">
18-
<FramerLogo height={30} className="fill-muted-foreground" />
19-
<span className="font-display text-2xl font-bold tracking-tighter text-muted-foreground">
20-
Motion
21-
</span>
22-
</div>
23-
<div className="flex items-center space-x-2">
24-
<ShadcnLogo height={30} className="fill-muted-foreground" />
25-
<span className="font-sans text-3xl font-bold text-muted-foreground">
26-
shadcn/ui
27-
</span>
28-
</div>
29-
<UseHooksLogo height={25} className="fill-muted-foreground" />
11+
<div className={cn("flex flex-wrap items-center justify-center gap-8 ", className)}>
12+
<TailwindLogo className="h-6 fill-muted-foreground md:h-8" />
13+
<NextjsLogo className="h-5 fill-muted-foreground md:h-7" />
14+
<div className="flex items-center space-x-3">
15+
<FramerLogo className="h-6 fill-muted-foreground md:h-8" />
16+
<span className="font-display text-2xl font-bold tracking-tighter text-muted-foreground">
17+
Motion
18+
</span>
3019
</div>
20+
<div className="flex items-center space-x-2">
21+
<ShadcnLogo className="h-6 fill-muted-foreground md:h-8" />
22+
<span className="font-sans text-3xl font-bold text-muted-foreground">
23+
shadcn/ui
24+
</span>
25+
</div>
26+
<UseHooksLogo className="h-5 fill-muted-foreground md:h-7" />
3127
</div>
3228
);
3329
};

‎src/components/marketing/cta.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export const CallToAction = (props: CallToActionProps) => {
1010
const { className } = props;
1111
return (
1212
<section className={cn("px-6 text-center", className)}>
13-
<h2 className="mx-auto mt-8 max-w-2xl text-5xl font-bold tracking-tight">
13+
<h2 className="mx-auto mt-8 max-w-2xl text-4xl font-bold tracking-tight lg:text-5xl">
1414
Proudly open source
1515
</h2>
1616
<p className="mt-4 text-lg text-muted-foreground">

‎src/components/marketing/features.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ import { cn } from "@/utils/classes";
44
export const Features = ({ className }: { className?: string }) => {
55
return (
66
<div className={className}>
7-
<h2 className="pb-1 text-center font-display text-6xl font-bold tracking-tighter">
7+
<h2 className="pb-1 text-center font-display text-4xl font-bold tracking-tighter md:text-5xl lg:text-6xl">
88
<AnimatedWord word="Copy." index={1} />
99
<AnimatedWord word="Paste." index={2} />
1010
<AnimatedWord word="Own it." index={3} />
1111
</h2>
12-
<p className="mt-8 text-xl font-semibold text-muted-foreground">
12+
<p className="mt-4 text-base text-muted-foreground md:mt-8 md:text-lg lg:text-xl">
1313
rCopy is not another package that you need to install. We strongly believe that
1414
you should own your code. It&apos;s a collection of re-usable components, hooks,
1515
icons, pages and more that you can copy and paste into your apps, modify it as you

‎src/components/marketing/hero.tsx ‎src/components/marketing/hero/animation.tsx

+2-54
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,23 @@
11
"use client";
22

33
import React from "react";
4-
import Link from "next/link";
54
import { LayoutGroup, motion } from "framer-motion";
65
import {
76
AlignCenterIcon,
8-
ArrowRightIcon,
97
AtSignIcon,
108
BarChart4Icon,
119
BellIcon,
1210
BluetoothIcon,
1311
BoldIcon,
14-
BriefcaseIcon,
15-
Clock2Icon,
16-
CloudIcon,
1712
CodeIcon,
1813
InboxIcon,
1914
LinkIcon,
2015
MailIcon,
2116
MoonIcon,
22-
SearchIcon,
23-
SparklesIcon,
24-
ThumbsUpIcon,
2517
UserRoundIcon,
2618
} from "lucide-react";
27-
import Balancer from "react-wrap-balancer";
28-
import { badgeVariants } from "@/components/ui/badge";
29-
import { Button } from "@/components/ui/button";
30-
import { cn } from "@/utils/classes";
3119

32-
export const Hero = ({ className }: { className?: string }) => {
33-
return (
34-
<section className={cn("flex items-start justify-between", className)}>
35-
<div>
36-
<Link
37-
href="https://github.com/mehdibha/rcopy"
38-
target="_blank"
39-
className={cn(
40-
badgeVariants({ variant: "outline", size: "md" }),
41-
"cursor-pointer space-x-2 font-mono delay-75 duration-200 hover:bg-secondary"
42-
)}
43-
>
44-
<SparklesIcon size={18} />
45-
<span>Star us on GitHub</span> <ArrowRightIcon size={15} />
46-
</Link>
47-
<h1 className="mt-4 font-display text-6xl font-bold leading-tight tracking-tight">
48-
<Balancer>Everything you need to build your React app</Balancer>
49-
</h1>
50-
<h2 className="text-md mt-6 text-muted-foreground md:text-lg lg:text-xl">
51-
Copy the code, paste it, customize it, own it. Done.
52-
</h2>
53-
<div className="mt-10 flex space-x-4">
54-
<Button size="lg" variant="default">
55-
Explore components
56-
</Button>
57-
<Button size="lg" variant="outline">
58-
<SearchIcon size={20} className="mr-2" />
59-
Quick search
60-
</Button>
61-
</div>
62-
</div>
63-
<Animation />
64-
</section>
65-
);
66-
};
67-
68-
const Animation = () => {
20+
export const Animation = () => {
6921
const [selectedTab, setSelectedTab] = React.useState(2);
7022

7123
React.useEffect(() => {
@@ -126,13 +78,9 @@ const Animation = () => {
12678
LinkIcon,
12779
AlignCenterIcon,
12880
BoldIcon,
81+
UserRoundIcon,
12982
BarChart4Icon,
13083
BluetoothIcon,
131-
BriefcaseIcon,
132-
Clock2Icon,
133-
CloudIcon,
134-
UserRoundIcon,
135-
ThumbsUpIcon,
13684
].map((Icon, i) => (
13785
<div
13886
key={i}

‎src/components/marketing/hero/hero.tsx

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React from "react";
2+
import Link from "next/link";
3+
import { ArrowRightIcon, SearchIcon, SparklesIcon } from "lucide-react";
4+
import Balancer from "react-wrap-balancer";
5+
import { badgeVariants } from "@/components/ui/badge";
6+
import { Button } from "@/components/ui/button";
7+
import { cn } from "@/utils/classes";
8+
import { Animation } from "./animation";
9+
10+
export const Hero = ({ className }: { className?: string }) => {
11+
return (
12+
<section className={cn("flex items-start justify-between", className)}>
13+
<div>
14+
<Link
15+
href="https://github.com/mehdibha/rcopy"
16+
target="_blank"
17+
className={cn(
18+
badgeVariants({ variant: "outline", size: "md" }),
19+
"cursor-pointer space-x-2 font-mono delay-75 duration-200 hover:bg-secondary"
20+
)}
21+
>
22+
<SparklesIcon size={18} />
23+
<span>Star us on GitHub</span> <ArrowRightIcon size={15} />
24+
</Link>
25+
<h1 className="mt-4 font-display text-4xl font-bold leading-tight tracking-tight md:text-5xl lg:text-6xl">
26+
<Balancer>Everything you need to build your React app</Balancer>
27+
</h1>
28+
<h2 className="text-md mt-6 text-muted-foreground md:text-lg lg:text-xl">
29+
Copy the code, paste it, customize it, own it. Done.
30+
</h2>
31+
<div className="mt-10 flex flex-col gap-4 sm:flex-row">
32+
<Button size="lg" variant="default">
33+
Explore components
34+
</Button>
35+
<Button size="lg" variant="outline">
36+
<SearchIcon size={20} className="mr-2" />
37+
Quick search
38+
</Button>
39+
</div>
40+
</div>
41+
<div className="hidden px-10 lg:block xl:px-20">
42+
<Animation />
43+
</div>
44+
</section>
45+
);
46+
};

‎src/components/marketing/hero/index.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { Hero } from "./hero";

‎src/lib/pages/pricing/index.tsx

-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
"use client";
2-
31
import React from "react";
42
import { CallToAction } from "./cta";
53
import { FAQ } from "./faq";

‎src/styles/globals.css

+6
Original file line numberDiff line numberDiff line change
@@ -73,4 +73,10 @@
7373
@apply ml-[-50px] mt-[-4px];
7474
content: counter(step);
7575
}
76+
77+
@media (max-width: 640px) {
78+
.container {
79+
@apply px-4;
80+
}
81+
}
7682
}

0 commit comments

Comments
 (0)