Skip to content

Commit

Permalink
add section components
Browse files Browse the repository at this point in the history
  • Loading branch information
@chrisstef
chrisstef committed Feb 4, 2024
1 parent 32f51f3 commit e54e2ac
Show file tree
Hide file tree
Showing 35 changed files with 1,871 additions and 307 deletions.
2 changes: 2 additions & 0 deletions app/(marketing)/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import Team from "@/components/Team";
import Pricing from "@/components/Pricing";
import Newsletter from "@/components/Newsletter";
import FAQ from "@/components/FAQ";
import OpenSource from "@/components/OpenSource";
import Footer from "@/components/Footer";
import ScrollToTop from "@/components/ScrollToTop";

Expand All @@ -30,6 +31,7 @@ export default function Home() {
<Pricing />
<Newsletter />
<FAQ />
<OpenSource />
<Footer />
<ScrollToTop />
</>
Expand Down
188 changes: 120 additions & 68 deletions app/globals.css
View file
Original file line number Diff line number Diff line change
@@ -1,76 +1,128 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
:root {
--background: 0 0% 100%;
--foreground: 0 0% 3.9%;
html {
scroll-behavior: smooth !important;
}
}

--card: 0 0% 100%;
--card-foreground: 0 0% 3.9%;

--popover: 0 0% 100%;
--popover-foreground: 0 0% 3.9%;

--primary: 0 0% 9%;
--primary-foreground: 0 0% 98%;

--secondary: 0 0% 96.1%;
--secondary-foreground: 0 0% 9%;

--muted: 0 0% 96.1%;
--muted-foreground: 0 0% 45.1%;

--accent: 0 0% 96.1%;
--accent-foreground: 0 0% 9%;

--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
/* *=========== Orange theme =========== */
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 240 10% 3.9%;
--primary: 20.5 100% 62%;
--primary-foreground: 355.7 100% 97.3%;
--secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
--accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--ring: 20.5 100% 62%;
--radius: 0.5rem;
}

--border: 0 0% 89.8%;
--input: 0 0% 89.8%;
--ring: 0 0% 3.9%;

--radius: 0.5rem;
}

.dark {
--background: 0 0% 3.9%;
--foreground: 0 0% 98%;

--card: 0 0% 3.9%;
--card-foreground: 0 0% 98%;

--popover: 0 0% 3.9%;
--popover-foreground: 0 0% 98%;

--primary: 0 0% 98%;
--primary-foreground: 0 0% 9%;

--secondary: 0 0% 14.9%;
--secondary-foreground: 0 0% 98%;

--muted: 0 0% 14.9%;
--muted-foreground: 0 0% 63.9%;

--accent: 0 0% 14.9%;
--accent-foreground: 0 0% 98%;

--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;

--border: 0 0% 14.9%;
--input: 0 0% 14.9%;
--ring: 0 0% 83.1%;
}
.dark {
--background: 20 14.3% 4.1%;
--foreground: 0 0% 95%;
--card: 24 9.8% 10%;
--card-foreground: 0 0% 95%;
--popover: 0 0% 9%;
--popover-foreground: 0 0% 95%;
--primary: 20.5 96.9% 57.5%;
--primary-foreground: 144.9 80.4% 10%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
--muted: 0 0% 15%;
--muted-foreground: 240 5% 64.9%;
--accent: 12 6.5% 15.1%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 85.7% 97.3%;
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--ring: 20.5 96.9% 57.5%;
}
}

@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}

/* HeroCards background shadow */
.shadow {
position: absolute;
background: hsl(var(--primary) / 0%);
border-radius: 24px;
rotate: 35deg;

width: 260px;
top: 200px;
height: 400px;
filter: blur(150px);
animation: shadow-slide infinite 4s linear alternate;
}

@keyframes shadow-slide {
from {
background: hsl(var(--primary) / 20%);
right: 460px;
}
to {
background: hsl(var(--primary) / 80%);
right: 160px;
}
}

@media (max-width: 1024px) {
.shadow {
top: 70px;
}

@keyframes shadow-slide {
from {
background: hsl(var(--primary) / 20%);
right: 460px;
}
to {
background: hsl(var(--primary) / 50%);
right: 160px;
}
}
}

@media (max-width: 768px) {
.shadow {
top: 70px;
width: 100px;
height: 350px;
filter: blur(60px);
}

@keyframes shadow-slide {
from {
background: hsl(var(--primary) / 20%);
right: 280px;
}
to {
background: hsl(var(--primary) / 30%);
right: 100px;
}
}
}
17 changes: 13 additions & 4 deletions app/layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import type { Metadata } from "next";
import { DM_Sans } from "next/font/google";
import "./globals.css";
import { ThemeProvider } from "@/components/theme-provider";

const dmsans = DM_Sans({ subsets: ["latin"] });

Expand All @@ -11,12 +12,20 @@ export const metadata: Metadata = {

export default function RootLayout({
children,
}: Readonly<{
}: {
children: React.ReactNode;
}>) {
}) {
return (
<html lang="en">
<body className={dmsans.className}>{children}</body>
<html lang="en" suppressHydrationWarning>
<body className={dmsans.className}>
<ThemeProvider
attribute="class"
defaultTheme="light"
enableSystem
>
{children}
</ThemeProvider>
</body>
</html>
);
}
37 changes: 35 additions & 2 deletions components/About.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,40 @@
import React from "react";
import Statistics from "./Statistics";

const About = () => {
return <div>About</div>;
return (
<section id="about" className="container py-24 sm:py-32">
<div className="bg-muted/50 border rounded-lg py-12">
<div className="px-6 flex flex-col-reverse md:flex-row gap-8 md:gap-12">
<img
src="./pilot.png"
alt=""
className="w-[300px] object-contain rounded-lg"
/>
<div className="flex flex-col justify-between">
<div className="pb-6">
<h2 className="text-3xl md:text-4xl font-bold">
<span className="bg-gradient-to-b from-primary/60 to-primary text-transparent bg-clip-text">
About{" "}
</span>
Company
</h2>
<p className="text-xl text-muted-foreground mt-4">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo
consequat. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
</p>
</div>

<Statistics />
</div>
</div>
</div>
</section>
);
};

export default About;
33 changes: 31 additions & 2 deletions components/CTA.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,36 @@
import React from "react";
import { Button } from "./ui/button";

const CTA = () => {
return <div>CTA</div>;
return (
<section id="cta" className="bg-muted/50 py-16 my-24 sm:my-32">
<div className="container lg:grid lg:grid-cols-2 place-items-center">
<div className="lg:col-start-1">
<h2 className="text-3xl md:text-4xl font-bold ">
All Your
<span className="bg-gradient-to-b from-primary/60 to-primary text-transparent bg-clip-text">
{" "}
Ideas & Concepts{" "}
</span>
In One Interface
</h2>
<p className="text-muted-foreground text-xl mt-4 mb-8 lg:mb-0">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Eaque, beatae. Ipsa tempore ipsum iste quibusdam illum
ducimus eos. Quasi, sed!
</p>
</div>

<div className="space-y-4 lg:col-start-2">
<Button className="w-full md:mr-4 md:w-auto">
Request a Demo
</Button>
<Button variant="outline" className="w-full md:w-auto">
View all features
</Button>
</div>
</div>
</section>
);
};

export default CTA;
Loading

0 comments on commit e54e2ac

Please sign in to comment.