Skip to content

Commit

Permalink
gfsd
Browse files Browse the repository at this point in the history
  • Loading branch information
neerajrekwar committed Jul 31, 2024
1 parent c2214bb commit 81308f2
Show file tree
Hide file tree
Showing 5 changed files with 76 additions and 15 deletions.
3 changes: 1 addition & 2 deletions app/components/BackgroundAurra.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -89,8 +89,7 @@ export function AuroraBackgroundDemo() {
}}
className="mx-auto my-2 sm:text-xl"
>
We could be best on the web, We provide reliable, scalable, and
customizable web solutions for your business.
We offer reliable, scalable, and customizable web solutions to optimize your online presence.
</motion.p>

<motion.div className="text-secondaryText gap-2 mt-10 max-w-fit flex justify-center items-center">
Expand Down
26 changes: 13 additions & 13 deletions app/components/VisionSection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -317,10 +317,10 @@ export const VisionSection: React.FC = () => {
Make a Innovative customization
</h3>
</div>
<ul className="flex flex-wrap md:grid md:grid-flow-row-dense md:grid-cols-3 md:grid-rows-3 text-five rounded-lg m-2 h-auto">
<ul className="flex flex-wrap md:grid md:grid-flow-row-dense md:grid-cols-3 md:grid-rows-3 text-five rounded-lg m-2 h-auto text-four">
<motion.li
initial={{}}
className="col-span-2 flex items-center justify-center h-28 md:h-auto w-full md:w-auto p-1 m-2 rounded-2xl bg-gradient-to-t from-gray-900 to-gray-800 h-28 md:h-auto w-full md:w-auto p-1 m-2 rounded-2xl text-[#B9B8D3]"
className="col-span-2 flex items-center justify-center h-28 md:h-auto w-full md:w-auto p-1 m-2 rounded-2xl bg-gradient-to-t from-gray-900 to-gray-800 h-28 md:h-auto w-full md:w-auto p-1 m-2 rounded-2xl "
>
<p className="basis-2/2 md:basis-1/2 md:text-6xl p-2">
online activity on smartphones 3hrs and 50min avg.{" "}
Expand All @@ -343,7 +343,7 @@ export const VisionSection: React.FC = () => {
<path d="M16 9h2" />
</svg>
</motion.li>
<li className="flex flex-row-reverse items-center h-28 md:h-auto w-full md:w-auto p-1 m-2 rounded-2xl rounded-2xl bg-gradient-to-t from-gray-900 to-gray-800 h-28 md:h-auto w-full md:w-auto p-1 m-2 rounded-2xl text-[#B9B8D3]">
<li className="flex flex-row-reverse items-center h-28 md:h-auto w-full md:w-auto p-1 m-2 rounded-2xl rounded-2xl bg-gradient-to-t from-gray-900 to-gray-800 h-28 md:h-auto w-full md:w-auto p-1 m-2 rounded-2xl ">
<p className="basis-2/2 md:basis-1/2 md:text-3xl p-2">
Earthweb reports that 67% of the global
</p>
Expand All @@ -366,7 +366,7 @@ export const VisionSection: React.FC = () => {
</li>
<li
className="flex items-center h-28 md:h-auto w-full md:w-auto p-1 m-2 rounded-2xl rounded-2xl hover:scale-95
bg-gradient-to-t from-gray-900 to-gray-800 h-28 md:h-auto w-full md:w-auto p-1 m-2 rounded-2xl text-[#B9B8D3]"
bg-gradient-to-t from-gray-900 to-gray-800 h-28 md:h-auto w-full md:w-auto p-1 m-2 rounded-2xl "
>
<p className="basis-2/2 md:basis-1/2 md:text-4xl p-2">
{" "}
Expand All @@ -393,7 +393,7 @@ export const VisionSection: React.FC = () => {
<path d="M9 15l0 4" />
</svg>
</li>
<li className="flex col-span-2 flex-row-reverse items-center rounded-2xl hover:scale-95 duration-500 bg-gradient-to-t from-gray-900 to-gray-800 h-28 md:h-auto w-full md:w-auto p-1 m-2 rounded-2xl text-[#B9B8D3]">
<li className="flex col-span-2 flex-row-reverse items-center rounded-2xl hover:scale-95 duration-500 bg-gradient-to-t from-gray-900 to-gray-800 h-28 md:h-auto w-full md:w-auto p-1 m-2 rounded-2xl ">
<p className="basis-2/2 md:basis-1/2 md:text-4xl p-2">
2.16% tablet user in worldwide & digital landscape
changing in web3 after{" "}
Expand All @@ -415,7 +415,7 @@ export const VisionSection: React.FC = () => {
<path d="M11 17a1 1 0 1 0 2 0a1 1 0 0 0 -2 0" />
</svg>
</li>
<li className="flex col-span-2 items-center justify-center h-28 md:h-auto w-full md:w-auto p-1 duration-500 m-2 bg-gradient-to-t from-gray-900 to-gray-800 h-28 md:h-auto w-full md:w-auto p-1 m-2 rounded-2xl text-[#B9B8D3]">
<li className="flex col-span-2 items-center justify-center h-28 md:h-auto w-full md:w-auto p-1 duration-500 m-2 bg-gradient-to-t from-gray-900 to-gray-800 h-28 md:h-auto w-full md:w-auto p-1 m-2 rounded-2xl ">
<p className="basis-2/2 md:basis-1/2 md:text-4xl p-2 ">
mobiles that users in use 37.23%
</p>
Expand All @@ -437,7 +437,7 @@ export const VisionSection: React.FC = () => {
<path d="M12 17v.01" />
</svg>
</li>
<li className="flex flex-row-reverse items-center h-28 md:h-auto w-full md:w-auto p-1 m-2 rounded-2xl rounded-2xl bg-gradient-to-t from-gray-900 to-gray-800 h-28 md:h-auto w-full md:w-auto p-1 m-2 rounded-2xl text-[#B9B8D3]">
<li className="flex flex-row-reverse items-center h-28 md:h-auto w-full md:w-auto p-1 m-2 rounded-2xl rounded-2xl bg-gradient-to-t from-gray-900 to-gray-800 h-28 md:h-auto w-full md:w-auto p-1 m-2 rounded-2xl ">
<p className="basis-2/2 md:basis-1/2 p-1">
Desktops that users in use 60.61%{" "}
</p>
Expand Down Expand Up @@ -498,7 +498,7 @@ export const VisionSection: React.FC = () => {
</div>
</div>
<div className=" flex gap-4 flex-col max-w-5xl m-auto mt-10 mb-20 py-20 justify-center items-center">
<span className="bg-[#e5d3523b] text-[#E5D352] p-1 px-3 rounded-full">
<span className="bg-seven text-four p-1 px-3 rounded-full">
Find error
</span>

Expand All @@ -514,7 +514,7 @@ export const VisionSection: React.FC = () => {
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
className="w-fit h-fit m-4 p-2 bg-[#d8f5fe82] text-[#08B2E3] rounded-full icon icon-tabler icons-tabler-outline icon-tabler-bug"
className="w-fit h-fit m-4 p-2 bg-seven text-four rounded-full icon icon-tabler icons-tabler-outline icon-tabler-bug"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M7 8l-4 4l4 4" />
Expand All @@ -538,7 +538,7 @@ export const VisionSection: React.FC = () => {
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
className="w-fit h-fit m-4 p-2 bg-[#e7e8ef82] text-[#484D6D] rounded-full icon icon-tabler icons-tabler-outline icon-tabler-time-duration-15"
className="w-fit h-fit m-4 p-2 bg-seven text-four rounded-full icon icon-tabler icons-tabler-outline icon-tabler-time-duration-15"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M12 15h2a1 1 0 0 0 1 -1v-1a1 1 0 0 0 -1 -1h-2v-3h3" />
Expand Down Expand Up @@ -572,7 +572,7 @@ export const VisionSection: React.FC = () => {
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
className="w-fit h-fit m-4 p-2 bg-[#EAEBE2] text-[#565857] rounded-full icon icon-tabler icons-tabler-outline icon-tabler-bug"
className="w-fit h-fit m-4 p-2 bg-seven text-four rounded-full icon icon-tabler icons-tabler-outline icon-tabler-bug"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M22 12h-5" />
Expand All @@ -597,7 +597,7 @@ export const VisionSection: React.FC = () => {
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
className="w-fit h-fit m-4 p-2 bg-[#E4F1E982] text-[#57A773] rounded-full icon icon-tabler icons-tabler-outline icon-tabler-bug"
className="w-fit h-fit m-4 p-2 bg-seven text-four rounded-full icon icon-tabler icons-tabler-outline icon-tabler-bug"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M16 21h3c.81 0 1.48 -.67 1.48 -1.48l.02 -.02c0 -.82 -.69 -1.5 -1.5 -1.5h-3v3z" />
Expand Down Expand Up @@ -625,7 +625,7 @@ export const VisionSection: React.FC = () => {
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
className="w-fit h-fit m-4 p-2 bg-[#FBDEDA82] text-[#EE6352] rounded-full icon icon-tabler icons-tabler-outline icon-tabler-bug"
className="w-fit h-fit m-4 p-2 bg-seven text-four rounded-full icon icon-tabler icons-tabler-outline icon-tabler-bug"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M9.884 5.873a3 3 0 0 1 5.116 2.127v1" />
Expand Down
5 changes: 5 additions & 0 deletions app/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import ExpSection from "./components/ExpSection";
import { VisionSection } from "./components/VisionSection";
import Footer from "./components/footer";
import StickyRelativeDemo from "./components/StickyRelativeDemo";
import { AccordionDemo } from "@/components/Accordion";

export const metadata: Metadata = {
title: "nee. - Portfolio Framer Template For Freelancers",
Expand Down Expand Up @@ -34,6 +35,10 @@ export default function Home() {
<section className=" ">
<VisionSection />
</section>
<section className="text-five">

<AccordionDemo />
</section>
</main>
);
}
47 changes: 47 additions & 0 deletions components/Accordion.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";

export function AccordionDemo() {
return (
<>
<div className="">
<div className="max-w-6xl p-2 m-auto">
<div className="text-center text-2xl">FAQ</div>
<Accordion type="single" collapsible className="w-full">
<AccordionItem value="item-1">
<AccordionTrigger>Is it accessible?</AccordionTrigger>
<AccordionContent>
Yes. It adheres to the WAI-ARIA design pattern.
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>Is it styled?</AccordionTrigger>
<AccordionContent>
Yes. It comes with default styles that matches the other
components&apos; aesthetic.
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-3">
<AccordionTrigger>Is it animated?</AccordionTrigger>
<AccordionContent>
Yes. It&apos;s animated by default, but you can disable it if
you prefer.
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-4">
<AccordionTrigger>Is it animated?</AccordionTrigger>
<AccordionContent>
Yes. It&apos;s animated by default, but you can disable it if
you prefer.
</AccordionContent>
</AccordionItem>
</Accordion>
</div>
</div>
</>
);
}
10 changes: 10 additions & 0 deletions tailwind.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -31,11 +31,21 @@ module.exports = {
},

animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
aurora: "aurora 60s linear infinite",
scroll:
"scroll var(--animation-duration, 40s) var(--animation-direction, forwards) linear infinite",
},
keyframes: {
"accordion-down": {
from: { height: "0" },
to: { height: "var(--radix-accordion-content-height)" },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: "0" },
},
scroll: {
to: {
transform: "translate(calc(-50% - 0.5rem))",
Expand Down

0 comments on commit 81308f2

Please sign in to comment.