Skip to content

Commit

Permalink
fdsa
Browse files Browse the repository at this point in the history
  • Loading branch information
@neerajrekwar
neerajrekwar committed Jul 7, 2024
1 parent 2249b8b commit 1b97b26
Show file tree
Hide file tree
Showing 18 changed files with 261 additions and 153 deletions.
18 changes: 18 additions & 0 deletions app/add.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,25 @@
@tailwind components;
@tailwind utilities;

:root {
--color-primary: #ffffff;
--color-secondary: #416165;
--color-third: #B3FFB3;
--color-gray-light: #D1FFD7;
--color-dark: #FFC800;
--color-dark-light: #101010;
}

/* Dark mode variables */
@media (prefers-color-scheme: dark) {
:root {
--color-primary: #0a0a0a;
--color-secondary: #3C6E71;
--color-white: #ffffff;
--color-gray-light: #D9D9D9;
--color-dark: #284B63;
}
}

.workSecion{
background-image: url(../public/workSection.svg);
Expand Down
11 changes: 11 additions & 0 deletions app/blog/layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
export default function DashboardLayout({
children, // will be a page or nested layout
}: {
children: React.ReactNode
}) {
return (
<section className="bg-white">
{children}
</section>
)
}
10 changes: 8 additions & 2 deletions app/blog/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,10 @@
import Demo from "../components/demo";
// `app/page.tsx` is the UI for the `/` URL
export default function Page() {
return <h1>Hello, blog page!</h1>;

export default function blog() {
return(
<section className="m-auto max-w-fit bg-eight flex flex-col justify-center items-center">
<Demo/>
</section>
) ;
}
117 changes: 53 additions & 64 deletions app/components/StickyRelativeDemo.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,61 +1,64 @@
"use client";
import { NextPage } from "next";
import Image from "next/image";
import DotCircle from "./acceries/DotCircle";
import Link from "next/link";
import { Source_Code_Pro } from "next/font/google";


const source_Code_Pro = Source_Code_Pro({
weight: '400',
subsets: ['latin'],
});

const StickyRelativeDemo: NextPage = () => {
return (
<div className="m-auto justify-between p-2 max-h-fit max-w-6xl border-green-500">
<div className="jutify-start flex items-center border-rose-500 py-4 font-semibold text-[#242424] sm:text-4xl">
<DotCircle />
<div className="m-auto justify-between p-2 max-h-fit max-w-6xl ">
<div className="justify-start flex items-center py-4 text-2xl text-primaryText visible sm:text-4xl">
<div className="text-four text-4xl sm:text-6xl sm:mx-2">&#8226;</div>
Recent projects
</div>
<div className="relative m-auto min-h-full max-w-7xl flex-col justify-evenly border-blue-400 sm:flex sm:flex-row">

<div className="relative m-auto min-h-screen max-w-7xl flex-col justify-evenly border-blue-400 sm:flex sm:flex-row">
<div className="relative visible top-0 flex min-h-full basis-1/2 flex-col justify-between border-rose-500 sm:gap-10">
<div className="sticky top-0 will-change-transform overflow-hidden z-10 pt-10 items-center justify-center border-green-500">
<div className="flex flex-wrap border-yellow-400">
<div className=" mb-4 max-w-fit rounded-full border-blue-500 bg-blue-200 px-3 py-1 text-sm">
2021
<div className=" mb-4 max-w-fit rounded-full border-1 bg-primary border-secondaryText text px-3 py-1 text-sm">
2024
</div>
</div>
<div className="border-yellow-400 sm:pr-10">
<div className="max-w-2xl border-green-600">
<h2 className="text-2xl font-semibold text-gray-light">
<div className="max-w-2xl">
<h2 className="text-2xl py-2 pb-3 font-semibold text-primaryText">
Craft &amp; Code: Building the Future, One Line at a Time
</h2>
<p>
<div >
<p className="text-secondaryText">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Repudiandae quo natus accusantium eius molestiae expedita
possimus accusamus, aspernatur, quia quae asperiores
inventore. Quod, officia vel aliquam exercitationem est
inventore porro?
</p>
</div>
<div className="text-xs">
<ul className="font-semibold flex justify-between text-gray-light py-6 border-b-2 border-dark">
<li>Role</li>
</div>
<div className="text-xs pt-12">
<ul className=" flex justify-between text-gray-light py-6 border-b-1 border-primary">
<li className="text-secondaryText">Role</li>
<li>Digital Marketing</li>
</ul>
<ul className="font-semibold flex justify-between text-gray-light py-6 border-b-2 border-dark">
<li>Deliverables</li>
<ul className="flex justify-between text-gray-light py-6 border-b-1 border-primary">
<li className="text-secondaryText">Deliverables</li>
<li>Survey checks</li>
</ul>
<ul className="font-semibold flex justify-between text-gray-light py-6 border-b-2 border-dark">
<li>Company</li>
<ul className="flex justify-between text-gray-light py-6 border-b-1 border-primary">
<li className="text-secondaryText">Company</li>
<li>Veecrew Market Research pvt. ltd.</li>
</ul>
<ul className="font-semibold flex justify-between text-gray-light py-6 border-b-2 border-dark">
<li>Visit Site</li>
<ul className="flex justify-between text-gray-light py-6 border-b-1 border-primary">
<li className="text-secondaryText">Visit Site</li>
<li>
<Link href="https://veecrew.com">
<Image
src="/arr.svg"
alt="Veecrew"
width={20}
height={20}
className=""
/>
<Link href="https://veecrew.com" className="">
<svg xmlns="http://www.w3.org/2000/svg" className="fill-secondaryText hover:fill-third" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M440-280H280q-83 0-141.5-58.5T80-480q0-83 58.5-141.5T280-680h160v80H280q-50 0-85 35t-35 85q0 50 35 85t85 35h160v80ZM320-440v-80h320v80H320Zm200 160v-80h160q50 0 85-35t35-85q0-50-35-85t-85-35H520v-80h160q83 0 141.5 58.5T880-480q0 83-58.5 141.5T680-280H520Z"/></svg>
</Link>
</li>
</ul>
Expand All @@ -64,8 +67,8 @@ const StickyRelativeDemo: NextPage = () => {
</div>
</div>
<div className="relative basis-1/2 pt-10 overflow-hidden border-rose-500">
<div className=" mb-4 max-w-fit rounded-full border-blue-500 bg-blue-200 px-3 py-1 text-sm">
showcase
<div className=" mb-4 max-w-fit rounded-full border-1 bg-primary border-secondaryText text px-3 py-1 text-sm">
Showcase
</div>
<div className="grid gap-4 p-2 pt-4 sm:gap-10">
<Image
Expand All @@ -92,61 +95,47 @@ const StickyRelativeDemo: NextPage = () => {
</div>
</div>
</div>
<div className="relative m-auto min-h-full max-w-7xl flex-col justify-evenly border-blue-400 sm:flex sm:flex-row">
<div className="relative m-auto min-h-screen max-w-7xl flex-col justify-evenly border-blue-400 sm:flex sm:flex-row">
<div className="relative visible top-0 flex min-h-full basis-1/2 flex-col justify-between border-rose-500 sm:gap-10">
<div className="sticky top-0 will-change-transform overflow-hidden z-10 pt-10 items-center justify-center border-green-500">
<div className="flex flex-wrap border-yellow-400">
<div className=" mb-4 max-w-fit rounded-full grid justify-center px-3 py-1 text-sm">
2021
<div className=" mb-4 max-w-fit rounded-full border-1 bg-primary border-secondaryText text px-3 py-1 text-sm">
2024
</div>
</div>
<div className="border-yellow-400 sm:pr-10">
<div className="max-w-2xl border-green-600">
<h2 className="text-2xl font-semibold text-gray-light">
<div className="max-w-2xl ">
<h2 className="text-2xl py-2 pb-3 font-semibold text-primaryText">
Craft &amp; Code: Building the Future, One Line at a Time
</h2>
<p>
<div >
<p className="text-secondaryText">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Repudiandae quo natus accusantium eius molestiae expedita
possimus accusamus, aspernatur, quia quae asperiores
inventore. Quod, officia vel aliquam exercitationem est
inventore porro?
</p>
</div>
<div className="text-xs">
<ul className="font-semibold flex justify-between text-gray-light py-6 border-b-2 border-dark">
<li>Role</li>
</div>
<div className="text-xs pt-12">
<ul className=" flex justify-between text-gray-light py-6 border-b-1 border-primary">
<li className="text-secondaryText">Role</li>
<li>Digital Marketing</li>
</ul>
<ul className="font-semibold flex justify-between text-gray-light py-6 border-b-2 border-dark">
<li>Deliverables</li>
<ul className="flex justify-between text-gray-light py-6 border-b-1 border-primary">
<li className="text-secondaryText">Deliverables</li>
<li>Survey checks</li>
</ul>
<ul className="font-semibold flex justify-between text-gray-light py-6 border-b-2 border-dark">
<li>Company</li>
<ul className="flex justify-between text-gray-light py-6 border-b-1 border-primary">
<li className="text-secondaryText">Company</li>
<li>Veecrew Market Research pvt. ltd.</li>
</ul>
<ul className="font-semibold flex justify-between text-gray-light py-6 border-b-2 border-dark">
<li>Visit Site</li>
<ul className="flex justify-between text-gray-light py-6 border-b-1 border-primary">
<li className="text-secondaryText">Visit Site</li>
<li>
<Link href="https://veecrew.com">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
className="icon icon-tabler icons-tabler-outline icon-tabler-arrow-right"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M5 12l14 0" />
<path d="M13 18l6 -6" />
<path d="M13 6l6 6" />
</svg>
<Link href="https://veecrew.com" className="">
<svg xmlns="http://www.w3.org/2000/svg" className="fill-secondaryText hover:fill-third" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M440-280H280q-83 0-141.5-58.5T80-480q0-83 58.5-141.5T280-680h160v80H280q-50 0-85 35t-35 85q0 50 35 85t85 35h160v80ZM320-440v-80h320v80H320Zm200 160v-80h160q50 0 85-35t35-85q0-50-35-85t-85-35H520v-80h160q83 0 141.5 58.5T880-480q0 83-58.5 141.5T680-280H520Z"/></svg>
</Link>
</li>
</ul>
Expand All @@ -155,8 +144,8 @@ const StickyRelativeDemo: NextPage = () => {
</div>
</div>
<div className="relative basis-1/2 pt-10 overflow-hidden border-rose-500">
<div className=" mb-4 max-w-fit rounded-full border-blue-500 bg-blue-200 px-3 py-1 text-sm">
showcase
<div className=" mb-4 max-w-fit rounded-full border-1 bg-primary border-secondaryText text px-3 py-1 text-sm">
Showcase
</div>
<div className="grid gap-4 p-2 pt-4 sm:gap-10">
<Image
Expand Down
2 changes: 1 addition & 1 deletion app/components/acceries/DotCircle.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const DotCircle: React.FC = () => {
cx="50"
cy="50"
r="10"
fill="#3C6E71"
fill="#679436"
animate={{ opacity: [1, 0, 1] }}
transition={{ duration: 2, loop: Infinity, ease: "easeInOut" }}
/>
Expand Down
84 changes: 45 additions & 39 deletions app/components/backgroundBeams.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,22 +21,25 @@ export function BackgroundBeamsDemo() {
className="relative z-10 md:pb-4 text-2xl sm:text-lg md:text-7xl bg-clip-text text-transparent bg-gradient-to-b from-neutral-200 to-neutral-600 text-left font-sans font-bold"
>

Build the right to way <br /><div>
with <pre className="font-bold z-999 inline-flex "><TextFlipper /></pre>
Build the right to way <br />
<div>
with <pre className="font-bold z-999 inline-flex ">
<TextFlipper />
</pre>
</div>
</motion.h1>
<motion.div
initial={{ opacity: 0, y: 100 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{
delay: 0.3,
duration: 0.8,
ease: "easeInOut",
}}
className="flex w-full flex-col items-center justify-center"
>
<AdminWeather/>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 100 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{
delay: 0.3,
duration: 0.8,
ease: "easeInOut",
}}
className="flex w-full flex-col items-center justify-center"
>
<AdminWeather />
</motion.div>
<p></p>
<motion.p
initial={{ opacity: 0, y: 100 }}
Expand All @@ -52,37 +55,40 @@ export function BackgroundBeamsDemo() {
your business. Whether you&apos;re sending order confirmations,
password reset emails, or promotional campaigns, MailJet has got you
covered.
</motion.p>
</motion.p>
<motion.div>
<motion.button
initial={{ opacity: 0, y: 100 }}
whileInView={{ opacity: 1, y: 0 }}
<Link href={'blog'}>
<motion.button
initial={{ opacity: 0, y: 100 }}
whileInView={{ opacity: 1, y: 0 }}

transition={{
transition={{

delay: 0.3,
duration: 0.8,
ease: "easeInOut",
}}
className="rounded-full border border-neutral-800 focus:ring-2 focus:ring-teal-500 text-white px-3 py-2 text-sm relative z-10 mt-4 bg-neutral-950 placeholder:text-neutral-700"
delay: 0.3,
duration: 0.8,
ease: "easeInOut",
}}
className="rounded-full border border-neutral-800 focus:ring-2 focus:ring-teal-500 text-white px-3 py-2 text-sm relative z-10 mt-4 bg-neutral-950 placeholder:text-neutral-700"
>
Get started
</motion.button>
Get started
</motion.button>
</Link>
<Link href={"https://e3d840fc-de16-4c0f-a2af-4bb02b48d797-00-1iz57nutmrl9d.sisko.replit.dev/"} className="relative z-10 md:pb-4 text-2xl sm:text-lg md:text-7xl bg-clip-text text-transparent bg-gradient-to-b from-neutral-200 to-neutral-600 text-left font-sans font-bold">
<motion.button
initial={{ opacity: 0, y: 100 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{
delay: 0.3,
duration: 0.8,
ease: "easeInOut",
}}
className="rounded-full ml-2 text-secondary border border-neutral-800 focus:ring-2 font-medium focus:ring-teal-500 bg-white px-3 py-2 text-sm relative z-10 mt-4 "
<motion.button
initial={{ opacity: 0, y: 100 }}
whileInView={{ opacity: 1, y: 0 }}

transition={{

delay: 0.3,
duration: 0.8,
ease: "easeInOut",
}}
className="rounded-full ml-2 text-secondary border border-neutral-800 focus:ring-2 font-medium focus:ring-teal-500 bg-white px-3 py-2 text-sm relative z-10 mt-4 "
>
Learn more
</motion.button></Link>
Learn more
</motion.button>
</Link>
</motion.div>
</div>
<BackgroundBeams />
Expand Down
12 changes: 12 additions & 0 deletions app/components/demo.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
export default function Demo() {
return (
<div className="border-four bg-primary m-4 max-w-5xl flex justify-center items-center p-4 rounded-lg">
<div>
<h1 className="text-2xl text-primaryText">Lorem ipsum dolor.</h1>
<p className="py-2 text-secondaryText">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo doloremque quasi minima quod perspiciatis facilis recusandae, vel quae ipsam dolores ullam voluptates quam quas eum tenetur odio explicabo enim assumenda.</p>
</div>

</div>
);

}
2 changes: 1 addition & 1 deletion app/components/infiniteCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { InfiniteMovingCards } from "./ui/infinite-moving-cards";

export function InfiniteMovingCardsDemo() {
return (
<div className="h-[40rem] rounded-md flex flex-col antialiased bg-secondary dark:bg-primary dark:bg-grid-white/[0.05] items-center justify-center relative overflow-hidden">
<div className="h-[40rem] flex flex-col antialiased bg-white dark:bg-black dark:bg-grid-white/[0.05] items-center justify-center relative overflow-hidden">
<InfiniteMovingCards
items={testimonials}
direction="right"
Expand Down

0 comments on commit 1b97b26

Please sign in to comment.